* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  --accent: #a88d2d;
  --accent-soft: rgba(168, 141, 45, .16);
  --page-bg: #282d16;
  min-height: 100vh;
  background: var(--page-bg);
  color: #f6f0e2;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: #a88d2d; color: #282d16; }

.collection-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px clamp(20px, 5vw, 64px);
  background: rgba(40, 45, 22, .92);
  border-bottom: 1px solid rgba(168, 141, 45, .2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup svg { width: 34px; height: 32px; flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .18em;
  background: linear-gradient(110deg, #a88d2d 5%, #f7e5a3 28%, #a88d2d 48%, #a88d2d 60%, #a88d2d 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.collection-header nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.collection-header nav a {
  color: #d8cfb8;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.collection-header nav a:hover { color: #a88d2d; }

.detail-page {
  position: relative;
  min-height: 100vh;
  padding: 138px clamp(20px, 5vw, 70px) 80px;
  overflow: hidden;
  background:
    radial-gradient(90% 65% at 82% 8%, var(--accent-soft), transparent 63%),
    linear-gradient(150deg, color-mix(in srgb, var(--page-bg) 94%, white), var(--page-bg));
}

.detail-page::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .23;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 52px 52px;
}

.detail-layout {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(360px, 1.22fr);
  align-items: center;
  gap: clamp(38px, 7vw, 92px);
}

.detail-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.detail-kicker::before { content: ''; width: 36px; height: 1px; background: currentColor; }
.detail-copy h1 {
  margin-top: 18px;
  color: #fbf7ec;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: .02em;
}
.detail-copy p {
  max-width: 470px;
  margin-top: 24px;
  color: #cbd2c8;
  font-family: var(--font-editorial);
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.55;
}
.detail-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.gold-action, .outline-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 25px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.gold-action {
  color: #282d16;
  background: linear-gradient(120deg, #a88d2d, #a88d2d);
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}
.outline-action { color: #a88d2d; border: 1px solid rgba(168, 141, 45,.42); }

.brochure-art {
  position: relative;
  width: min(595px, 100%);
  margin: 0 auto;
}
.brochure-art::before, .brochure-art::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 3px;
}
.brochure-art::before { inset: -12px; }
.brochure-art::after { inset: -24px; opacity: .34; }
.brochure-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 34px 80px rgba(0,0,0,.5);
}

.milah-gallery {
  width: min(700px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 18px);
}

.milah-gallery figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.18 / 1;
  border: 1px solid rgba(217, 193, 115, .36);
  border-radius: 3px;
  background: #282d16;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .34);
}

.milah-gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 245, 199, .1);
  pointer-events: none;
}

.milah-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-luxury), filter .8s ease;
}

.milah-gallery figure:hover img {
  transform: scale(1.045);
  filter: brightness(1.04);
}

.collection-gallery {
  width: min(700px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 18px);
}

.collection-gallery figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.18 / 1;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--page-bg) 86%, white);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .34);
}

.collection-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-luxury), filter .8s ease;
}

.collection-gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  pointer-events: none;
}

.brochure-crop {
  background-image: var(--crop-image);
  background-repeat: no-repeat;
  background-size: var(--crop-size, 300%) auto;
  background-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transition: transform .75s var(--ease-luxury), filter .75s ease;
}

.collection-gallery figure:hover img {
  transform: scale(1.045);
  filter: brightness(1.04);
}

.collection-gallery figure:hover {
  transform: translateY(-5px) scale(1.015);
  filter: brightness(1.06);
}

.collection-switcher {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 70px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(168, 141, 45, .2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.collection-switcher span { color: #82968a; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.collection-switcher a { color: #a88d2d; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.theme-milah { --page-bg: #061f17; --accent: #d9c173; --accent-soft: rgba(102, 150, 104, .22); }
.theme-terralux { --page-bg: #06142d; --accent: #a8bfe9; --accent-soft: rgba(63, 100, 172, .3); }
.theme-mehandi { --page-bg: #f2daa6; --accent: #282d16; --accent-soft: rgba(40, 45, 22, .16); }
.theme-doralet { --page-bg: #ad527e; --accent: #f3aacb; --accent-soft: rgba(226, 114, 165, .26); }

/* Overrides for light backgrounds */
.theme-mehandi .detail-page { background: var(--page-bg); }
.theme-mehandi { color: #282d16; }
.theme-mehandi .detail-copy h1, .theme-mehandi .brand-name { color: #282d16; background: none; -webkit-text-fill-color: initial; }
.theme-mehandi .detail-copy p { color: #4a4a4a; }
.theme-mehandi .collection-header nav a { color: #4a4a4a; }
.theme-mehandi .collection-header nav a:hover { color: #282d16; }
.theme-mehandi .outline-action { color: #282d16; border-color: rgba(40, 45, 22, .42); }
.theme-mehandi .collection-switcher span { color: #4a4a4a; }
.theme-mehandi .collection-switcher a { color: #282d16; }
.theme-mehandi .detail-page::before { filter: invert(1); opacity: .1; }
.theme-silver { --page-bg: #301f22; --accent: #e9b8a8; --accent-soft: rgba(222, 163, 145, .25); }

@media (max-width: 820px) {
  .collection-header nav a:not(.nav-collections) { display: none; }
  .brand-name { font-size: 18px; }
  .detail-page { padding-top: 124px; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-copy { text-align: center; }
  .detail-kicker, .detail-actions { justify-content: center; }
  .detail-copy p { margin-inline: auto; }
  .brochure-art { width: min(520px, calc(100% - 30px)); }
  .milah-gallery { width: min(680px, 100%); }
  .collection-gallery { width: min(680px, 100%); }
  .collection-switcher { margin-top: 56px; }
}

@media (max-width: 520px) {
  .collection-header { padding-block: 16px; }
  .brand-lockup svg { width: 28px; }
  .brand-name { font-size: 15px; letter-spacing: .14em; }
  .collection-header nav a { font-size: 10px; }
  .detail-page { padding-top: 108px; }
  .detail-copy h1 { font-size: clamp(42px, 16vw, 64px); }
  .brochure-art::after { display: none; }
  .milah-gallery { grid-template-columns: 1fr; }
  .collection-gallery { grid-template-columns: 1fr; }
  .collection-switcher { align-items: flex-start; flex-direction: column; }
}