/* ============================================================
   Reach Lab — TikTok growth studio theme
   Loaded after custom.css. All new classes are namespaced .rl-
   ============================================================ */

:root {
  --rl-ink: #0c0a16;
  --rl-panel: #15111f;
  --rl-panel-2: #1c1729;
  --rl-edge: rgba(255, 255, 255, 0.09);
  --rl-edge-strong: rgba(255, 255, 255, 0.16);
  --rl-text: #f3f0f8;
  --rl-haze: #a79fbc;
  --rl-pulse: var(--cl-accent, #ff2e63);
  --rl-signal: var(--cl-accent-2, #24e8dc);

  --rl-display: var(--font-display, 'Space Grotesk'), sans-serif;

  --rl-r-sm: 10px;
  --rl-r-md: 16px;
  --rl-r-lg: 24px;

  --rl-gutter: clamp(1.25rem, 4vw, 3rem);
}

body {
  background-color: var(--rl-ink);
  color: var(--rl-text);
}

.rl-section {
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.rl-shell {
  width: min(1180px, 100% - var(--rl-gutter) * 2);
  margin-inline: auto;
}

.rl-display {
  font-family: var(--rl-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.03;
  margin: 0;
}

.rl-lede {
  color: var(--rl-haze);
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Section heading: rule encodes the section boundary, no eyebrow labels */
.rl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rl-edge);
}
.rl-head h2 {
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  letter-spacing: -0.025em;
  margin: 0;
}
.rl-head p {
  color: var(--rl-haze);
  margin: 0;
  max-width: 46ch;
  font-size: 0.975rem;
  line-height: 1.6;
}

/* ---------- Buttons ---------- */
.rl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.16s ease, background-color 0.16s ease,
    border-color 0.16s ease;
}
.rl-btn:focus-visible {
  outline: 2px solid var(--rl-signal);
  outline-offset: 3px;
}
.rl-btn--solid {
  background: var(--rl-pulse);
  color: #fff;
}
.rl-btn--solid:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.07);
}
.rl-btn--quiet {
  border-color: var(--rl-edge-strong);
  color: var(--rl-text);
  background: rgba(255, 255, 255, 0.03);
}
.rl-btn--quiet:hover {
  color: var(--rl-text);
  border-color: var(--rl-signal);
}

/* ============================================================
   HERO
   ============================================================ */
.rl-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.rl-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70%;
  background: radial-gradient(
      42% 46% at 22% 12%,
      rgba(255, 46, 99, 0.26),
      transparent 62%
    ),
    radial-gradient(38% 42% at 78% 4%, rgba(36, 232, 220, 0.16), transparent 60%);
  filter: blur(46px);
  pointer-events: none;
}
.rl-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.rl-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.15rem);
}
/* chroma split — the one signature type treatment, used once */
.rl-hero__title .rl-split {
  position: relative;
  display: inline-block;
  text-shadow: 0.045em 0 0 rgba(36, 232, 220, 0.75),
    -0.045em 0 0 rgba(255, 46, 99, 0.75);
}
.rl-hero__lede {
  margin-top: 1.35rem;
}
.rl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.rl-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rl-edge);
}
.rl-hero__proof div {
  min-width: 90px;
}
.rl-hero__proof b {
  display: block;
  font-family: var(--rl-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.rl-hero__proof span {
  color: var(--rl-haze);
  font-size: 0.82rem;
}
.rl-hero__search {
  margin-top: 2rem;
  max-width: 420px;
  position: relative;
}
.rl-hero__search input {
  width: 100%;
  padding: 0.9rem 1.15rem 0.9rem 2.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rl-edge);
  color: var(--rl-text);
  font-size: 0.95rem;
}
.rl-hero__search input::placeholder {
  color: var(--rl-haze);
}
.rl-hero__search input:focus {
  outline: none;
  border-color: var(--rl-signal);
}
.rl-hero__search i {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rl-haze);
}

