/* ✦ NEW sections (dx-*) — shared base.
   Every section links this file, so it can appear several times on one page, AFTER a
   section's own stylesheet. All selectors use :where(.dx) (zero specificity) so a
   section's own rules always win no matter where the duplicate link lands.
   Loaded only by the new sections themselves, never from layout.jinja,
   so stores that don't use them are untouched. Everything is scoped under .dx */

:where(.dx) {
  --dx-accent: #bb9e7b;
  --dx-text: #ffffff;
  --dx-muted: rgba(255, 255, 255, .64);
  --dx-line: rgba(255, 255, 255, .12);
  /* Derived from the section's own text colour so light sections stay readable (same result for white text) */
  --dx-muted: color-mix(in srgb, var(--dx-text) 64%, transparent);
  --dx-line: color-mix(in srgb, var(--dx-text) 12%, transparent);
  --dx-card: #151515;
  --dx-bg: transparent;
  --dx-radius: 18px;
  --dx-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  color: var(--dx-text);
  background: var(--dx-bg);
}

:where(.dx) *,
:where(.dx) *::before,
:where(.dx) *::after {
  box-sizing: border-box;
}

:where(.dx) img {
  max-width: 100%;
  display: block;
}

:where(.dx) a {
  text-decoration: none;
}

.dx-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.dx-pad {
  padding: 80px 0;
}

@media (max-width: 767.98px) {
  .dx-container {
    padding: 0 16px;
  }

  .dx-pad {
    padding: 52px 0;
  }
}

/* Section heading */
.dx-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.dx-head--start {
  margin-inline: 0;
  text-align: start;
}

.dx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dx-accent);
}

.dx-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

html[dir="ltr"] .dx-eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
}

:where(.dx) .dx-title {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dx-text);
  text-wrap: balance;
}

:where(.dx) .dx-sub {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--dx-muted);
  text-wrap: pretty;
}

/* Buttons */
:where(.dx) .dx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid var(--dx-accent);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  transition: color .4s var(--dx-ease), background-color .4s var(--dx-ease), border-color .4s var(--dx-ease), transform .4s var(--dx-ease);
}

:where(.dx) .dx-btn--solid {
  background: var(--dx-accent);
  color: #0b0b0b;
}

:where(.dx) .dx-btn--solid:hover {
  background: transparent;
  color: var(--dx-text);
}

:where(.dx) .dx-btn--ghost {
  border-color: rgba(255, 255, 255, .45);
  border-color: color-mix(in srgb, var(--dx-text) 45%, transparent);
  background: rgba(255, 255, 255, .04);
  background: color-mix(in srgb, var(--dx-text) 4%, transparent);
  color: var(--dx-text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

:where(.dx) .dx-btn--ghost:hover {
  border-color: var(--dx-accent);
  color: var(--dx-accent);
}

:where(.dx) .dx-btn i {
  font-size: 13px;
  transition: transform .4s var(--dx-ease);
}

:where(.dx) .dx-btn:hover i {
  transform: translateX(4px);
}

html[dir="rtl"] :where(.dx) .dx-btn i {
  transform: scaleX(-1);
}

html[dir="rtl"] :where(.dx) .dx-btn:hover i {
  transform: scaleX(-1) translateX(4px);
}

:where(.dx) .dx-btn:focus-visible,
:where(.dx) button:focus-visible,
:where(.dx) a:focus-visible {
  outline: 2px solid var(--dx-accent);
  outline-offset: 3px;
}

/* Round arrow buttons for sliders */
:where(.dx) .dx-arrow {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dx-line);
  border-radius: 50%;
  background: transparent;
  color: var(--dx-text);
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s, opacity .3s;
}

:where(.dx) .dx-arrow:hover {
  border-color: var(--dx-accent);
  background: var(--dx-accent);
  color: #0b0b0b;
}

:where(.dx) .dx-arrow.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

html[dir="rtl"] :where(.dx) .dx-arrow i {
  transform: scaleX(-1);
}

/* Empty-state hint, only rendered in the theme editor */
.dx-empty {
  padding: 28px;
  border: 1px dashed var(--dx-line);
  border-radius: var(--dx-radius);
  color: var(--dx-muted);
  text-align: center;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  :where(.dx) *,
  :where(.dx) *::before,
  :where(.dx) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Scroll-in motion: each block of a section rises into place as it enters the screen.
   Pure CSS (scroll-driven animations), so browsers without support simply show everything. */
@keyframes dxRise {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dx.dx-pad > .dx-container > :not(.dx-reels__modal):not(.dx-stories__viewer):not([data-aos]):not(script) {
      animation: dxRise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
  }
}

/* A mouse click or tap leaves no browser focus box; keyboard users still get the focus-visible outline */
:where(.dx) :is(a, button, summary, input, select, textarea, video, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}