@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@200;300;400;500;600;700&display=swap');


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ---- Metallic gold ramp (highlight → deep) ---- */
  --gold-100: #f9efd6;
  --gold-200: #efdcb2;
  --gold-300: #dcc188;
  --gold-400: #c9a961;
  --gold-500: #b08d4a;
  --gold-600: #8c6b33;
  --gold-700: #6b5024;

  /* True foil gradients — highlights travel across the surface */
  --gold-foil: linear-gradient(135deg,
      #8c6b33 0%, #c9a961 16%, #f9efd6 34%,
      #dcc188 50%, #b08d4a 66%, #efdcb2 84%, #8c6b33 100%);
  --gold-foil-soft: linear-gradient(135deg,
      #b08d4a 0%, #dcc188 30%, #f9efd6 50%, #dcc188 70%, #b08d4a 100%);
  /* For foil-clipped text on ivory: the highlight never reaches near-white,
     or the glyphs dissolve into the background */
  --gold-foil-ink: linear-gradient(135deg,
      #6b5024 0%, #a5813f 26%, #cbaa66 50%, #8c6b33 76%, #6b5024 100%);
  --gold-hairline: linear-gradient(90deg,
      transparent 0%, rgba(201, 169, 97, 0.55) 22%,
      rgba(249, 239, 214, 0.9) 50%,
      rgba(201, 169, 97, 0.55) 78%, transparent 100%);

  /* ---- Diamond / platinum accents ---- */
  --diamond-100: #f4f9fc;
  --diamond-200: #e2eef5;
  --diamond-300: #c3dae7;
  --diamond-glow: rgba(196, 222, 238, 0.55);

  /* ---- Canvas: warm ivory ---- */
  --color-bg: #fbf8f3;
  --color-bg-pure: #ffffff;
  --color-bg-soft: #f6f1e8;
  --color-bg-muted: #ede5d7;

  /* ---- Onyx: feature bands ---- */
  --color-dark: #0b0a09;
  --color-onyx-soft: #141210;
  --color-charcoal: #1f1b17;

  /* ---- Legacy gold aliases (mapped onto the ramp) ---- */
  --color-gold: var(--gold-400);
  --color-gold-light: var(--gold-200);
  --color-gold-dark: var(--gold-600);

  /* ---- Ink ---- */
  --color-text: #23201c;
  --color-text-muted: #6e675c;
  --color-text-light: #9c9285;
  --color-border: #e4dccf;
  --color-border-gold: rgba(201, 169, 97, 0.3);

  /* ---- Type ---- */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Elevation: warm, layered, never grey ---- */
  --shadow-xs: 0 1px 2px rgba(35, 30, 24, 0.05);
  --shadow-sm: 0 2px 10px rgba(35, 30, 24, 0.07);
  --shadow-md: 0 10px 32px rgba(35, 30, 24, 0.1);
  --shadow-lg: 0 24px 68px rgba(35, 30, 24, 0.15);
  --shadow-gold: 0 12px 44px rgba(176, 141, 74, 0.24);
  --shadow-onyx: 0 24px 70px rgba(0, 0, 0, 0.55);

  --nav-height: 120px;
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Barely-there warm grain so large ivory fields read as paper, not screen */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle at 20% 12%, rgba(201, 169, 97, 0.05) 0%, transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(196, 222, 238, 0.05) 0%, transparent 45%);
}

body>* {
  position: relative;
  z-index: 1;
}

::selection {
  background: rgba(201, 169, 97, 0.28);
  color: var(--color-text);
}

/* Gold focus ring — visible on ivory and onyx alike */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 2px;
}

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

ul {
  list-style: none;
}

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

/* ---- Utility ---- */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Gold foil text — clipped gradient, for numerals and display accents */
.text-gold-foil {
  background: var(--gold-foil-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-600);
}

/* Same utility, retuned for onyx grounds where the bright foil belongs */
.on-onyx .text-gold-foil,
footer .text-gold-foil {
  background: var(--gold-foil-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-300);
}

.btn-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--color-dark);
  padding-bottom: 5px;
  position: relative;
  background: none;
  border: none;
  transition: color var(--transition);
}

/* Rule sits under the label and re-draws from the left on hover */
.btn-link::before,
.btn-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  transition: width var(--transition);
}

.btn-link::before {
  width: 100%;
  background: currentColor;
  opacity: 0.35;
}

.btn-link::after {
  width: 0;
  background: var(--gold-foil-soft);
}

.btn-link:hover {
  color: var(--gold-600);
}

.btn-link:hover::after {
  width: 100%;
}

/* Shared shimmer: a slow specular sweep across metal surfaces */
.btn-solid,
.btn-outline,
.btn-gold {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn-solid::after,
.btn-outline::after,
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 252, 240, 0.55) 50%, transparent 100%);
  transition: left 0.85s var(--ease-luxe);
}

.btn-solid:hover::after,
.btn-outline:hover::after,
.btn-gold:hover::after {
  left: 160%;
}

.btn-solid {
  color: var(--gold-100);
  background: var(--color-dark);
  padding: 15px 34px;
  border: 1px solid var(--color-dark);
  box-shadow: var(--shadow-sm);
}

.btn-solid:hover {
  background: var(--color-charcoal);
  border-color: var(--gold-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline {
  color: var(--color-dark);
  background: transparent;
  padding: 14px 34px;
  border: 1px solid rgba(35, 32, 28, 0.35);
}

.btn-outline:hover {
  background: var(--color-dark);
  color: var(--gold-100);
  border-color: var(--color-dark);
  transform: translateY(-1px);
}

/* Diamond ornament divider — hairline that fades out from a centre facet */
.gold-accent {
  display: block;
  position: relative;
  width: 132px;
  height: 9px;
  margin: 0 auto 20px;
  background: var(--gold-hairline);
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
}

.gold-accent::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--gold-foil-soft);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(201, 169, 97, 0.6);
}

/* ======================================
   TOP UTILITY HEADER
====================================== */
.header-utility {
  background: var(--color-dark);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
  padding: 9px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(249, 239, 214, 0.62);
  position: sticky;
  top: 0;
  z-index: 150;
}

/* Gold hairline riding the bottom edge of the utility bar */
.header-utility::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold-hairline);
}

.header-utility-left {
  display: flex;
  gap: 24px;
}

.header-utility-left a:hover,
.header-utility-right a:hover {
  color: var(--gold-200);
}

.header-utility-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-utility-right a {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--transition);
}

.header-utility-right svg {
  width: 16px;
  height: 16px;
}

/* ======================================
   MAIN NAVIGATION
====================================== */
nav.main-nav {
  background: rgba(251, 248, 243, 0.88);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  position: sticky;
  top: 38px;
  z-index: 140;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition), background var(--transition);
}

nav.main-nav.scrolled {
  background: rgba(251, 248, 243, 0.96);
  box-shadow: 0 6px 34px rgba(35, 30, 24, 0.1);
}

/* Three zones that never touch: wordmark | links | icons */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 0 40px;
  height: 84px;
}

.nav-logo,
.nav-icons {
  flex: 0 0 auto;
}

/* No min-width:0 here — the labels are nowrap, so letting this shrink below
   its content makes the row spill over the icons instead of reflowing */
.nav-links {
  flex: 0 0 auto;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-dark);
  transition: all var(--transition);
}

/* Logo */
/* Wordmark holds one line — a broken lockup reads as a layout fault */
.nav-logo a {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-dark);
  line-height: 1;
  transition: opacity var(--transition);
}

.nav-logo a:hover {
  opacity: 0.72;
}

.nav-logo span {
  background: var(--gold-foil-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-600);
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Eight items, so the labels can be read rather than merely fitted */
.nav-links a {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}

/* Caret marks the branches, so the row reads as structure not a flat list */
.nav-links .has-dropdown>a::before {
  content: '';
  position: absolute;
  right: -11px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-links .has-dropdown {
  margin-right: 11px;
}

.nav-links .has-dropdown:hover>a::before {
  opacity: 1;
  transform: rotate(225deg);
  margin-top: -1px;
}

/* Signature service earns the gold; it is the one commercial accent up here */
.nav-item-accent>a {
  color: var(--gold-600);
  font-weight: 700;
}

/* Hairline separates the shop from the house. Keyed off the accent item
   because :first-of-type matches by element type, never by class. */
.nav-item-accent+.nav-item-secondary {
  padding-left: 22px;
  border-left: 1px solid var(--color-border);
}

.nav-item-secondary>a {
  color: var(--color-text-muted);
}

/* Current section stays lit */
.nav-links a.active {
  color: var(--gold-600);
  font-weight: 600;
}

.nav-links a.active::after {
  width: 100%;
}

/* The comfortable row needs ~1390px. Below that the type steps down one notch
   rather than colliding, so 1366px laptops stay on a single clean line. */
@media (max-width: 1460px) {
  .nav-inner {
    gap: 20px;
    padding: 0 28px;
  }

  .nav-links {
    gap: 16px;
  }

  .nav-links a {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .nav-links .has-dropdown {
    margin-right: 10px;
  }

  .nav-item-accent+.nav-item-secondary {
    padding-left: 16px;
  }

  .nav-logo a {
    font-size: 17px;
    letter-spacing: 2px;
  }

  .nav-icons {
    gap: 14px;
  }
}

/* Tight settings bottom out around 1180px — below that, hand over to the drawer */
@media (max-width: 1200px) {
  .nav-links {
    display: none !important;
  }

  .nav-hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
  }

  .nav-logo a {
    font-size: 20px;
    letter-spacing: 3px;
  }
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-foil-soft);
  transition: width var(--transition);
}

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

.nav-links a:hover::after {
  width: 100%;
}

/* Nav icons */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: color var(--transition);
  position: relative;
}