/* ---------- Phone: the retention read-out ---------- */
.rl-phone {
  justify-self: center;
  width: min(300px, 100%);
  aspect-ratio: 9 / 17.6;
  border-radius: 34px;
  border: 1px solid var(--rl-edge-strong);
  background: linear-gradient(170deg, #1b1528, #0e0b17);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.rl-phone__screen {
  position: relative;
  flex: 1;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(
      120% 80% at 50% 0%,
      rgba(255, 46, 99, 0.22),
      transparent 55%
    ),
    #100c1b;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}
.rl-phone__tag {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--rl-edge);
  color: var(--rl-haze);
}
.rl-phone__curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 62%;
}
.rl-phone__foot {
  position: relative;
  z-index: 2;
}
.rl-phone__drop {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--rl-display);
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: var(--rl-text);
}
.rl-phone__drop small {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--rl-haze);
  letter-spacing: 0;
}
.rl-phone__note {
  font-size: 0.74rem;
  color: var(--rl-haze);
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .rl-hero__grid {
    grid-template-columns: 1fr;
  }
  .rl-phone {
    order: -1;
    width: min(240px, 70%);
  }
}

/* ============================================================
   GROWTH STUDIO — the interactive centrepiece
   ============================================================ */
.rl-studio {
  border: 1px solid var(--rl-edge);
  border-radius: var(--rl-r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.22));
  overflow: hidden;
}
.rl-studio__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--rl-edge);
  background: rgba(0, 0, 0, 0.25);
}
.rl-studio__dots {
  display: flex;
  gap: 6px;
}
.rl-studio__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rl-edge-strong);
}
.rl-studio__dots i:first-child {
  background: var(--rl-pulse);
}
.rl-studio__live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--rl-haze);
}
.rl-studio__live b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rl-signal);
  box-shadow: 0 0 10px var(--rl-signal);
}
.rl-studio__body {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}
.rl-studio__nav {
  border-right: 1px solid var(--rl-edge);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.rl-studio__nav button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--rl-r-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--rl-haze);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rl-studio__nav button:hover {
  color: var(--rl-text);
  background: rgba(255, 255, 255, 0.04);
}
.rl-studio__nav button[aria-selected='true'] {
  color: var(--rl-text);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--rl-edge);
}
.rl-studio__nav button[aria-selected='true'] i {
  color: var(--rl-pulse);
}
.rl-studio__panel {
  display: none;
  padding: clamp(1.1rem, 2.6vw, 1.9rem);
}
.rl-studio__panel[data-active='true'] {
  display: block;
}
.rl-studio__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 2.6vw, 2rem);
  align-items: start;
}
.rl-studio h3 {
  font-family: var(--rl-display);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}
.rl-studio__hint {
  color: var(--rl-haze);
  font-size: 0.86rem;
  margin: 0 0 1.25rem;
  line-height: 1.55;
}

.rl-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rl-edge);
}
.rl-ctrl:first-of-type {
  border-top: 0;
}
.rl-ctrl__label {
  font-size: 0.9rem;
}
.rl-ctrl__label small {
  display: block;
  color: var(--rl-haze);
  font-size: 0.76rem;
  margin-top: 0.1rem;
}
.rl-ctrl input[type='range'] {
  width: 132px;
  accent-color: var(--rl-pulse);
  background: transparent;
}
.rl-ctrl input[type='range']:focus-visible {
  outline: 2px solid var(--rl-signal);
  outline-offset: 4px;
}
.rl-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
}
.rl-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.rl-toggle span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--rl-edge);
  transition: background-color 0.18s ease;
}
.rl-toggle span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}
.rl-toggle input:checked + span {
  background: var(--rl-pulse);
}
.rl-toggle input:checked + span::after {
  transform: translateX(18px);
}
.rl-toggle input:focus-visible + span {
  outline: 2px solid var(--rl-signal);
  outline-offset: 3px;
}

.rl-readout {
  border: 1px solid var(--rl-edge);
  border-radius: var(--rl-r-md);
  background: rgba(0, 0, 0, 0.28);
  padding: 1.1rem;
}
.rl-readout__score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--rl-display);
  font-size: 2.9rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.rl-readout__score small {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--rl-haze);
  font-family: 'Inter', sans-serif;
}
.rl-readout__verdict {
  font-size: 0.86rem;
  color: var(--rl-haze);
  margin: 0.6rem 0 1rem;
  line-height: 1.5;
  min-height: 2.6em;
}
.rl-readout svg {
  width: 100%;
  height: auto;
  display: block;
}
.rl-readout__legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.76rem;
  color: var(--rl-haze);
}
.rl-readout__legend i {
  display: inline-block;
  width: 18px;
  height: 2px;
  vertical-align: middle;
  margin-right: 0.35rem;
}

