/* GlorySmile — Ritual page, "V34 Night".
   One cinematic scroll, bands alternating --base / --base-2 / --night:
   hero (the word + her ring of light) · three step chapters (stacked like slides on tall desktops)
   · why violet (two lights meet) · the LED dark room · FAQ · Glory Kit.
   Mobile first; side by side from 900px. Light is a material here: every image stands in front of
   a soft ultraviolet source, never on a pale surface. */

/* ======================================================================
   1. Hero — the mega word, one line, the step index; the portrait in her own ring of light
   ====================================================================== */
.r-hero {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-block: clamp(1.75rem, 6vw, 3rem) clamp(3.5rem, 12vw, 5rem);
}
.r-hero__in { display: grid; gap: clamp(2.25rem, 7vw, 3rem); }
.r-hero__text { container-type: inline-size; }
.r-hero__title {
  font-weight: 200;
  font-size: min(24cqi, 14.5rem);       /* "Ритуал" spans its column at every width */
  letter-spacing: -0.06em;
  line-height: 0.86;
  margin-left: -0.055em;                /* optical: the stem of "Р" sits on the gutter */
}
.r-hero__line {
  margin-top: clamp(1.1rem, 2.4vw, 1.75rem);
  font-size: var(--t-l); line-height: 1.35;
  color: var(--text-2);
  max-width: 24ch;
  text-wrap: balance;
}

/* Step index: three lit macro circles that jump to the chapters */
.r-index {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(1.25rem, 2.6vw, 1.75rem);
  border-top: 1px solid rgba(169, 139, 255, 0.2);
}
.r-index a {
  display: grid; justify-items: start; gap: 0.7rem;
  min-height: 44px; text-decoration: none;
  font-weight: 600; font-size: var(--t-s); line-height: 1.2;
}
.r-index__img {
  width: 56px; height: 56px; flex: none;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.34), 0 10px 26px -10px rgba(108, 59, 255, 0.95);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.r-index__label { white-space: nowrap; font-size: min(var(--t-s), 3.7vw); transition: color 0.25s var(--ease); }   /* "3 Поддържай" stays on one line at 360px */
.r-index__n { font-family: var(--f-display); font-weight: 300; color: var(--violet-hi); margin-right: 0.2em; }
.r-index a:hover .r-index__img { transform: scale(1.06); box-shadow: 0 0 0 1.5px var(--violet-hi), 0 12px 32px -8px rgba(108, 59, 255, 1); }
.r-index a:hover .r-index__label { color: var(--lilac); }
/* One row once the text column is wide enough (container = .r-hero__text) */
@container (min-width: 560px) {
  .r-index { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }
  .r-index a { display: inline-flex; align-items: center; gap: 0.9rem; }
  .r-index__label { font-size: var(--t-m); }
}

/* The portrait: an arch, lit from behind by an ultraviolet source */
.r-hero__media { position: relative; width: min(84%, 420px); justify-self: center; }
.r-hero__media::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 42%; width: 190%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.62), rgba(108, 59, 255, 0.2) 48%, rgba(108, 59, 255, 0));
}
.r-hero__arch {
  aspect-ratio: 2 / 3;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.32), 0 50px 100px -40px rgba(108, 59, 255, 1);
}
.r-hero__arch img { object-position: 50% 18%; }

@media (min-width: 900px) {
  .r-hero {
    display: grid; align-content: center;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(2rem, 5vh, 3.5rem);
  }
  .r-hero__in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(3rem, 6vw, 7rem);
  }
  .r-hero__text { padding-bottom: 0.25rem; }
  .r-hero__media {
    /* height-led: the arch fills the first screen without pushing the fold */
    width: min(38vw, calc((100svh - var(--header-h) - 7rem) * 2 / 3));
    min-width: 320px; max-width: 600px;
  }
}

/* ======================================================================
   2. The three steps — one chapter per band: a product world in an arch, its macro in a circle,
      a lit numeral, one line, the products it uses
   ====================================================================== */
.r-steps__list { list-style: none; padding: 0; }
.step {
  --band: var(--base-2);
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--band);
  padding-block: clamp(4.5rem, 14vw, 7rem);
  border-top: 1px solid rgba(169, 139, 255, 0.14);
}
.step:nth-child(even) { --band: var(--base); }
.step:focus { outline: none; }   /* focused only as the start point after an index jump (ritual.js), never as a control */
.step__in { display: grid; gap: clamp(2.5rem, 8vw, 4rem); align-items: center; }

