/* Scrollprise Dark Theme v40.9 — MATTE PRODUCT DETAIL
   EXPERIMENT BRANCH ONLY.
   Visual-only restyle of the opened product modal.
   No catalogue, affiliate, modal behaviour, search, ranking or routing changes.
*/

/* Backdrop + outer shell */
html.theme-dark-v40 .modal.open {
  background: rgba(0,0,0,.84) !important;
  -webkit-backdrop-filter: blur(14px) saturate(.72) !important;
  backdrop-filter: blur(14px) saturate(.72) !important;
}

html.theme-dark-v40 .modal.open .modal-card,
html.theme-dark-v40 .modal.open .modal-product {
  --sp40-modal-ink: #f4f5f2;
  --sp40-modal-copy: #b8bdb7;
  --sp40-modal-muted: #8e958e;
  --sp40-modal-panel: #1a1c1b;
  --sp40-modal-panel-2: #222423;
  --sp40-modal-panel-3: #292b2a;
  background: #151716 !important;
  color: var(--sp40-modal-ink) !important;
  border-color: rgba(255,255,255,.075) !important;
  box-shadow: 0 38px 120px rgba(0,0,0,.72) !important;
}

/* Matte gallery side — dark like the supplied reference, but not pure black so imagery stays legible. */
html.theme-dark-v40 .modal.open .modal-media {
  background: #232524 !important;
  border-color: rgba(255,255,255,.065) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.035) !important;
}

html.theme-dark-v40 .modal.open .modal-media::before,
html.theme-dark-v40 .modal.open .modal-media::after {
  opacity: .18 !important;
}

html.theme-dark-v40 .modal.open .modal-media img {
  background: #2a2c2b !important;
}

/* Gallery controls / thumbnails */
html.theme-dark-v40 .modal.open .modal-media button,
html.theme-dark-v40 .modal.open .modal-media [role="button"] {
  background: #151716 !important;
  border-color: rgba(255,255,255,.11) !important;
  color: #f4f5f2 !important;
  -webkit-text-fill-color: #f4f5f2 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
}

html.theme-dark-v40 .modal.open .modal-media .active,
html.theme-dark-v40 .modal.open .modal-media .is-active,
html.theme-dark-v40 .modal.open .modal-media [aria-current="true"],
html.theme-dark-v40 .modal.open .modal-media [aria-selected="true"] {
  border-color: #b7ff33 !important;
  box-shadow: 0 0 0 1px rgba(183,255,51,.26), 0 0 24px rgba(183,255,51,.12) !important;
}

/* Content side */
html.theme-dark-v40 .modal.open .modal-copy {
  background: #1a1c1b !important;
  color: var(--sp40-modal-ink) !important;
}

html.theme-dark-v40 .modal.open .modal-copy h1,
html.theme-dark-v40 .modal.open .modal-copy h2,
html.theme-dark-v40 .modal.open .modal-copy h3,
html.theme-dark-v40 .modal.open .modal-copy h4,
html.theme-dark-v40 .modal.open #modalTitle {
  color: #f5f6f3 !important;
  -webkit-text-fill-color: #f5f6f3 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html.theme-dark-v40 .modal.open .modal-copy > p,
html.theme-dark-v40 .modal.open .modal-copy li,
html.theme-dark-v40 .modal.open .modal-copy small,
html.theme-dark-v40 .modal.open #modalReview,
html.theme-dark-v40 .modal.open #modalUseCase,
html.theme-dark-v40 .modal.open .buying-context p,
html.theme-dark-v40 .modal.open .detail-why p,
html.theme-dark-v40 .modal.open .watch-box p {
  color: #b8bdb7 !important;
  -webkit-text-fill-color: #b8bdb7 !important;
  opacity: 1 !important;
}

html.theme-dark-v40 .modal.open .modal-category,
html.theme-dark-v40 .modal.open .detail-hook,
html.theme-dark-v40 .modal.open .modal-verdict,
html.theme-dark-v40 .modal.open .buying-context span,
html.theme-dark-v40 .modal.open .detail-why span,
html.theme-dark-v40 .modal.open .modal-best span,
html.theme-dark-v40 .modal.open .spec-grid dt,
html.theme-dark-v40 .modal.open .paid-note {
  color: #909790 !important;
  -webkit-text-fill-color: #909790 !important;
  opacity: 1 !important;
}

html.theme-dark-v40 .modal.open .buying-context strong,
html.theme-dark-v40 .modal.open .modal-best strong,
html.theme-dark-v40 .modal.open .spec-grid dd,
html.theme-dark-v40 .modal.open .feature-list li,
html.theme-dark-v40 .modal.open .watch-box strong {
  color: #edf0eb !important;
  -webkit-text-fill-color: #edf0eb !important;
  opacity: 1 !important;
}