.nav-icons a:hover {
  color: var(--gold-600);
  transform: translateY(-1px);
}

.nav-icons svg {
  width: 20px;
  height: 20px;
}

.icon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-gold-dark);
  color: white;
  font-size: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Dropdown */
.nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-dark);
  border: 1px solid rgba(201, 169, 97, 0.28);
  min-width: 226px;
  padding: 14px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), top var(--transition);
  box-shadow: var(--shadow-onyx);
}

/* Gold cap seals the top of the panel */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-foil);
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

.nav-dropdown a {
  display: block;
  padding: 11px 26px;
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(249, 239, 214, 0.6);
  transition: color var(--transition), background var(--transition), padding-left var(--transition);
}

.nav-dropdown a:hover {
  color: var(--gold-200);
  background: rgba(201, 169, 97, 0.09);
  padding-left: 32px;
}

.nav-dropdown a::after {
  display: none;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 500;
  flex-direction: column;
  padding: 40px 32px;
  overflow-y: auto;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.mobile-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 28px;
  color: var(--color-dark);
}

.mobile-menu-links a {
  display: block;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--color-dark);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}

.mobile-menu-links a:hover {
  color: var(--color-gold-dark);
}

/* ======================================
   HERO SECTION
====================================== */
.hero {
  position: relative;
  height: calc(100vh - 117px);
  min-height: 600px;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Two-layer grade: a warm vignette over a bottom-weighted onyx ramp */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 32%, transparent 0%, rgba(11, 10, 9, 0.35) 78%),
    linear-gradient(to bottom,
      rgba(11, 10, 9, 0.34) 0%,
      rgba(11, 10, 9, 0.5) 46%,
      rgba(11, 10, 9, 0.9) 100%);
  z-index: 2;
}

.hero-content {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  z-index: 10;
  padding: 44px 48px 40px;
  max-width: 800px;
  width: calc(100% - 64px);
  background: rgba(11, 10, 9, 0.5);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 2px;
  box-shadow: var(--shadow-onyx), inset 0 1px 0 rgba(249, 239, 214, 0.12);
  animation: heroFadeUp 1.3s var(--ease-luxe) forwards;
}

/* Foil band across the top edge of the card */
.hero-content::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--gold-hairline);
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, 30px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Eyebrow flanked by hairlines */
.hero-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: var(--gold-200);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.hero-label::before,
.hero-label::after {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}

.hero-label::after {
  background: linear-gradient(90deg, var(--gold-400), transparent);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 300;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 18px;
  letter-spacing: 2.5px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.85);
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 32px;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* Solid foil CTA — reads as a struck gold plate */
.hero-cta {
  color: #14110c;
  border: none;
  background: var(--gold-foil-soft);
  padding: 14px 34px;
  border-radius: 1px;
  font-weight: 700;
  letter-spacing: 2.8px;
  text-shadow: none;
  box-shadow: var(--shadow-gold);
  transition: box-shadow var(--transition), transform var(--transition), filter var(--transition);
}

.hero-cta::before,
.hero-cta::after {
  display: none;
}

.hero-cta:hover {
  color: #14110c;
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 16px 52px rgba(201, 169, 97, 0.42);
}

/* Hero navigation dots */
.hero-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
}

/* Faceted diamond dots rather than circles */
.hero-dot {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(45deg);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.hero-dot.active {
  background: var(--gold-foil-soft);
  transform: rotate(45deg) scale(1.45);
  box-shadow: 0 0 14px rgba(201, 169, 97, 0.75);
}

/* Hero arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(11, 10, 9, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 97, 0.42);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gold-200);
  transition: background var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}

.hero-arrow:hover {
  background: var(--gold-foil-soft);
  border-color: transparent;
  color: #14110c;
  box-shadow: var(--shadow-gold);
}

.hero-arrow.prev {
  left: 40px;
}

.hero-arrow.next {
  right: 40px;
}

/* ======================================
   SECTION COMMONS
====================================== */
section {
  padding: 104px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 16px;
}

/* Centred eyebrows earn a facet mark above them */
.section-header .section-eyebrow::before {
  content: '✦';
  display: block;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--gold-400);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 300;
  letter-spacing: 1.4px;
  color: var(--color-dark);
  line-height: 1.16;
  margin-bottom: 18px;
}

.section-subtitle {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Onyx bands invert the header palette automatically */
.brand-story .section-eyebrow,
.gems-section .section-eyebrow,
.diamonds-section .section-eyebrow {
  color: var(--gold-300);
}

.gems-section .section-title,
.diamonds-section .section-title {
  color: #ffffff;
}

.gems-section .section-subtitle,
.diamonds-section .section-subtitle {
  color: rgba(255, 255, 255, 0.62);
}

/* ======================================
   MARQUEE TICKER
====================================== */
.marquee-wrap {
  background: var(--color-dark);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(201, 169, 97, 0.2);
  border-bottom: 1px solid rgba(201, 169, 97, 0.2);
}

/* Fade the ticker into the band edges instead of clipping it hard */
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-dark), transparent);
}

.marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-dark), transparent);
}

.marquee-track {
  display: flex;
  gap: 60px;
  animation: marqueeScroll 35s linear infinite;
  white-space: nowrap;
}

.marquee-track span {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: rgba(239, 220, 178, 0.82);
  flex-shrink: 0;
}

.marquee-track span.dot {
  color: var(--gold-400);
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(201, 169, 97, 0.7);
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ======================================
   FEATURED STORY (Full-width editorial)
====================================== */
/* Full-bleed row: the panels supply their own breathing room, so the
   section's vertical padding would only strand ivory above and below */
.editorial-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  padding: 0;
}

.editorial-story.reverse {
  direction: rtl;
}

.editorial-story.reverse>* {
  direction: ltr;
}

.editorial-img {
  position: relative;
  overflow: hidden;
}

.editorial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.1s var(--ease-luxe);
}

.editorial-img:hover img {
  transform: scale(1.05);
}

/* Inset gold frame, drawn inside the image on hover */
.editorial-img::after {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(249, 239, 214, 0.4);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.7s var(--ease-luxe), transform 0.7s var(--ease-luxe);
  pointer-events: none;
}

.editorial-img:hover::after {
  opacity: 1;
  transform: scale(1);
}

.editorial-text {
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 96px 84px;
  position: relative;
}

.editorial-text .section-eyebrow {
  text-align: left;
}

/* Editorial blocks are left-anchored, so the ornament sheds its centring */
.editorial-text .gold-accent {
  margin-left: 0;
  margin-right: 0;
  width: 96px;
  background: linear-gradient(90deg,
      rgba(249, 239, 214, 0.95) 0%,
      rgba(201, 169, 97, 0.75) 45%,
      transparent 100%);
  background-size: 100% 1px;
  background-position: left center;
  background-repeat: no-repeat;
}

.editorial-text .gold-accent::after {
  left: 3px;
  margin-left: 0;
}

.editorial-text .section-title {
  text-align: left;
}

.editorial-text p {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: 40px;
  line-height: 1.85;
}

/* ======================================
   CATEGORIES GRID
====================================== */
.categories {
  background: var(--color-bg);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.category-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/4;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.category-card:hover img {
  transform: scale(1.08);
}

.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(11, 10, 9, 0.88) 0%,
      rgba(11, 10, 9, 0.35) 42%,
      transparent 68%);
  transition: opacity var(--transition);
}

.category-card:hover::after {
  opacity: 0.95;
}

/* Gold frame traces the card edge on hover */
.category-card::before {
  content: '';
  position: absolute;
  inset: 14px;
  z-index: 11;
  border: 1px solid rgba(249, 239, 214, 0.45);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--ease-luxe), transform 0.6s var(--ease-luxe);
  pointer-events: none;
}

.category-card:hover::before {
  opacity: 1;
  transform: scale(1);
}

.category-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px 24px;
  z-index: 12;
  text-align: center;
  transition: transform var(--transition);
}

.category-card:hover .category-label {
  transform: translateY(-6px);
}

