*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
:root {
  --cream: #f5f0e8;
  --warm: #ede5d4;
  --warm-deep: #e0d4bc;
  --olive: #3a3928;
  --olive-mid: #4d4c38;
  --olive-light: #626048;
  --gold: #c9a84c;
  --gold-light: #e8d48a;
  --gold-pale: #f0e4b0;
  --gold-dark: #a07830;
  --charcoal: #201c12;
  --muted: #8a7e6a;
  --border: #d6cbb8;
  --border-light: #e8e0d0;
  --red: #b03a2e;
  --green: #2a7048;
  --orange: #c06418;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --shadow-gold: 0 0 40px rgba(201, 168, 76, 0.12);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
 
html {
  scroll-behavior: smooth;
}
 
body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}
 
::-webkit-scrollbar {
  width: 5px;
}
 
::-webkit-scrollbar-track {
  background: var(--warm);
}
 
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 2px;
}
 
.page {
  display: none;
  min-height: 100vh;
}
 
.page.active {
  display: block;
}
 
.page-content {
  padding-top: 72px;
}
 
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(32, 28, 18, 0.96);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  height: 72px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}
 
.nav-logo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0;
}
 
.nav-logo span {
  color: var(--gold);
  font-style: italic;
}
 
.nav-logo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 8px;
  flex-shrink: 0;
  opacity: 0.7;
}
 
.nav-tagline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
}
 
.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}
 
.nav-links a {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 212, 138, 0.6);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition);
  position: relative;
  padding-bottom: 4px;
}
 
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--gold);
  transition: right var(--transition);
}
 
.nav-links a:hover,
.nav-links a.active {
  color: var(--gold-light);
}
 
.nav-links a:hover::after,
.nav-links a.active::after {
  right: 0;
}
 
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
 
/* ── Account dropdown ── */
.acct-menu { position: relative; }

.acct-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: var(--gold-light);
  padding: 5px 12px 5px 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.12em;
  transition: all var(--transition);
}
.acct-trigger:hover,
.acct-menu.open .acct-trigger { background: rgba(201, 168, 76, 0.1); border-color: var(--gold); }
.acct-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.acct-trigger-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { font-size: 10px; opacity: .7; transition: transform .2s ease; }
.acct-menu.open .acct-caret { transform: rotate(180deg); }

.acct-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: var(--charcoal);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; letter-spacing: 0; flex-shrink: 0;
  text-transform: uppercase;
}
.acct-avatar-lg { width: 40px; height: 40px; font-size: 14px; }

.acct-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--gold);
  box-shadow: 0 14px 36px rgba(32, 28, 18, 0.28);
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.acct-menu.open .acct-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.acct-dropdown::before {
  content: ''; position: absolute; top: -9px; right: 22px;
  border: 6px solid transparent; border-bottom-color: var(--gold); border-top: 0;
}

.acct-dd-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--cream);
  border-bottom: 1px solid var(--border-light);
}
.acct-dd-who { min-width: 0; }
.acct-dd-name { font-family: var(--font-display); font-size: 17px; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-dd-email { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.acct-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 12px 18px; font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.06em; color: var(--charcoal);
  transition: background .15s ease, color .15s ease;
}
.acct-item:hover, .acct-item:focus-visible { background: var(--cream); color: var(--gold-dark); outline: none; }
.acct-item-ico { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.acct-item-txt { flex: 1; }
.acct-item-badge {
  background: var(--gold); color: var(--charcoal); border-radius: 10px;
  min-width: 20px; height: 20px; padding: 0 6px; font-size: 10px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.acct-sep { height: 1px; background: var(--border-light); margin: 4px 0; }
.acct-item-danger { color: var(--red); }
.acct-item-danger:hover, .acct-item-danger:focus-visible { background: rgba(176, 58, 46, 0.08); color: var(--red); }

.basket-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  transition: all var(--transition);
  background: none;
  border: 1px solid rgba(201, 168, 76, 0.35);
  padding: 8px 18px;
  font-family: var(--font-body);
}
 
.basket-btn:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: var(--gold);
}
 
.basket-count {
  background: var(--gold);
  color: var(--charcoal);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
 
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  padding: 14px 34px;
}
 
.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
}
 
.btn-gold:hover {
  background: var(--gold-dark);
  color: white;
  letter-spacing: 0.28em;
}
 
.btn-olive {
  background: var(--olive);
  color: var(--gold-light);
  border: 1px solid rgba(201, 168, 76, 0.2);
}
 
.btn-olive:hover {
  background: var(--olive-light);
}
 
.btn-outline {
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.5);
  color: var(--gold-light);
}
 
.btn-outline:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: var(--gold);
}
 
.btn-outline-gold {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
 
.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--charcoal);
}
 
.btn-cream {
  background: var(--warm);
  color: var(--olive);
  border: 1px solid var(--border);
}
 
.btn-cream:hover {
  background: var(--warm-deep);
}
 
.btn-sm {
  padding: 9px 20px;
  font-size: 9px;
}
 
.btn-danger {
  background: var(--red);
  color: white;
  border: none;
}
 
.btn-danger:hover {
  background: #922f24;
}
 
.btn-full {
  width: 100%;
}
 
.btn-google {
  background: white;
  color: #3c3c3c;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 12px 24px;
}
 
.btn-google:hover {
  background: #f8f8f8;
  border-color: #ccc;
}
 
.g-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat;
}
 
.chooser-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 8, 0.75);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(6px);
}
 
.chooser-overlay.open {
  opacity: 1;
  pointer-events: all;
}
 
.chooser-card {
  background: var(--cream);
  padding: 52px 44px;
  width: 400px;
  max-width: 95vw;
  text-align: center;
  position: relative;
  border-top: 3px solid var(--gold);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
}
 
.chooser-logo {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--charcoal);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
 
.chooser-logo span {
  color: var(--gold);
  font-style: italic;
}
 
.chooser-sub {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}
 
.chooser-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 24px;
  font-style: italic;
}
 
.chooser-divider {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 28px;
  opacity: 0.5;
}
 
.chooser-btn {
  width: 100%;
  padding: 17px;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--warm);
  color: var(--charcoal);
  border: 1px solid var(--border);
}
 
.chooser-btn:hover {
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold);
  letter-spacing: 0.26em;
}
 
.chooser-btn.admin {
  background: var(--olive);
  color: var(--gold-light);
  border-color: transparent;
}
 
.chooser-btn.admin:hover {
  background: var(--charcoal);
}
 
.chooser-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}
 
.chooser-close:hover {
  color: var(--charcoal);
}
 
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
 
.auth-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--olive-mid) 0%, var(--charcoal) 60%, #120e06 100%);
}
 
.auth-bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
 
.auth-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
 
.auth-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.1);
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-ring 6s ease-in-out infinite;
}
 
@keyframes pulse-ring {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.1;
  }
}
 
.auth-card {
  background: rgba(32, 28, 18, 0.94);
  border: 1px solid rgba(201, 168, 76, 0.2);
  padding: 56px 52px;
  width: 520px;
  max-width: 95vw;
  position: relative;
  z-index: 1;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(201, 168, 76, 0.1);
}
 
.auth-card-top-line {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
 
.auth-brand {
  font-family: var(--font-display);
  font-size: 19px;
  text-align: center;
  color: var(--gold-light);
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}
 
.auth-brand span {
  color: var(--gold);
  font-style: italic;
}
 
.auth-tagline {
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.35);
  text-align: center;
  margin-bottom: 40px;
}
 
.auth-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 300;
  color: var(--gold-light);
  margin-bottom: 32px;
  line-height: 1.1;
}
 
.auth-title em {
  font-style: italic;
  color: var(--gold);
}
 
.auth-err {
  background: rgba(176, 58, 46, 0.12);
  border-left: 2px solid rgba(176, 58, 46, 0.6);
  color: #e8a09a;
  font-size: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  display: none;
  letter-spacing: 0.02em;
}
 
.auth-switch {
  font-size: 13px;
  color: rgba(201, 168, 76, 0.4);
  text-align: center;
  margin-top: 20px;
}
 
.auth-switch a {
  color: var(--gold);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  padding-bottom: 1px;
  transition: border-color var(--transition);
}
 
.auth-switch a:hover {
  border-color: var(--gold);
}
 
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}
 
.auth-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(201, 168, 76, 0.15);
}
 
.auth-divider-text {
  font-size: 10px;
  color: rgba(201, 168, 76, 0.3);
  letter-spacing: 0.14em;
}
 
.form-group {
  margin-bottom: 20px;
}
 
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
 
.form-label {
  display: block;
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.45);
  margin-bottom: 8px;
}
 
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1px solid rgba(201, 168, 76, 0.15);
  background: rgba(255, 255, 255, 0.04);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gold-light);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
 
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(201, 168, 76, 0.5);
  background: rgba(255, 255, 255, 0.07);
}
 
.form-input::placeholder {
  color: rgba(201, 168, 76, 0.2);
}
 
.form-select option {
  background: var(--charcoal);
  color: var(--cream);
}
 
.form-textarea {
  resize: vertical;
  min-height: 86px;
}
 
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
}
 
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--olive-mid) 0%, var(--charcoal) 45%, #0f0c05 100%);
}
 
.hero-bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
 
.hero-leaf-l {
  position: absolute;
  left: -40px;
  top: -40px;
  bottom: -40px;
  width: 360px;
  background: linear-gradient(to right, rgba(30, 38, 16, 0.85), transparent);
  pointer-events: none;
}
 
.hero-leaf-r {
  position: absolute;
  right: -40px;
  top: -40px;
  bottom: -40px;
  width: 360px;
  background: linear-gradient(to left, rgba(30, 38, 16, 0.85), transparent);
  pointer-events: none;
}
 
.hero-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 68%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.1);
  animation: pulse-ring 6s ease-in-out infinite;
  pointer-events: none;
}
 
.hero-content {
  position: relative;
  z-index: 2;
}
 
.hero-logo-svg {
  margin: 0 auto 28px;
  animation: fadeUp 1s ease both 0.3s;
  display: block;
}
 
.hero-eyebrow {
  font-size: 9px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  animation: fadeUp 1s ease both 0.1s;
}
 
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 300;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(232, 212, 138, 0.6);
  margin-bottom: 8px;
  animation: fadeUp 1s ease both 0.45s;
}
 
.hero-headline-big {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.5vw, 96px);
  font-weight: 300;
  line-height: 0.95;
  color: var(--gold-light);
  font-style: italic;
  animation: fadeUp 1s ease both 0.58s;
}
 
.hero-headline-big em {
  color: var(--gold);
  font-style: italic;
}
 
.hero-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(232, 212, 138, 0.4);
  max-width: 380px;
  margin: 24px auto 44px;
  line-height: 2.2;
  animation: fadeUp 1s ease both 0.72s;
}
 
.hero-cta {
  animation: fadeUp 1s ease both 0.88s;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
 
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 7px;
  letter-spacing: 0.34em;
  color: rgba(201, 168, 76, 0.35);
  text-transform: uppercase;
  animation: fadeUp 1s ease both 1.1s;
}
 
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scroll-anim 2.5s ease-in-out infinite;
}
 
@keyframes scroll-anim {
  0%,
  100% {
    transform: scaleY(1) translateY(0);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.35) translateY(-8px);
    opacity: 0.3;
  }
}
 
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
.marquee-section {
  padding: 14px 0;
  overflow: hidden;
  background: rgba(32, 28, 18, 0.95);
  border-top: 1px solid rgba(201, 168, 76, 0.12);
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
 
.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: mq 28s linear infinite;
}
 
.marquee-item {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: rgba(201, 168, 76, 0.4);
  flex-shrink: 0;
}
 
.marquee-sep {
  color: rgba(201, 168, 76, 0.25);
  margin: 0 2px;
  font-size: 10px;
}
 
@keyframes mq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}
 
.section {
  padding: 96px 72px;
}
 
.section-eyebrow {
  font-size: 8px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
 
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 52px;
  color: var(--charcoal);
}
 
.section-title em {
  font-style: italic;
  color: var(--gold);
}
 
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
 
.featured-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--warm);
  transition: transform var(--transition);
}
 
.featured-card:hover {
  transform: translateY(-4px);
}
 
.featured-card:hover .featured-card-img-inner {
  transform: scale(1.05);
}
 
.featured-card-img {
  height: 380px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, #e8ddc8, #d8ccb4);
}
 
.featured-card-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
 
.featured-card-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
.featured-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32, 28, 18, 0.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition);
}
 
.featured-card:hover .featured-card-img-overlay {
  opacity: 1;
}
 
.featured-card-body {
  padding: 24px 26px;
  background: white;
}
 
.featured-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--charcoal);
  margin-bottom: 4px;
}
 
.featured-card-mat {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
 
.featured-card-price {
  font-size: 14px;
  color: var(--gold-dark);
  font-family: var(--font-display);
}
 
.featured-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 7px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 12px;
  font-weight: 500;
}
 
.about-section {
  background: var(--olive);
  padding: 88px 72px;
}
 
.about-section .section-title {
  color: var(--gold-light);
}
 
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
 
.value-card {
  padding: 44px 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 168, 76, 0.12);
  transition: background var(--transition), border-color var(--transition);
}
 
.value-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(201, 168, 76, 0.25);
}
 
.value-icon {
  font-size: 26px;
  margin-bottom: 20px;
  opacity: 0.9;
}
 
.value-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-light);
  margin-bottom: 12px;
}
 
.value-desc {
  font-size: 12px;
  color: rgba(232, 212, 138, 0.4);
  line-height: 2;
}
 
footer {
  background: var(--charcoal);
  color: var(--gold-light);
  padding: 70px 72px 50px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 52px;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
}
 
.footer-brand {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  margin-bottom: 16px;
  color: var(--gold);
}
 
.footer-brand span {
  font-style: italic;
}
 
.footer-desc {
  font-size: 12px;
  color: rgba(201, 168, 76, 0.35);
  line-height: 2;
  max-width: 260px;
}
 
.footer-col-title {
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
 
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.footer-links a {
  font-size: 12px;
  color: rgba(201, 168, 76, 0.35);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition);
}
 
.footer-links a:hover {
  color: var(--gold-light);
}
 
.footer-bottom {
  background: var(--charcoal);
  border-top: 1px solid rgba(201, 168, 76, 0.08);
  padding: 20px 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.footer-copy {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(201, 168, 76, 0.25);
}
 
.admin-portal-link {
  color: rgba(201, 168, 76, 0.25);
  text-decoration: none;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 0.1em;
  transition: color var(--transition);
}
 
.admin-portal-link:hover {
  color: var(--gold);
}
 
.shop-header {
  background: var(--olive-mid);
  padding: 48px 72px 32px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
 
.shop-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 300;
  color: var(--gold-light);
}
 
.shop-title em {
  font-style: italic;
  color: var(--gold);
}
 
.shop-subtitle {
  font-size: 11px;
  color: rgba(201, 168, 76, 0.4);
  margin-top: 6px;
  letter-spacing: 0.06em;
}
 
.search-bar-wrap {
  margin-top: 24px;
  display: flex;
}
 
.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid rgba(201, 168, 76, 0.2);
  background: rgba(255, 255, 255, 0.05);
  padding: 0 18px;
  gap: 12px;
  max-width: 540px;
  flex: 1;
  transition: border-color var(--transition), background var(--transition);
}
 
.search-bar:focus-within {
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
 
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--gold-light);
  background: transparent;
  padding: 13px 0;
}
 
.search-bar input::placeholder {
  color: rgba(201, 168, 76, 0.25);
}
 
.search-icon {
  color: rgba(201, 168, 76, 0.35);
  font-size: 14px;
  flex-shrink: 0;
}
 
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
 
.chip {
  padding: 6px 18px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  background: transparent;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  color: rgba(201, 168, 76, 0.45);
  font-family: var(--font-body);
}
 
.chip.active,
.chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}
 
.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 70vh;
}
 
.sidebar {
  border-right: 1px solid var(--border-light);
  padding: 32px 26px;
  background: white;
}
 
.sidebar-section {
  margin-bottom: 36px;
}
 
.sidebar-title {
  font-size: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
 
.sidebar-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--charcoal);
  user-select: none;
  transition: color var(--transition);
}
 
.sidebar-option:hover {
  color: var(--gold-dark);
}
 