/* Category/spec pills — alternating matte graphite tiles like the reference. */
html.theme-dark-v40 .modal.open .modal-category,
html.theme-dark-v40 .modal.open .buying-context,
html.theme-dark-v40 .modal.open .detail-why,
html.theme-dark-v40 .modal.open .modal-best,
html.theme-dark-v40 .modal.open .spec-grid,
html.theme-dark-v40 .modal.open .detail-hook,
html.theme-dark-v40 .modal.open .modal-verdict {
  background: #242625 !important;
  border-color: rgba(255,255,255,.085) !important;
  color: #edf0eb !important;
  box-shadow: none !important;
}

html.theme-dark-v40 .modal.open .feature-list,
html.theme-dark-v40 .modal.open .watch-box {
  background: #202221 !important;
  border-color: rgba(255,255,255,.075) !important;
  color: #d8ddd7 !important;
  box-shadow: none !important;
}

html.theme-dark-v40 .modal.open .feature-list *,
html.theme-dark-v40 .modal.open .watch-box * {
  border-color: rgba(255,255,255,.075) !important;
}

html.theme-dark-v40 .modal.open .feature-dot {
  background: #b7ff33 !important;
  box-shadow: 0 0 0 4px rgba(183,255,51,.08) !important;
}

/* Section separators */
html.theme-dark-v40 .modal.open .modal-copy hr,
html.theme-dark-v40 .modal.open .modal-copy [class*="divider"],
html.theme-dark-v40 .modal.open .modal-copy [class*="separator"] {
  border-color: rgba(255,255,255,.08) !important;
  background-color: rgba(255,255,255,.08) !important;
}

/* Ask Scrollprise stays visually distinct but belongs to the same matte system. */
html.theme-dark-v40 .modal.open .ask-scrollprise-card,
html.theme-dark-v40 .modal.open [data-ask-scrollprise] {
  background: #101311 !important;
  border-color: rgba(183,255,51,.16) !important;
  color: #eef2ec !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 44px rgba(0,0,0,.22) !important;
}

html.theme-dark-v40 .modal.open .ask-scrollprise-card *,
html.theme-dark-v40 .modal.open [data-ask-scrollprise] * {
  color: inherit;
  -webkit-text-fill-color: currentColor !important;
}

/* Buttons / actions */
html.theme-dark-v40 .modal.open .modal-copy .btn,
html.theme-dark-v40 .modal.open .modal-copy .primary-button,
html.theme-dark-v40 .modal.open .modal-copy .btn-primary {
  background: #b7ff33 !important;
  border-color: #b7ff33 !important;
  color: #0a1004 !important;
  -webkit-text-fill-color: #0a1004 !important;
  box-shadow: 0 14px 34px rgba(183,255,51,.11) !important;
}

html.theme-dark-v40 .modal.open .modal-copy .btn-secondary,
html.theme-dark-v40 .modal.open .modal-copy .secondary-button {
  background: #242625 !important;
  border-color: rgba(255,255,255,.11) !important;
  color: #eef1ec !important;
  -webkit-text-fill-color: #eef1ec !important;
  box-shadow: none !important;
}

/* Close control */
html.theme-dark-v40 .modal.open .modal-close,
html.theme-dark-v40 .modal.open button[aria-label*="close" i] {
  background: #101311 !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #f5f6f3 !important;
  -webkit-text-fill-color: #f5f6f3 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
}

html.theme-dark-v40 .modal.open .modal-close:hover,
html.theme-dark-v40 .modal.open button[aria-label*="close" i]:hover {
  border-color: rgba(183,255,51,.34) !important;
  color: #b7ff33 !important;
  -webkit-text-fill-color: #b7ff33 !important;
}

/* Scrollbar harmonisation inside the open detail surface. */
html.theme-dark-v40 .modal.open .modal-card,
html.theme-dark-v40 .modal.open .modal-product,
html.theme-dark-v40 .modal.open .modal-copy {
  scrollbar-color: #4b514b #151716;
}

/* Mobile remains stacked but never falls back to the old white modal. */
@media (max-width: 759px) {
  html.theme-dark-v40 .modal.open .modal-card,
  html.theme-dark-v40 .modal.open .modal-product {
    background: #151716 !important;
  }

  html.theme-dark-v40 .modal.open .modal-media {
    background: #232524 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
  }

  html.theme-dark-v40 .modal.open .modal-copy {
    background: #1a1c1b !important;
  }
}