/* audience bars */
.rl-bars {
  display: grid;
  gap: 0.7rem;
}
.rl-bars div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
}
.rl-bars u {
  text-decoration: none;
  color: var(--rl-haze);
}
.rl-bars b {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rl-pulse), var(--rl-signal));
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rl-bars s {
  text-decoration: none;
  text-align: right;
  color: var(--rl-text);
  font-variant-numeric: tabular-nums;
}

/* post-time heatmap */
.rl-heat {
  display: grid;
  grid-template-columns: 34px repeat(7, minmax(0, 1fr));
  gap: 4px;
  font-size: 0.68rem;
  color: var(--rl-haze);
}
.rl-heat span {
  text-align: center;
  padding-bottom: 2px;
}
.rl-heat i {
  aspect-ratio: 1;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
}
.rl-heat i[data-peak='true'] {
  border-color: var(--rl-signal);
}
.rl-heat u {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}

@media (max-width: 860px) {
  .rl-studio__body {
    grid-template-columns: 1fr;
  }
  .rl-studio__nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rl-edge);
  }
  .rl-studio__nav button {
    white-space: nowrap;
  }
  .rl-studio__split {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   STEPS — a real sequence, so numbering is earned
   ============================================================ */
.rl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border: 1px solid var(--rl-edge);
  border-radius: var(--rl-r-lg);
  overflow: hidden;
}
.rl-step {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-right: 1px solid var(--rl-edge);
}
.rl-step:last-child {
  border-right: 0;
}
.rl-step b {
  font-family: var(--rl-display);
  font-size: 0.82rem;
  color: var(--rl-pulse);
  display: block;
  margin-bottom: 1.1rem;
}
.rl-step h3 {
  font-family: var(--rl-display);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.rl-step p {
  color: var(--rl-haze);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 760px) {
  .rl-step {
    border-right: 0;
    border-bottom: 1px solid var(--rl-edge);
  }
  .rl-step:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   FEATURES grid
   ============================================================ */
.rl-features {
  display: grid;
  gap: 1px;
  background: var(--rl-edge);
  border: 1px solid var(--rl-edge);
  border-radius: var(--rl-r-lg);
  overflow: hidden;
}
.rl-features[data-cols='1'] { grid-template-columns: 1fr; }
.rl-features[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
.rl-features[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
.rl-features[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
.rl-feature {
  background: var(--rl-ink);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.rl-feature i {
  font-size: 1.05rem;
  color: var(--rl-signal);
}
.rl-feature h3 {
  font-family: var(--rl-display);
  font-size: 1.05rem;
  margin: 0.9rem 0 0.45rem;
}
.rl-feature p {
  color: var(--rl-haze);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .rl-features[data-cols='3'],
  .rl-features[data-cols='4'] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .rl-features { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CALLOUT (text + image block)
   ============================================================ */
.rl-callout {
  position: relative;
  border: 1px solid var(--rl-edge);
  border-radius: var(--rl-r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  background: linear-gradient(120deg, var(--rl-panel), var(--rl-ink) 70%);
}
.rl-callout::after {
  content: '';
  position: absolute;
  inset: auto -10% -60% 30%;
  height: 120%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 46, 99, 0.2),
    transparent 65%
  );
  filter: blur(50px);
  pointer-events: none;
}
.rl-callout__inner {
  position: relative;
  max-width: 60ch;
}
.rl-callout h2 {
  font-family: var(--rl-display);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.025em;
  margin: 0 0 0.9rem;
}
.rl-callout p {
  color: var(--rl-haze);
  line-height: 1.65;
  margin: 0 0 1.6rem;
}
.rl-callout__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.75rem;
}
.rl-callout__chips li {
  font-size: 0.82rem;
  color: var(--rl-haze);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--rl-edge);
}

/* ============================================================
   FOOTER
   ============================================================ */
.rl-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--rl-edge);
  background: rgba(0, 0, 0, 0.25);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.75rem;
}
.rl-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.rl-footer__brand img {
  max-height: 38px;
  width: auto;
}
.rl-footer__brand strong {
  font-family: var(--rl-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.rl-footer__brand p {
  color: var(--rl-haze);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0.75rem 0 1.25rem;
  max-width: 38ch;
}
.rl-footer__socials {
  display: flex;
  gap: 0.5rem;
}
.rl-footer__socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rl-edge);
  color: var(--rl-haze);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rl-footer__socials a:hover {
  color: var(--rl-text);
  border-color: var(--rl-signal);
}
.rl-footer h4 {
  font-family: var(--rl-display);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}
.rl-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.rl-footer ul a {
  color: var(--rl-haze);
  text-decoration: none;
  font-size: 0.9rem;
}
.rl-footer ul a:hover {
  color: var(--rl-text);
}
.rl-footer__base {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rl-edge);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--rl-haze);
  font-size: 0.82rem;
}
.rl-footer__base p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .rl-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.rl-faq {
  border: 1px solid var(--rl-edge);
  border-radius: var(--rl-r-lg);
  overflow: hidden;
}
.rl-faq__item {
  border-bottom: 1px solid var(--rl-edge);
}
.rl-faq__item:last-child {
  border-bottom: 0;
}
.rl-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.1rem, 3vw, 1.75rem);
  font-weight: 500;
  font-size: 1rem;
}
.rl-faq__item summary::-webkit-details-marker {
  display: none;
}
.rl-faq__item summary:focus-visible {
  outline: 2px solid var(--rl-signal);
  outline-offset: -2px;
}
.rl-faq__item summary i {
  color: var(--rl-haze);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  flex: none;
}
.rl-faq__item[open] summary i {
  transform: rotate(45deg);
  color: var(--rl-pulse);
}
.rl-faq__body {
  padding: 0 clamp(1.1rem, 3vw, 1.75rem) 1.5rem;
  color: var(--rl-haze);
  font-size: 0.94rem;
  line-height: 1.7;
  max-width: 74ch;
}