.sidebar-option input[type='checkbox'] {
  accent-color: var(--gold);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
 
.price-range {
  display: flex;
  gap: 8px;
  align-items: center;
}
 
.price-input {
  flex: 1;
  border: 1px solid var(--border);
  padding: 9px 11px;
  font-size: 12px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition);
  background: var(--cream);
  color: var(--charcoal);
}
 
.price-input:focus {
  border-color: var(--gold);
}
 
.price-sep {
  color: var(--muted);
  font-size: 12px;
}
 
.products-area {
  padding: 30px 40px;
  background: var(--cream);
}
 
.products-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}
 
.products-count {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
 
.sort-select {
  border: 1px solid var(--border);
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--charcoal);
  outline: none;
  background: white;
  cursor: pointer;
  transition: border-color var(--transition);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
 
.sort-select:focus {
  border-color: var(--gold);
}
 
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
 
.product-card {
  background: white;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: box-shadow 0.35s, transform 0.35s;
  cursor: pointer;
}
 
.product-card:hover {
  box-shadow: 0 14px 44px rgba(42, 35, 24, 0.12);
  transform: translateY(-4px);
}
 
.product-img {
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #ede5d4, #ddd3bc);
}
 
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
 
.product-card:hover .product-img img {
  transform: scale(1.07);
}
 
.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 500;
}
 
.product-info {
  padding: 18px 20px;
}
 
.product-name {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 3px;
  color: var(--charcoal);
}
 
.product-material {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
 
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
 
.product-price {
  font-size: 16px;
  color: var(--gold-dark);
  font-family: var(--font-display);
}
 
.inquiry-btn {
  background: var(--olive);
  color: var(--gold-light);
  border: none;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 13px;
  font-family: var(--font-body);
  transition: background var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
 
.inquiry-btn:hover {
  background: var(--charcoal);
}
 
.out-of-stock-label {
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.04em;
}
 
.no-products {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 40px;
  color: var(--muted);
}
 
.care-section {
  padding: 80px 72px;
  background: var(--warm);
  border-top: 1px solid var(--border-light);
}
 
.care-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
 
.care-card {
  background: white;
  border: 1px solid var(--border-light);
  padding: 36px 30px;
  transition: box-shadow var(--transition);
}
 
.care-card:hover {
  box-shadow: 0 8px 28px rgba(42, 35, 24, 0.08);
}
 
.care-icon {
  font-size: 24px;
  margin-bottom: 16px;
}
 
.care-title {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--charcoal);
}
 
.care-tips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
.care-tips li {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  line-height: 1.8;
}
 
.care-tips li::before {
  content: '—';
  color: var(--gold);
  flex-shrink: 0;
  opacity: 0.7;
}
 
.detail-page {
  padding-top: 72px;
  background: var(--cream);
  min-height: 100vh;
}
 
.detail-breadcrumb {
  padding: 18px 72px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border-light);
  background: white;
  display: flex;
  align-items: center;
  gap: 8px;
}
 
.detail-breadcrumb a {
  cursor: pointer;
  color: var(--gold-dark);
  text-decoration: none;
  transition: color var(--transition);
}
 
.detail-breadcrumb a:hover {
  color: var(--charcoal);
}
 
.detail-breadcrumb-sep {
  color: var(--border);
  font-size: 12px;
}
 
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
 
.detail-img-area {
  background: linear-gradient(145deg, #ede5d4, #d8ccb4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 130px;
  position: relative;
  overflow: hidden;
  min-height: 540px;
}
 
.detail-img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
.detail-img-deco {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  pointer-events: none;
}
 
.detail-img-deco-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0.5;
}
 
.detail-img-deco-corner.tl {
  top: 20px;
  left: 20px;
  border-width: 1px 0 0 1px;
}
 
.detail-img-deco-corner.tr {
  top: 20px;
  right: 20px;
  border-width: 1px 1px 0 0;
}
 
.detail-img-deco-corner.bl {
  bottom: 20px;
  left: 20px;
  border-width: 0 0 1px 1px;
}
 
.detail-img-deco-corner.br {
  bottom: 20px;
  right: 20px;
  border-width: 0 1px 1px 0;
}
 
.detail-info-area {
  padding: 56px 60px;
  background: white;
  display: flex;
  flex-direction: column;
}
 
.detail-badge {
  display: inline-block;
  font-size: 7px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 14px;
  background: var(--gold);
  color: var(--charcoal);
  margin-bottom: 20px;
  width: fit-content;
  font-weight: 500;
}
 
.detail-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 8px;
  color: var(--charcoal);
}
 
.detail-category {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
 
.detail-price {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--gold-dark);
  margin-bottom: 8px;
}
 
.detail-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
 
.detail-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 2;
  margin-bottom: 32px;
  flex: 1;
}
 
.detail-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-light);
  margin-bottom: 32px;
}
 
.detail-spec {
  padding: 15px 20px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
 
.detail-spec:nth-child(even) {
  border-right: none;
}
 
.detail-spec:nth-last-child(-n + 2) {
  border-bottom: none;
}
 
.detail-spec-label {
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 5px;
}
 
.detail-spec-val {
  font-size: 13px;
  color: var(--charcoal);
}
 
.detail-materials {
  background: var(--cream);
  border: 1px solid var(--border-light);
  padding: 20px;
  margin-bottom: 32px;
}
 
.detail-materials-title {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
  font-weight: 500;
}
 
.detail-materials-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
 
.detail-materials-list li {
  font-size: 13px;
  color: var(--charcoal);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
 
.detail-materials-list li::before {
  content: '·';
  color: var(--gold);
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.3;
}
 
.basket-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 8, 0.55);
  z-index: 1800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
 
.basket-overlay.open {
  opacity: 1;
  pointer-events: all;
}
 
.basket-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 440px;
  z-index: 1801;
  background: var(--olive-mid);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(201, 168, 76, 0.15);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
}
 
.basket-drawer.open {
  transform: translateX(0);
}
 
.basket-head {
  padding: 24px 28px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--charcoal);
}
 
.basket-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-light);
}
 
.basket-title span {
  font-size: 12px;
  color: rgba(201, 168, 76, 0.35);
  font-family: var(--font-body);
  font-weight: 300;
  margin-left: 8px;
}
 
.close-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: rgba(201, 168, 76, 0.35);
  transition: color var(--transition);
  line-height: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.close-btn:hover {
  color: var(--gold);
}
 
.basket-select-all {
  padding: 13px 28px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 212, 138, 0.5);
  cursor: pointer;
}
 
.basket-select-all input {
  accent-color: var(--gold);
  width: 13px;
  height: 13px;
}
 
.basket-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 28px;
}
 
.basket-empty {
  text-align: center;
  padding: 64px 0;
  color: rgba(201, 168, 76, 0.3);
}
 
.basket-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
 
.basket-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  align-items: flex-start;
}
 
.basket-item-check {
  margin-top: 5px;
  accent-color: var(--gold);
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
 
.basket-item-img {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  overflow: hidden;
}
 
.basket-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
.basket-item-info {
  flex: 1;
}
 
.basket-item-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-light);
  margin-bottom: 3px;
}
 
.basket-item-price {
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 10px;
}
 
.basket-item-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
 
.qty-btn {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(201, 168, 76, 0.25);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--transition);
  color: var(--gold-light);
  font-family: var(--font-body);
}
 
.qty-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
 
.qty-num {
  font-size: 13px;
  min-width: 20px;
  text-align: center;
  color: var(--gold-light);
}
 
.basket-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(201, 168, 76, 0.25);
  font-size: 13px;
  transition: color var(--transition);
  line-height: 1;
  align-self: flex-start;
}
 
.basket-item-remove:hover {
  color: var(--red);
}
 
.basket-foot {
  padding: 22px 28px;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
  background: var(--charcoal);
}
 
.basket-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
 
.basket-total-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
}
 
.basket-total-amt {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
}
 
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 8, 0.72);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  backdrop-filter: blur(5px);
}
 
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
 
.modal {
  background: white;
  width: 580px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(24px);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  border-top: 2px solid var(--gold);
}
 
.modal-overlay.open .modal {
  transform: translateY(0);
}
 
.modal-head {
  padding: 26px 30px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}
 
.modal-head-brand {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
 
.modal-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--charcoal);
}
 
.modal-body {
  padding: 30px;
}
 
.modal-foot {
  padding: 18px 30px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--cream);
}
 
.inq-selected-box {
  background: var(--cream);
  border: 1px solid var(--border-light);
  padding: 18px 20px;
  margin-bottom: 22px;
}
 
.inq-selected-title {
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
 
.inq-selected-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--charcoal);
  padding: 5px 0;
}
 
.inq-selected-item span {
  color: var(--gold-dark);
}
 
.inq-disclaimer {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 18px;
  padding: 13px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(201, 168, 76, 0.04);
}
 
.light .form-label {
  color: var(--muted);
}
 
.light .form-input,
.light .form-select,
.light .form-textarea {
  background: var(--cream);
  border-color: var(--border-light);
  color: var(--charcoal);
}
 
.light .form-input:focus,
.light .form-select:focus,
.light .form-textarea:focus {
  border-color: var(--gold);
  background: white;
}
 
.light .form-input::placeholder {
  color: var(--muted);
}
 
.chat-modal {
  background: white;
  width: 680px;
  max-width: 95vw;
  height: 85vh;
  max-height: 680px;
  display: flex;
  flex-direction: column;
  transform: translateY(24px);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  border-top: 2px solid var(--gold);
}
 
.modal-overlay.open .chat-modal {
  transform: translateY(0);
}
 
.chat-header {
  padding: 0 26px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--charcoal);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  flex-shrink: 0;
}
 
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 13px;
}
 
.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  font-style: italic;
  flex-shrink: 0;
  border: 1px solid rgba(201, 168, 76, 0.25);
}
 
.chat-header-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold-light);
}
 
.chat-header-status {
  font-size: 9px;
  color: rgba(201, 168, 76, 0.35);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
 
.chat-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
 
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--cream);
}
 
.msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
 
.msg-row.user {
  flex-direction: row-reverse;
}
 
.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
 
.msg-avatar.bot {
  background: var(--olive);
  font-family: var(--font-display);
  color: var(--gold);
  font-style: italic;
  font-size: 12px;
}
 
.msg-avatar.user {
  background: var(--warm-deep);
  font-size: 14px;
}
 
.msg-bubble {
  max-width: 74%;
  padding: 15px 20px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--charcoal);
}
 
.msg-bubble.bot {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 2px 14px 14px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
 
.msg-bubble.user {
  background: var(--olive);
  color: var(--gold-light);
  border-radius: 14px 2px 14px 14px;
}
 
.msg-bubble b {
  font-weight: 500;
}
 
.msg-bubble ul {
  margin: 8px 0 0 18px;
}
 
.msg-bubble ul li {
  margin-bottom: 5px;
}
 
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
 
.qr-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--charcoal);
  font-size: 12px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
  border-radius: 24px;
}
 
.qr-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: rgba(201, 168, 76, 0.06);
}
 
.qr-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
 
.feedback-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
 
.feedback-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 6px 18px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
  border-radius: 20px;
}
 
.feedback-btn:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}
 
.feedback-btn.yes {
  border-color: var(--green);
  color: var(--green);
}
 
.feedback-btn.no-btn {
  border-color: var(--orange);
  color: var(--orange);
}
 
.chat-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  flex-shrink: 0;
}
 
.chat-input {
  flex: 1;
  border: 1px solid var(--border-light);
  background: var(--cream);
  padding: 11px 15px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--charcoal);
  outline: none;
  transition: border-color var(--transition);
  resize: none;
  height: 44px;
}
 
.chat-input:focus {
  border-color: var(--gold);
}
 
.chat-send {
  width: 40px;
  height: 40px;
  background: var(--gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
}
 
.chat-send:hover {
  background: var(--gold-dark);
}
 
.chat-attach {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  padding: 0 4px;
  transition: color var(--transition);
}
 
.chat-attach:hover {
  color: var(--gold-dark);
}
 
.typing-indicator {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 2px 14px 14px 14px;
  width: fit-content;
}
 
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing 1.4s ease-in-out infinite;
}
 
.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}
 
.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}
 
@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-7px);
    opacity: 1;
  }
}
 
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  color: white;
  padding: 14px 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 220px;
  font-family: var(--font-body);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}
 
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
 
.toast-gold {
  background: var(--gold-dark);
}
 
.toast-red {
  background: var(--red);
}
 