.category-label h3 {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 2.4px;
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.category-label .btn-link {
  color: var(--gold-200);
  font-size: 9px;
  letter-spacing: 2.4px;
}

.category-label .btn-link::before {
  background: var(--gold-200);
  opacity: 0.4;
}

.category-label .btn-link:hover {
  color: var(--gold-100);
}

/* ======================================
   PRODUCT CAROUSEL
====================================== */
.products-section {
  background: var(--color-bg-soft);
}

.carousel-wrapper {
  position: relative;
}

.carousel-track-outer {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card {
  flex: 0 0 calc(25% - 18px);
  cursor: pointer;
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  padding: 14px 14px 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-md);
}

.product-card-img {
  background: var(--color-bg-muted);
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-luxe);
}

.product-card:hover .product-card-img img {
  transform: scale(1.07);
}

/* Specular sweep — light catching a polished stone as the card is hovered */
.product-card-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: -160%;
  width: 65%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transition: left 0.9s var(--ease-luxe);
  pointer-events: none;
  z-index: 3;
}

.product-card:hover .product-card-img::after {
  left: 170%;
}

.product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  background: var(--color-dark);
  color: var(--gold-200);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid rgba(201, 169, 97, 0.42);
}

.product-card-body {
  padding: 4px 2px 0;
}

.product-card-name {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 6px;
  transition: color var(--transition);
}

.product-card:hover .product-card-name {
  color: var(--gold-600);
}

.product-card-desc {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 300;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* Price sits below a hairline, the way a tag hangs off a piece */
.product-card-price {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-600);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.price-daily-tag {
  color: var(--gold-600);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.price-fluctuate-note {
  font-size: 9.5px;
  color: var(--color-text-light);
  font-style: italic;
  font-family: var(--font-serif);
}

/* Carousel arrows */
.carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}

.carousel-btn:hover {
  background: var(--color-dark);
  border-color: var(--gold-600);
  box-shadow: var(--shadow-md);
}

.carousel-btn:hover svg {
  stroke: var(--gold-200);
}

.carousel-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-dark);
}

.carousel-btn.prev-btn {
  left: -22px;
}

.carousel-btn.next-btn {
  right: -22px;
}

/* ======================================
   BRAND STORY (Full-width)
====================================== */
.brand-story {
  background: var(--color-dark);
  padding: 140px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Warm light pooling from above, as if a spot is trained on the piece */
.brand-story::before {
  content: '';
  position: absolute;
  top: -35%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.14) 0%, transparent 62%);
  pointer-events: none;
}

.brand-story>* {
  position: relative;
  z-index: 1;
}

.brand-story .gold-accent {
  background: var(--gold-hairline);
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
}

.brand-story-eyebrow {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--gold-300);
  display: block;
  margin-bottom: 26px;
}

.brand-story-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 300;
  color: #ffffff;
  line-height: 1.16;
  letter-spacing: 2.4px;
  margin-bottom: 30px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.brand-story-text {
  font-family: var(--font-serif);
  font-size: 18.5px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.62);
  max-width: 660px;
  margin: 0 auto 52px;
  line-height: 1.95;
}

/* The primary gold action — struck foil with a travelling highlight */
.btn-gold {
  color: #14110c;
  background: var(--gold-foil-soft);
  padding: 16px 40px;
  border: none;
  border-radius: 1px;
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  filter: brightness(1.09);
  transform: translateY(-2px);
  box-shadow: 0 18px 56px rgba(201, 169, 97, 0.4);
}

/* ======================================
   STATS / PILLARS
====================================== */
.pillars {
  background: var(--color-bg-soft);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
}

.pillar-item {
  background: var(--color-bg-soft);
  padding: 64px 40px;
  text-align: center;
  transition: background var(--transition);
}

.pillar-item:hover {
  background: var(--color-bg-pure);
}

.pillar-icon {
  margin: 0 auto 22px;
  color: var(--gold-500);
  transition: transform var(--transition);
}

.pillar-item:hover .pillar-icon {
  transform: translateY(-3px);
}

.pillar-icon svg {
  width: 36px;
  height: 36px;
}

/* Statistic numerals carry the foil — the loudest gold on an ivory field */
.pillar-number {
  font-family: var(--font-serif);
  font-size: 62px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 6px;
  background: var(--gold-foil-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-600);
}

.pillar-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.pillar-desc {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ======================================
   SERVICES STRIP
====================================== */
.services-strip {
  padding: 48px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.service-item {
  text-align: center;
  padding: 24px;
  border-right: 1px solid var(--color-border);
  transition: transform var(--transition);
}

.service-item:hover {
  transform: translateY(-3px);
}

.service-item:last-child {
  border-right: none;
}

.service-item svg {
  width: 28px;
  height: 28px;
  color: var(--gold-500);
  margin: 0 auto 14px;
}

.service-title {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.service-desc {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ======================================
   NEWSLETTER
====================================== */
.newsletter {
  background: var(--color-bg-muted);
  padding: 100px 48px;
  text-align: center;
  position: relative;
}

/* Gold hairlines cap the champagne band top and bottom */
.newsletter::before,
.newsletter::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold-hairline);
}

.newsletter::before {
  top: 0;
}

.newsletter::after {
  bottom: 0;
}

.newsletter .section-title {
  font-size: 40px;
}

.newsletter-form {
  display: flex;
  max-width: 500px;
  margin: 40px auto 0;
  border-bottom: 1px solid rgba(35, 32, 28, 0.35);
  transition: border-color var(--transition);
}

.newsletter-form:focus-within {
  border-color: var(--gold-500);
}

.newsletter-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--color-text);
  padding: 12px 0;
  outline: none;
}

.newsletter-form input::placeholder {
  color: var(--color-text-light);
}

.newsletter-form button {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dark);
  cursor: pointer;
  padding: 12px 0 12px 20px;
  white-space: nowrap;
  transition: color var(--transition);
}

.newsletter-form button:hover {
  color: var(--gold-600);
  letter-spacing: 2.6px;
}

.newsletter-note {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-light);
  margin-top: 16px;
}

/* ======================================
   FOOTER
====================================== */
footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.5);
  padding: 88px 0 0;
  position: relative;
}

/* Foil seam where the ivory page meets the onyx footer */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-foil);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 56px;
  padding: 0 48px 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 18px;
}

.footer-brand-name span {
  background: var(--gold-foil-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-300);
}

.footer-brand-tagline {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.8;
  margin-bottom: 28px;
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: border-color var(--transition), color var(--transition),
    background var(--transition), transform var(--transition);
}

.footer-social a:hover {
  border-color: transparent;
  background: var(--gold-foil-soft);
  color: #14110c;
  transform: translateY(-3px);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-col-title {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 169, 97, 0.2);
}

.footer-col ul li {
  margin-bottom: 11px;
}

.footer-col ul li a {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--transition), padding-left var(--transition);
}

.footer-col ul li a:hover {
  color: var(--gold-200);
  padding-left: 5px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-bottom p {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.25);
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  transition: color var(--transition);
}

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

/* ======================================
   SCROLL REVEAL ANIMATIONS
====================================== */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.95s var(--ease-luxe), transform 0.95s var(--ease-luxe);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

/* ======================================
   BACK TO TOP
====================================== */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 46px;
  height: 46px;
  background: var(--color-dark);
  color: var(--gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition),
    background var(--transition), color var(--transition), transform var(--transition);
  border: 1px solid rgba(201, 169, 97, 0.4);
  box-shadow: var(--shadow-md);
  /* Above the mobile dock (999) but below every overlay (1100+), so it can be
     tapped on a phone yet still disappears behind an open modal. */
  z-index: 1040;
}