/* ============================================================
   Neutralise the inherited scroll-reveal on Reach Lab sections.

   script.js tags every `.component h2 / h3 / p` with `.anim .up
   .reveal` and pauses the animation until an observer resumes it.
   `.anim` and `.up` have no rules anywhere in the theme, and
   `.reveal` only becomes visible once a second observer adds
   `.in` — so any heading the observer misses stays at opacity 0
   permanently. Our sections opt out and render visible.
   ============================================================ */
.rl-hero .anim,
.rl-hero .reveal,
.rl-section .anim,
.rl-section .reveal,
.rl-footer .anim,
.rl-footer .reveal,
.products-component .rl-head .anim,
.products-component .rl-head .reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   Product page — assurance strip under the buy button
   ============================================================ */
.rl-assure {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.15rem 1.25rem;
  display: grid;
  gap: 0.85rem;
  border: 1px solid var(--rl-edge);
  border-radius: var(--rl-r-md);
  background: rgba(0, 0, 0, 0.22);
}
.rl-assure li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.rl-assure i {
  color: var(--rl-signal);
  font-size: 0.82rem;
  margin-top: 0.25rem;
  flex: none;
  width: 16px;
  text-align: center;
}
.rl-assure strong {
  font-weight: 600;
  display: block;
  color: var(--rl-text);
}
.rl-assure em {
  font-style: normal;
  color: var(--rl-haze);
  font-size: 0.83rem;
}

/* Screen-reader-only, defined here so it does not depend on Bootstrap
   being loaded before this stylesheet. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   Products section spacing.

   custom.css pulls this section up hard (`margin-top:-220px
   !important`, plus a -130px rule on `section.container.py-20
   .component`) so it tucked under the original theme's hero.
   With any other section above it, that lands the product grid
   on top of the previous one. Reset it and give the section its
   own rhythm, matching .rl-section.
   ============================================================ */
.component.products-component,
section.container.py-20.component {
  margin-top: 0 !important;
  padding-top: clamp(3.5rem, 9vw, 7rem) !important;
  padding-bottom: clamp(3.5rem, 9vw, 7rem) !important;
}