/* Media: the arch, with the macro circle tucked into its lower outer corner */
.step__media {
  position: relative; width: 100%; max-width: 460px; justify-self: center;
  padding: 0 17% 15% 0;
}
.step--flip .step__media { padding: 0 0 15% 17%; }
.step__media::before {   /* the light source behind the world */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 42%; top: 44%; width: 160%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.5), rgba(108, 59, 255, 0.14) 52%, rgba(108, 59, 255, 0));
}
.step--flip .step__media::before { left: 58%; }
.step__arch {
  aspect-ratio: 2 / 3;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.28), 0 44px 90px -40px rgba(108, 59, 255, 1);
}
.step__circle {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: 46%;
  /* a ring in the band colour cuts the circle out of the arch */
  box-shadow: 0 0 0 clamp(6px, 1vw, 10px) var(--band), 0 30px 60px -22px rgba(108, 59, 255, 0.95);
}
.step--flip .step__circle { right: auto; left: 0; }
/* The LED macro brings its own blue light */
.step__circle--led {
  background: var(--night);
  box-shadow: 0 0 0 clamp(6px, 1vw, 10px) var(--band), 0 0 70px 4px rgba(61, 139, 255, 0.5);
}
.step__arch img, .step__circle img { transition: transform 0.9s var(--ease); }
.step__media:hover .step__arch img, .step__media:hover .step__circle img { transform: scale(1.04); }

/* Body: a numeral made of light, the verb, one line */
.step__head { display: flex; align-items: flex-end; gap: clamp(0.9rem, 3vw, 1.5rem); }
.step__n {
  flex: none;
  font-family: var(--f-display); font-weight: 200;
  font-size: clamp(5.5rem, 26vw, 8rem);
  line-height: 0.74; letter-spacing: -0.07em;
  margin-left: -0.06em;
  color: var(--violet-hi);
  text-shadow: 0 0 24px rgba(108, 59, 255, 0.95), 0 0 70px rgba(108, 59, 255, 0.6);
}
.step__title { font-size: clamp(2rem, 4.2vw + 0.6rem, 4.5rem); line-height: 1; padding-bottom: 0.02em; }
.step__text {
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
  font-size: var(--t-l); line-height: 1.4;
  color: var(--text-2);
  max-width: 27ch;
}

/* Product picks: lit pill rows (packshot · name + price · round add). The whole row opens the product. */
.picks {
  list-style: none; padding: 0;
  display: grid; gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 440px;
}
.pick {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  min-height: 76px; padding: 0.45rem 0.5rem 0.45rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid rgba(169, 139, 255, 0.24);
  transition: border-color 0.25s var(--ease), box-shadow 0.35s var(--ease), background-color 0.25s var(--ease);
}
.pick:hover { border-color: var(--violet-hi); background: var(--surface-2); box-shadow: 0 18px 44px -20px rgba(108, 59, 255, 0.95); }
.pick__img { width: 64px; height: 64px; flex: none; box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3); }
.pick__img img { transform: scale(1.22); transition: transform 0.8s var(--ease); }
.pick:hover .pick__img img { transform: scale(1.3); }
.pick__meta { display: grid; gap: 0.15rem; margin-right: auto; min-width: 0; line-height: 1.25; }
.pick__name { font-weight: 600; text-decoration: none; color: var(--text); text-wrap: balance; }
.pick__name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* whole row is the link */
.pick__name:focus-visible { outline: none; }
.pick:has(.pick__name:focus-visible) { outline: 3px solid var(--violet-hi); outline-offset: 3px; }
.pick__price { font-size: var(--t-s); color: var(--text-2); }
.pick .icon-btn { position: relative; z-index: 1; box-shadow: 0 10px 26px -10px rgba(108, 59, 255, 0.95); }
.pick .icon-btn:hover { background: var(--text); color: var(--base); border-color: var(--text); }

/* The LED pick is a piece of the dark room: night pill, blue light */
.pick--night { background: var(--night); border-color: rgba(61, 139, 255, 0.4); }
.pick--night:hover { background: var(--night); border-color: var(--glow); box-shadow: 0 18px 44px -20px rgba(61, 139, 255, 0.85); }
.pick--night .pick__img { background: var(--night); box-shadow: 0 0 0 1.5px rgba(61, 139, 255, 0.85), 0 0 22px rgba(61, 139, 255, 0.45); }
.pick--night .pick__img img { transform: scale(1.12); }
.pick--night:hover .pick__img img { transform: scale(1.2); }