.back-to-top:hover {
  background: var(--gold-foil-soft);
  color: #14110c;
  transform: translateY(-3px);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* The dock owns the bottom of a phone screen and WhatsApp owns the right rail,
   so the two floating actions stack up that rail instead of landing on either.
   WhatsApp stays nearest the thumb; back-to-top appears above it on scroll, so
   neither button moves when the other shows. The @supports block further down
   repeats these with safe-area insets. */
@media (max-width: 768px) {
  .back-to-top {
    width: 42px;
    height: 42px;
    right: 16px;
    bottom: 142px;
  }

  .back-to-top svg {
    width: 16px;
    height: 16px;
  }
}

/* ======================================
   RESPONSIVE
====================================== */
@media (max-width: 1100px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card {
    flex: 0 0 calc(50% - 12px);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .editorial-story {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .editorial-story.reverse {
    direction: ltr;
  }

  .editorial-text {
    padding: 56px 40px;
  }

  .nav-links,
  .header-utility {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-item:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 600px) {
  :root {
    --nav-height: 60px;
  }

  .container {
    padding: 0 24px;
  }

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

  .product-card {
    flex: 0 0 calc(100% - 0px);
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px 40px;
  }

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

  .hero-content {
    bottom: 60px;
  }

  .hero-arrow {
    display: none;
  }

  .newsletter-form {
    flex-direction: column;
    border: none;
    border-bottom: 1px solid var(--color-dark);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-item {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ======================================
   ADMIN PANEL STYLES
====================================== */
.admin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-overlay.active {
  display: flex;
}

.admin-window {
  background: #161412;
  border: 1px solid rgba(200, 169, 110, 0.35);
  border-radius: 12px;
  width: 100%;
  max-width: 1240px;
  height: 90vh;
  max-height: 850px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  color: #ffffff;
  font-family: var(--font-sans);
}

.admin-header {
  padding: 20px 32px;
  background: #0f0e0d;
  border-bottom: 1px solid rgba(200, 169, 110, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-brand-title {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
}

.admin-brand-title span {
  color: var(--color-gold);
}

.admin-close-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}

.admin-close-btn:hover {
  background: var(--color-gold);
  color: #000;
  border-color: var(--color-gold);
}

.admin-tabs {
  display: flex;
  background: #110f0e;
  border-bottom: 1px solid rgba(200, 169, 110, 0.15);
  padding: 0 32px;
  gap: 8px;
}

.admin-tab-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-tab-btn:hover {
  color: var(--color-gold-light);
}

.admin-tab-btn.active {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.admin-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  background: #161412;
}

.admin-tab-content {
  display: none;
}

.admin-tab-content.active {
  display: block;
}

/* Stats Cards */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.admin-stat-card {
  background: #1c1a17;
  border: 1px solid rgba(200, 169, 110, 0.2);
  padding: 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.admin-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.admin-stat-value {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--color-gold-light);
  font-weight: 400;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-search-box {
  background: #1c1a17;
  border: 1px solid rgba(200, 169, 110, 0.25);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  width: 260px;
}

.admin-select-filter {
  background: #1c1a17;
  border: 1px solid rgba(200, 169, 110, 0.25);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.admin-primary-btn {
  background: var(--color-gold);
  color: #000;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition);
}

.admin-primary-btn:hover {
  background: var(--color-gold-light);
}

/* Data Table */
.admin-table-wrap {
  background: #1c1a17;
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-radius: 8px;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.admin-table th {
  background: #12100e;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(200, 169, 110, 0.2);
}

.size-guide-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
}

/* ======================================
   LUXURY INVOICE & PRINTABLE RECEIPT SYSTEM
====================================== */
.invoice-card {
  max-width: 720px;
  background: #ffffff;
  color: #1c1a17;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  font-family: var(--font-sans);
  position: relative;
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.invoice-brand-title {
  font-family: var(--font-serif);
  font-size: 26px;
  color: #1c1a18;
  font-weight: 700;
  letter-spacing: 1px;
}

.invoice-brand-title span {
  color: var(--color-gold-dark);
}

.invoice-badge {
  display: inline-block;
  background: var(--color-gold-dark);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  margin-top: 6px;
}

.invoice-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: #fdfbf7;
  border: 1px solid #ebd9b5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 28px;
  font-size: 13px;
  line-height: 1.6;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 13px;
}

.invoice-table th {
  background: #1c1a18;
  color: var(--color-gold-light);
  padding: 12px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.invoice-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #eee;
  color: #333;
}

.invoice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ddd;
  padding-top: 20px;
  margin-top: 20px;
  font-size: 12px;
  color: #666;
}

@media print {
  body * {
    visibility: hidden;
  }
  #invoice-modal, #invoice-modal * {
    visibility: visible;
  }
  #invoice-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff !important;
  }
  .invoice-card {
    box-shadow: none;
    padding: 20px;
    border: none;
  }
  .invoice-no-print {
    display: none !important;
  }
}

.admin-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  vertical-align: middle;
}

.admin-table tr:hover td {
  background: rgba(200, 169, 110, 0.04);
}

.admin-thumb {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(250, 250, 250, 0.1);
}

.admin-status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-status-tag.instock {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.admin-status-tag.lowstock {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
  border: 1px solid rgba(241, 196, 15, 0.3);
}

.admin-status-tag.outstock {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.admin-action-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.admin-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.admin-action-btn.edit {
  color: var(--color-gold-light);
  border-color: rgba(200, 169, 110, 0.3);
}

.admin-action-btn.edit:hover {
  background: rgba(200, 169, 110, 0.2);
}

.admin-action-btn.delete {
  color: #e74c3c;
  border-color: rgba(231, 76, 60, 0.3);
}

.admin-action-btn.delete:hover {
  background: rgba(231, 76, 60, 0.2);
}

/* Modal Form Dialog */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal-backdrop.active {
  display: flex;
}

.admin-modal-dialog {
  background: #1c1a17;
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  padding: 32px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}

.admin-form-group {
  margin-bottom: 18px;
}

.admin-form-group label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
  width: 100%;
  background: #12100e;
  border: 1px solid rgba(200, 169, 110, 0.3);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
}

.admin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Custom Luxury Toast */
.admin-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #1c1a17;
  border: 1px solid var(--color-gold);
  color: #fff;
  padding: 14px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  /* Above every overlay. At 2000 it sat under the modal backdrops (20000 and
     100000), so an error raised from inside a dialog — a failed checkout, most
     of all — was painted behind it and the action looked like it did nothing
     at all. A toast is the one thing that must never be occluded. */
  z-index: 100001;
  max-width: min(420px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Clear the bottom dock and the floating WhatsApp button on a phone. */
@media (max-width: 768px) {
  .admin-toast {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

.admin-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.admin-toast span {
  font-size: 16px;
  font-weight: bold;
}

.admin-toast.success span {
  color: #2ecc71;
}

.admin-toast.error span {
  color: #e74c3c;
}

.admin-toast.info span {
  color: var(--color-gold);
}

/* ======================================
   CART, CATEGORY PAGES & QUICK VIEW STYLES
====================================== */
.icon-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-gold-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Category Hero Banner */
.category-hero {
  background: var(--color-dark);
  color: #fff;
  padding: 110px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
}

/* Overhead gold pool, matching the brand-story treatment */
.category-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.15) 0%, transparent 62%);
  pointer-events: none;
}

.category-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold-hairline);
}

.category-hero>* {
  position: relative;
  z-index: 1;
}

.category-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.category-hero-eyebrow::before,
.category-hero-eyebrow::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400));
}

.category-hero-eyebrow::after {
  background: linear-gradient(90deg, var(--gold-400), transparent);
}

.category-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 300;
  letter-spacing: 2.2px;
  color: #fff;
  margin-bottom: 16px;
}

.category-hero-desc {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.62);
  max-width: 660px;
  margin: 0 auto 28px;
  line-height: 1.75;
}

.breadcrumbs {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.breadcrumbs a {
  color: var(--color-gold-light);
  transition: color 0.2s;
}

.breadcrumbs a:hover {
  color: #fff;
}

/* Category Toolbar & Grid */
.category-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 40px;
  gap: 16px;
}

.category-count {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
}

.category-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-select,
.filter-search {
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  border-radius: 2px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-select:focus,
.filter-search:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: 28px;
  margin-bottom: 72px;
}

/* Product Card Actions */
.product-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* The two icon buttons must keep their square footprint while the label
   button absorbs whatever width is left. */
.product-card-actions .btn-quick-view,
.product-card-actions .btn-wishlist-toggle {
  flex: 0 0 auto;
}

.btn-add-cart {
  flex: 1 1 auto;
  /* Never narrower than its own label. min-width:0 was allowed here to stop the
     row pushing wider than the card in a two-up grid, but a flex item that may
     shrink to nothing does exactly that: the button collapsed to a square and
     the nowrap label ran out through both of its edges. Holding the label's
     width instead makes the wrap above do the work — the button drops onto a
     row of its own when the icons leave it too little room. */
  min-width: max-content;
  white-space: nowrap;
  background: var(--color-dark);
  color: var(--gold-200);
  border: 1px solid var(--color-dark);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 1px;
}

.btn-add-cart:hover {
  background: var(--gold-foil-soft);
  color: #14110c;
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}

.btn-quick-view {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  padding: 11px;
  border-radius: 1px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-quick-view:hover {
  background: var(--color-dark);
  color: var(--gold-200);
  border-color: var(--color-dark);
}

/* CART PAGE STYLES */
.cart-section {
  padding: 60px 0 100px;
  background: var(--color-bg);
  min-height: 70vh;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 992px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}

.cart-table-wrap {
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table th {
  background: var(--color-dark);
  color: var(--gold-200);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 18px 20px;
  text-align: left;
}

.cart-table tbody tr {
  transition: background var(--transition);
}

.cart-table tbody tr:hover {
  background: var(--color-bg-soft);
}

.cart-table td {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.cart-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-item-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.cart-item-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.cart-item-cat {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: fit-content;
  overflow: hidden;
  background: var(--color-bg);
}

.qty-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  transition: background 0.2s;
}

.qty-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.qty-input {
  width: 44px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  background: transparent;
}

.cart-item-remove {
  background: transparent;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-remove:hover {
  opacity: 0.7;
}

/* The bag sits on ivory, so an onyx summary read as a panel bolted on from a
   different site. It is paper now, like the table beside it, and carries the
   gold as edging and accents rather than as the whole surface. */
.cart-summary-card {
  background: var(--color-bg-pure);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 32px 26px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Foil cap — the summary is the checkout's hero surface */
.cart-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-foil);
}

.cart-summary-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--color-dark);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-gold);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  margin-bottom: 14px;
  color: var(--color-text-muted);
}