/* ============================================================
   NAVBAR

   Replaces the original two-bar arrangement (a `.topbar` holding
   the logo plus a `.superbar` holding the shop name), which read
   as a duplicated brand on desktop. All of the original mobile
   styling targeted `.superbar-shell`, an element that never
   existed in the markup, so none of it ever applied — hence the
   overlapping mess on phones. One bar, own namespace.
   ============================================================ */
.rl-nav {
  background: rgba(12, 10, 22, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rl-edge);
}
.rl-nav__inner {
  width: min(1180px, 100% - var(--rl-gutter) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 68px;
  padding-block: 0.6rem;
}

.rl-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--rl-text);
  font-family: var(--rl-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  flex: none;
}
.rl-nav__brand img {
  height: 30px;
  width: auto;
  display: block;
}
.rl-nav__brand:hover { color: var(--rl-text); }

.rl-nav__menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}
.rl-nav__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
}
.rl-nav__links a {
  color: var(--rl-haze);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rl-nav__links a:hover,
.rl-nav__links a:focus-visible {
  color: var(--rl-text);
  border-bottom-color: var(--rl-pulse);
}

.rl-nav__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--rl-edge);
  background: rgba(255, 255, 255, 0.04);
  max-width: 230px;
}
.rl-nav__search button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--rl-haze);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.rl-nav__search input {
  background: none;
  border: 0;
  color: var(--rl-text);
  font-size: 0.88rem;
  width: 100%;
  min-width: 0;
}
.rl-nav__search input:focus { outline: none; }
.rl-nav__search:focus-within { border-color: var(--rl-signal); }

.rl-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  margin-left: auto;
}
.rl-nav__icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rl-edge);
  color: var(--rl-text);
  transition: border-color 0.15s ease;
}
.rl-nav__icon:hover { color: var(--rl-text); border-color: var(--rl-signal); }
.rl-nav__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rl-pulse);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.rl-nav__login {
  padding: 0.6rem 1.15rem;
  font-size: 0.88rem;
}
.rl-nav__currency select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rl-edge);
  color: var(--rl-text);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

.rl-nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--rl-edge);
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
  cursor: pointer;
}
.rl-nav__burger span {
  display: block;
  width: 17px;
  height: 2px;
  margin: 3px auto;
  border-radius: 2px;
  background: var(--rl-text);
}

/* Desktop: the collapse panel is always open, overriding Bootstrap's
   `.collapse { display: none }`. */
@media (min-width: 992px) {
  .rl-nav__menu.collapse:not(.show) {
    display: flex;
  }
}

@media (max-width: 991.98px) {
  .rl-nav__inner {
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 60px;
  }
  .rl-nav__burger { display: block; }
  .rl-nav__login,
  .rl-nav__currency { display: none; }

  /* Keep brand + cart + burger together on the first row; the panel
     wraps underneath instead of shoving the controls down. */
  .rl-nav__brand { order: 1; }
  .rl-nav__actions { order: 2; }
  .rl-nav__menu { order: 3; }

  .rl-nav__menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
  }
  /* Own the collapsed state rather than relying on Bootstrap's
     `.collapse { display: none }` being loaded first. */
  .rl-nav__menu.collapse:not(.show) { display: none; }
  .rl-nav__menu.show { display: flex; }
  .rl-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .rl-nav__links a {
    display: block;
    padding: 0.85rem 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--rl-edge);
  }
  .rl-nav__links li:last-child a { border-bottom: 0; }
  .rl-nav__search {
    margin-left: 0;
    max-width: none;
  }
}

/* The original mobile pack force-fixed the bar and padded the body by a
   JS-set --bar-h. The header is already sticky from the layout, so both
   are unnecessary and were causing the announcement bar to be overlapped. */
@media (max-width: 991.98px) {
  body { padding-top: 0 !important; }
}
body.rl-menu-open { overflow: hidden; }

/* ============================================================
   Anchor offset

   The header is sticky, so a plain jump to /#products would land
   the section title underneath the bar. Reserve its height.
   ============================================================ */
[id] {
  scroll-margin-top: 96px;
}
@media (max-width: 991.98px) {
  [id] { scroll-margin-top: 80px; }
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}