.toast-dark {
  background: var(--charcoal);
}
.spinner-overlay{position:fixed;inset:0;background:rgba(32,28,18,.6);z-index:9000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.spinner-overlay.show{opacity:1;pointer-events:all;}
.spinner{width:40px;height:40px;border:3px solid rgba(201,168,76,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
 
.stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
 
.stock-in {
  background: var(--green);
}
 
.stock-low {
  background: var(--orange);
}
 
.stock-out {
  background: var(--red);
}
 
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
 
.inq-tab{
  padding:12px 28px;font-family:var(--font-body);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;border:none;background:rgba(255,255,255,.06);
  color:rgba(201,168,76,.45);border-bottom:2px solid transparent;
  transition:all var(--transition);
}
.inq-tab:hover{color:var(--gold-light);background:rgba(255,255,255,.1);}
.inq-tab.active{
  color:var(--gold-light);background:rgba(255,255,255,.12);
  border-bottom-color:var(--gold);
}
 
.hero-section-dots{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:10;}
.section-dot{width:8px;height:8px;border-radius:50%;background:rgba(201,168,76,.3);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(201,168,76,.4);}
.section-dot:hover{background:rgba(201,168,76,.7);transform:scale(1.3);}
.section-dot.active{background:var(--gold);width:10px;height:10px;border-color:var(--gold);}
 
.trust-badge-card{padding:36px 28px;background:var(--cream);border:1px solid var(--border-light);text-align:center;transition:box-shadow .3s,transform .3s,background .3s;}
.trust-badge-card:hover{box-shadow:0 10px 32px rgba(42,35,24,.1);transform:translateY(-4px);background:white;}
.trust-badge-icon{font-size:32px;margin-bottom:16px;display:block;}
.trust-badge-title{font-family:var(--font-display);font-size:18px;color:var(--charcoal);margin-bottom:10px;}
.trust-badge-desc{font-size:11px;color:var(--muted);line-height:1.9;letter-spacing:.02em;}
.payment-method-card{padding:24px 20px;background:white;border:1px solid var(--border-light);text-align:center;transition:box-shadow .28s,transform .28s;}
.payment-method-card:hover{box-shadow:0 6px 20px rgba(42,35,24,.08);transform:translateY(-3px);}
 
.inq-card{background:white;border:1px solid var(--border-light);padding:22px 26px;margin-bottom:14px;cursor:pointer;transition:box-shadow .28s,transform .28s;}
.inq-card:hover{box-shadow:0 8px 28px rgba(42,35,24,.1);transform:translateY(-2px);}
.inq-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;}
.inq-card-id{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px;}
.inq-card-msg{font-size:13px;color:var(--charcoal);line-height:1.6;}
.inq-card-bottom{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding-top:12px;border-top:1px solid var(--border-light);}
.inq-status-badge{display:inline-block;padding:4px 13px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;border-radius:20px;}
.inq-status-pending{background:rgba(192,100,24,.1);color:var(--orange);border:1px solid rgba(192,100,24,.2);}
.inq-status-read{background:rgba(42,80,112,.1);color:#2a5070;border:1px solid rgba(42,80,112,.2);}
.inq-status-replied{background:rgba(42,112,72,.1);color:var(--green);border:1px solid rgba(42,112,72,.2);}
.inq-status-closed{background:rgba(138,126,106,.1);color:var(--muted);border:1px solid rgba(138,126,106,.2);}
.inq-unread-dot{margin-top:6px;font-size:9px;letter-spacing:.1em;color:white;background:var(--red);padding:3px 10px;border-radius:20px;text-align:center;}
 
 
.inq-card-closed {
  opacity: .82;
  border-left: 3px solid rgba(138,126,106,.3);
}
 
.inq-card-unread {
  border-left: 3px solid var(--gold);
  background: rgba(201,168,76,.04);
}
.inq-card-unread:hover {
  background: rgba(201,168,76,.07);
}
 
.inq-card-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 7px;
  letter-spacing: .02em;
}
 
.inq-card-closed-label {
  display: inline-block;
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(138,126,106,.12);
  border: 1px solid rgba(138,126,106,.2);
  border-radius: 20px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
}
 
.inq-tap-hint {
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(138,126,106,.6);
  text-transform: uppercase;
}
 
.msg-bubble-new {
  box-shadow: 0 0 0 2px rgba(201,168,76,.25);
  background: #fffef8 !important;
}
 
#msgbox-status-bar {
  display: none;
  padding: 9px 24px;
  background: rgba(138,126,106,.08);
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .03em;
  line-height: 1.7;
}
 
.spinner-overlay{position:fixed;inset:0;background:rgba(32,28,18,.6);z-index:9000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.spinner-overlay.show{opacity:1;pointer-events:all;}
.spinner{width:40px;height:40px;border:3px solid rgba(201,168,76,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
 
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE (added — none of the above had @media queries before)
   Breakpoints: 860px (tablet/small-laptop), 480px (phone)
═══════════════════════════════════════════════════════════════ */

/* Mobile nav toggle (hidden on desktop) */
.nav-burger{display:none;background:none;border:1px solid rgba(201,168,76,.3);color:var(--gold-light);font-size:16px;line-height:1;padding:8px 13px;cursor:pointer;font-family:var(--font-body);}
.nav-burger:hover{border-color:var(--gold);color:var(--gold);}

@media (max-width:860px){
  nav{padding:0 20px;}
  .nav-tagline{display:none;}
  .nav-burger{display:flex;align-items:center;justify-content:center;}
  .nav-links{display:none;}
  .nav-right{
    position:fixed;top:72px;left:0;right:0;z-index:899;
    background:rgba(32,28,18,.98);backdrop-filter:blur(10px);
    flex-direction:column;align-items:stretch;gap:10px;
    padding:18px 20px;border-bottom:1px solid rgba(201,168,76,.15);
    display:none;
  }
  .nav-right.mobile-open{display:flex;}
  .nav-right .basket-btn,.nav-right .btn{width:100%;justify-content:center;}
  .acct-menu{width:100%;}
  .acct-trigger{width:100%;justify-content:center;padding:8px 14px;}
  .acct-trigger-name{max-width:none;}
  /* inside the mobile menu the dropdown opens inline instead of floating */
  .acct-dropdown{position:static;min-width:0;width:100%;margin-top:8px;box-shadow:none;transform:none;display:none;opacity:1;visibility:visible;}
  .acct-dropdown::before{display:none;}
  .acct-menu.open .acct-dropdown{display:block;}

  .section{padding:56px 24px;}
  .about-section{padding:56px 24px;}
  .care-section{padding:56px 24px;}
  .section-title{margin-bottom:32px;}

  .featured-grid{grid-template-columns:1fr;}
  .featured-card-img{height:300px;}
  .values-grid{grid-template-columns:1fr;gap:1px;}
  .care-grid{grid-template-columns:1fr;gap:16px;}

  footer{grid-template-columns:1fr;padding:44px 24px 36px;gap:32px;}
  .footer-desc{max-width:none;}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center;padding:18px 24px;}

  .shop-header{padding:32px 24px 24px;}
  .shop-title{font-size:32px;}
  .shop-layout{grid-template-columns:1fr;}
  .sidebar{border-right:none;border-bottom:1px solid var(--border-light);padding:22px 20px;}
  .products-area{padding:22px 16px;}
  .products-meta{flex-wrap:wrap;gap:10px;}

  .detail-breadcrumb{padding:14px 20px;}
  .detail-layout{grid-template-columns:1fr;min-height:auto;}
  .detail-img-area{min-height:320px;font-size:90px;}
  .detail-info-area{padding:32px 24px;}

  .basket-drawer{width:min(440px,100vw);}

  .hero-section-dots{display:none;}
}

@media (max-width:480px){
  .hero-sub{max-width:92%;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}

  .form-row{grid-template-columns:1fr;}
  .auth-card{padding:40px 24px;}
  .auth-title{font-size:26px;}
  .chooser-card{padding:40px 24px;}

  .basket-drawer{width:100vw;}
  .basket-head,.basket-items,.basket-foot{padding-left:20px;padding-right:20px;}

  .chat-modal{height:92vh;}
  .chat-header{padding:0 16px;}
  .chat-messages{padding:16px;}
  .chat-foot{padding:10px 14px;}

  .modal-head,.modal-body,.modal-foot{padding-left:20px;padding-right:20px;}

  .detail-price{font-size:28px;}
  .detail-specs{grid-template-columns:1fr;}
  .detail-spec{border-right:none !important;}
  .detail-spec:nth-last-child(-n+2){border-bottom:1px solid var(--border-light);}
  .detail-spec:last-child{border-bottom:none;}
}

/* ── Notification bell (customer nav) ── */
.ntf-menu{position:relative;}
.ntf-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:38px;height:38px;background:none;border:1px solid rgba(201,168,76,.35);color:var(--gold-light);cursor:pointer;font-size:16px;line-height:1;transition:all var(--transition);font-family:var(--font-body);}
.ntf-btn:hover,.ntf-menu.open .ntf-btn{background:rgba(201,168,76,.1);border-color:var(--gold);}
.ntf-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.ntf-label{display:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
.ntf-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:500;line-height:1;display:flex;align-items:center;justify-content:center;border:2px solid #201c12;letter-spacing:0;}
.ntf-panel{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border-light);border-top:3px solid var(--gold);box-shadow:0 14px 36px rgba(32,28,18,.28);z-index:950;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;color:var(--charcoal);}
.ntf-menu.open .ntf-panel{opacity:1;visibility:visible;transform:translateY(0);}
.ntf-panel::before{content:'';position:absolute;top:-9px;right:13px;border:6px solid transparent;border-bottom-color:var(--gold);border-top:0;}
.ntf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-light);background:var(--cream);}
.ntf-head-title{font-family:var(--font-display);font-size:18px;color:var(--charcoal);}
.ntf-head-actions{display:flex;gap:12px;}
.ntf-link{background:none;border:0;font-family:var(--font-body);font-size:11px;color:var(--gold-dark);cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;}
.ntf-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.ntf-list{max-height:min(400px,60vh);overflow-y:auto;}
.ntf-item{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--border-light);padding:12px 16px;cursor:pointer;font-family:var(--font-body);transition:background .15s;}
.ntf-item:last-child{border-bottom:0;}
.ntf-item:hover,.ntf-item:focus-visible{background:var(--cream);outline:none;}
.ntf-item.unread{background:rgba(201,168,76,.1);}
.ntf-item.unread:hover{background:rgba(201,168,76,.18);}
.ntf-ico{font-size:18px;line-height:1.2;flex-shrink:0;width:24px;text-align:center;}
.ntf-body{flex:1;min-width:0;}
.ntf-title{font-size:12px;font-weight:500;color:var(--charcoal);display:flex;align-items:center;gap:6px;letter-spacing:.02em;}
.ntf-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;}
.ntf-msg{display:block;font-size:12px;color:#52514e;margin-top:2px;line-height:1.45;word-wrap:break-word;}
.ntf-time{display:block;font-size:10px;color:var(--muted);margin-top:4px;}
.ntf-empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:12px;}
.ntf-empty b{display:block;font-size:26px;margin-bottom:8px;font-weight:400;}
.nav-burger{position:relative;}
.nav-burger.has-unread::after{content:'';position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid #201c12;}
@media (max-width:860px){
  .nav-right .ntf-menu{width:100%;}
  .nav-right .ntf-btn{width:100%;}
  .ntf-label{display:inline;}
  .ntf-count{position:static;margin-left:4px;border-color:transparent;}
  .ntf-panel{position:static;width:100%;max-width:none;margin-top:8px;box-shadow:none;transform:none;display:none;opacity:1;visibility:visible;}
  .ntf-panel::before{display:none;}
  .ntf-menu.open .ntf-panel{display:block;}
}

/* My Orders — Pay now */
.order-paynow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--border-light);background:rgba(201,168,76,.07);}
.order-paynow span{font-size:12px;color:var(--muted,#7a7260);}
.btn-paynow{background:var(--gold);color:#1c1a12;border:none;padding:10px 22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-paynow:hover{filter:brightness(1.08);}
.btn-paynow:disabled{opacity:.6;cursor:wait;}


/* ══════════════════════════════════════════════════════════════════════════
   THEME — "Monstera Glass"  (matches the NR logo: forest green + yellow-gold, frosted glass, clean sans)
   Everything in this block is the theme. Delete the block to go back to the old cream/olive look.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* palette (re-maps the old variable names so every existing rule picks it up) */
  --cream:#f3f6f0; --warm:#e8eee3; --warm-deep:#d8e2d1;
  --olive:#0e2418; --olive-mid:#16382a; --olive-light:#2f6b46;
  --gold:#e3b82a; --gold-light:#f6dd73; --gold-pale:#fbefb5; --gold-dark:#8d6c05;
  --charcoal:#08160e; --muted:#667668; --border:#cdd9c6; --border-light:#e0e8da;
  --font-display:'Inter',sans-serif;
  --glass:rgba(10,28,19,.58); --glass-line:rgba(246,221,115,.22);

  /* ── IMAGE SLOTS ─────────────────────────────────────────────────────────
     Placeholders are used while these are "none". When you have a photo, put it in an  images/  folder
     next to index.html and change the line, e.g.   --img-hero:url('images/hero.jpg');  */
  --img-hero:none;
  --img-rings:url('images/img-rings.webp'); --img-necklaces:url(images/img-necklaces.webp); --img-earrings:url(images/img-earrings.webp); --img-bracelets:url(images/img-bracelets.webp);
}
body{font-weight:300;}
h1,h2,h3,.section-title,.shop-title,.orders-page-title,.account-page-title{font-weight:500;letter-spacing:.01em;}
.section-title em,.shop-title em,.hero-headline-big em,[class*="title"] em{font-style:normal;color:var(--gold-dark);}
.section-eyebrow{color:var(--gold-dark);font-weight:500;letter-spacing:.34em;}
::-webkit-scrollbar-thumb{background:var(--olive-light);}

/* ── NAV: frosted glass ── */
nav{background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--glass-line);}
.nav-logo{gap:12px;color:var(--gold);}
.nav-mark{height:38px;width:auto;color:var(--gold);filter:drop-shadow(0 0 8px rgba(227,184,42,.35));}
.nav-wordmark{font-family:var(--font-body);font-size:10px;font-weight:300;letter-spacing:.38em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap;}
.nav-wordmark i{font-style:normal;color:var(--gold);margin:0 2px;}
.nav-tagline{display:none;}
.nav-links a{color:rgba(255,255,255,.7);}
.nav-links a:hover,.nav-links a.active{color:var(--gold-light);}

/* ── BUTTONS ── */
.btn{font-weight:500;}
.btn-gold{background:linear-gradient(180deg,#f2cc43,#dcaa14);color:#10200f;border-color:transparent;box-shadow:0 6px 18px rgba(227,184,42,.25);}
.btn-gold:hover{background:linear-gradient(180deg,#f8dc6c,#e6b624);color:#10200f;}
.btn-outline{background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

/* ── HERO: forest + leaf glow + pearl light ── */
.hero-bg{background:
    var(--img-hero),
    radial-gradient(60% 55% at 50% 52%,rgba(227,184,42,.20) 0%,rgba(227,184,42,0) 62%),
    radial-gradient(45% 70% at 8% 20%,rgba(63,128,70,.55) 0%,rgba(63,128,70,0) 70%),
    radial-gradient(40% 65% at 94% 85%,rgba(40,98,58,.55) 0%,rgba(40,98,58,0) 70%),
    radial-gradient(35% 40% at 80% 8%,rgba(92,150,60,.28) 0%,rgba(92,150,60,0) 70%),
    linear-gradient(160deg,#143a28 0%,#0a1f15 48%,#050e09 100%);
  background-size:cover;background-position:center;}
.hero-leaf-l{background:linear-gradient(to right,rgba(5,14,9,.65),transparent);}
.hero-leaf-r{background:linear-gradient(to left,rgba(5,14,9,.65),transparent);}
.hero-glow{background:radial-gradient(circle,rgba(246,221,115,.16) 0%,transparent 66%);}
.hero-ring{border-color:rgba(246,221,115,.14);}
.hero-content{padding:40px 44px 44px;border:1px solid var(--glass-line);border-radius:4px;background:rgba(6,20,13,.34);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 30px 80px rgba(0,0,0,.35);max-width:min(860px,92vw);}
.hero-logo-svg{width:200px;height:auto;color:var(--gold);filter:drop-shadow(0 0 18px rgba(227,184,42,.45));margin-bottom:22px;}
.hero-eyebrow{color:var(--gold-light);font-weight:400;}
.hero-headline{color:rgba(255,255,255,.72);font-weight:300;}
.hero-headline-big{font-weight:500;font-style:normal;color:#fff;letter-spacing:-.01em;line-height:1;}
.hero-headline-big em{color:var(--gold);font-style:normal;}
.hero-sub{color:rgba(255,255,255,.6);}

/* ── MARQUEE ── */
.marquee-section{background:rgba(6,20,13,.96);border-color:var(--glass-line);}
.marquee-item{font-family:var(--font-body);font-style:normal;font-weight:300;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.marquee-sep{color:var(--gold);opacity:.7;}

/* ── CATEGORY TILES (placeholders; photos go in via the image slots) ── */
.cat-section{background:var(--cream);}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.cat-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:4/5;min-height:300px;padding:26px 24px;border:0;cursor:pointer;text-align:left;overflow:hidden;color:#fff;font-family:inherit;isolation:isolate;
  background-size:cover;background-position:center;transition:transform .35s ease,box-shadow .35s ease;}
.cat-tile::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,14,9,.78) 0%,rgba(4,14,9,.12) 55%,rgba(4,14,9,0) 100%);}
.cat-tile::after{content:'';position:absolute;z-index:-1;width:120px;height:120px;right:-30px;top:-30px;border-radius:50%;background:radial-gradient(circle,rgba(246,221,115,.55),rgba(246,221,115,0) 70%);opacity:.7;transition:opacity .35s,transform .35s;}
.cat-tile:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(8,22,14,.28);}
.cat-tile:hover::after{opacity:1;transform:scale(1.5);}
.cat-name{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:.01em;}
.cat-link{font-size:11px;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.7);align-self:flex-start;padding-bottom:3px;color:#fff;}
.cat-rings{background-image:var(--img-rings),radial-gradient(70% 60% at 30% 25%,rgba(63,128,70,.9),transparent 70%),linear-gradient(150deg,#1d4a33,#0a1f15);}
.cat-necklaces{background-image:var(--img-necklaces),radial-gradient(70% 60% at 70% 30%,rgba(92,150,60,.75),transparent 70%),linear-gradient(150deg,#16382a,#07150e);}
.cat-earrings{background-image:var(--img-earrings),radial-gradient(70% 60% at 25% 35%,rgba(40,98,58,.95),transparent 70%),linear-gradient(150deg,#1a4430,#091a11);}
.cat-bracelets{background-image:var(--img-bracelets),radial-gradient(70% 60% at 65% 25%,rgba(79,140,75,.8),transparent 70%),linear-gradient(150deg,#12302a,#06130d);}

/* ── FEATURED / PRODUCT CARDS ── */
.featured-card,.product-card{border-color:var(--border-light);}
.featured-card-name,.product-name{font-family:var(--font-display);font-weight:500;}
.featured-card-price,.product-price{color:var(--gold-dark);font-family:var(--font-display);font-weight:500;}

/* ── DARK BANNERS / FOOTER / OVERLAYS ── */
.shop-header,.orders-hero,.account-hero{background:linear-gradient(150deg,var(--olive-mid) 0%,var(--charcoal) 70%);}
footer{background:var(--charcoal);}
.footer-brand{font-family:var(--font-body);font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:13px;}
.footer-brand span{font-style:normal;color:var(--gold);}
.chooser-card{backdrop-filter:blur(14px);}
.acct-dropdown,.ntf-panel{border-top-color:var(--gold);}


/* fixes found in review */
nav{background:rgba(7,20,13,.84);}
.nav-logo span.nav-wordmark{font-style:normal;color:rgba(255,255,255,.82);}
.nav-logo .nav-wordmark i{color:var(--gold);}
.about-section .section-eyebrow,.hero .section-eyebrow{color:var(--gold);}
.about-section .section-title em{color:var(--gold);}
.about-section .value-desc{color:rgba(255,255,255,.66);}

/* closed basket drawer must not leak its shadow onto the page edge */
.basket-drawer{box-shadow:none;visibility:hidden;transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s;}
.basket-drawer.open{box-shadow:-20px 0 60px rgba(0,0,0,.4);visibility:visible;transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s;}
/* text on the dark banners (shop / orders / account) */
.shop-header .shop-title em,.shop-title em{color:var(--gold);}
.shop-header .shop-title{color:#fff;}
.shop-subtitle{color:rgba(255,255,255,.62)!important;}
.filter-chips .chip{color:rgba(255,255,255,.72);border-color:rgba(246,221,115,.28);background:rgba(255,255,255,.04);}
.filter-chips .chip:hover{color:var(--gold-light);border-color:var(--gold);}
.filter-chips .chip.active{background:var(--gold);color:#10200f;border-color:var(--gold);}
.search-bar{background:rgba(255,255,255,.08);border-color:rgba(246,221,115,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.search-bar input{color:#fff;}
.search-bar input::placeholder{color:rgba(255,255,255,.5);}
.orders-page-title em,.account-page-title em{color:var(--gold);}
nav{background:rgba(7,20,13,.9);}
/* product photo placeholders (shown when a product has no image) */
.featured-card-img-inner,.product-img,.detail-img-main{background:linear-gradient(145deg,#e7efe1,#d2e0ca);}
.featured-card-img-inner,.product-img{color:var(--olive-light);}
@media (max-width:860px){
  nav{background:rgba(8,22,14,.88);}
  .nav-right{background:rgba(8,22,14,.97);border-bottom-color:var(--glass-line);}
  .nav-mark{height:32px;} .nav-wordmark{font-size:9px;letter-spacing:.26em;}
  .hero-content{padding:28px 20px 32px;}
  .hero-logo-svg{width:150px;}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .cat-tile{min-height:220px;padding:18px 16px;}
  .cat-name{font-size:21px;}
}
@media (max-width:480px){ .nav-wordmark{display:none;} }


/* ══════════ PEARL DROP — the pearl from the logo, used as the site's signature ══════════ */
/* 1) hero monogram draws itself, then the pearl drops into the U */
.hero-logo-svg.pd{overflow:visible;}
.pd-lines path{stroke-dasharray:1;stroke-dashoffset:1;animation:pd-draw 1.5s cubic-bezier(.65,0,.35,1) .35s forwards;}
.pd-lines path:nth-child(2){animation-delay:.75s;animation-duration:1.1s;}
.pd-lines path:nth-child(3){animation-delay:1.35s;animation-duration:.5s;}
.pd-pearl{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:pd-drop 1.05s cubic-bezier(.34,0,.4,1) 1.7s forwards;}
.pd-ring{transform-box:fill-box;transform-origin:center;opacity:0;animation:pd-ripple 1.3s ease-out 2.45s 1 forwards;}
@keyframes pd-draw{to{stroke-dashoffset:0;}}
@keyframes pd-drop{
  0%{transform:translateY(-120px) scale(.9,1.1);opacity:0;}
  12%{opacity:1;}
  55%{transform:translateY(0) scale(1.18,.82);}
  72%{transform:translateY(-14px) scale(.95,1.05);}
  88%{transform:translateY(0) scale(1.06,.94);}
  100%{transform:translateY(0) scale(1,1);opacity:1;}
}
@keyframes pd-ripple{0%{opacity:.9;transform:scale(1);}100%{opacity:0;transform:scale(3.4);}}
.pd-pearl{filter:drop-shadow(0 0 10px rgba(246,221,115,.7));}

/* 2) loader: a pearl rolling along a gold line */
.spinner.pd-loader{width:120px;height:18px;border:0;border-radius:0;animation:none;position:relative;background:linear-gradient(90deg,transparent,rgba(246,221,115,.55) 20%,rgba(246,221,115,.55) 80%,transparent) center/100% 1px no-repeat;}
.pd-roll{position:absolute;top:1px;left:0;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4c2,#e3b82a 55%,#7a5a05);box-shadow:0 0 12px rgba(246,221,115,.8);animation:pd-roll 1.1s cubic-bezier(.5,0,.5,1) infinite alternate;}
@keyframes pd-roll{from{transform:translateX(0) rotate(0);}to{transform:translateX(104px) rotate(540deg);}}
.spinner-overlay{background:rgba(5,14,9,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}

/* 3) scroll progress: a thin gold line with the pearl travelling down it */
.pd-progress{position:fixed;right:14px;top:96px;bottom:96px;width:1px;background:linear-gradient(to bottom,transparent,rgba(160,120,10,.35) 12%,rgba(160,120,10,.35) 88%,transparent);z-index:850;opacity:0;pointer-events:none;transition:opacity .3s;}
.pd-progress.on{opacity:1;}
.pd-progress-pearl{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4c2,#e3b82a 55%,#7a5a05);box-shadow:0 0 10px rgba(227,184,42,.8);}

/* 4) pearl bullet before every section label */
.section-eyebrow::before{content:'';display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;vertical-align:1px;background:radial-gradient(circle at 35% 30%,#fff4c2,#e3b82a 55%,#7a5a05);box-shadow:0 0 8px rgba(227,184,42,.55);}

/* 5) category tiles: the pearl-light follows the cursor */
.cat-tile::after{left:var(--mx,85%);top:var(--my,10%);right:auto;width:220px;height:220px;margin:-110px 0 0 -110px;transform:none;transition:opacity .35s;}
.cat-tile:hover::after{transform:none;opacity:1;}

@media (max-width:860px){ .pd-progress{display:none;} }
@media (prefers-reduced-motion:reduce){
  .pd-lines path{animation:none;stroke-dashoffset:0;}
  .pd-pearl{animation:none;opacity:1;}
  .pd-ring,.pd-roll{animation:none;}
  .pd-ring{opacity:0;}
}


/* ══════════ HOMEPAGE LAYOUT — big single-colour blocks + editorial category grid ══════════ */
.section{padding:120px 72px;}
.section-title{font-size:clamp(36px,5.2vw,68px);font-weight:500;letter-spacing:-.02em;line-height:1.02;margin-bottom:64px;}
.cat-section{background:var(--cream);}
.cat-grid{grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,minmax(260px,1fr));gap:10px;}
.cat-tile{aspect-ratio:auto;min-height:260px;}
.cat-rings{grid-row:1 / span 2;min-height:540px;}
.cat-bracelets{grid-column:2 / span 2;}
.cat-num{font-family:var(--font-display);font-weight:200;font-size:clamp(54px,7vw,104px);line-height:.9;color:rgba(246,221,115,.9);letter-spacing:-.04em;margin-bottom:6px;}
.cat-rings .cat-num{font-size:clamp(80px,11vw,168px);}
.cat-name{font-size:clamp(22px,2.2vw,32px);}
.section:not(.cat-section){background:#fff;}
.about-section{background:var(--olive);padding:120px 72px;}
#trust-sec{background:var(--cream)!important;padding-top:110px!important;padding-bottom:100px!important;border-top:0!important;}
@media (max-width:860px){
  .section,.about-section{padding:72px 22px;}
  #trust-sec{padding-left:22px!important;padding-right:22px!important;}
  .section-title{margin-bottom:36px;}
  .cat-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;}
  .cat-rings{grid-row:auto;grid-column:1 / span 2;min-height:300px;}
  .cat-bracelets{grid-column:auto;}
  .cat-necklaces,.cat-earrings,.cat-bracelets{min-height:200px;}
  .cat-num{font-size:48px;} .cat-rings .cat-num{font-size:72px;}
}

/* mobile: the trust badges grid was a fixed 5 columns and pushed the page wider than the screen */
@media (max-width:860px){
  #trust-sec div[style*="repeat(5"]{grid-template-columns:1fr 1fr!important;}
  #trust-sec div[style*="repeat(2"]{grid-template-columns:1fr!important;}
}
@media (max-width:420px){ #trust-sec div[style*="repeat(5"]{grid-template-columns:1fr!important;} }
html,body{max-width:100%;overflow-x:hidden;}


/* ══════════ HERO v2 — editorial split: type on the left, giant NR + pearl on the right (no box) ══════════ */
@media (min-width:861px){
  .hero{justify-content:flex-start;text-align:left;min-height:680px;}
  .hero-content{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:3vw;align-items:center;width:100%;max-width:1360px;margin:0 auto;padding:72px 6vw 0;
    background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
  .hero-content > *{grid-column:1;}
  .hero-logo-svg{grid-column:2!important;grid-row:1 / span 6;width:min(38vw,560px);justify-self:center;margin:0;filter:drop-shadow(0 0 40px rgba(227,184,42,.35));}
  .hero-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:34px;color:var(--gold-light);}
  .hero-eyebrow::before{content:'';width:56px;height:1px;background:var(--gold);}
  .hero-headline{font-size:clamp(12px,1.2vw,15px);letter-spacing:.5em;color:rgba(255,255,255,.6);margin-bottom:6px;}
  .hero-headline-big{font-size:clamp(64px,8vw,118px);font-weight:600;letter-spacing:-.035em;line-height:.9;text-align:left;}
  .hero-headline-big em{display:block;color:transparent;-webkit-text-stroke:2px var(--gold);}
  .hero-sub{margin:34px 0 44px;max-width:360px;text-align:left;font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.62);line-height:2;}
  .hero-cta{justify-content:flex-start;}
  .hero-glow{left:71%;width:900px;height:900px;background:radial-gradient(circle,rgba(246,221,115,.2) 0%,transparent 64%);}
  .hero-ring{left:71%!important;}
  .hero-scroll{left:6vw;transform:none;align-items:flex-start;}
}
@media (max-width:860px){
  .hero{height:auto;min-height:100vh;padding:96px 0 72px;}
  .hero-content{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:0 24px;}
  .hero-logo-svg{width:58vw;max-width:260px;}
  .hero-headline-big{font-size:clamp(52px,16vw,84px);font-weight:600;letter-spacing:-.03em;}
  .hero-headline-big em{display:block;color:transparent;-webkit-text-stroke:1.5px var(--gold);}
}

/* ── Cancel unpaid order ── */
.order-paynow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn-cancel-order{background:transparent;border:1px solid var(--border,#d6cbb8);color:var(--red,#b03a2e);padding:9px 16px;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:999px;transition:background .15s,border-color .15s}
.btn-cancel-order:hover{background:rgba(176,58,46,.08);border-color:var(--red,#b03a2e)}
.btn-cancel-order:disabled{opacity:.6;cursor:default}

.co-pay-fee{font-weight:500;color:var(--gold-dark,#a07830);white-space:nowrap;align-self:center;font-size:13px}

/* ── Return / refund request ── */
.order-return{margin-top:12px;padding:12px 14px;border-left:3px solid var(--gold,#c9a84c);background:rgba(201,168,76,.1);font-size:13px;display:flex;flex-direction:column;gap:3px}
.order-return strong{font-weight:500}.order-return span{opacity:.85;line-height:1.5}
.order-return.rr-refunded{border-color:#2a7048;background:rgba(42,112,72,.1)}
.order-return.rr-rejected{border-color:#b03a2e;background:rgba(176,58,46,.08)}
.rm-overlay{position:fixed;inset:0;background:rgba(20,16,8,.6);z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px}
.rm-card{background:#fff;color:#201c12;width:440px;max-width:100%;padding:26px;border-top:3px solid var(--gold,#c9a84c);box-shadow:0 24px 60px rgba(0,0,0,.35);max-height:92vh;overflow:auto}
.rm-card h3{font-family:var(--font-display,serif);font-weight:400;font-size:22px;margin-bottom:6px}
.rm-sub{font-size:12px;color:#8a7e6a;margin-bottom:16px;line-height:1.6}
.rm-card label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a7e6a;margin:12px 0 6px}
.rm-card select,.rm-card textarea{width:100%;padding:10px 12px;border:1px solid #d6cbb8;font:inherit;font-size:14px;background:#fff;color:#201c12}
.rm-err{color:#b03a2e;font-size:12px;min-height:16px;margin-top:8px}
.rm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* ── Product reviews ── */
.stars{display:inline-flex;gap:1px;color:#d9d2c0;font-size:16px;line-height:1}
.stars.sm{font-size:13px}.stars .on{color:var(--gold)}.stars .half{color:var(--gold);opacity:.55}
.card-rating{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:2px 0 4px}
.detail-reviews{max-width:900px;margin:36px auto 0;padding:0 4px}
.rv-title{font-size:22px;margin-bottom:14px}
.rv-empty{color:var(--muted);font-size:14px}
.rv-summary{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:14px 0 18px;border-bottom:1px solid var(--border)}
.rv-big{font-size:46px;line-height:1;font-weight:500}
.rv-count{font-size:12px;color:var(--muted);margin-top:4px}
.rv-bars{flex:1;min-width:200px;display:grid;gap:4px}
.rv-bar{display:grid;grid-template-columns:26px 1fr 22px;gap:8px;align-items:center;font-size:11px;color:var(--muted)}
.rv-bar div{height:6px;background:#e7e0d0;border-radius:4px;overflow:hidden}.rv-bar i{display:block;height:100%;background:var(--gold)}
.rv-item{padding:14px 0;border-bottom:1px solid var(--border)}
.rv-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.rv-ver{color:#2a7048;font-size:11px}.rv-date{color:var(--muted);font-size:11px;margin-left:auto}
.rv-ttl{font-weight:500;margin:6px 0 2px}.rv-item p,.order-review p{font-size:14px;margin:2px 0;white-space:pre-wrap;word-break:break-word}
.order-review{margin-top:10px;padding:10px 12px;border:1px dashed var(--border);font-size:13px}
.order-review em{color:var(--muted);font-size:11px}
.rv-pick{display:flex;gap:4px;margin-bottom:10px}
.rv-pick button{background:none;border:none;font-size:30px;line-height:1;color:#d9d2c0;cursor:pointer;padding:0 2px}
.rv-pick button.on{color:var(--gold)}
#review-modal input{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--border);margin-bottom:10px;background:#fff}

#auth-modal input{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--border);margin-bottom:10px;background:#fff;color:var(--charcoal)}

.co-voucher{display:flex;gap:8px;margin-top:12px}
.co-voucher input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--border);font:inherit;font-size:13px;text-transform:uppercase;background:#fff;color:#201c12}
.co-voucher button{padding:9px 16px;border:1px solid var(--gold-dark,#a07830);background:transparent;color:var(--gold-dark,#a07830);font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.co-voucher-msg{font-size:12px;margin-top:6px;min-height:16px}

/* wishlist / alerts */
.wish-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(201,168,76,.5);background:rgba(20,20,12,.55);color:#e8d48a;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;padding:0}
.wish-btn.on{color:#e25555;border-color:#e25555}
.wish-btn.inline{position:static;display:inline-flex;vertical-align:middle;margin-left:8px;width:32px;height:32px}
.wl-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #e7e0d0}
.wl-img{width:72px;height:72px;flex:none;background:#f1ece0;display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden;cursor:pointer}
.wl-img img{width:100%;height:100%;object-fit:cover}
.wl-info{flex:1;min-width:0}.wl-name{font-weight:500;cursor:pointer}.wl-price{font-size:13px;color:#8a7e6a;margin:2px 0 8px}
.wl-out{color:#b03a2e;font-size:11px;margin-left:6px}.wl-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── Back button + back to top ── */
.page-back{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0 24px;padding:8px 16px;background:rgba(255,255,255,.7);border:1px solid var(--border-light,#e6dccb);border-radius:999px;font-family:var(--font-body);font-size:12px;letter-spacing:.06em;color:var(--charcoal,#2a2318);cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,transform .2s;position:relative;z-index:5}
.page-back:hover{background:#fff;transform:translateX(-2px)}
.page-back.on-auth{position:absolute;top:84px;left:20px;margin:0;z-index:20}
#back-top{position:fixed;right:28px;bottom:100px;z-index:790;width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,168,76,.5);background:var(--charcoal,#2a2318);color:var(--gold-light,#e8d49a);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s}
#back-top.show{opacity:1;transform:none;pointer-events:auto}
#back-top:hover{background:#3a3928}
@media(max-width:600px){.page-back{margin-left:14px}#back-top{right:16px;bottom:92px}}


/* ══════════════════════════════════════════════════════════════════════════
   NUR LOOK — flat, calm, taken from the logo
   Colours come straight from the logo photo: NR yellow, monstera olive, near-black.
   No glass, glow, blur or gradients. Delete this block to return to the "Monstera Glass" theme.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --cream:#f3f2e7; --warm:#e9ead6; --warm-deep:#dcdec3;
  --olive:#11110c; --olive-mid:#27281a; --olive-light:#566030;
  --gold:#f7cf17; --gold-light:#f9de5c; --gold-pale:#fcf0a8; --gold-dark:#7a6500;
  --charcoal:#0b0c07; --muted:#6b6e55; --border:#d2d4bb; --border-light:#e2e4cf;
  --glass:#0b0c07; --glass-line:#27281a;
  --leaf:#566030; --leaf-2:#6f7d30; --ink:#0b0c07; --yellow:#f7cf17;
}
body{font-weight:400;color:var(--ink);}
h1,h2,h3,.section-title,.shop-title,.orders-page-title,.account-page-title{font-weight:500;letter-spacing:-.01em;}
.section-title em,.shop-title em,.hero-headline-big em,[class*="title"] em{color:var(--leaf);}
.section-eyebrow{color:var(--leaf);font-weight:500;letter-spacing:.16em;}
.section-eyebrow::before{width:8px;height:8px;border-radius:0;background:var(--yellow);margin-right:10px;vertical-align:0;}
::-webkit-scrollbar-thumb{background:var(--leaf);}

/* nav: solid ink, no blur */
nav,nav:hover{background:var(--ink)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid var(--olive-mid);box-shadow:none;}
.nav-mark{filter:none;}
.nav-wordmark{letter-spacing:.3em;}
.nav-links a{color:#d9dac6;} .nav-links a:hover,.nav-links a.active{color:var(--yellow);}
.nav-right{background:transparent;}

/* buttons: flat, square-ish */
.btn,.btn-gold,.btn-outline,.inquiry-btn,.buy-now-btn,.btn-paynow{border-radius:2px;box-shadow:none;letter-spacing:.08em;}
.btn-gold{background:var(--yellow);color:var(--ink);}
.btn-gold:hover{background:#e6bd0a;color:var(--ink);}
.btn-outline{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(243,242,231,.45);color:#f3f2e7;}
.btn-outline:hover{border-color:var(--yellow);color:var(--yellow);}
.btn-paynow{background:var(--yellow);}

/* hero: one flat colour, the logo is the picture */
.hero-bg{background:var(--ink)!important;}
.hero-leaf-l,.hero-leaf-r,.hero-glow,.hero-ring,.pd-progress{display:none!important;}
.hero-logo-svg,.hero-logo-svg.pd{filter:none!important;}
.pd-pearl{filter:none;}
.hero-headline-big{font-weight:500;letter-spacing:-.03em;}
.hero-headline-big em{color:var(--yellow)!important;-webkit-text-stroke:0!important;}
.hero-eyebrow{color:var(--yellow);} .hero-eyebrow::before{background:var(--yellow);}
.hero-headline,.hero-sub{color:rgba(243,242,231,.7)!important;}
.marquee-section{background:var(--olive-mid);border-color:var(--olive-mid);}
.marquee-item{color:rgba(243,242,231,.7);letter-spacing:.2em;}

/* category tiles: flat olive blocks */
.cat-tile{border-radius:2px;transition:none;}
.cat-tile::before{background:linear-gradient(to top,rgba(11,12,7,.45),rgba(11,12,7,0) 55%);}
.cat-tile::after{display:none;}
.cat-tile:hover{transform:none;box-shadow:none;outline:3px solid var(--yellow);outline-offset:-3px;}
.cat-rings{background-color:#566030;background-image:var(--img-rings);}
.cat-necklaces{background-color:#27281a;background-image:var(--img-necklaces);}
.cat-earrings{background-color:#6f7d30;background-image:var(--img-earrings);}
.cat-bracelets{background-color:#3b4220;background-image:var(--img-bracelets);}
.cat-num{color:var(--yellow);font-weight:300;}
.cat-link{letter-spacing:.14em;border-bottom-color:var(--yellow);}
.section:not(.cat-section){background:var(--cream);}
.about-section,.shop-header,footer{background:var(--ink);}
.orders-hero,.account-hero{background:var(--ink);}
#trust-sec{background:var(--warm)!important;}
.footer-brand{letter-spacing:.24em;}

/* shop page: compact light header + sidebar + cards */
.shop-header{background:var(--cream);padding:34px 48px 18px;border-bottom:1px solid var(--border);}
.shop-header .shop-title{color:var(--ink);font-size:34px;margin:0;}
.shop-header .shop-title em{color:var(--leaf);}
.shop-subtitle{color:var(--muted)!important;margin:4px 0 16px;}
.search-bar{background:#fff;border:1px solid var(--border);border-radius:2px;backdrop-filter:none;-webkit-backdrop-filter:none;}
.search-bar input{color:var(--ink);} .search-bar input::placeholder{color:#8a8d72;}
.filter-chips .chip{color:var(--ink);border:1px solid var(--border);background:transparent;border-radius:2px;letter-spacing:.06em;}
.filter-chips .chip:hover{border-color:var(--ink);color:var(--ink);}
.filter-chips .chip.active{background:var(--ink);color:var(--yellow);border-color:var(--ink);}
.sidebar{border-right:1px solid var(--border);}
.sidebar-title{letter-spacing:.14em;color:var(--muted);}
.product-card,.featured-card{border:1px solid var(--border);border-radius:2px;box-shadow:none;background:#fff;transition:border-color .15s;}
.product-card:hover,.featured-card:hover{border-color:var(--ink);transform:none;box-shadow:none;}
.featured-card-img-inner,.product-img,.detail-img-main{background:var(--warm);}
.featured-card-img-inner,.product-img{color:var(--leaf);}
.product-price,.featured-card-price,.detail-price{color:var(--ink);}
.product-badge,.detail-badge{background:var(--ink);color:var(--yellow);border-radius:2px;}
.inquiry-btn{background:transparent;border:1px solid var(--ink);color:var(--ink);}
.inquiry-btn:hover{background:var(--ink);color:var(--yellow);}
.buy-now-btn{background:var(--yellow);color:var(--ink);border:0;}
.buy-now-btn:hover{background:#e6bd0a;}
.page-back,.page-back.on-auth{border-radius:2px;backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;}
.chip,.sort-select,.price-input{border-radius:2px;}
.chooser-card{backdrop-filter:none;border-radius:2px;}
.acct-dropdown,.ntf-panel{border-top-color:var(--yellow);box-shadow:0 8px 24px rgba(11,12,7,.18);border-radius:2px;}
.spinner-overlay{background:rgba(11,12,7,.82);backdrop-filter:none;-webkit-backdrop-filter:none;}
.spinner.pd-loader{background:linear-gradient(90deg,transparent,#566030 20%,#566030 80%,transparent);}
.pd-roll{background:var(--yellow);box-shadow:none;}
#back-top{border-radius:2px;border-color:var(--ink);background:var(--ink);color:var(--yellow);box-shadow:none;}
.chat-fab{box-shadow:none;}
.basket-drawer.open{box-shadow:-8px 0 30px rgba(11,12,7,.25);}
.btn-cancel-order{border-radius:2px;}
.rm-card{border-top-color:var(--yellow);border-radius:2px;}

/* phone: app-style bottom tabs */
.tabbar{display:none;}
@media (max-width:860px){
  .shop-header{padding:22px 18px 14px;}
  body.has-tabbar{padding-bottom:64px;}
  body.has-tabbar .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:880;background:var(--ink);border-top:1px solid var(--olive-mid);padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .tabbar button{flex:1;background:none;border:0;color:#b9baa3;font:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;cursor:pointer;position:relative;}
  .tabbar button b{font-size:19px;font-weight:400;line-height:1;}
  .tabbar button.on{color:var(--yellow);}
  .tabbar .tab-count{position:absolute;top:2px;left:calc(50% + 8px);background:var(--yellow);color:var(--ink);font-size:10px;font-weight:600;min-width:16px;height:16px;line-height:16px;border-radius:8px;padding:0 4px;letter-spacing:0;}
  body.has-tabbar #back-top{bottom:140px;}
  body.has-tabbar .chat-fab{bottom:76px;}
  body.has-tabbar .nav-burger{display:none;}
  body.has-tabbar .nav-right{display:flex!important;position:static;background:transparent;border:0;padding:0;}
  body.has-tabbar .nav-right .basket-btn,body.has-tabbar .nav-right .acct-menu{display:none!important;}
}

/* card footer: price on top, the two buttons side by side (they used to overflow the card) */
.product-footer{flex-wrap:wrap;align-items:center;}
.product-footer .product-price{flex:1 1 100%;margin-bottom:4px;}
.product-footer .inquiry-btn{flex:1 1 0;width:auto!important;margin-top:0!important;min-width:0;padding:10px 6px;}
.product-footer .buy-now-btn{flex:1 1 0;min-width:0;margin:0;padding:10px 6px;}
.price-input{min-width:0;width:100%;} .price-range{min-width:0;}
.sidebar{min-width:0;box-sizing:border-box;}
@media (min-width:861px){.shop-layout{grid-template-columns:240px minmax(0,1fr);}}
@media (max-width:860px){.shop-layout{grid-template-columns:minmax(0,1fr);}.sidebar{border-right:0;border-bottom:1px solid var(--border);}}
.product-badge{left:10px;right:auto;}
@media (max-width:860px){
  .sidebar{display:flex;flex-wrap:wrap;gap:12px 24px;padding:14px 18px;}
  .sidebar-section:first-child{display:none;}
  .sidebar-section{flex:1 1 180px;margin:0;}
}

/* welcome voucher card */
.welcome-card{align-items:center;justify-content:space-between;gap:18px;background:var(--ink);color:#f3f2e7;border-radius:2px;padding:20px 24px;margin:0 0 22px;flex-wrap:wrap;}
.wc-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:4px;}
.wc-big{font-size:30px;font-weight:500;line-height:1.1;}
.wc-sub{font-size:12px;color:#b9baa3;margin-top:4px;} .wc-sub b{color:var(--yellow);font-weight:500;letter-spacing:.06em;}
.wc-btn{background:transparent;border:1px solid var(--yellow);color:var(--yellow);padding:10px 20px;border-radius:2px;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.wc-btn:hover{background:var(--yellow);color:var(--ink);}


/* ── SMART ASSISTANT ── */
.ai-fab,.ai-panel{display:none;}
body.has-tabbar .ai-fab{display:flex;align-items:center;gap:6px;position:fixed;right:96px;bottom:28px;z-index:800;background:var(--ink);color:var(--yellow);border:0;border-radius:2px;padding:0 18px;height:56px;font:inherit;font-size:13px;letter-spacing:.06em;cursor:pointer;}
body.has-tabbar .ai-fab:hover{background:#1d1f10;}
body.has-tabbar .ai-panel.open{display:flex;flex-direction:column;position:fixed;right:28px;bottom:96px;z-index:900;width:370px;max-width:calc(100vw - 24px);height:540px;max-height:calc(100vh - 120px);background:var(--paper,#f3f2e7);border:1px solid var(--ink);border-radius:2px;box-shadow:0 12px 40px rgba(11,12,7,.28);}
.ai-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:var(--ink);color:var(--yellow);padding:14px 16px;}
.ai-title{font-size:16px;font-weight:500;letter-spacing:.04em;} .ai-sub{font-size:11px;color:#b9baa3;margin-top:3px;letter-spacing:.02em;}
.ai-x{background:none;border:0;color:var(--yellow);font-size:24px;line-height:1;cursor:pointer;padding:0 2px;}
.ai-log{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;}
.ai-msg{max-width:88%;padding:9px 12px;font-size:13px;line-height:1.5;border-radius:2px;word-wrap:break-word;}
.ai-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--border);color:var(--ink);}
.ai-msg.me{align-self:flex-end;background:var(--ink);color:#fff;}
.ai-cards{display:flex;flex-direction:column;gap:8px;align-self:stretch;}
.ai-card{display:flex;gap:10px;background:#fff;border:1px solid var(--border);padding:8px;border-radius:2px;}
.ai-card .ai-th{width:58px;height:58px;flex:none;background:var(--warm);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;}
.ai-card .ai-th img{width:100%;height:100%;object-fit:cover;}
.ai-card .ai-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ai-card .ai-nm{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-card .ai-pr{font-size:13px;color:var(--ink);} .ai-card .ai-rs{font-size:11px;color:var(--muted);}
.ai-card .ai-ac{display:flex;gap:6px;margin-top:4px;}
.ai-card .ai-ac button{font:inherit;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:2px;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);}
.ai-card .ai-ac button.pri{background:var(--yellow);border-color:var(--yellow);}
.ai-quick{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px;}
.ai-quick button{font:inherit;font-size:12px;background:transparent;border:1px solid var(--ink);color:var(--ink);padding:5px 10px;border-radius:2px;cursor:pointer;}
.ai-quick button:hover{background:var(--ink);color:var(--yellow);}
.ai-form{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border);}
.ai-form input{flex:1;min-width:0;border:1px solid var(--border);padding:10px 12px;font:inherit;font-size:14px;border-radius:2px;background:#fff;}
.ai-form button{background:var(--yellow);color:var(--ink);border:0;padding:0 16px;font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;cursor:pointer;}
.ai-form button:disabled{opacity:.5;}
.ai-typing{align-self:flex-start;color:var(--muted);font-size:12px;}
@media (max-width:860px){
  body.has-tabbar .ai-fab{right:84px;bottom:76px;height:48px;padding:0 14px;font-size:12px;}
  body.has-tabbar .ai-panel.open{left:8px;right:8px;width:auto;max-width:none;bottom:70px;height:calc(100vh - 170px);max-height:none;}
}
/* "You may also like" on the product page */
.detail-similar{max-width:1100px;margin:34px auto 0;padding:0 4px;}
.detail-similar:empty{display:none;}
.ds-title{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--ink);padding-top:16px;margin-bottom:14px;}
.ds-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.ds-card{background:#fff;border:1px solid var(--border);border-radius:2px;cursor:pointer;display:flex;flex-direction:column;}
.ds-card:hover{border-color:var(--ink);}
.ds-img{aspect-ratio:1/1;background:var(--warm);display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden;}
.ds-img img{width:100%;height:100%;object-fit:cover;}
.ds-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;}
.ds-nm{font-size:13px;font-weight:500;color:var(--ink);} .ds-pr{font-size:13px;color:var(--ink);} .ds-why{font-size:11px;color:var(--muted);}

.toast{pointer-events:none;}
.ai-quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:none;}
.ai-quick::-webkit-scrollbar{display:none;}
.ai-quick button{white-space:nowrap;flex:none;}
.ai-quick:empty{display:none;}
body.has-tabbar .ai-panel.open{height:600px;}
@media (max-width:860px){body.has-tabbar .ai-panel.open{height:calc(100vh - 100px);}}
.ai-cards,.ai-card{flex:none;}


/* ── CHAT WIDGET = assistant + Messenger hand-off ── */
.ai-fab,.ai-panel{display:none!important;}
#chat-popup{display:flex;flex-direction:column;width:370px;max-width:calc(100vw - 24px);height:560px;max-height:calc(100vh - 120px);border-radius:14px;}
#chat-popup .chat-popup-hd{flex:none;}
.chat-popup-x{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 2px;}
#chat-popup .ai-log{background:#fff;}
#chat-popup .ai-msg{border-radius:16px;border:0;}
#chat-popup .ai-msg.bot{background:#f0f2f5;color:#1c1c1e;border-bottom-left-radius:4px;white-space:pre-line;}
#chat-popup .ai-msg.me{background:#0084ff;color:#fff;border-bottom-right-radius:4px;}
#chat-popup .ai-quick{background:#fff;}
#chat-popup .ai-quick button{border-color:#0084ff;color:#0084ff;border-radius:14px;}
#chat-popup .ai-quick button:hover{background:#0084ff;color:#fff;}
#chat-popup .ai-form{background:#fff;flex:none;}
#chat-popup .ai-form input{border-radius:18px;}
#chat-popup .ai-form button{background:#0084ff;color:#fff;border-radius:18px;}
#chat-popup .ai-form.off{opacity:.45;pointer-events:none;}
#chat-popup .chat-popup-cta{flex:none;width:auto;margin:0 12px 12px;border-radius:10px;}
.ai-handoff{align-self:stretch;display:flex;flex-direction:column;gap:6px;}
.ai-handoff a,.ai-handoff button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:10px;border:0;background:#0084ff;color:#fff;font:inherit;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;}
.ai-handoff svg{width:16px;height:16px;fill:#fff;}
@media (max-width:860px){
  #chat-popup{left:8px;right:8px;width:auto;max-width:none;bottom:70px;height:calc(100vh - 170px);max-height:none;}
}
#chat-popup .ai-log{min-height:0;}


/* ── Phone: filters collapse behind a "Filters" button so products come first ── */
.filter-toggle{display:none;}
@media (max-width:860px){
  .filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;margin:0;background:transparent;border:0;border-bottom:1px solid var(--border);font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;}
  .shop-layout{min-height:0;align-content:start;}
  .shop-layout .sidebar{display:none;}
  .shop-layout .sidebar.open{display:block;}
  .shop-layout .sidebar .sidebar-section:first-child{display:none;} /* categories: the chips above already do this */
}

/* ===== Simple sign-in / register (light, Jost) ===== */
#page-login,#page-register{font-family:'Inter',sans-serif}
#page-login .auth-bg,#page-login .auth-bg-noise,#page-login .auth-glow,#page-login .auth-ring,#page-login .auth-card-top-line,
#page-register .auth-bg,#page-register .auth-bg-noise,#page-register .auth-glow,#page-register .auth-ring,#page-register .auth-card-top-line{display:none!important}
#page-login .auth-page,#page-register .auth-page{background:#f7f6ee;padding:32px 16px}
#page-login .auth-card,#page-register .auth-card{background:#fdfcf7;border:1px solid #e4e2cf;border-radius:14px;box-shadow:0 2px 14px rgba(43,45,32,.06);padding:40px;width:460px;max-width:100%}
#page-login .auth-brand,#page-register .auth-brand{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;letter-spacing:.08em;color:#2b2d20;text-transform:uppercase}
#page-login .auth-brand span,#page-register .auth-brand span{color:#2b2d20;font-style:normal}
#page-login .auth-tagline,#page-register .auth-tagline{font-size:15px;letter-spacing:0;text-transform:none;color:#5a5e44;margin-bottom:22px}
#page-login .auth-title,#page-register .auth-title{font-family:'Inter',sans-serif;font-weight:600;font-size:32px;color:#2b2d20;margin-bottom:22px}
#page-login .auth-title em,#page-register .auth-title em{font-style:normal;color:#2b2d20}
#page-login .auth-err,#page-register .auth-err{background:#fbe9e6;border-left:3px solid #b03a2e;color:#8f2a20;font-size:15px}
#page-login .form-label,#page-register .form-label{font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;color:#2b2d20;margin-bottom:8px}
#page-login .form-input,#page-login .form-select,#page-register .form-input,#page-register .form-select,#page-register .form-textarea{font-family:'Inter',sans-serif;font-size:17px;font-weight:400;color:#2b2d20;background:#fff;border:1.5px solid #a9a78f;border-radius:8px;min-height:50px;padding:0 14px}
#page-register .form-textarea{padding:12px 14px}
#page-login .form-input:focus,#page-login .form-select:focus,#page-register .form-input:focus,#page-register .form-select:focus,#page-register .form-textarea:focus{border-color:#566030;background:#fff;box-shadow:0 0 0 3px rgba(86,96,48,.15)}
#page-login .form-input::placeholder,#page-register .form-input::placeholder{color:#6b6e58}
#page-login .btn-gold,#page-register .btn-gold{font-family:'Inter',sans-serif;font-size:18px;font-weight:600;letter-spacing:0;text-transform:none;min-height:52px;border-radius:8px;background:#f7cf17;color:#2b2d20;border:0}
#page-login .btn-gold:hover,#page-register .btn-gold:hover{background:#e9c53a;color:#2b2d20}
#page-login .btn-google,#page-register .btn-google{font-family:'Inter',sans-serif;font-size:17px;font-weight:500;letter-spacing:0;min-height:52px;border-radius:8px;border:1.5px solid #a9a78f;color:#2b2d20;background:#fff}
#page-login .auth-switch,#page-register .auth-switch{font-size:16px;color:#5a5e44;margin-top:16px}
#page-login .auth-switch a,#page-register .auth-switch a{color:#566030;font-weight:600;border-bottom:0;text-decoration:underline;text-underline-offset:3px}
#page-login .auth-divider-text,#page-register .auth-divider-text{font-size:15px;letter-spacing:0;color:#5a5e44}
#page-login .auth-divider-line,#page-register .auth-divider-line{background:#d9d7c2}
@media(max-width:600px){#page-login .auth-card,#page-register .auth-card{padding:28px 20px}#page-login .auth-title,#page-register .auth-title{font-size:28px}}
#page-login .auth-page,#page-register .auth-page{padding-top:104px;align-items:flex-start}

/* ===== Photo attachments (reviews / return requests) ===== */
.att-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.att-th{position:relative;width:72px;height:72px}
.att-th img{width:100%;height:100%;object-fit:cover;border:1px solid #d6cbb8;border-radius:6px;cursor:zoom-in;display:block}
.att-th button{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:#2b2d20;color:#fff;font-size:15px;line-height:1;cursor:pointer}
.att-add{width:72px;height:72px;border:1.5px dashed #a9a78f;border-radius:6px;background:#fdfcf7;color:#2b2d20;font:inherit;font-size:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.att-add span{font-size:22px;line-height:1}
.att-add:hover{border-color:#566030;background:#f3f2e7}
.att-msg{font-size:13px;color:#8f2a20;min-height:16px;margin-top:4px}
.att-view{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.att-view img{width:78px;height:78px;object-fit:cover;border:1px solid var(--border,#d6cbb8);border-radius:6px;cursor:zoom-in}
.att-lightbox{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.att-lightbox img{max-width:100%;max-height:100%;border-radius:6px}
.att-lightbox button{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer}

/* agree-to-terms line (sign in / register) */
.auth-legal{font-family:'Inter',sans-serif;font-size:14px;line-height:1.5;color:#5a5e44;text-align:center;margin:18px 0 0}
.auth-legal a{color:#566030;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.auth-legal a:hover{color:#2b2d20}
#page-register .auth-legal{margin:6px 0 16px}
.auth-agree{display:flex;align-items:flex-start;gap:10px;margin:2px 0 16px;font-family:'Inter',sans-serif;font-size:15px;line-height:1.45;color:#2b2d20;cursor:pointer}
.auth-agree input{flex:0 0 auto;width:20px;height:20px;margin-top:1px;accent-color:#566030;cursor:pointer}
.auth-agree a{color:#566030;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.g-holder{position:relative}
.g-guard{position:absolute;inset:0;z-index:5;cursor:not-allowed;background:transparent}
.g-holder:has(.g-guard[style*="block"]) #g-wrap-login,.g-holder:has(.g-guard[style*="block"]) #g-wrap-register{opacity:.55}

/* Return / replacement request form */
.rm-notice{background:#f6f3e4;border-left:3px solid #c9a84c;padding:10px 12px;font-size:13.5px;line-height:1.5;margin:10px 0;color:#2b2d20}
.rm-notice a{color:#566030;font-weight:600;text-decoration:underline}
.rm-hint{font-size:13px;line-height:1.45;color:#5a5e44;margin:6px 0 2px;min-height:0}
.rm-pref{display:flex;gap:18px;margin:4px 0 2px}
.rm-card .rm-pref label{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-size:14px;color:#2b2d20;margin:0}
.rr-reply{margin-top:8px;font-size:14px;line-height:1.5}

/* returns: window notice + unboxing tip */
.rr-window{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.rm-tip{display:block;margin-top:8px;font-size:12px;opacity:.9}

/* ── UI polish: product cards, order next-step, mobile buy bar ── */
.product-img{position:relative}
.stock-chip{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.04em;padding:5px 10px;border-radius:2px}
.stock-chip.low{background:#fff3e0;color:#b35c00;border:1px solid #f0c78a}
.stock-chip.out{background:#0b0c07;color:#f7cf17}
.product-card.soldout .product-img img{filter:grayscale(1);opacity:.5}
.product-card.soldout .product-img{opacity:.85}
.product-name{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;line-height:1.35}
.product-price{font-size:20px;font-weight:600;letter-spacing:0}
.product-footer .inquiry-btn,.product-footer .buy-now-btn{min-height:44px;font-size:12px;font-weight:600}
.next-step{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;font-size:13.5px;line-height:1.5;border-bottom:1px solid var(--border-light);background:#fff}
.next-step b{font-weight:600}
.next-step.act{background:#fff8e1;border-left:4px solid #f7cf17}
.next-step.done{background:#f1f8f3;border-left:4px solid #2a7048}
.next-step.wait{background:#f7f6ee;border-left:4px solid #b9b79d}
@media (max-width:768px){
  .detail-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.12)}
  .detail-cta .btn{flex:1;margin:0!important;min-height:48px;width:auto!important;font-size:13px!important;padding:0 10px!important}
  .detail-page{padding-bottom:86px}
  .btn,.btn-sm,.co-btn-next,.co-btn-back,.filter-select{min-height:44px}
}
@media (max-width:768px){body.has-tabbar .detail-cta{bottom:var(--tabbar-h,64px);z-index:870;padding-bottom:10px}body.on-detail .chat-fab{bottom:150px}body.on-detail #back-top{display:none}.detail-page{padding-bottom:150px}}

/* ═══════════ CHECKOUT — one page, cards + sticky summary ═══════════ */
.co-overlay .co-wrap{width:1080px;max-width:96vw;background:var(--cream);border-top:0;}
.co-overlay .co-header{background:var(--olive,#0e2418);border-bottom:0;padding:16px 28px;}
.co-overlay .co-header-brand{color:#f3f2e7;font-size:20px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;}
.co-overlay .co-header-brand em{color:var(--gold);font-style:normal;}
.co-overlay .co-close{color:rgba(243,242,231,.75);}
.co-overlay .co-close:hover{color:#fff;}
.co-overlay .co-steps{display:none;}
.co-overlay .co-body{grid-template-columns:1fr 370px;gap:22px;padding:22px 26px;align-items:start;background:var(--cream);}
.co-overlay .co-left{padding:0;border-right:0;overflow:visible;background:transparent;counter-reset:cos;}
.co-overlay .co-right{background:#fff;border:1px solid var(--border-light);padding:22px 24px;position:sticky;top:0;overflow:visible;}
.co-overlay .co-card{background:#fff;border:1px solid var(--border-light);padding:22px 24px;margin-bottom:16px;display:block;}
.co-overlay .co-card>.co-section-title:first-child{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;border-bottom:0;padding-bottom:0;margin:0 0 16px!important;}
.co-overlay .co-card>.co-section-title:first-child::before{counter-increment:cos;content:counter(cos);width:22px;height:22px;border-radius:50%;background:var(--olive,#0e2418);color:var(--gold);display:grid;place-items:center;font-size:11px;letter-spacing:0;flex:none;}
.co-overlay .co-card .co-section-title:not(:first-child){font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:0;padding-bottom:0;}
.co-overlay .co-input{background:#f9fbf7;}
.co-overlay .co-input:focus{background:#fff;}
.co-overlay .co-pay-opt{padding:16px 18px;border-width:1px;}
.co-overlay .co-pay-opt.sel{border-color:var(--olive,#0e2418);box-shadow:inset 0 0 0 1px var(--olive,#0e2418);background:#fbfdf8;}
.co-overlay .co-pay-opt.sel .co-pay-radio{border-color:var(--olive,#0e2418);}
.co-overlay .co-pay-radio-dot{background:var(--olive,#0e2418);}
.co-overlay .co-pay-icon{width:38px;height:38px;background:var(--cream);display:grid;place-items:center;font-size:18px;}
.co-overlay .co-right>div:first-child{font-weight:500;}
.co-overlay .co-summary-total span:last-child{font-size:28px;color:var(--olive,#0e2418);}
.co-overlay #co-pay-summary{display:none!important;}
.co-overlay .co-cta{width:100%;margin-top:16px;padding:17px;background:var(--gold);color:var(--olive,#0e2418);border:0;font-family:inherit;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px;cursor:pointer;}
.co-overlay .co-cta:hover{filter:brightness(.96);}
.co-trust{display:flex;justify-content:space-around;margin-top:16px;font-size:11px;color:var(--muted);text-align:center;}
.co-trust span{display:block;font-size:17px;margin-bottom:2px;}
.co-overlay .co-notice{background:#fbf3d0;border:0;border-left:3px solid var(--gold);color:#5c4a05;}
@media (max-width:860px){
  .co-overlay .co-wrap{max-height:100vh;height:100vh;max-width:100vw;}
  .co-overlay .co-body{grid-template-columns:1fr;padding:14px 12px 30px;gap:14px;}
  .co-overlay .co-right{position:static;}
  .co-overlay .co-card{padding:18px 16px;margin-bottom:12px;}
}
div.co-overlay{z-index:2000;}
.co-overlay .co-item-img{overflow:visible;}

/* ═══════════ LOGIN / REGISTER — split layout, clean ═══════════ */
#page-login,#page-register{background:#f7f6ee;}
.as{display:grid;grid-template-columns:5fr 6fr;min-height:100vh;padding-top:70px;background:#f7f6ee;}
.as-brand{position:relative;background:#0b0c08;color:#fff;padding:60px 56px 44px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:calc(100vh - 70px);}
.as-brand::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;right:-260px;top:16%;border:1px solid rgba(247,207,23,.16);box-shadow:0 0 0 70px rgba(247,207,23,.035),0 0 0 140px rgba(247,207,23,.02);}
.as-brand::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 40% 52%,rgba(247,207,23,.14),transparent 70%);pointer-events:none;}
.as-brand>*{position:relative;z-index:1;}
.as-top{font-size:10px;letter-spacing:.3em;color:#cfcab0;}
.as-mid{display:flex;flex-direction:column;align-items:flex-start;gap:30px;}
.as-logo{width:230px;color:#f7cf17;filter:drop-shadow(0 0 30px rgba(247,207,23,.25));}
.as-mid h2{font-family:'Inter',sans-serif;font-size:38px;font-weight:400;line-height:1.15;letter-spacing:-.01em;color:#fff;margin:0;}
.as-mid h2 em{font-style:normal;color:#f7cf17;}
.as-mid p{color:#a9a58f;font-size:14px;line-height:1.7;max-width:340px;margin:14px 0 0;}
.as-perks{display:flex;flex-direction:column;gap:14px;font-size:13px;color:#d6d2ba;}
.as-perks div{display:flex;gap:12px;align-items:center;}
.as-perks i{width:6px;height:6px;border-radius:50%;background:#f7cf17;flex:none;}
.as-pearl{position:absolute!important;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fffbe0,#f7dd6a 28%,#c79a14 66%,#6d4f05);box-shadow:0 14px 30px rgba(0,0,0,.5);}
.as-pearl.p1{width:46px;height:46px;right:56px;bottom:120px;}
.as-pearl.p2{width:20px;height:20px;right:120px;bottom:80px;background:radial-gradient(circle at 34% 30%,#fff,#eee7cf 40%,#a79f84);}
.as-form{display:flex;align-items:center;justify-content:center;padding:40px;}
.as-card{width:100%;max-width:410px;}
.as-tabs{display:flex;gap:28px;border-bottom:1px solid #e3e1d2;margin-bottom:34px;}
.as-tabs span{padding:0 0 14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#76735f;cursor:pointer;}
.as-tabs span.on{color:#0b0c08;font-weight:500;border-bottom:2px solid #f7cf17;margin-bottom:-1px;}
.as-title{font-family:'Inter',sans-serif;font-size:34px;font-weight:400;letter-spacing:-.02em;color:#0b0c08;margin:0;}
.as-title em{font-style:normal;color:#8d6c05;}
.as-sub{color:#76735f;font-size:14px;margin:8px 0 28px;}
.as-f{margin-bottom:18px;position:relative;}
.as-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
#page-login .as-card .form-label,#page-register .as-card .form-label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#76735f;margin-bottom:7px;font-weight:500;}
#page-login .as-card .form-input,#page-register .as-card .form-input{width:100%;border:0;border-bottom:1px solid #cfccb8;border-radius:0;background:transparent;padding:10px 0 11px;font-family:'Inter',sans-serif;font-size:15px;color:#0b0c08;outline:0;box-shadow:none;}
#page-login .as-card .form-input:focus,#page-register .as-card .form-input:focus{border-bottom:2px solid #0b0c08;padding-bottom:10px;background:transparent;box-shadow:none;}
#page-login .as-card .form-input::placeholder,#page-register .as-card .form-input::placeholder{color:#b5b29c;}
.as-meta{display:flex;justify-content:flex-end;font-size:12px;margin:2px 0 20px;}
.as-meta a,.as-card .auth-agree a,.as-card .auth-switch a{color:#0b0c08;border-bottom:1px solid #f7cf17;text-decoration:none;cursor:pointer;font-weight:400;}
.as-hint{font-size:11px;color:#76735f;margin:-6px 0 16px;line-height:1.5;}
#page-login .as-card .auth-agree,#page-register .as-card .auth-agree{font-size:12px;color:#76735f;line-height:1.5;margin:0 0 22px;gap:10px;}
#page-login .as-card .auth-agree input,#page-register .as-card .auth-agree input{width:16px;height:16px;accent-color:#0b0c08;margin-top:1px;}
#page-login .as-card .as-btn,#page-register .as-card .as-btn{width:100%;background:#0b0c08;color:#fff;border:0;border-radius:0;padding:17px;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;display:flex;justify-content:center;gap:10px;box-shadow:none;cursor:pointer;}
#page-login .as-card .as-btn:hover,#page-register .as-card .as-btn:hover{background:#23241a;}
.as-btn b{color:#f7cf17;font-weight:400;}
#page-login .as-card .auth-divider,#page-register .as-card .auth-divider{margin:22px 0;}
#page-login .as-card .auth-divider-text,#page-register .as-card .auth-divider-text{font-size:11px;letter-spacing:.2em;color:#a8a590;}
#page-login .as-card .btn-google,#page-register .as-card .btn-google{width:100%;border:1px solid #cfccb8;border-radius:0;background:#fff;color:#0b0c08;padding:15px;font-family:'Inter',sans-serif;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;display:flex;justify-content:center;align-items:center;gap:12px;box-shadow:none;}
#page-login .as-card .auth-switch,#page-register .as-card .auth-switch{text-align:center;font-size:13px;color:#76735f;margin-top:26px;}
#page-login .as-card .auth-err,#page-register .as-card .auth-err{border-radius:0;}
#page-login .page-back.on-auth,#page-register .page-back.on-auth{left:calc(45.45% + 36px);top:88px;background:transparent;border:0;color:#76735f;padding:0;font-size:12px;}
@media (max-width:860px){
  .as{grid-template-columns:1fr;padding-top:70px;}
  .as-brand{min-height:0;padding:20px 22px;flex-direction:row;align-items:center;}
  .as-brand::before,.as-pearl,.as-perks,.as-mid p,.as-top{display:none;}
  .as-mid{flex-direction:row;align-items:center;gap:14px;}
  .as-logo{width:64px;}
  .as-mid h2{font-size:20px;}
  .as-form{padding:28px 22px 60px;align-items:flex-start;}
  .as-row{grid-template-columns:1fr;gap:0;}
  #page-login .page-back.on-auth,#page-register .page-back.on-auth{display:none;}
}

.as-top{visibility:hidden;}
#page-login .as-card .auth-switch a,#page-register .as-card .auth-switch a,#page-login .as-card .auth-agree a,#page-register .as-card .auth-agree a{color:#0b0c08;border-bottom:1px solid #f7cf17;text-decoration:none;font-weight:400;}

/* ═══════════ HOMEPAGE (hm-*) ═══════════
   HOMEPAGE PHOTOS — put your pictures in the images/ folder, then edit the lines in :root (near the top "image slots"):
     --img-necklaces / --img-rings / --img-earrings / --img-bracelets  → category cards
     --img-story → "Our story" photo         e.g.  --img-story:url('images/story.jpg');
   Product photos are NOT set here: upload them in Admin → Products. */
:root{--img-story: url('images/img-story.webp');--hm-ink:#0b0c08;--hm-gold:#f7cf17;--hm-golddk:#8d6c05;--hm-line:#e3e1d2;--hm-muted:#76735f}
#page-home{background:#f7f6ee}
#page-home button{font-family:inherit}
.hm-hero{background:radial-gradient(ellipse 55% 70% at 78% 50%,rgba(247,207,23,.14),transparent 70%),var(--hm-ink);color:#fff;padding:70px 44px 80px;display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}
.hm-hero-copy{justify-self:end;max-width:560px;width:100%}
.hm-eyebrow{display:flex;align-items:center;gap:14px;color:var(--hm-gold);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.hm-eyebrow i{width:48px;height:1px;background:var(--hm-gold);flex:none}
.hm-h1{font-size:88px;line-height:.98;font-weight:500;letter-spacing:-.03em;margin:26px 0 20px;color:#fff}
.hm-h1 em{font-style:normal;color:var(--hm-gold)}
.hm-lead{color:#b6b29b;font-size:16px;line-height:1.7;max-width:430px}
.hm-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hm-btn{padding:18px 32px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.2s}
.hm-btn.gold{background:var(--hm-gold);color:var(--hm-ink)}.hm-btn.gold:hover{background:#fff}
.hm-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.hm-btn.ghost:hover{border-color:var(--hm-gold);color:var(--hm-gold)}
.hm-btn.line{background:transparent;color:var(--hm-ink);border-color:var(--hm-ink)}.hm-btn.line:hover{background:var(--hm-ink);color:#fff}
.hm-hero-cards{justify-self:start;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;max-width:560px;width:100%}
.hm-hc{background:rgba(255,255,255,.045);border:1px solid rgba(247,207,23,.2);padding:14px;display:flex;flex-direction:column;text-align:left;color:#fff;cursor:pointer;transition:.2s}
.hm-hc:hover{border-color:var(--hm-gold);transform:translateY(-3px)}
.hm-hc.big{grid-row:span 2}
.hm-hc .im{flex:1;min-height:150px;background:radial-gradient(circle at 50% 40%,rgba(247,207,23,.2),rgba(255,255,255,.02));display:grid;place-items:center;overflow:hidden}
.hm-hc.big .im{min-height:300px}
.hm-hc .im img{width:100%;height:100%;object-fit:cover;display:block}
.hm-hc .im svg{width:58%;max-height:80%}
.hm-hc .t{margin-top:12px;font-size:13px;display:flex;justify-content:space-between;gap:8px}.hm-hc .t b{font-weight:500;color:var(--hm-gold);white-space:nowrap}
.hm-hc .s{font-size:11px;color:#948f78;margin-top:2px}
.hm-hc .tag{align-self:flex-start;background:var(--hm-gold);color:var(--hm-ink);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;font-weight:500;margin-bottom:10px}
.hm-trust{background:#fff;border-bottom:1px solid var(--hm-line);display:grid;grid-template-columns:repeat(4,1fr)}
.hm-trust>div{padding:20px 28px;display:flex;gap:14px;align-items:center;border-right:1px solid var(--hm-line);font-size:13px}
.hm-trust>div:last-child{border:0}
.hm-trust span{width:38px;height:38px;border:1px solid var(--hm-gold);border-radius:50%;display:grid;place-items:center;font-size:16px;flex:none}
.hm-trust p{margin:0}.hm-trust b{font-weight:500;display:block}.hm-trust small{display:block;color:var(--hm-muted);font-size:11px;margin-top:1px}
.hm-sec{padding:78px 44px;max-width:1280px;margin:0 auto}
.hm-sh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;gap:16px;flex-wrap:wrap}
.hm-h2{font-size:40px;font-weight:400;letter-spacing:-.02em;margin:0;color:var(--hm-ink)}.hm-h2 em{font-style:normal;color:var(--hm-golddk)}
.hm-h2.light{color:#fff}.hm-h2.light em{color:var(--hm-gold)}
.hm-k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--hm-golddk);margin-bottom:10px;font-weight:500}.hm-k.gold{color:var(--hm-gold)}
.hm-tabs{display:flex;gap:26px;flex-wrap:wrap}
.hm-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:0 0 6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hm-muted);cursor:pointer}
.hm-tabs button.on{color:var(--hm-ink);border-bottom-color:var(--hm-gold);font-weight:500}
.hm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hm-empty{grid-column:1/-1;text-align:center;color:var(--hm-muted);padding:40px 0}
.hm-card{cursor:pointer}
.hm-card .im{aspect-ratio:1/1.08;background:#efede0;display:grid;place-items:center;position:relative;overflow:hidden}
.hm-card .im>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.hm-card:hover .im>img{transform:scale(1.04)}
.hm-card .im>svg{width:52%}
.hm-card .bd{position:absolute;top:12px;left:12px;background:var(--hm-ink);color:var(--hm-gold);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;font-weight:500}
.hm-card .bd.so{left:auto;right:12px;background:#fff;color:var(--hm-ink)}
.hm-card .add{position:absolute;left:12px;right:12px;bottom:12px;background:var(--hm-ink);color:#fff;border:0;padding:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;opacity:0;transform:translateY(8px);transition:.25s}
.hm-card:hover .add{opacity:1;transform:none}
@media(hover:none){.hm-card .add{opacity:1;transform:none}}
.hm-card.out{opacity:.65}
.hm-card .nm{margin-top:14px;font-size:15px;font-weight:400}
.hm-card .ct{font-size:12px;color:var(--hm-muted);margin-top:2px;display:flex;justify-content:space-between}.hm-card .ct b{font-size:16px;color:var(--hm-ink);font-weight:500}
.hm-more{text-align:center;margin-top:36px}
.hm-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hm-cat{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:flex-end;padding:22px;color:#fff;border:0;text-align:left;cursor:pointer;background-color:#0b0c08;background-size:cover;background-position:center;transition:.3s}
.hm-cat:hover{transform:translateY(-4px)}
.hm-cat-necklaces{background-image:var(--img-necklaces),linear-gradient(160deg,#16382a,#0b0c08)}
.hm-cat-rings{background-image:var(--img-rings),linear-gradient(160deg,#3a3320,#0b0c08)}
.hm-cat-earrings{background-image:var(--img-earrings),linear-gradient(160deg,#27302a,#0b0c08)}
.hm-cat-bracelets{background-image:var(--img-bracelets),linear-gradient(160deg,#352a18,#0b0c08)}
.hm-cat .art{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:62%;opacity:.95}
.hm-cat .n{font-size:11px;letter-spacing:.2em;color:var(--hm-gold);position:absolute;top:18px;left:20px}
.hm-cat .t{position:relative}.hm-cat .t b{font-size:22px;font-weight:400;display:block}.hm-cat .t small{font-size:11px;letter-spacing:.18em;color:var(--hm-gold);text-transform:uppercase}
.hm-story{background:var(--hm-ink);color:#fff}
.hm-story-in{max-width:1280px;margin:0 auto;padding:78px 44px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hm-story-ph{aspect-ratio:4/3;background:var(--img-story),radial-gradient(circle at 40% 40%,rgba(247,207,23,.25),rgba(255,255,255,.03));background-size:cover;background-position:center;border:1px solid rgba(247,207,23,.25);display:grid;place-items:center;color:#8f8a70;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.hm-vals{margin-top:22px;display:grid;gap:18px}
.hm-vals b{display:block;font-weight:500;color:var(--hm-gold);letter-spacing:.06em;margin-bottom:4px}
.hm-vals p{margin:0;color:#b6b29b;line-height:1.7;font-size:14px;max-width:480px}
.hm-rv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hm-rv>div{background:#fff;border:1px solid var(--hm-line);padding:26px;font-size:14px;line-height:1.7}
.hm-rv i{color:#d9a800;font-style:normal;letter-spacing:3px;display:block;margin-bottom:10px}
.hm-rv small{display:block;margin-top:14px;color:var(--hm-muted);font-size:12px}
.hm-paygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){
 .hm-hero{grid-template-columns:1fr;padding:44px 20px;gap:34px}.hm-hero-copy{justify-self:start}.hm-h1{font-size:56px}
 .hm-hero-cards{justify-self:start}.hm-hc.big{grid-row:auto;grid-column:span 2}.hm-hc.big .im{min-height:200px}
 .hm-trust{grid-template-columns:1fr 1fr}.hm-trust>div{padding:14px;border-bottom:1px solid var(--hm-line)}
 .hm-sec{padding:48px 20px}.hm-h2{font-size:30px}.hm-tabs{gap:16px}
 .hm-grid,.hm-cats{grid-template-columns:1fr 1fr;gap:14px}.hm-rv{grid-template-columns:1fr}
 .hm-story-in{grid-template-columns:1fr;padding:48px 20px;gap:30px}.hm-paygrid{grid-template-columns:1fr}
}
.hm-hero{padding-top:140px}
@media(max-width:860px){.hm-hero{padding-top:104px}}

/* ═══ FONTS: Playfair Display (headings) + Inter (text) ═══ */
:root{--font-display:'Playfair Display',Georgia,serif;--font-body:'Inter',system-ui,sans-serif}
.hm-h1,.hm-h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em}
.hm-h1{font-size:76px}
.hm-hc .t,.hm-card .nm{font-family:var(--font-display)}
@media(max-width:860px){.hm-h1{font-size:52px}}

/* ═══ HOMEPAGE MOTION ═══ */
.hm-hero{position:relative;overflow:hidden}
.hm-hero::before{content:"";position:absolute;right:-8%;top:50%;width:70%;aspect-ratio:1;translate:0 -50%;background:radial-gradient(circle,rgba(247,207,23,.14),transparent 65%);animation:hmBreathe 7s ease-in-out infinite;pointer-events:none}
.hm-hero-copy,.hm-hero-cards{position:relative}
@keyframes hmBreathe{50%{opacity:.55;scale:1.08}}
.hm-eyebrow i{width:0;animation:hmDraw .9s .1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hmDraw{to{width:48px}}
.hm-eyebrow{opacity:0;animation:hmFade .8s .2s forwards}
.hm-h1 .ln{display:block;overflow:hidden;padding-bottom:.1em}
.hm-h1 .ln b{display:block;font-weight:500;translate:0 110%;animation:hmRise 1s cubic-bezier(.2,.8,.2,1) forwards}
.hm-h1 .ln:nth-child(1) b{animation-delay:.3s}
.hm-h1 .ln:nth-child(2) b{animation-delay:.5s;color:var(--hm-gold)}
.hm-lead{opacity:0;animation:hmUp .9s .85s forwards}
.hm-cta{opacity:0;animation:hmUp .9s 1.05s forwards}
@keyframes hmRise{to{translate:0 0}}
@keyframes hmUp{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes hmFade{to{opacity:1}}
.hm-hc{position:relative;overflow:hidden}
.hm-hc.in{opacity:0;animation:hmCardIn 1s cubic-bezier(.2,.8,.2,1) forwards,hmFloat 7s ease-in-out infinite}
.hm-hc.in.big{animation-delay:.6s,1.8s}
.hm-hc.in:nth-child(2){animation-delay:.8s,2.6s}
.hm-hc.in:nth-child(3){animation-delay:1s,3.4s}
@keyframes hmCardIn{from{opacity:0;translate:0 40px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes hmFloat{50%{translate:0 -8px}}
.hm-hc::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.13) 50%,transparent 60%);translate:-120% 0;animation:hmSheen 6s 2.4s ease-in-out infinite;pointer-events:none}
.hm-hc:nth-child(2)::after{animation-delay:3.6s}.hm-hc:nth-child(3)::after{animation-delay:4.8s}
@keyframes hmSheen{0%{translate:-120% 0}30%,100%{translate:120% 0}}
.hm-js .hm-reveal{opacity:0;translate:0 28px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.hm-js .hm-reveal.hm-seen{opacity:1;translate:0 0}
.hm-js .hm-cats .hm-cat{opacity:0;translate:0 24px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1),transform .3s}
.hm-js .hm-seen .hm-cat{opacity:1;translate:0 0}
.hm-js .hm-seen .hm-cat:nth-child(2){transition-delay:.12s,.12s,0s}
.hm-js .hm-seen .hm-cat:nth-child(3){transition-delay:.24s,.24s,0s}
.hm-js .hm-seen .hm-cat:nth-child(4){transition-delay:.36s,.36s,0s}
@media(prefers-reduced-motion:reduce){
 .hm-hero::before,.hm-hc::after{animation:none}
 .hm-eyebrow,.hm-lead,.hm-cta,.hm-hc.in{opacity:1;animation:none}
 .hm-eyebrow i{animation:none;width:48px}
 .hm-h1 .ln b{animation:none;translate:0 0}
}

/* ═══════════ HOMEPAGE v2 ═══════════
   HOMEPAGE PHOTOS — hero slider: put 3 landscape photos (about 1600x700) in the images/ folder and set:
     --hero-1:url('images/hero1.jpg');  --hero-2:url('images/hero2.jpg');  --hero-3:url('images/hero3.jpg');
   Without a photo each slide shows a plain dark background. */
:root{--hero-1:url('images/hero1.webp');--hero-2:url('images/hero2.webp');--hero-3:url('images/hero3.webp');}
section.hm-hero{display:block;position:relative;padding:0;height:clamp(520px,calc(46vw + 72px),640px);overflow:hidden;background:#0b0c08;grid-template-columns:none}
section.hm-hero::before{display:none}
.hm-sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s}
.hm-sl.on{opacity:1;visibility:visible}
.hm-sl .bg{position:absolute;inset:0;background-color:#0b0c08;background-size:cover,auto;background-position:70% center,center;transform:scale(1.06);transition:transform 7s ease-out}
.hm-sl.on .bg{transform:scale(1)}
.hm-sl:nth-of-type(1) .bg{background-image:var(--hero-1),radial-gradient(ellipse 60% 70% at 78% 50%,rgba(247,207,23,.16),transparent 70%)}
.hm-sl:nth-of-type(2) .bg{background-image:var(--hero-2),radial-gradient(ellipse 60% 70% at 78% 50%,rgba(247,207,23,.16),transparent 70%)}
.hm-sl:nth-of-type(3) .bg{background-image:var(--hero-3),radial-gradient(ellipse 60% 70% at 78% 50%,rgba(247,207,23,.16),transparent 70%)}
.hm-sl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,8,.9) 0%,rgba(11,12,8,.68) 34%,rgba(11,12,8,.12) 68%,rgba(11,12,8,0))}
.hm-sl .w{position:relative;z-index:2;height:100%;max-width:1200px;margin:0 auto;padding:72px 24px 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hm-eb{display:flex;align-items:center;gap:14px;color:var(--hm-gold);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.hm-eb i{width:40px;height:1px;background:var(--hm-gold);flex:none}
.hm-hero .hm-h1{font-size:clamp(40px,5.4vw,68px);line-height:1.05;margin:20px 0 18px;max-width:560px}
.hm-hero .hm-h1 em{display:block;font-style:normal;color:var(--hm-gold)}
.hm-hero .hm-lead{color:#d6d3c0;font-size:15.5px;max-width:420px;opacity:1;animation:none}
.hm-hero .hm-btn{margin-top:28px;border-radius:999px;padding:16px 32px}
.hm-sl .hm-eb,.hm-sl .hm-h1,.hm-sl .hm-lead,.hm-sl .hm-btn{opacity:0;translate:0 18px;animation:none}
.hm-sl.on .hm-eb,.hm-sl.on .hm-h1,.hm-sl.on .hm-lead,.hm-sl.on .hm-btn{animation:hmSlUp .9s cubic-bezier(.2,.8,.2,1) forwards}
.hm-sl.on .hm-h1{animation-delay:.15s}.hm-sl.on .hm-lead{animation-delay:.3s}.hm-sl.on .hm-btn{animation-delay:.45s}
@keyframes hmSlUp{to{opacity:1;translate:0 0}}
.hm-arr{position:absolute;top:calc(50% + 36px);translate:0 -50%;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(11,12,8,.4);color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:.2s;padding:0 0 3px}
.hm-arr:hover{background:var(--hm-gold);border-color:var(--hm-gold);color:var(--hm-ink)}
.hm-arr.l{left:14px}.hm-arr.r{right:14px}
.hm-dots{position:absolute;z-index:3;right:24px;bottom:20px;display:flex;gap:6px}
.hm-dots button{width:26px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.35);padding:0;position:relative;overflow:hidden;cursor:pointer}
.hm-dots button.on::after{content:"";position:absolute;inset:0;background:var(--hm-gold);transform-origin:left;animation:hmProg 6s linear forwards}
@keyframes hmProg{from{scale:0 1}to{scale:1 1}}
.hm-hero.hold .hm-dots button.on::after{animation-play-state:paused}
@media(max-width:760px){
 section.hm-hero{height:auto;min-height:520px}
 .hm-sl::after{background:linear-gradient(180deg,rgba(11,12,8,.45),rgba(11,12,8,.9) 70%)}
 .hm-sl .w{justify-content:flex-end;padding:72px 20px 64px}
 .hm-arr{display:none}.hm-dots{right:20px}
 .hm-sl .bg{background-position:68% 30%,center}
}
@media(prefers-reduced-motion:reduce){
 .hm-sl,.hm-sl .bg{transition:none}.hm-sl .bg{transform:none}
 .hm-sl .hm-eb,.hm-sl .hm-h1,.hm-sl .hm-lead,.hm-sl .hm-btn{opacity:1;translate:0 0;animation:none!important}
 .hm-dots button.on::after{animation:none;scale:1 1}
}
/* product grid: fill the row even with 3 items */
.hm-grid{grid-template-columns:repeat(auto-fit,minmax(max(220px,calc(25% - 17px)),1fr))}
@media(max-width:860px){.hm-grid{grid-template-columns:1fr 1fr}}
.hm-card .im>svg{max-width:52%}
/* story facts */
.hm-facts{display:flex;gap:36px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.hm-facts b{display:block;font-family:var(--font-display);font-size:26px;font-weight:500;color:#fff}
.hm-facts small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#948f78}
/* why choose us */
.hm-conf{background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
.hm-cf{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hm-cf>div{padding:26px;border:1px solid var(--hm-line);background:#f7f6ee;display:flex;flex-direction:column;gap:6px}
.hm-cf svg{color:var(--hm-golddk);margin-bottom:6px}.hm-cf b{font-weight:500;font-size:15px}.hm-cf p{font-size:13px;color:var(--hm-muted);margin:0;line-height:1.6}
.hm-safe{margin-top:20px;border-left:3px solid var(--hm-golddk);background:#f7f6ee;padding:16px 20px;font-size:13px;line-height:1.7;color:#4a4837}.hm-safe b{font-weight:500;color:var(--hm-ink)}
@media(max-width:960px){.hm-cf{grid-template-columns:1fr 1fr}}@media(max-width:520px){.hm-cf{grid-template-columns:1fr}}
/* FAQ */
.hm-faq{padding-top:0}
.hm-faqw{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.hm-faqp{margin-top:14px;color:var(--hm-muted);font-size:14px;max-width:300px}
.hm-faq details{border-bottom:1px solid var(--hm-line);padding:16px 0}
.hm-faq summary{cursor:pointer;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary::after{content:"+";color:var(--hm-golddk);font-size:22px;line-height:1;transition:.2s}
.hm-faq details[open] summary::after{rotate:45deg}
.hm-faq details p{margin:8px 0 0;font-size:14px;color:var(--hm-muted);max-width:560px;line-height:1.7}
@media(max-width:860px){.hm-faqw{grid-template-columns:1fr;gap:22px}}
/* contact */
.hm-contact{background:#fff;border-top:1px solid var(--hm-line)}
.hm-ctg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hm-cc{border:1px solid var(--hm-line);padding:24px;background:#f7f6ee;display:flex;flex-direction:column;gap:5px;transition:.25s;min-width:0;color:var(--hm-ink)}
.hm-cc:hover{border-color:var(--hm-gold);transform:translateY(-3px)}
.hm-cc .ic{width:38px;height:38px;border:1px solid var(--hm-gold);border-radius:50%;display:grid;place-items:center;margin-bottom:8px}
.hm-cc small{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--hm-golddk);font-weight:500}
.hm-cc b{font-weight:500;font-size:15px;overflow-wrap:anywhere}.hm-cc p{font-size:13px;color:var(--hm-muted);margin:0}
.hm-cc.msg{background:var(--hm-ink);border-color:var(--hm-ink);color:#fff}.hm-cc.msg p{color:#b6b29b}.hm-cc.msg small{color:var(--hm-gold)}
@media(max-width:960px){.hm-ctg{grid-template-columns:1fr 1fr}}@media(max-width:520px){.hm-ctg{grid-template-columns:1fr}}
.hm-trust{border-top:1px solid var(--hm-line)}
/* footer */
footer{grid-template-columns:1.4fr .8fr 1.2fr .9fr 1.1fr;gap:30px;padding:56px 52px 40px;color:#c9c5ae}
footer .footer-desc{color:#c9c5ae;max-width:260px}
footer .footer-links a{color:#c9c5ae}footer .footer-links a:hover{color:var(--hm-gold)}
footer .footer-col-title{color:#fff}
.footer-copy{color:#a9a58f}
.hm-pay{display:flex;gap:8px;flex-wrap:wrap}.hm-pay span{border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:5px 10px;font-size:11px;color:#fff}
@media(max-width:960px){footer{grid-template-columns:1fr 1fr;padding:44px 24px 32px}}
@media(max-width:520px){footer{grid-template-columns:1fr}}
#trust-sec.hm-conf{background:#fff!important;padding:78px 44px!important;border-top:1px solid var(--hm-line)!important}
@media(max-width:860px){#trust-sec.hm-conf{padding:48px 20px!important}}
.hm-cc,.hm-cc:hover{text-decoration:none}
.hm-cc.msg b,.hm-cc.msg p{color:#fff;text-decoration:none}.hm-cc.msg p{color:#b6b29b}
#featured-sec,#about-sec,#trust-sec,#faq-sec,#contact-sec{scroll-margin-top:72px}

/* ═══════════ MY ACCOUNT: header, addresses, vouchers, delete ═══════════ */
.ma-head{display:flex;align-items:center;gap:20px}
.ma-avatar{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#1a1a10;font-family:var(--font-display);font-size:24px;display:grid;place-items:center;flex:none}
.ma-who{font-size:12px;color:rgba(232,212,138,.75);margin-top:6px;letter-spacing:.04em}
.ma-wide{max-width:1100px;margin:20px auto 0;background:#fff;border:1px solid var(--border-light);padding:26px 28px}
.ma-wide-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border-light)}
.ma-empty{font-size:13px;color:var(--muted);padding:6px 0}
.ma-addr-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ma-addr{border:1px solid var(--border-light);background:var(--cream);padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ma-addr.def{border-color:var(--gold)}
.ma-addr-top{display:flex;gap:8px;align-items:center}
.ma-chip{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--charcoal)}
.ma-badge{font-size:9px;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:#1a1a10;padding:2px 8px;border-radius:999px;font-weight:500}
.ma-addr-name{font-size:13px;font-weight:500;color:var(--charcoal)}
.ma-addr-line{font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.ma-addr-act{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.ma-addr-act button{background:none;border:0;padding:0;font-size:12px;color:var(--gold-dark);cursor:pointer;text-decoration:underline}
.ma-addr-act button.danger{color:#b03a2e}
.ma-voucher{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px dashed var(--gold);background:var(--cream);padding:14px 16px;margin-bottom:10px;flex-wrap:wrap}
.ma-voucher.used,.ma-voucher.expired,.ma-voucher.upcoming{opacity:.55;border-color:var(--border-light)}
.ma-v-label{font-family:var(--font-display);font-size:18px;color:var(--charcoal)}.ma-v-note{font-size:12px;color:var(--muted);margin-top:2px}
.ma-v-code{display:flex;align-items:center;gap:10px}.ma-v-code code{font-size:13px;letter-spacing:.08em;background:#fff;border:1px solid var(--border-light);padding:6px 10px}
.ma-v-code button{background:var(--charcoal);color:var(--gold-light);border:0;padding:7px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ma-v-hint{font-size:11px;color:var(--muted);margin-top:4px}
.ma-danger{border-color:rgba(176,58,46,.25)}
.ma-danger p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:14px;max-width:560px}
.ma-del-btn{background:none;border:1px solid #b03a2e;color:#b03a2e;padding:11px 20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.ma-del-btn:hover,.ma-del-btn.solid{background:#b03a2e;color:#fff}
.ma-del-btn:disabled{opacity:.6;cursor:wait}
.ma-overlay{position:fixed;inset:0;z-index:2100;background:rgba(11,12,8,.6);display:none;align-items:center;justify-content:center;padding:16px}
.ma-overlay.open{display:flex}
.ma-modal{background:#fff;width:100%;max-width:560px;max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.ma-modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border-light);font-family:var(--font-display);font-size:20px;color:var(--charcoal)}
.ma-x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.ma-modal-body{padding:20px 24px;overflow:auto}
.ma-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border-light)}
.ma-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ma-chips{display:flex;gap:8px}.ma-chips button{border:1px solid var(--border-light);background:#fff;padding:7px 16px;border-radius:999px;font-size:12px;cursor:pointer;color:var(--muted)}
.ma-chips button.on{background:var(--charcoal);color:var(--gold-light);border-color:var(--charcoal)}
.ma-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--charcoal);margin-top:4px}
.co-saved select{width:100%}
@media(max-width:700px){.ma-addr-list,.ma-row{grid-template-columns:1fr}.ma-head{gap:14px}.ma-avatar{width:52px;height:52px;font-size:20px}.ma-wide{padding:20px}}
.ma-add-btn{background:var(--charcoal);color:var(--gold-light);border:0;padding:10px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;font-family:inherit;white-space:nowrap}
.ma-add-btn:hover{background:#000}
@media(min-width:1000px){.ma-addr-list{grid-template-columns:repeat(3,1fr)}}
.img-missing{display:grid;place-items:center;width:100%;height:100%;font-size:56px;opacity:.55}

/* SHOP BANNER — put a photo in images/ and set  --img-shop:url('images/shop.jpg');  (wide, about 1600x400; keep the subject on the right). Leave it as none for a plain dark banner. */
:root{--img-shop:url('images/shop-banner.webp')}
.shop-header{position:relative;background:linear-gradient(90deg,rgba(11,12,8,.94) 0%,rgba(11,12,8,.78) 45%,rgba(11,12,8,.25) 100%),var(--img-shop),#0b0c08;background-size:cover;background-position:right center;border-bottom:0;padding:44px 48px 30px}
.shop-header .shop-title{color:#fff}
.shop-header .shop-title em{color:var(--gold)}
.shop-header .shop-subtitle{color:rgba(255,255,255,.78)}
@media(max-width:700px){.shop-header{padding:26px 18px 18px}}
.shop-header .filter-chips .chip{color:#fff;border:1px solid rgba(255,255,255,.4);background:rgba(11,12,8,.35)}
.shop-header .filter-chips .chip:hover{border-color:var(--gold);color:var(--gold)}
.shop-header .filter-chips .chip.active{background:var(--gold);color:#10200f;border-color:var(--gold)}
.shop-header .shop-subtitle,.shop-header #shop-greeting{color:rgba(255,255,255,.8)!important}
/* SHOP BANNER ANIMATION (preview) */
.shop-header{overflow:hidden;isolation:isolate}
.shop-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--img-shop) right center/cover;animation:shopZoom 14s ease-out both}
.shop-header{background:linear-gradient(90deg,rgba(11,12,8,.94) 0%,rgba(11,12,8,.78) 45%,rgba(11,12,8,.25) 100%),#0b0c08}
.shop-header>*{position:relative}
.shop-header .shop-title,.shop-header .shop-subtitle,.shop-header .search-wrap,.shop-header .filter-chips{animation:shopUp .8s cubic-bezier(.2,.7,.2,1) both}
.shop-header .shop-subtitle{animation-delay:.12s}.shop-header .search-wrap{animation-delay:.24s}.shop-header .filter-chips{animation-delay:.36s}
@keyframes shopZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes shopUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.shop-header::before,.shop-header *{animation:none!important}}