.cart-summary-row.total {
  font-size: 19px;
  font-weight: 600;
  /* gold-600 rather than the pale gold-200, which vanished on paper */
  color: var(--gold-600);
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  margin-top: 18px;
  margin-bottom: 26px;
}

/* ---- Summary blocks ---- */
.summary-notice {
  background: rgba(201, 169, 97, 0.09);
  border: 1px solid var(--color-border-gold);
  border-radius: 4px;
  padding: 13px 14px;
  margin-bottom: 20px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.summary-notice strong {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-700);
}

.summary-enquiry {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 22px;
}

.summary-enquiry-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.summary-enquiry-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.summary-field {
  margin: 0 0 20px;
}

.summary-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--color-text-muted);
}

.summary-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

.summary-hint strong {
  color: var(--gold-700);
}

.promo-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.promo-input {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 10px 12px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.promo-input::placeholder {
  color: var(--color-text-light);
  letter-spacing: 0.5px;
}

.promo-input:focus {
  outline: none;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16);
}

.promo-btn {
  background: var(--gold-foil-soft);
  color: #14110c;
  border: none;
  padding: 8px 18px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter var(--transition);
}

.promo-btn:hover {
  filter: brightness(1.1);
}

/* ---- WhatsApp actions ----
   Brand green as a full fill fought the ivory-and-gold palette and made every
   enquiry button shout louder than "Proceed to Checkout". These follow the
   floating button's approach instead: the site's own surface, with the green
   kept on the glyph, which is the part that carries the recognition. That also
   restores the hierarchy — WhatsApp is the quiet route, gold is the primary. */
.summary-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  margin-bottom: 10px;
  background: var(--color-dark);
  color: var(--gold-200);
  border: 1px solid var(--color-border-gold);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.summary-wa-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #25d366;
  transition: color var(--transition);
}

.summary-wa-btn:hover {
  background: var(--color-charcoal);
  border-color: var(--gold-400);
  color: var(--gold-100);
  transform: translateY(-1px);
}

/* Row-level "request the price for this piece" pill */
.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
}

.wa-pill svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #25d366;
}

.wa-pill:hover {
  background: var(--color-bg-soft);
  border-color: var(--gold-400);
  color: var(--color-dark);
}

.empty-cart-state {
  text-align: center;
  padding: 80px 20px;
  max-width: 540px;
  margin: 0 auto;
}

.empty-cart-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(200, 169, 110, 0.1);
  border: 1px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--color-gold);
}

/* Quick View Dialog */
.quickview-dialog {
  max-width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  text-align: left;
}

@media (max-width: 768px) {
  .quickview-dialog {
    grid-template-columns: 1fr;
  }
}

/* ======================================
   WISHLIST STYLES & BADGES
====================================== */
.wishlist-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-gold-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-wishlist-toggle {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  padding: 11px;
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-wishlist-toggle:hover,
.btn-wishlist-toggle.in-wishlist {
  background: #e74c3c;
  color: #fff;
  border-color: #e74c3c;
}

.btn-wishlist-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  transition: fill 0.3s ease;
}

.btn-wishlist-toggle.in-wishlist svg {
  fill: currentColor;
}

/* ======================================
   GOLD RATE TICKER BAR
====================================== */
.gold-rate-bar {
  background: linear-gradient(90deg, #0b0a09 0%, #17130d 50%, #0b0a09 100%);
  color: var(--gold-200);
  border-bottom: 1px solid rgba(201, 169, 97, 0.25);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  padding: 7px 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.gold-rate-ticker {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  animation: marquee 28s linear infinite;
}

.gold-rate-ticker:hover {
  animation-play-state: paused;
}

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

.gold-rate-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gold-rate-tag {
  background: var(--gold-foil-soft);
  color: #14110c;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ======================================
   LIVE SEARCH OVERLAY & RESULTS
====================================== */
.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 16, 14, 0.92);
  backdrop-filter: blur(8px);
  z-index: 1200;
  display: none;
  flex-direction: column;
  padding: 40px 20px;
  overflow-y: auto;
}

.search-modal-backdrop.active {
  display: flex;
}

.search-input-wrap {
  max-width: 720px;
  width: 100%;
  margin: 20px auto 32px;
  position: relative;
}

.search-input-large {
  width: 100%;
  background: #1c1a17;
  border: 1.5px solid var(--color-gold);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 22px;
  padding: 16px 50px 16px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.search-input-large:focus {
  outline: none;
  box-shadow: 0 12px 40px rgba(200, 169, 110, 0.3);
}

.search-close-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-gold-light);
  font-size: 24px;
  cursor: pointer;
}

.search-results-grid {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* ======================================
   ORDER TRACKER TIMELINE UI
====================================== */
.order-tracker-card {
  background: #1c1a17;
  border: 1px solid var(--color-gold);
  border-radius: 12px;
  padding: 32px;
  color: #fff;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}

.timeline-wrap {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 32px 0 24px;
}

.timeline-wrap::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  z-index: 1;
}

.timeline-progress {
  position: absolute;
  top: 18px;
  left: 20px;
  height: 3px;
  background: var(--color-gold);
  z-index: 2;
  transition: width 0.4s ease;
}

.timeline-step {
  position: relative;
  z-index: 3;
  text-align: center;
}

.timeline-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2b2722;
  border: 2px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0 auto 8px;
  transition: all 0.3s ease;
}

.timeline-step.completed .timeline-icon,
.timeline-step.active .timeline-icon {
  background: var(--color-gold);
  border-color: #e8d5a3;
  color: #1c1a18;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(200, 169, 110, 0.5);
}

.timeline-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
}

.timeline-step.completed .timeline-label,
.timeline-step.active .timeline-label {
  color: var(--color-gold-light);
}

/* ======================================
   SIZE GUIDE TABLE & CHART UI
====================================== */
.size-guide-dialog {
  max-width: 680px;
  background: #1c1a17;
  color: #fff;
  border: 1px solid var(--color-gold);
  border-radius: 12px;
  padding: 32px;
}

.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 12px;
}