/* "или" between the two ways to whiten */
.picks__or {
  display: flex; align-items: center; gap: 1rem;
  padding-inline: 1.75rem;
  font-size: var(--t-s); color: var(--text-2);
}
.picks__or::before, .picks__or::after { content: ''; flex: 1; height: 1px; background: rgba(169, 139, 255, 0.26); }

/* Side by side from tablets up: a centred image over left-aligned text reads as a stretched phone */
@media (min-width: 700px) {
  .step__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 7vw, 8rem); }
  .step--flip .step__media { order: 2; }
  .step__head { flex-direction: column; align-items: flex-start; gap: clamp(1.25rem, 2.2vw, 2rem); }
  .step__n { font-size: clamp(7rem, 13vw, 13.5rem); }
}
@media (min-width: 900px) {
  .step__media {
    /* height-led: arch + circle always fit one band (total height = 1.38 × width) */
    width: min(100%, calc((100svh - var(--header-h) - 7rem) / 1.38));
    max-width: 540px; min-width: 340px;
  }
}
/* Tall desktops: the chapters stack like slides, each one sliding over the last */
@media (min-width: 900px) and (min-height: 760px) {
  .step {
    position: sticky; top: var(--sticky-top);
    display: grid; align-items: center;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(2rem, 5vh, 3.5rem);
    scroll-margin-top: -16px;   /* a jump lands flush under the header, like the stuck chapter */
  }
  /* the sliding chapter casts a soft shade on the one it covers */
  .step + .step::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px; pointer-events: none;
    background: linear-gradient(to top, rgba(5, 2, 18, 0.55), rgba(5, 2, 18, 0));
  }
}

/* ======================================================================
   3. Why violet — two lights meet; where they overlap the tint cancels into neutral pearl light.
      Honest colour theory, no result claims. --v (0…1) comes from the slider.
   ====================================================================== */
.r-tint {
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--base);
  padding-block: var(--section);
  border-top: 1px solid rgba(169, 139, 255, 0.14);
}
.r-tint__in { display: grid; justify-items: center; text-align: center; }
.r-tint__title { font-size: var(--t-2xl); max-width: 12ch; }
.r-tint__text {
  margin-top: 1.25rem;
  font-size: var(--t-l); line-height: 1.4; color: var(--text-2);
  max-width: 34ch;
}

/* Two lights in a dark room: each one glows into the night around it. They follow the slider directly
   (no easing lag behind the thumb). */
.tint {
  --d: clamp(160px, 44vw, 420px);
  position: relative;
  width: calc(var(--d) * 2); height: var(--d);
  margin-top: clamp(3rem, 7vw, 5rem);
}
.tint__disc {
  position: absolute; top: 0; left: 0;
  width: var(--d); height: var(--d); border-radius: 50%;
  /* both lights travel toward the centre; at --v:1 they coincide */
  transform: translateX(calc(var(--v) * 50%));
}
/* warm light: the yellow tint */
.tint__disc--warm {
  background: radial-gradient(closest-side, #F8D486, #E8AC45 55%, #C4842A);
  box-shadow: 0 0 90px -8px rgba(232, 172, 69, 0.55);
}
/* violet light: the V34 corrector */
.tint__disc--violet {
  transform: translateX(calc(100% - var(--v) * 50%));
  background: radial-gradient(closest-side, #A07FFF, #7040FF 55%, #4F20E0);
  box-shadow: 0 0 100px -4px rgba(108, 59, 255, 0.85);
}
/* Lens = warm ∩ violet: the parent clips to the warm light, the child is the violet light.
   Where the two lights meet, the hue cancels into neutral pearl light: bright at the core, lilac-grey at the rims,
   a thin pearl line around it. ritual.js caps the mix (--v <= 0.6), so the lens never grows into a pale disc. */
.tint__disc--lens, .tint__disc--rim { overflow: hidden; }
.tint__disc--lens > span, .tint__disc--rim > span {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(241, 237, 255, 0.75), inset 0 0 24px rgba(108, 59, 255, 0.55);
}
.tint__disc--lens > span {
  transform: translateX(calc((1 - var(--v)) * 100%));
  background: radial-gradient(calc(var(--d) * (0.04 + var(--v) * 0.4)) calc(var(--d) * 0.47) at calc(var(--v) * 50%) 50%,
    #EEE9FF, #BEB4E6 30%, #8D82BF 72%, #6E62A8);
}
/* the lens's other arc: the parent clips to the violet light, the child is the warm light's edge */
.tint__disc--rim { transform: translateX(calc(100% - var(--v) * 50%)); }
.tint__disc--rim > span { transform: translateX(calc((var(--v) - 1) * 100%)); }

.r-tint__control {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.25rem;
  width: min(100%, 520px);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: 0.5rem 1.5rem 0.5rem 1.6rem;
  min-height: 64px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid rgba(169, 139, 255, 0.28);
}
.r-tint__label { font-weight: 600; }

/* Range: a lit track up to the thumb, a pearl thumb with a glow */
.r-tint__range {
  --p: 50%;   /* ritual.js keeps it on the thumb */
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer;
}
.r-tint__range:focus-visible { outline: none; }
.r-tint__control:has(.r-tint__range:focus-visible) { outline: 3px solid var(--violet-hi); outline-offset: 3px; }
.r-tint__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--violet-hi) 0 var(--p), rgba(169, 139, 255, 0.24) var(--p) 100%);
}
.r-tint__range::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: rgba(169, 139, 255, 0.24); }
.r-tint__range::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--violet-hi); }
.r-tint__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--text); border: 0;
  box-shadow: 0 0 0 6px rgba(169, 139, 255, 0.24), 0 0 22px rgba(169, 139, 255, 0.85);
  transition: transform 0.2s var(--ease);
}
.r-tint__range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--text); border: 0;
  box-shadow: 0 0 0 6px rgba(169, 139, 255, 0.24), 0 0 22px rgba(169, 139, 255, 0.85);
}
.r-tint__range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.r-tint__range:active::-webkit-slider-thumb { transform: scale(1.14); }

