/* ============================================================
   NEXT LEVEL GEMS — landing page
   Built 1:1 from Figma (desktop 1512px). Font: Jost.
   ============================================================ */

:root {
  --page-w: 1512px;
  --gutter: 126px;

  --ink: #000000;
  --paper: #ffffff;
  --muted: #737373;
  --card-bg: #ececec;
  --line: #000000;

  --header-h: 88px;
  --hero-h: 780px;

  /* fluid horizontal padding: 126/1512 ≈ 8.33% */
  --pad-x: clamp(20px, 8.33vw, var(--gutter));
  /* nav sits closer to the edges than the content gutter (Figma: 46px) */
  --nav-pad: clamp(20px, 3.04vw, 46px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Jost", "Century Gothic", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* ---- shared bits ---------------------------------------- */

.eyebrow {
  margin: 0;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow--on-dark { color: #fff; }

.section-title {
  margin: 6px 0 0;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.64px;
  color: var(--ink);
}
.section-title--sm {
  font-size: 24px;
  letter-spacing: -0.48px;
}

.section-head {
  text-align: center;
}

/* underlined text link */
.link-underline {
  position: relative;
  display: inline-block;
  font-size: 16px;
  letter-spacing: -0.32px;
  padding-bottom: 8px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 190px;
  max-width: 80vw;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
}
.link-underline--on-dark { color: #fff; }

/* outlined button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border: 1px solid var(--ink);
  font-size: 14px;
  letter-spacing: 0.42px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--nav-pad);
  z-index: 100;
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* solid white state — triggered on scroll (.is-solid) or hover */
.site-header.is-solid,
.site-header:hover {
  background: #fff;
  color: var(--ink);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

.nav { display: flex; align-items: center; gap: 41px; }
.nav--left { flex: 1; }
.nav--right { flex: 1; justify-content: flex-end; }

.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: -0.28px;
  color: inherit;
  transition: opacity .2s ease;
}
.nav__item:hover { opacity: 0.65; }

.nav__item .icon { width: 18px; height: 18px; flex: none; }

.brand {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.48px;
  color: inherit;
  white-space: nowrap;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: var(--hero-h);
  background: #b9b9bb url("assets/hero.jpg") center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero__overlay {
  text-align: center;
  color: #fff;
  padding-bottom: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero__title {
  margin: 0;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.64px;
  color: #fff;
}

/* ============================================================
   NEW ARRIVALS
   ============================================================ */
.arrivals {
  padding: 68px var(--pad-x) 0;
  max-width: var(--page-w);
  margin: 0 auto;
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
  margin-top: 66px;
}

.card { text-align: center; }

.card__media {
  position: relative;
  aspect-ratio: 302 / 378;
  background: var(--card-bg);
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.card:hover .card__media img { transform: scale(1.03); }

.card__bag {
  position: absolute;
  right: 11px;
  bottom: 12px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #000;
  transition: background-color .2s ease, color .2s ease;
}
.card__bag svg { width: 12px; height: 12px; }
.card__bag:hover { background: #000; color: #fff; }

.card__name {
  margin: 16px 0 0;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.28px;
}
.card__note {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: -0.24px;
  color: var(--muted);
}
.card__price {
  margin: 7px 0 0;
  font-size: 14px;
  letter-spacing: -0.28px;
}
.card__price--ask {
  display: inline-block;
  text-decoration: underline;
  text-underline-position: from-font;
}

.arrivals .btn-outline { margin: 47px 0 0; }

/* ============================================================
   ABOUT / PROCESS
   ============================================================ */
.process {
  padding: 127px var(--pad-x) 0;
  max-width: var(--page-w);
  margin: 0 auto;
}

.process__lead {
  max-width: 508px;
  margin: 19px auto 0;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.32px;
  color: var(--muted);
  text-align: center;
}

/* full-bleed 16:9 band with figma blur-fill: sharp centre + blurred wings */
.process__macro {
  position: relative;
  margin-top: 56px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.process__macro-bg,
.process__macro-fg {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  display: block;
}
/* blurred zoomed copy fills the wings edge-to-edge */
.process__macro-bg {
  width: 100%;
  object-fit: cover;
  transform: translateX(-50%) scale(1.15);
  filter: blur(48px) saturate(1.08);
}
/* sharp video, full height, natural (portrait) width, centred */
.process__macro-fg {
  width: auto;
  max-width: 100%;
  transform: translateX(-50%);
  object-fit: contain;
}
.process__macro img { width: 100%; height: 100%; object-fit: cover; display: block; }

.process__row {
  display: flex;
  gap: var(--gutter);
  margin-top: 65px;
  align-items: flex-start;
}

.process__cutter {
  position: relative;
  display: block;
  margin: 0;
  flex: 0 0 auto;
  width: 630px;
  height: 787px;
  max-width: 56%;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.process__cutter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.process__cutter:hover img { transform: scale(1.04); }

/* play button → links to the YouTube video */
.process__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s ease;
}
.process__play svg {
  width: 76px;
  height: 76px;
  transition: transform .3s ease;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}
.process__cutter:hover .process__play { background: rgba(0, 0, 0, 0.12); }
.process__cutter:hover .process__play svg { transform: scale(1.08); }
.process__cutter figcaption {
  position: absolute;
  left: 26px;
  bottom: 36px;
  font-size: 16px;
  letter-spacing: -0.32px;
  color: #fff;
  max-width: 70%;
}

.process__gem {
  margin: 79px 0 0;
  flex: 0 0 auto;
  width: 504px;
  height: 630px;
  max-width: 45%;
  background: var(--card-bg);
  overflow: hidden;
}
.process__gem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: 156px;
  height: 128px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
}
.brand--dark { color: var(--ink); font-size: 14px; letter-spacing: -0.28px; }

.footer-links { display: flex; gap: 32px; }
.footer-links a {
  font-size: 14px;
  letter-spacing: -0.28px;
  transition: opacity .2s ease;
}
.footer-links a:hover { opacity: 0.6; }

/* ============================================================
   PRODUCT DETAIL  (product.html)
   Split layout: gallery is fixed full-height, only the info
   column scrolls. Desktop coords are exact to the Figma frame
   (1512-wide coordinate system, centered via calc(50% ± px)).
   ============================================================ */
:root { --rule: #d9d9d9; }

/* light page → nav transparent + black text, solid white on hover */
body.page-light { background: #fff; }
body.page-light .site-header {
  background: transparent;
  color: var(--ink);
  border-bottom-color: transparent;
}
body.page-light .site-header:hover,
body.page-light .site-header.is-solid {
  background: #fff;
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

/* ---- fixed gallery ---- */
.pd-gallery { position: fixed; inset: 0; z-index: 5; pointer-events: none; }

.pd-center {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 100vh;
  background: var(--card-bg);
  overflow: hidden;
}
.pd-center > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-left {
  position: fixed;
  top: 50%;
  left: calc(50% - 630px);
  transform: translateY(-50%);
  width: 322px;
  height: 402.5px;
  background: var(--card-bg);
  overflow: hidden;
}
/* left image = heavy macro zoom into the centre of the stone */
.pd-left > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(3.3);
  transform-origin: center 52%;
}

/* carousel + zoom (bottom of the full-height centre image) */
.pd-controls {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 6;
  pointer-events: auto;
}
.pd-arrow {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.pd-arrow:hover { background: rgba(255, 255, 255, 0.45); }
.pd-arrow svg { width: 13px; height: 13px; }

.pd-dots { display: flex; gap: 6px; }
.pd-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); }
.pd-dots span.is-active { background: #fff; }

.pd-zoom {
  position: fixed;
  left: calc(50% + 222px);
  bottom: 48px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #000;
  z-index: 6;
  pointer-events: auto;
  transition: background-color .2s ease, color .2s ease;
}
.pd-zoom svg { width: 13px; height: 13px; }
.pd-zoom:hover { background: #000; color: #fff; }

/* ---- scrolling info column (normal flow → expands cleanly) ---- */
.pd-info {
  position: relative;
  z-index: 10;
  margin-left: calc(50% + 308px);
  width: 322px;
  padding: 136px 0 96px;   /* SKU lands at y136; only this column scrolls */
}

.pd-head { text-align: center; }
.pd-sku  { margin: 0; font-weight: 300; font-size: 10px; letter-spacing: 0.2px; color: #000; }
.pd-name { margin: 6px 0 0; font-weight: 400; font-size: 32px; letter-spacing: -0.64px; color: #000; }
.pd-type { margin: 12px 0 0; font-size: 16px; letter-spacing: -0.32px; color: #000; }

.pd-btn {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; margin: 48px auto 0;
  padding: 14px 32px;
  background: #000; border: 1px solid #000; color: #fff;
  font-size: 14px; letter-spacing: 0.42px; white-space: nowrap; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.pd-btn:hover { background: #fff; color: #000; }

.pd-divider { height: 0; border-top: 1px solid var(--rule); margin-top: 64px; }

.pd-desc {
  margin: 48px 0 0;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.28px; color: #000;
}
.pd-desc.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-readmore {
  display: inline-block; margin: 13px 0 0;
  font-size: 14px; letter-spacing: -0.28px; color: #000;
  background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap;
}
.pd-accent { height: 0; border-top: 1px solid var(--rule); width: 63px; margin-top: 8px; }

.pd-specs { list-style: none; margin: 23px 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.pd-specs li {
  border-top: 1px solid var(--rule);
  padding: 17px 0 16px;
  font-size: 12px; line-height: 1.5; letter-spacing: -0.24px; color: #000;
}

/* ============================================================
   SHOP PAGE  (shop.html)
   ============================================================ */
.shop { max-width: var(--page-w); margin: 0 auto; padding-top: var(--header-h); }

.shop__topline { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.shop__head { text-align: center; padding-top: 28px; }
.shop__title { margin: 0; font-weight: 400; font-size: 32px; letter-spacing: -0.64px; color: var(--ink); }

.shop__filters {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--rule);
}
.shop__filters a {
  font-size: 14px;
  letter-spacing: -0.28px;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}
.shop__filters a:hover { opacity: .55; }
.shop__filters a.is-active { border-bottom-color: var(--ink); }

.shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 17px;
  row-gap: 48px;
  padding: 48px var(--pad-x) 96px;
}

/* ---- lightbox (zoom) ---- */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  cursor: zoom-out;
}
.pd-lightbox.is-open { opacity: 1; visibility: visible; }
.pd-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(.97);
  transition: transform .28s ease;
}
.pd-lightbox.is-open img { transform: scale(1); }
.pd-lightbox__close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s ease;
}
.pd-lightbox__close:hover { opacity: 1; }
.pd-lightbox__close svg { width: 22px; height: 22px; }

/* ---- mobile: stack gallery, info flows below ---- */
@media (max-width: 1099px) {
  .pd-gallery { position: static; pointer-events: auto; }
  .pd-center {
    position: relative; left: auto; transform: none;
    width: 100%; height: 70vh; margin-top: var(--header-h);
  }
  .pd-left { display: none; }
  .pd-controls { position: absolute; bottom: 24px; }
  .pd-zoom { position: absolute; left: auto; right: 20px; bottom: 24px; }

  .pd-info {
    margin: 0; width: auto;
    padding: 40px 20px 64px;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .shop__grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 40px; }
  .process__macro { aspect-ratio: 16 / 9; }
  .process__row { flex-direction: column; gap: 32px; align-items: stretch; }
  .process__cutter,
  .process__gem {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 630 / 787;
    margin: 0;
  }
  .process__gem { aspect-ratio: 504 / 630; }
}

@media (max-width: 620px) {
  :root { --header-h: 64px; }
  .site-header { gap: 12px; }
  .brand { font-size: 18px; }
  .nav { gap: 18px; }
  .nav--left .nav__item span { display: none; }
  .hero__title,
  .section-title { font-size: 24px; }
  .cards { grid-template-columns: 1fr; }
  .shop__grid { grid-template-columns: 1fr; }
  .shop__filters { gap: 12px 16px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .card__media { aspect-ratio: 4 / 5; }
  .site-footer {
    flex-direction: column;
    gap: 18px;
    height: auto;
    padding-top: 32px;
    padding-bottom: 32px;
    text-align: center;
  }

  .product { grid-template-columns: 1fr; }
  .product__media { height: auto; aspect-ratio: 322 / 380; }
  .product__main { height: auto; aspect-ratio: 1 / 1; }
}