.size-guide-table th {
  background: #12100e;
  color: var(--color-gold-light);
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(200, 169, 110, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.size-guide-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

/* ======================================
   ENHANCED MOBILE OPTIMIZATION (PHONES & TABLETS)
====================================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--color-dark);
  border-right: 1px solid rgba(201, 169, 97, 0.35);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.7);
  padding: 24px;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(201, 169, 97, 0.28);
  padding-bottom: 16px;
  margin-bottom: 20px;
  color: #fff;
}

.mobile-menu-close {
  background: none;
  border: 1px solid rgba(201, 169, 97, 0.5);
  color: var(--gold-200);
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-menu-links a {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.2s, padding-left 0.2s;
}

.mobile-menu-links a:hover,
.mobile-menu-links a.active {
  color: var(--gold-200);
  padding-left: 8px;
}

@media (max-width: 900px) {
  .nav-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 4px;
  }

  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-gold-light);
    border-radius: 2px;
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
  }

  .nav-logo a {
    font-size: 15px !important;
    letter-spacing: 1.5px !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-icons {
    gap: 12px !important;
  }
}

/* On the dock breakpoints the hero was still sized for a desktop viewport, so
   the photograph pushed the gold card down to a sliver at the fold. Trading
   image height for card presence puts the headline and CTA back on first
   screen. svh follows the shrinking viewport when the browser chrome is
   showing; the vh line above it is the fallback. */
@media (max-width: 768px) {
  .hero {
    height: 62vh !important;
    height: 62svh !important;
    min-height: 380px !important;
    max-height: 520px !important;
  }
}

@media (max-width: 600px) {
  .hero {
    height: 56vh !important;
    height: 56svh !important;
    min-height: 340px !important;
    max-height: 460px !important;
  }

  .hero-content {
    bottom: 34px !important;
    padding: 16px 14px !important;
    width: calc(100% - 24px) !important;
  }

  /* The dots sat at 30px, which put them on the card's bottom edge once the
     card moved down. Park them in the gap beneath it. */
  .hero-dots {
    bottom: 12px !important;
  }

  .hero-title {
    font-size: 22px !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
  }

  .hero-subtitle {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .hero-cta {
    padding: 8px 16px !important;
    font-size: 10px !important;
  }

  .hero-arrow {
    display: none !important;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .product-card-body {
    padding: 8px 4px !important;
  }

  .product-card-name {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .product-card-desc {
    font-size: 12px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .btn-add-cart {
    padding: 8px 6px !important;
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
  }

  .btn-quick-view, .btn-wishlist-toggle {
    padding: 6px !important;
  }

  .admin-modal-dialog,
  .invoice-card,
  .size-guide-dialog,
  .order-tracker-card {
    width: 95% !important;
    max-width: 100% !important;
    padding: 20px 14px !important;
    border-radius: 8px !important;
  }

  .invoice-details-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .invoice-header {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .invoice-header div:last-child {
    text-align: left !important;
  }

  .search-input-large {
    font-size: 16px !important;
    padding: 12px 40px 12px 14px !important;
  }
}

.mobile-menu-links a svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

@media (max-width: 600px) {
  .invoice-card {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #printable-invoice-content {
    padding: 16px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .invoice-header {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .invoice-header div:last-child {
    text-align: left !important;
  }

  .invoice-details-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    font-size: 11px !important;
  }

  .invoice-table {
    font-size: 10px !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  .invoice-table th, .invoice-table td {
    padding: 6px 3px !important;
    word-break: break-word !important;
  }

  .invoice-footer {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .cart-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
  }

  .cart-summary-row.total span {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
}

/* ======================================
   LUXURY MOBILE SHOPPING BAG CARDS (0% TEXT OVERLAP)
====================================== */
.mobile-cart-card {
  display: none;
}

@media (max-width: 768px) {
  .cart-table-wrap {
    display: none !important;
  }

  /* Same paper-and-gold treatment as the table these replace, so the bag reads
     as one page rather than switching theme at the breakpoint. */
  .mobile-cart-card {
    display: flex !important;
    flex-direction: column;
    background: var(--color-bg-pure);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
    gap: 12px;
    align-items: stretch;
    position: relative;
    box-shadow: var(--shadow-sm);
  }

  .mobile-cart-head {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
  }

  .mobile-cart-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .mobile-cart-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .mobile-cart-details {
    flex: 1;
    min-width: 0;
  }

  .mobile-cart-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-cart-cat {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }

  .mobile-cart-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-600);
  }

  .mobile-cart-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .mobile-cart-remove {
    background: transparent;
    border: 1px solid rgba(192, 57, 43, 0.35);
    color: #c0392b;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition);
  }

  .mobile-cart-remove:hover {
    background: rgba(192, 57, 43, 0.08);
    border-color: #c0392b;
  }
}

@media (max-width: 600px) {
  .admin-overlay {
    padding: 8px !important;
  }

  .admin-window {
    height: 96vh !important;
    max-height: 96vh !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
}

/* ======================================
   RESPONSIVE DEVICE RESOLUTION & SIZE OPTIMIZATION
====================================== */
@media (max-width: 768px) {
  html {
    font-size: 14px !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    font-size: 13px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  h1, .hero-title, .category-hero-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.5px !important;
  }

  h2, .section-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;
  }

  h3 {
    font-size: 16px !important;
  }

  .category-hero {
    padding: 36px 14px 20px !important;
  }

  .category-hero-desc {
    font-size: 12px !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
  }

  .hero-slide-content {
    padding: 20px 14px !important;
  }

  .hero-slide-title {
    font-size: 24px !important;
  }

  .hero-slide-desc {
    font-size: 12px !important;
  }

  /* Compact Product Grid Cards for Phones */
  .products-grid, .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .product-card {
    border-radius: 8px !important;
  }

  .product-card-img-wrap {
    height: 160px !important;
  }

  .product-card-body {
    padding: 10px 8px !important;
  }

  .product-card-name {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .product-card-price {
    font-size: 13px !important;
  }

  /* Full Screen / Responsive Dialog Modals */
  .admin-modal-dialog,
  .size-guide-dialog,
  .order-tracker-card {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 16px 12px !important;
    border-radius: 8px !important;
    margin: 10px auto !important;
    box-sizing: border-box !important;
  }

  .admin-header {
    padding: 12px 14px !important;
  }

  .admin-brand-title {
    font-size: 14px !important;
    letter-spacing: 1px !important;
  }

  .admin-tabs {
    padding: 0 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
  }

  .admin-tab-btn {
    padding: 10px 12px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  .admin-body {
    padding: 14px 10px !important;
  }

  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .cart-summary-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 12px !important;
  }

  .mobile-cart-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
}

/* ======================================
   NATIVE MOBILE APP BOTTOM NAVIGATION DOCK
====================================== */
.mobile-app-dock {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 68px !important;
  }

  .mobile-app-dock {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: rgba(18, 16, 14, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(200, 169, 110, 0.35) !important;
    z-index: 999 !important;
    justify-content: space-around !important;
    align-items: center !important;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5) !important;
  }

  /* Fixed side padding made the items wider than a 360px screen could hold
     once Sign In joined them, and the row spilled sideways. Equal flexible
     columns fit whatever the dock contains. */
  .mobile-dock-item {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-family: var(--font-sans) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    gap: 3px !important;
    position: relative !important;
    padding: 6px 2px !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
  }

  /* Labels truncate rather than wrap onto a second line and push the dock's
     height past the space the body padding reserves for it. */
  .mobile-dock-item > span:not(.mobile-dock-icon):not(.mobile-dock-badge) {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-dock-item.active,
  .mobile-dock-item:hover {
    color: var(--color-gold-light) !important;
  }

  .mobile-dock-icon {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .mobile-dock-badge {
    position: absolute !important;
    top: 2px !important;
    right: 14px !important;
    background: var(--color-gold) !important;
    color: #1c1a18 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ======================================
   ADMIN MODALS & OVERLAYS STACKING SYSTEM
====================================== */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 20000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.admin-modal-backdrop.active {
  display: flex !important;
}

@media (max-width: 768px) {
  .admin-modal-backdrop {
    padding: 8px !important;
  }

  .admin-modal-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px 12px !important;
    border-radius: 10px !important;
    margin: auto !important;
    box-sizing: border-box !important;
  }

  /* Stock Management & Customer Orders Tables Mobile Touch Scroll */
  .admin-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
  }

  .admin-table {
    min-width: 580px !important;
    font-size: 11px !important;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  /* Compact Invoice Mobile Sizing */
  #printable-invoice-modal .admin-modal-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 6px !important;
    margin: 4px auto !important;
    max-height: 94vh !important;
    overflow-y: auto !important;
  }

  .invoice-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    font-size: 11px !important;
  }

  .invoice-brand-title {
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
  }

  .invoice-details-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
    font-size: 10px !important;
  }

  .invoice-table {
    font-size: 9px !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  .invoice-table th, .invoice-table td {
    padding: 4px 2px !important;
    word-break: break-word !important;
  }

  .invoice-footer {
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 10px !important;
    text-align: center !important;
  }
}

/* ======================================
   MULTI-CURRENCY EXCHANGE SELECTOR STYLES
====================================== */
.currency-selector-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 169, 110, 0.4);
  border-radius: 20px;
  padding: 3px 10px;
  margin-left: 12px;
}

.currency-selector-dropdown {
  background: transparent;
  color: var(--color-gold-light);
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  outline: none;
  cursor: pointer;
  padding-right: 4px;
}

.currency-selector-dropdown option {
  background: #1c1a18;
  color: #ffffff;
  padding: 8px;
}

@media (max-width: 768px) {
  .currency-selector-wrap {
    margin-left: 0;
    padding: 2px 8px;
  }
  .currency-selector-dropdown {
    font-size: 10px;
  }
}

/* ==========================================================================
   SHOPPING BAG PROMPT MODAL
   ========================================================================== */
.cart-prompt-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(35, 30, 24, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
}

.cart-prompt-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.cart-prompt-dialog {
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: 100%;
  max-width: 440px;
  padding: 28px 24px;
  position: relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--color-text);
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}

.cart-prompt-backdrop.active .cart-prompt-dialog {
  transform: translateY(0) scale(1);
}

.cart-prompt-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--color-text-light);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}

.cart-prompt-close:hover {
  color: var(--color-dark);
  background: var(--color-bg-soft);
}

.cart-prompt-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.cart-prompt-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
  flex-shrink: 0;
}

.cart-prompt-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--color-dark);
  margin: 0;
  letter-spacing: 0.5px;
}

.cart-prompt-body {
  margin-bottom: 24px;
}

.cart-prompt-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 12px;
  margin-bottom: 16px;
}

.cart-prompt-item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}

.cart-prompt-item-info {
  flex: 1;
  min-width: 0;
}

.cart-prompt-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-prompt-item-meta {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px 0;
}

.cart-prompt-item-price-qty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.cart-prompt-price {
  font-weight: 600;
  color: var(--gold-600);
}

.cart-prompt-qty {
  color: var(--color-text-muted);
  font-size: 12px;
}

.cart-prompt-question {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.cart-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cart-prompt-btn {
  flex: 1;
  min-width: 140px;
  padding: 13px 14px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cart-prompt-btn.primary {
  background: var(--gold-foil-soft);
  color: #14110c !important;
  border: none;
  box-shadow: var(--shadow-gold);
}

.cart-prompt-btn.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #14110c !important;
}

.cart-prompt-btn.secondary {
  background: transparent;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border);
}

