/* ==========================================================================
   MONÁ. theme overrides — loaded after the compiled main.*.css
   Goal: light, warm ivory palette (luxury feel) + the banner photo as a
   soft, blurred backdrop behind the whole page. Edit values here; nothing in
   the compiled bundle needs to change.
   ========================================================================== */

:root {
  /* base tokens the compiled CSS consumes */
  --ink:      #1c1008;
  --cream:    #f7f2eb;
  --stone:    #e9e2d9;                 /* scrollbar track only now */
  --charcoal: #1c1008;                 /* buttons / labels: richer than the old grey-brown */
  --gold:     #b89a5e;
  --mid:      #8a7f72;
  --rule:     rgba(28, 16, 8, .14);

  /* section surfaces + text */
  --sec-bg:   rgba(247, 242, 235, .80); /* translucent ivory veil over the banner */
  --sec-hi:   #1c1008;
  --sec-80:   rgba(28, 16, 8, .84);
  --sec-70:   rgba(28, 16, 8, .74);
  --sec-60:   rgba(28, 16, 8, .68);

  /* page-level */
  --page-ivory: #f6f1ea;
  --hero-veil:  rgba(247, 242, 235, .50);
  --strip-veil: rgba(247, 242, 235, .62);
  --foot-veil:  rgba(240, 234, 226, .92);
}

html { background: var(--page-ivory); }

body {
  background-color: transparent;       /* html carries the ivory; body must not cover body::before */
  color: var(--sec-hi);
}

/* ---- blurred banner backdrop ------------------------------------------ */
body::before {
  content: "";
  position: fixed;
  inset: -64px;                        /* hide the blur's soft edges off-screen */
  z-index: -1;
  background: url("/images/banner.jpeg") center 45% / cover no-repeat;
  filter: blur(28px) saturate(.85) brightness(1.22);
  opacity: .68;
  transform: translateZ(0);
  pointer-events: none;
}

/* let the backdrop show through the app wrapper */
#root > div { background-color: transparent !important; }

/* ---- section surfaces --------------------------------------------------- */
#home                      { background-color: var(--hero-veil) !important; }
[data-testid="editorial-marquee"] { background-color: var(--strip-veil) !important; }
#products.bg-stone         { background-color: var(--sec-bg) !important; }
footer                     { background-color: var(--foot-veil) !important; }

/* ---- rules / borders ---------------------------------------------------- */
.border-rule { border-color: var(--rule); }
::selection  { background: rgba(184, 154, 94, .28); color: var(--ink); }
::-webkit-scrollbar-track { background: var(--stone); }
::-webkit-scrollbar-thumb { background: rgba(28, 16, 8, .28); border-color: var(--stone); }

/* ---- "How We Create" chapters: crisp card so the copy is easy to read ---- */
#process .grid.border-rule {
  background: rgba(255, 253, 249, .78);
  border-color: rgba(28, 16, 8, .12);
  box-shadow: 0 24px 60px -32px rgba(28, 16, 8, .28);
}
#process article > span:first-child { color: var(--gold); }   /* I · II · III */
#process article p { color: rgba(28, 16, 8, .72); }

/* ---- buttons / labels that used the old grey-brown ---------------------- */
.bg-charcoal            { background-color: var(--ink); }
.hover\:bg-\[\#242120\]:hover { background-color: #3a2a1c; }
.text-charcoal          { color: var(--ink); }
.border-charcoal\/30    { border-color: rgba(28, 16, 8, .3); }

/* ---- header: frosted ivory bar so content scrolling beneath stays clean -- */
header.fixed {
  background-color: rgba(247, 242, 235, .66) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid rgba(28, 16, 8, .06);
}

/* ---- hero: the banner as a full-bleed image band under the headline ------ */
#home {
  --band: clamp(220px, 62vw, 340px);          /* phone: taller band, more jewelry */
  min-height: 0 !important;                     /* no forced full-screen height = no dead gap */
  padding-top: clamp(104px, 16vh, 150px) !important;
  padding-bottom: calc(var(--band) + 36px) !important;
}
@media (min-width: 768px) {
  #home { --band: clamp(280px, 32vw, 480px); padding-top: clamp(130px, 19vh, 190px) !important; }
}
#home::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--band);
  background: url("/images/banner.jpeg") center 76% / cover no-repeat;   /* aim the crop at the studs + ring */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  pointer-events: none;
}

/* ---- carousel: light blurred travertine behind the photos, no mats -------- */
[data-testid="product-carousel-section"] {
  position: relative;
  isolation: isolate;
  background: #e9e0d4 !important;
  border-top-color: rgba(28, 16, 8, .08) !important;
}
[data-testid="product-carousel-section"]::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: url("/images/banner.jpeg") center 60% / cover no-repeat;
  filter: blur(34px) saturate(.9) brightness(1.06);
  transform: scale(1.08);
}
[data-testid="product-carousel-section"]::after {          /* soft ivory veil */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(247, 242, 235, .38), rgba(247, 242, 235, .22));
  pointer-events: none;
}
[data-testid="product-carousel-section"] figure { padding: 0; background: none; box-shadow: none; }
[data-testid="product-carousel-section"] figure > div {
  background-color: #d8ccbb !important;
  box-shadow: 0 32px 54px -30px rgba(28, 16, 8, .5);
}