/* Glossy "liquid glass" components */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}
/* gradient hairline border */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* top specular highlight */
.glass::after {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: inherit;
  border-bottom-left-radius: 50% 18%;
  border-bottom-right-radius: 50% 18%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 90%);
  pointer-events: none;
  z-index: 0;
}
.glass > * { position: relative; z-index: 2; }
.glass--strong { background: var(--glass-fill-strong); }
.glass--pill { border-radius: 999px; }

/* hover-lift card with sheen sweep */
.glass-card {
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  overflow: hidden;
}
.glass-card .sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, rgba(228, 207, 163, 0.10) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease);
}
.glass-card:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow), var(--gold-glow); }
.glass-card:hover .sheen { transform: translateX(120%); }

/* Buttons */
.btn {
  --bg: linear-gradient(180deg, #e7d3a8 0%, #c9a96e 48%, #a8874d 100%);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border-radius: 999px;
  border: 0;
  font: 700 0.86rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1408;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 -2px 0 rgba(0, 0, 0, 0.18) inset, 0 12px 30px -10px rgba(201, 169, 110, 0.7);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-20deg);
  transition: left 0.9s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 -2px 0 rgba(0, 0, 0, 0.18) inset, 0 18px 40px -10px rgba(201, 169, 110, 0.9); }
.btn:hover::after { left: 130%; }
.btn svg { width: 1.1em; height: 1.1em; }

.btn--glass {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
.btn--glass:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 0 0 1px rgba(201, 169, 110, 0.6) inset, 0 16px 36px -12px rgba(201, 169, 110, 0.45); }
.btn--sm { padding: 0.75em 1.2em; font-size: 0.74rem; }

/* chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border-radius: 999px;
  font: 600 0.78rem/1 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}
.chip:hover { color: var(--text); box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.55) inset; }
.chip.is-active { color: #1a1408; background: linear-gradient(180deg, #e7d3a8, #c9a96e); box-shadow: 0 8px 20px -8px rgba(201, 169, 110, 0.8); }

/* eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font: 700 0.72rem/1 var(--font-ui);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }

.gold-text {
  background: linear-gradient(180deg, #f3e3bf 0%, #c9a96e 55%, #9d7c44 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}