.cart-prompt-btn.secondary:hover {
  background: var(--color-bg-soft);
  border-color: var(--gold-400);
  color: var(--color-dark) !important;
}

@media (max-width: 480px) {
  .cart-prompt-actions {
    flex-direction: column-reverse;
  }
}

/* ==========================================================================
   SAFE-AREA INSETS
   viewport-fit=cover lets the page fill notched screens, which also means
   fixed elements can sit under the home indicator unless they are inset.
   ========================================================================== */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .mobile-app-dock {
      height: calc(64px + env(safe-area-inset-bottom)) !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
    }

    body {
      padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }

    #whatsapp-float-btn {
      bottom: calc(78px + env(safe-area-inset-bottom)) !important;
      right: max(16px, env(safe-area-inset-right)) !important;
    }

    /* 78px dock clearance + the 52px WhatsApp circle + a 12px gap. */
    .back-to-top {
      bottom: calc(142px + env(safe-area-inset-bottom));
      right: max(16px, env(safe-area-inset-right));
    }
  }

  /* Desktop keeps the roomier corner placement — there is no dock to clear. */
  @media (min-width: 769px) {
    .back-to-top {
      bottom: max(40px, env(safe-area-inset-bottom));
      right: max(40px, env(safe-area-inset-right));
    }
  }
}

/* ==========================================================================
   INVOICE — on-screen responsiveness
   The document itself is exported at a fixed A4 width (see .pdf-export), so
   these rules only govern how it reads on the device.
   ========================================================================== */
#invoice-modal .admin-modal-dialog {
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#printable-invoice-content {
  container-type: inline-size;
}

@media (max-width: 768px) {

  #invoice-modal .admin-modal-dialog {
    max-width: 96vw !important;
    max-height: 94vh !important;
    border-radius: 8px !important;
  }

  #printable-invoice-content {
    padding: 18px 14px !important;
  }

  /* Let the line-items table scroll on its own rather than squeezing columns
     until the text becomes unreadable. */
  .invoice-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   PDF EXPORT STAGE
   The invoice is cloned into this off-screen container at a fixed A4 width
   before rendering. Every mobile override below is neutralised here, so a
   phone produces exactly the same document as a desktop.
   Higher specificity than the plain .invoice-* mobile rules, so these win.
   ========================================================================== */
.pdf-export {
  width: 794px !important;
  background: #ffffff !important;
}

.pdf-export #printable-invoice-content,
.pdf-export .invoice-card {
  width: 794px !important;
  max-width: 794px !important;
  padding: 40px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.pdf-export .invoice-header {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

.pdf-export .invoice-header div:last-child {
  text-align: right !important;
}

.pdf-export .invoice-brand-title {
  font-size: 26px !important;
  letter-spacing: 1px !important;
}

.pdf-export .invoice-details-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  padding: 20px !important;
  font-size: 13px !important;
}

.pdf-export .invoice-table {
  font-size: 12.5px !important;
  table-layout: auto !important;
}

.pdf-export .invoice-table th,
.pdf-export .invoice-table td {
  padding: 12px !important;
  white-space: normal !important;
}

.pdf-export .invoice-footer {
  flex-direction: row !important;
  text-align: left !important;
  gap: 24px !important;
  font-size: 12px !important;
}

/* Never split a row or the footer across two pages */
.pdf-export .invoice-table tr,
.pdf-export .invoice-footer,
.pdf-export .invoice-details-grid {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ==========================================================================
   AUTHENTICATION — sign in, register, recovery, account
   ========================================================================== */
.auth-dialog {
  max-width: 440px;
  background: var(--color-onyx-soft);
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 2px;
  padding: 38px 34px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-onyx);
}

.auth-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-foil);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--transition), transform var(--transition);
}

.auth-close:hover {
  color: var(--gold-200);
  transform: rotate(90deg);
}

.auth-head {
  text-align: center;
  margin-bottom: 26px;
}

.auth-mark {
  display: block;
  color: var(--gold-400);
  font-size: 13px;
  margin-bottom: 10px;
}

.auth-title {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #ffffff;
  margin: 0 0 8px;
}

.auth-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  word-break: break-word;
}

/* ---- Provider buttons ---- */
.auth-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.auth-provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  color: #1f1b17;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.auth-provider-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Apple's mark is monochrome and belongs on black */
.auth-provider-btn[data-provider="apple"] {
  background: #000000;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Shown when the account API cannot be reached at all */
.auth-notice {
  background: rgba(241, 196, 15, 0.09);
  border: 1px solid rgba(241, 196, 15, 0.35);
  color: #e8cf7a;
  font-size: 12px;
  line-height: 1.6;
  padding: 11px 13px;
  border-radius: 2px;
  margin-bottom: 20px;
}

.auth-notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px;
  border-radius: 2px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* ---- Form ---- */
.auth-form {
  display: block;
}

.auth-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 7px;
}

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.auth-input {
  width: 100%;
  background: #0b0a09;
  border: 1px solid rgba(201, 169, 97, 0.26);
  border-radius: 2px;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.auth-input:focus {
  outline: none;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16);
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin: -8px 0 18px;
  line-height: 1.5;
}

.auth-body-text {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 22px;
  text-align: center;
}

.auth-submit {
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-outline.auth-submit {
  color: var(--gold-200);
  border-color: rgba(201, 169, 97, 0.4);
}

.btn-outline.auth-submit:hover {
  background: var(--gold-foil-soft);
  color: #14110c;
  border-color: transparent;
}

.auth-error {
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.38);
  color: #ff9c90;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 2px;
  margin-bottom: 16px;
}

.auth-foot {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--gold-300);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.auth-link-btn:hover {
  color: var(--gold-100);
}

/* ---- Account view ---- */
.auth-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.auth-tag {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.62);
}

.auth-tag.verified {
  border-color: rgba(46, 204, 113, 0.42);
  color: #57d98a;
}

.auth-tag.warn {
  border-color: rgba(241, 196, 15, 0.45);
  color: #f1c40f;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  margin: 6px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Standalone auth pages (verify / reset) ---- */
.auth-page {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: 60px 20px;
  background: var(--color-dark);
}

.auth-page .auth-dialog {
  margin: 0 auto;
}

@media (max-width: 480px) {
  .auth-dialog {
    padding: 30px 20px 26px;
  }

  .auth-row {
    grid-template-columns: 1fr;
  }

  .auth-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   LUXE REFINEMENTS — search, tracking, empty states, dock, motion
   ========================================================================== */

/* ---- Live search overlay ---- */
.search-modal-backdrop {
  background: rgba(11, 10, 9, 0.94);
}

.search-input-large {
  background: var(--color-onyx-soft);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 2px;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-onyx);
}

.search-input-large::placeholder {
  color: rgba(255, 255, 255, 0.28);
  font-style: italic;
}

.search-input-large:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.14), var(--shadow-onyx);
}

.search-close-btn {
  color: var(--gold-300);
  transition: color var(--transition), transform var(--transition);
}

.search-close-btn:hover {
  color: var(--gold-100);
  transform: translateY(-50%) rotate(90deg);
}

/* ---- Order tracker ---- */
.order-tracker-card {
  background: var(--color-onyx-soft);
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: 2px;
  box-shadow: var(--shadow-onyx);
  position: relative;
  overflow: hidden;
}

.order-tracker-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-foil);
}

.timeline-progress {
  background: var(--gold-foil-soft);
  box-shadow: 0 0 12px rgba(201, 169, 97, 0.55);
}

.timeline-step.completed .timeline-icon,
.timeline-step.active .timeline-icon {
  background: var(--gold-foil-soft);
  border-color: var(--gold-200);
}

/* The step in progress pulses; completed steps sit still */
.timeline-step.active .timeline-icon {
  animation: facetPulse 2.4s ease-in-out infinite;
}

@keyframes facetPulse {

  0%,
  100% {
    box-shadow: 0 0 14px rgba(201, 169, 97, 0.5);
  }

  50% {
    box-shadow: 0 0 26px rgba(201, 169, 97, 0.85);
  }
}

/* ---- Empty states ---- */
.empty-cart-icon {
  border-radius: 0;
  transform: rotate(45deg);
  border: 1px solid rgba(201, 169, 97, 0.5);
  background: rgba(201, 169, 97, 0.07);
  color: var(--gold-500);
}

.empty-cart-icon>* {
  transform: rotate(-45deg);
}

/* ---- Dialogs on onyx ---- */
.admin-modal-dialog,
.size-guide-dialog {
  background: var(--color-onyx-soft);
  border-color: rgba(201, 169, 97, 0.35);
  border-radius: 2px;
}

.admin-primary-btn {
  background: var(--gold-foil-soft);
  color: #14110c;
  border-radius: 2px;
  transition: filter var(--transition), transform var(--transition);
}