/* ======================================================================
   4. LED — the one dark room on the page. The portrait bleeds off the edge and dissolves into the night;
      the blue light spills into the room behind the words.
   ====================================================================== */
.r-led {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--night); color: var(--text);
}
.r-led::before {   /* blue light spilling from the mouthpiece into the room */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 52%; width: 150vw; max-width: 1500px; aspect-ratio: 1.3; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(61, 139, 255, 0.2), rgba(61, 139, 255, 0.06) 55%, rgba(61, 139, 255, 0));
}
.r-led__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 58%, transparent 97%);
          mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 58%, transparent 97%);
}
.r-led__in { position: relative; margin-top: clamp(-7rem, -18vw, -3rem); padding-bottom: var(--section); }
.r-led__title { font-size: clamp(2.75rem, 5.6vw + 0.8rem, 6.5rem); font-weight: 200; letter-spacing: -0.05em; line-height: 0.95; max-width: 9ch; }
.r-led__text {
  margin-top: 1.25rem;
  font-size: var(--t-l); line-height: 1.4;
  color: var(--text-2);
  max-width: 30ch;
}
.r-led__price { margin-top: clamp(1.75rem, 4vw, 2.5rem); font-size: var(--t-xl); line-height: 1; }
.r-led__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-top: 1.5rem; }
.r-led .btn { box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.3), 0 18px 48px -14px rgba(61, 139, 255, 0.75); }
.r-led__link {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 600; color: var(--text);
  text-decoration: underline; text-decoration-color: rgba(245, 241, 255, 0.4); text-underline-offset: 0.3em;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.r-led__link:hover { color: var(--glow); text-decoration-color: currentColor; }

@media (max-width: 599px) {
  .r-led__actions .btn { width: 100%; }
}
@media (min-width: 700px) {
  .r-led { min-height: min(100svh, 1000px); display: grid; align-items: center; }
  .r-led__media { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 60%; }
  .r-led__media img {
    height: 100%; aspect-ratio: auto; object-position: 50% 26%;
    /* every edge that meets the room dissolves: right, top and bottom */
    -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 98%), linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, #000 52%, transparent 98%), linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
            mask-composite: intersect;
  }
  .r-led__in {
    z-index: 1; margin-top: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-block: var(--section);
  }
  .r-led__copy { grid-column: 2; padding-left: clamp(0rem, 3vw, 3rem); }
  .r-led::before { left: 38%; top: 50%; width: 90vw; }
}

/* ======================================================================
   5. FAQ — a calm band: big question rows, a round +/− that lights up when open
   ====================================================================== */
