/* Onyx UX opt-in layer. Load after brand.css and add .onyx-ux to the opt-in root. */

.onyx-ux :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #93405f;
  outline-offset: 3px;
}

.onyx-ux .onyx-gallery {
  display: grid;
  gap: .75rem;
}

.onyx-ux .onyx-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: .5rem;
  overflow-x: auto;
  padding: .15rem .1rem .35rem;
  scrollbar-width: thin;
}

.onyx-ux .onyx-gallery__thumb {
  min-width: 56px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #d0bcc6;
  border-radius: var(--radius-sm, 12px);
  background: #fffafd;
  cursor: pointer;
}

.onyx-ux .onyx-gallery__thumb[aria-current="true"] { border: 2px solid #93405f; }
.onyx-ux .onyx-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.onyx-ux .onyx-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: 1.5rem 0;
  padding: .9rem 0;
  border-block: 1px solid #d0bcc6;
  color: #683044;
  font-size: .82rem;
}

.onyx-ux .onyx-trust-row > * { min-width: 0; text-align: center; }

.onyx-ux .onyx-sticky-cart {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem max(1rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  border-top: 1px solid #d0bcc6;
  background: #fffafdF2;
  box-shadow: 0 -10px 28px #3d1c291c;
  transform: translateY(110%);
  transition: transform .2s ease;
}

@media (max-width: 800px) {
  .onyx-ux .mobile-bar { display: none; }
  .onyx-ux .onyx-sticky-cart { transform: translateY(0); }
  .onyx-ux .gallery-thumbs { display: flex; gap: .45rem; overflow-x: auto; }
  .onyx-ux .gallery-thumbs button { flex: 0 0 64px; }
}

.onyx-ux .onyx-sticky-cart[data-visible="true"] { transform: translateY(0); }
.onyx-ux .onyx-sticky-cart__price { font-weight: 700; white-space: nowrap; }
.onyx-ux .onyx-sticky-cart .button { flex: 1; max-width: 240px; }

.onyx-ux .onyx-spec-table-wrap { overflow-x: auto; }
.onyx-ux .onyx-spec-table { width: 100%; min-width: 420px; border-collapse: collapse; }
.onyx-ux .onyx-spec-table th,
.onyx-ux .onyx-spec-table td { padding: .75rem; border-bottom: 1px solid #d0bcc6; text-align: left; vertical-align: top; }

@media (max-width: 430px) {
  .onyx-ux { overflow-wrap: anywhere; }
  .onyx-ux .onyx-trust-row { grid-template-columns: 1fr; gap: .5rem; text-align: left; }
  .onyx-ux .onyx-trust-row > * { text-align: left; }
  .onyx-ux .onyx-sticky-cart { gap: .65rem; padding-inline: .75rem; }
  .onyx-ux .onyx-sticky-cart__label { display: none; }
  .onyx-ux .onyx-sticky-cart .button { max-width: none; min-height: 46px; }
  .onyx-ux .onyx-spec-table th,
  .onyx-ux .onyx-spec-table td { padding: .6rem .5rem; font-size: .86rem; }
}

@media print {
  .onyx-ux .onyx-sticky-cart { display: none !important; }
  .onyx-ux .onyx-spec-table-wrap { overflow: visible; }
  .onyx-ux .onyx-spec-table { min-width: 0; color: #000; background: #fff; }
  .onyx-ux .onyx-spec-table th,
  .onyx-ux .onyx-spec-table td { border-color: #000; }
}

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