.admin-primary-btn:hover {
  background: var(--gold-foil-soft);
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ---- Mobile dock ---- */
@media (max-width: 768px) {
  .mobile-app-dock {
    background: rgba(11, 10, 9, 0.97) !important;
  }

  .mobile-dock-badge {
    background: var(--gold-foil-soft) !important;
  }

  /* Keep corners near-square on small cards — softness reads as cheap here */
  .product-card {
    border-radius: 2px !important;
  }
}

/* ==========================================================================
   NARROW-SCREEN OVERFLOW
   Rows built as flex with a fixed gap and non-shrinking children were wider
   than a 360px phone. Because the page sets overflow-x:hidden, the excess was
   not scrollable — it was simply cut off, which is why controls at the end of
   a row looked absent rather than clipped. Measured at 360px: .nav-icons ran
   to 400px and the catalog filter row to 565px.
   ========================================================================== */
@media (max-width: 768px) {
  .nav-inner {
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* The wordmark yields first; the icons are the interactive part. */
  .nav-logo {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .nav-logo a {
    white-space: nowrap !important;
  }

  .nav-icons {
    flex-shrink: 0 !important;
  }

  /* At 360px the hamburger, the wordmark at its desktop tracking, and the
     three icons came to 374px against 328px of room, and the icons at the end
     of the row were the part that got cut. The wordmark gives up the tracking.
     ========================================================= */
  @media (max-width: 420px) {
    .nav-inner {
      padding: 10px 12px !important;
      gap: 8px !important;
    }

    .nav-logo a {
      font-size: 13px !important;
      letter-spacing: 1px !important;
    }

    .nav-icons {
      gap: 10px !important;
    }
  }

  /* The arrows hang 22px outside the track, which needs a page margin at least
     that wide to land on. Below this width the container is only 14px from the
     edge, so they tuck inside instead of being sheared off. */
  .carousel-btn.prev-btn {
    left: 2px !important;
  }

  .carousel-btn.next-btn {
    right: 2px !important;
  }

  .category-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .category-filters > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .filter-search,
  .filter-select {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
  }
}

/* ---- Respect reduced-motion: kill sweeps, tickers and pulses ---- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee-track,
  .gold-rate-ticker {
    animation: none !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================================
   BESPOKE ATELIER — customised jewellery studio
   ----------------------------------------------------------------------------
   The studio page was written against this whole block of classes, none of
   which existed in the stylesheet: the commission form rendered as raw browser
   defaults — native radios, system dropdowns, labels running into their
   controls. Everything below is built on the ivory-and-gold tokens the rest of
   the site uses, so the form reads as part of the house rather than a form
   bolted onto it.
   ========================================================================== */

.studio-shell {
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- How a commission works: four steps, one hairline ---- */

.studio-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 auto 44px;
  padding: 0;
  position: relative;
  /* An ordered list carries the semantics of a sequence, but its own numbering
     would sit on the connecting rule alongside the roman numerals. */
  list-style: none;
}

.studio-process::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--gold-hairline);
}

.studio-process-step {
  position: relative;
  text-align: center;
  padding: 0 10px;
}

.studio-process-num {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--gold-300);
  color: var(--gold-700);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.studio-process-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--color-text);
  margin-bottom: 5px;
}

.studio-process-desc {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---- The commission card ---- */

.custom-studio-card {
  position: relative;
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  box-shadow: var(--shadow-md);
  padding: 52px 56px 46px;
  overflow: hidden;
}

/* A struck foil edge, the same signature the summary cards carry. */
.custom-studio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-foil);
}

.studio-card-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}

.studio-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.6px;
  color: var(--gold-600);
  margin-bottom: 10px;
}

.studio-card-title {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.15;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.studio-card-sub {
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---- Numbered sections ---- */

.studio-section {
  border: 0;
  padding: 0;
  margin: 0 0 34px;
}

.studio-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 18px;
  padding: 0;
}

.studio-legend-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-foil-soft);
  color: #3a2c11;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-legend-text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--color-dark);
}

/* The rule fills whatever space the label leaves, so headings of different
   lengths still line up as one system. */
.studio-legend-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 20px;
  background: var(--color-border);
}

.studio-required {
  color: #c0392b;
  font-weight: 700;
}

/* ---- Jewellery type: selectable cards, not native radios ---- */

.option-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}

.chip-radio {
  position: relative;
}

/* Kept in the layer rather than display:none so it stays keyboard reachable
   and still announces itself to a screen reader. */
.chip-radio input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip-radio label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 104px;
  padding: 18px 10px;
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
    box-shadow var(--transition), transform var(--transition);
}

.chip-radio label svg {
  width: 30px;
  height: 30px;
  stroke: var(--gold-600);
  fill: none;
  stroke-width: 1.2;
  transition: stroke var(--transition);
}

.chip-radio input:hover + label {
  border-color: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.chip-radio input:checked + label {
  border-color: var(--gold-400);
  background: linear-gradient(160deg, #fffdf8 0%, var(--color-bg-soft) 100%);
  box-shadow: 0 0 0 1px var(--gold-400) inset, var(--shadow-sm);
  font-weight: 600;
}

.chip-radio input:checked + label svg {
  stroke: var(--gold-700);
}

.chip-radio input:focus-visible + label {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* ---- Fields ---- */

.custom-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.custom-form-group {
  min-width: 0;
}

.custom-form-group.full {
  grid-column: 1 / -1;
}

.custom-form-group label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
}

.custom-form-group input,
.custom-form-group select,
.custom-form-group textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.custom-form-group input::placeholder,
.custom-form-group textarea::placeholder {
  color: var(--color-text-light);
}

.custom-form-group input:focus,
.custom-form-group select:focus,
.custom-form-group textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14);
}

/* The system dropdown arrow is the one part of a native select that cannot be
   styled, so the control is reset and given the house chevron. */
.custom-form-group select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238c6b33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
  cursor: pointer;
}

.custom-form-group textarea {
  min-height: 150px;
  line-height: 1.7;
  resize: vertical;
}

.studio-field-hint {
  margin-top: 7px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---- Reference image ---- */

.studio-upload-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.studio-or {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.studio-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 112px;
  padding: 20px 16px;
  background: var(--color-bg-soft);
  border: 1px dashed var(--gold-300);
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}

.studio-dropzone:hover,
.studio-dropzone.dragover {
  border-color: var(--gold-500);
  background: #fffdf8;
}

.studio-dropzone svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold-600);
  fill: none;
  stroke-width: 1.3;
}

.studio-dropzone-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--color-text);
}

.studio-dropzone-hint {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* The input is driven by the label wrapping it; hiding it outright would drop
   it out of the tab order. */
.studio-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.studio-dropzone:focus-within {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14);
}

.studio-preview {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-gold);
  border-radius: 3px;
}

.studio-preview.visible {
  display: flex;
}

.studio-preview img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--gold-300);
}

.studio-preview-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-preview-clear {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.studio-preview-clear:hover {
  border-color: var(--gold-400);
  color: var(--gold-700);
}

/* ---- Divider between the design brief and the customer's details ---- */

.studio-divider {
  height: 1px;
  border: 0;
  background: var(--gold-hairline);
  margin: 40px 0 34px;
}

/* ---- Submission ---- */

.studio-submit-row {
  margin-top: 34px;
}

.btn-submit-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 19px 24px;
  background: var(--gold-foil-soft);
  border: none;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: #3a2c11;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.btn-submit-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 52px rgba(176, 141, 74, 0.34);
  filter: brightness(1.04);
}

.btn-submit-custom:disabled {
  cursor: progress;
  transform: none;
  filter: grayscale(0.35) brightness(0.98);
  box-shadow: var(--shadow-sm);
}

.btn-submit-custom svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.studio-submit-note {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--color-text-muted);
}

/* A failure has to be visible where the button is, not only as a toast that
   may already have faded by the time the customer looks up. */
.studio-form-error {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  background: #fdf3f2;
  border: 1px solid #e8c4bf;
  border-left: 3px solid #c0392b;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: #8c2c20;
}

.studio-form-error.visible {
  display: block;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .custom-studio-card {
    padding: 40px 30px 36px;
  }

  .custom-form-grid {
    grid-template-columns: 1fr;
  }

  .studio-card-title {
    font-size: 30px;
  }

  .studio-process {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 0;
  }

  /* The connecting rule only reads as one line across a single row. */
  .studio-process::before {
    display: none;
  }

  .studio-upload-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .studio-or {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .custom-studio-card {
    padding: 32px 20px 30px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .studio-card-title {
    font-size: 26px;
  }

  .studio-card-sub {
    font-size: 15px;
  }

  .option-chips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .chip-radio label {
    min-height: 92px;
    font-size: 11px;
    padding: 14px 8px;
  }

  .chip-radio label svg {
    width: 26px;
    height: 26px;
  }

  .btn-submit-custom {
    letter-spacing: 1.6px;
    font-size: 11px;
    padding: 17px 16px;
  }

  .studio-process {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: left;
  }

  .studio-process-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    text-align: left;
    padding: 0;
  }

  .studio-process-num {
    margin: 0;
  }
}