.r-faq {
  background: var(--base-2);
  padding-block: var(--section);
  border-top: 1px solid rgba(169, 139, 255, 0.14);
}
.r-faq__in { display: grid; gap: clamp(2.25rem, 6vw, 3.5rem); }
.r-faq__title { font-size: var(--t-2xl); }
.r-faq__more { margin-top: 1rem; font-size: var(--t-m); color: var(--text-2); }
.r-faq__more a, .r-faq__acc a {
  color: var(--text); font-weight: 600;
  text-decoration-color: rgba(169, 139, 255, 0.7);
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.r-faq__more a:hover, .r-faq__acc a:hover { color: var(--lilac); text-decoration-color: currentColor; }
.r-faq__img { display: none; }

body[data-page='ritual'] .r-faq__acc summary {
  min-height: 80px; padding: 1.1rem 0; gap: 1.25rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); font-weight: 500; line-height: 1.3;
}
body[data-page='ritual'] .r-faq__acc summary::after {
  content: ''; flex: none;
  width: 44px; height: 44px; margin: 0; border-radius: 50%;
  border: 1.5px solid rgba(169, 139, 255, 0.45);
  color: var(--violet-hi);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transform: none;
  transition: background-size 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body[data-page='ritual'] .r-faq__acc summary:hover::after { border-color: var(--violet-hi); }
body[data-page='ritual'] .r-faq__acc details[open] summary::after {
  transform: none;
  background-size: 14px 2px, 2px 0;
  background-color: var(--ultra); border-color: var(--ultra); color: var(--on-accent);
  box-shadow: 0 0 22px rgba(108, 59, 255, 0.8);
}
body[data-page='ritual'] .r-faq__acc details > div { padding: 0 clamp(0rem, 6vw, 4.25rem) 1.75rem 0; font-size: var(--t-m); line-height: 1.65; }
body[data-page='ritual'] .r-faq__acc details > div p { max-width: 56ch; }

@media (min-width: 900px) {
  .r-faq__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .r-faq__head { position: sticky; top: calc(var(--sticky-top) + 2.5rem); transition: top 0.35s var(--ease); }
  .r-faq__img {
    display: block; position: relative;
    width: min(100%, 360px); margin-top: clamp(2.5rem, 5vw, 4rem);
    box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.3), 0 40px 90px -36px rgba(108, 59, 255, 1);
  }
}

/* ======================================================================
   6. Glory Kit — the whole ritual in one box, under one light: packshot in the halo, the five, price, add
   ====================================================================== */
.r-kit {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-block: var(--section);
  border-top: 1px solid rgba(169, 139, 255, 0.14);
}
.r-kit__in { display: grid; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.r-kit__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; }   /* the box holds the whole ring */
.r-kit__media::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 59, 255, 0.58), rgba(108, 59, 255, 0.18) 50%, rgba(108, 59, 255, 0));
}
.r-kit__shot {
  position: relative; z-index: 1; width: 66%; aspect-ratio: 1;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.32), 0 44px 90px -36px rgba(108, 59, 255, 1);
}
/* the studio sweep darkens toward the frame, so the packshot settles into the night instead of sitting on it */
.r-kit__shot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 48px 6px rgba(22, 11, 62, 0.6);
}
.r-kit__halo {
  --size: 80%; --ring: 4px;          /* the ring passes behind the packshot's corners (66% < 80% < 66% × 1.41) */
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
}
.r-kit__shot img { transition: transform 0.9s var(--ease); }
.r-kit__media:hover .r-kit__shot img { transform: scale(1.04); }
.r-kit__body { container-type: inline-size; display: grid; justify-items: start; }
.r-kit__title { font-size: min(var(--t-3xl), 21cqi); font-weight: 200; letter-spacing: -0.05em; line-height: 0.95; }
.r-kit__text { margin-top: 1.25rem; font-size: var(--t-l); line-height: 1.4; color: var(--text-2); max-width: 30ch; }
.r-kit__items { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.r-kit__item {
  display: block; width: clamp(54px, 5vw, 66px);
  box-shadow: 0 0 0 1px rgba(169, 139, 255, 0.32), 0 10px 26px -12px rgba(108, 59, 255, 0.95);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.r-kit__item:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--violet-hi), 0 14px 30px -10px rgba(108, 59, 255, 1); }
.r-kit__price { margin-top: clamp(2rem, 4vw, 3rem); }
.r-kit__price .kitprice__now { font-size: var(--t-2xl); }
.r-kit__add { margin-top: 1.75rem; width: 100%; box-shadow: 0 18px 48px -14px rgba(108, 59, 255, 0.95); }

@media (min-width: 640px) {
  .r-kit__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .r-kit__add { width: auto; }
}
@media (min-width: 900px) {
  .r-kit__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .r-kit__shot { width: 72%; }
  .r-kit__halo { --size: 88%; }
}