/* ---------- Skønhed page ---------- */
.page-beauty { background: #faf6f3; }

/* 1. Hero with the glass drop */
.bhero { height: 220vh; background: #f4efea; }
.bhero__sticky {
  position: sticky; top: 0; z-index: 2;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.bhero__sticky::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 246, 243, .92) 0%, rgba(250, 246, 243, .7) 32%, rgba(250, 246, 243, 0) 58%);
}
.bhero__media { position: absolute; inset: 0; }
.bhero__media img { width: 100%; height: 100%; object-fit: cover; }
.bhero__copy {
  position: absolute; z-index: 2; left: var(--gutter); top: 50%;
  max-width: 540px;
  display: grid; gap: 24px; justify-items: start;
  transform: translateY(calc(-50% - var(--p, 0) * 12vh));
  opacity: calc(1.5 - var(--p, 0) * 1.8);
}
.bhero__copy .display { font-size: clamp(64px, 10vw, 170px); }
.bhero__copy em { font-style: italic; }
.bhero__lead { font-size: clamp(16px, 1.4vw, 20px); max-width: 420px; }
.bhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
html:not(.gl-on) .bhero { height: auto; }
html:not(.gl-on) .bhero__sticky { position: relative; height: min(100svh, 860px); }

/* 2. Magnetic bubbles */
.bubbles { position: relative; z-index: 2; padding: 150px var(--gutter) 120px; text-align: center; }
.bubbles .section-head { justify-items: center; }
.bubbles__cloud {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 34px 42px; max-width: 1180px; margin: 0 auto;
}
.bubble {
  --size: 150px;
  display: grid; justify-items: center; gap: 14px;
  animation: bob 6s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) * -1);
}
.bubble--xl { --size: 220px; }
.bubble--lg { --size: 185px; }
.bubble--sm { --size: 118px; }
@keyframes bob { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
.bubble__img {
  width: var(--size); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  transform: translate(var(--mx, 0), var(--my, 0));
  box-shadow: 0 24px 40px -24px rgba(90, 40, 50, .35), inset 0 0 0 1px rgba(255, 255, 255, .6);
  background: #fff;
}
.bubble__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bubble:hover .bubble__img img { transform: scale(1.1); }
.bubble__label { font: 400 clamp(17px, 1.4vw, 21px)/1.1 var(--serif); transition: color .3s; }
.bubble:hover .bubble__label { color: var(--sale); }

/* 3. Glass shelf */
.shelf { position: relative; z-index: 2; padding: 90px var(--gutter) 130px; }
.shelf__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 26px; }
.page-beauty .product__img {
  background: linear-gradient(180deg, #fff 0%, #f6efeb 100%);
  -webkit-box-reflect: below 1px linear-gradient(transparent 86%, rgba(255, 255, 255, .3));
  margin-bottom: 13%;
}
.page-beauty .product__img img { object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.page-beauty .product__img::after {
  /* glass plank */
  content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(210, 200, 196, .5));
  box-shadow: 0 8px 18px -8px rgba(80, 40, 50, .35);
}

/* 4. Stacked deck */
.deck { position: relative; z-index: 2; padding: 120px var(--gutter) 10vh; background: #fff; }
.deck__intro { display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 900px; margin: 0 auto 90px; }
.deck__intro em { font-style: italic; }
.deck__lead { font: 400 clamp(20px, 2vw, 30px)/1.3 var(--serif); }
.deck__lead .w { opacity: var(--o, .14); transition: opacity .25s linear; }
.deck__cards { display: grid; gap: 7vh; padding-bottom: 6vh; }
.card {
  position: sticky; top: calc(var(--nav-h) + 28px + var(--i) * 16px);
  height: min(72vh, 640px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 28px; overflow: hidden;
  background: var(--c);
  transform: scale(var(--s, 1)); transform-origin: 50% 0;
  filter: brightness(calc(1 - var(--dim, 0)));
  box-shadow: 0 -20px 60px -40px rgba(60, 30, 40, .4);
}
.card__img { overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: grid; align-content: center; gap: 22px; padding: clamp(28px, 5vw, 80px); justify-items: start; }
.card__num { font-size: 12px; letter-spacing: .14em; }
.card h3 { font: 400 clamp(36px, 4.6vw, 72px)/1 var(--serif); letter-spacing: -.02em; }
.card p { max-width: 420px; font-size: 16px; color: #4a4a4a; }

/* 5. Spotlight brands */
.spots { position: relative; z-index: 2; padding: 130px var(--gutter) 60px; }
.spots__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.spot__img { position: relative; aspect-ratio: 1; overflow: hidden; cursor: none; }
.spot__img img { width: 100%; height: 100%; object-fit: cover; }
.spot__img > img:first-child { filter: grayscale(1) contrast(.9) brightness(1.06); }
.spot__lit {
  position: absolute; inset: 0;
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
  transition: clip-path .6s var(--ease);
}
.spot__img.is-lit .spot__lit { clip-path: circle(34% at var(--x, 50%) var(--y, 50%)); transition: clip-path .5s var(--ease); }
.spot .brand__deal { margin-top: 16px; font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sale); }
.spot .brand__name { margin-top: 8px; font: 400 26px/1.1 var(--serif); }
@media (hover: none) {
  .spot__lit { clip-path: none; }
}

@media (max-width: 900px) {
  .bhero__sticky::before { background: linear-gradient(0deg, rgba(250, 246, 243, .95) 0%, rgba(250, 246, 243, .75) 38%, rgba(250, 246, 243, 0) 62%); }
  .bhero__copy { top: auto; bottom: 7vh; right: var(--gutter); transform: translateY(calc(var(--p, 0) * -8vh)); }
  .bubbles__cloud { gap: 22px 18px; }
  .bubble { --size: 104px; }
  .bubble--xl { --size: 150px; }
  .bubble--lg { --size: 128px; }
  .bubble--sm { --size: 88px; }
  .shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; }
  .card { grid-template-columns: 1fr; grid-template-rows: 55% 45%; height: 76vh; border-radius: 20px; }
  .card__body { padding: 24px; gap: 12px; align-content: start; }
  .card p { font-size: 14px; }
  .spots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}