/* ============================================================
   VOID — a dark, minimal, modern theme for SellAuth (pro)
   ============================================================
   Design language:
     · deep near-black space, faint drifting aurora
     · white light with a soft glow (text, buttons, accents)
     · hairline gray borders, generous whitespace
     · Instrument Sans (display + body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ------------------------------------------------------------
   1. TOKENS — void palette
   ------------------------------------------------------------ */

html[data-bs-theme="dark"] {
  /* accent → white (also set in settings.json) */
  --cl-accent:            #ffffff !important;
  --cl-accent-rgb:        255, 255, 255 !important;
  --bs-primary:           #ffffff !important;
  --bs-primary-rgb:       255, 255, 255 !important;
  --bs-link-color:        #ffffff !important;
  --bs-link-color-rgb:    255, 255, 255 !important;
  --bs-link-hover-color:  #ffffff !important;

  /* void surfaces */
  --bs-body-bg:           #050507 !important;
  --bs-body-bg-rgb:       5, 5, 7 !important;
  --bs-gray-bg:           #0c0c10 !important;
  --bs-gray-bg-rgb:       12, 12, 16 !important;
  --bs-body-color:        #f5f5f7 !important;
  --bs-secondary-color:   #9a9aa4 !important;
  --bs-tertiary-color:    #6c6c75 !important;
  --bs-border-color:      rgba(255, 255, 255, 0.07) !important;
  --bs-border-color-rgb:  255, 255, 255 !important;
  --bs-card-bg:           #0c0c10 !important;
  --bs-heading-color:     #ffffff !important;

  /* type + shape */
  --bs-font-sans-serif:   'Instrument Sans', ui-sans-serif, system-ui, sans-serif !important;
  --bs-border-radius:     0.75rem !important;
  --bs-border-radius-lg:  1rem !important;
  --bs-border-radius-sm:  0.5rem !important;
}

/* ------------------------------------------------------------
   2. THE VOID — animated aurora backdrop
   ------------------------------------------------------------ */

.void-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(126, 96, 255, 0.14), transparent 55%),
    radial-gradient(80% 50% at 108% 108%, rgba(72, 52, 178, 0.11), transparent 55%),
    radial-gradient(70% 45% at -8% 108%, rgba(46, 68, 150, 0.09), transparent 55%),
    radial-gradient(140% 140% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
  animation: voidDrift 32s ease-in-out infinite alternate;
}
@keyframes voidDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
}

/* starfield is now the canvas constellation (see custom.js) */

body {
  background-color: #050507;
  color: #f5f5f7;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.card-title,
.price,
.modal-title,
.hero .content h1,
.section-title h2,
.features .list .feature .title,
.status-card h3,
.status-group h2 {
  font-family: 'Instrument Sans', 'Instrument Sans', sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff !important;
  text-shadow:
    0 0 6px  rgba(255, 255, 255, 0.65),
    0 0 18px rgba(255, 255, 255, 0.35),
    0 0 42px rgba(255, 255, 255, 0.18);
}

::selection {
  background: rgba(255, 255, 255, 0.9);
  color: #050507;
}

/* ------------------------------------------------------------
   4. NAVBAR — minimal, frosted
   ------------------------------------------------------------ */

.navbar {
  background: rgba(5, 5, 7, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar .navbar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

.navbar .nav-link {
  color: #9a9aa4 !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-shadow: none;
  transition: color .2s ease, text-shadow .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------
   5. HERO — the event horizon
   ------------------------------------------------------------ */

.hero {
  background-image: none !important;
  min-height: 72vh;
}

.hero .bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 38%, rgba(120, 95, 255, 0.12), transparent 70%);
}

.hero .container {
  position: relative;
  z-index: 1;
  padding: 6rem 2rem;
}

.hero .content h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 1.5rem;
  animation: heroGlow 4.5s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 24px rgba(255,255,255,.4), 0 0 60px rgba(255,255,255,.2);
  }
  50% {
    text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 40px rgba(255,255,255,.6), 0 0 90px rgba(255,255,255,.35);
  }
}

.hero .content p {
  font-size: 1.1rem;
  color: #9a9aa4;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.hero .content .stats {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
}
.hero .content .stats .value {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}
.hero .content .stats .label {
  color: #6c6c75;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   6. SECTION TITLES
   ------------------------------------------------------------ */

.section-title h2 {
  font-size: 1.9rem;
}
.section-title p {
  color: #6c6c75;
}
.section-subtitle p {
  color: #9a9aa4;
}

/* ------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------ */

.btn {
  border-radius: 0.6rem;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: box-shadow .25s ease, transform .15s ease, background-color .2s ease, border-color .2s ease;
}

.btn-primary {
  background: #ffffff;
  color: #050507;
  border-color: #ffffff;
  text-shadow: none !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
}
.btn-primary:hover,
.btn-primary:focus {
  background: #ffffff;
  color: #050507;
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: #ffffff;
  border-color: #ffffff;
  color: #050507;
  text-shadow: none;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------------------
   8. CARDS (products, testimonials, blog…)
   ------------------------------------------------------------ */

.products .card,
.card {
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.products .card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.55);
}

.products .card .card-img-top {
  background: #0a0a0e;
  overflow: hidden;
}
.products .card .card-img-top img {
  transition: transform .5s ease;
}
.products .card:hover .card-img-top img {
  transform: scale(1.05);
}

.products .card .info {
  color: #6c6c75;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.products .card .info .price {
  font-family: 'Instrument Sans', sans-serif;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}
.products .card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
}

/* ------------------------------------------------------------
   9. PRODUCT PAGE
   ------------------------------------------------------------ */

.product-wrapper .carousel img,
.product-wrapper .thumbnails button img {
  border-radius: 1rem;
}
.product-wrapper .thumbnails button {
  border-radius: 0.75rem;
  overflow: hidden;
}

.variants .variant {
  background: #0c0c10;
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
  color: #f5f5f7;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.variants .variant:hover,
.variants .variant:focus {
  background: #111116;
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.variants .variant.active {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.variants .variant .price {
  font-family: 'Instrument Sans', sans-serif;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.variants .variant .name-stock {
  color: inherit;
}
.variants .variant .name-stock .name {
  color: inherit;
}
.variants .variant .name-stock .description,
.variants .variant .name-stock .stock {
  color: #9a9aa4;
}

/* ------------------------------------------------------------
   10. FEATURES / TESTIMONIALS / FAQ / STATUS
   ------------------------------------------------------------ */

.features .list .feature {
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  transition: transform .25s ease, border-color .25s ease;
}
.features .list .feature:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
}
.features .list .feature i,
.features .list .feature svg {
  color: #ffffff !important;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
.features .list .feature .description {
  color: #6c6c75;
}

.testimonial {
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
}

.faq .accordion-item {
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
}

.status-card {
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.75rem;
}

/* ------------------------------------------------------------
   11. FORMS / MODALS / MISC
   ------------------------------------------------------------ */

.form-control,
.form-select,
.choices .choices__inner {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
  border-radius: 0.6rem;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.08);
}
.form-control::placeholder {
  color: #6c6c75;
}

.modal-content {
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
}
.dropdown-menu {
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dropdown-item { color: #9a9aa4; }
.dropdown-item:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }

.pagination .page-item:not(.active) .page-link {
  background: #0c0c10;
  border-color: rgba(255, 255, 255, 0.07);
  color: #9a9aa4;
}
.pagination .page-item.active .page-link {
  background: #ffffff;
  border-color: #ffffff;
  color: #050507;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------------------
   12. FOOTER — minimal
   ------------------------------------------------------------ */

footer.footer {
  background: #07070a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer h5 {
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: 0.08em;
  color: #6c6c75;
}
.footer .nav li a {
  color: #9a9aa4;
  transition: color .2s ease, text-shadow .2s ease;
}
.footer .nav li a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------
   13. CONTRAST FIXES (white accent → dark text)
   ------------------------------------------------------------ */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  --bs-btn-color: #050507 !important;
  --bs-btn-hover-color: #050507 !important;
  --bs-btn-active-color: #050507 !important;
  color: #050507 !important;
}
.btn-outline-primary {
  --bs-btn-hover-color: #050507 !important;
  --bs-btn-active-color: #050507 !important;
}

.announcement,
.announcement a { color: #050507 !important; }
.navbar .cart .btn .count { color: #050507 !important; }
.products .card .card-img-top .badges div,
.product-wrapper .badges div,
.product-wrapper .badges a,
.socials .list .social .left svg { color: #050507 !important; }
.cart-qty-btn:hover:not(:disabled) { color: #050507 !important; }
.bg-accent-500,
.ticket .bg-accent-500 { color: #050507 !important; }
.product-img-placeholder { color: #ffffff !important; }

/* ------------------------------------------------------------
   14. SCROLLBAR + FOCUS + MOBILE TOUCH
   ------------------------------------------------------------ */

/* Remove 300ms tap delay on theme buttons/cards/inputs */
.btn,
.products .card,
.form-control,
.form-select,
.choices .choices__inner,
a[data-bs-toggle="modal"] {
  touch-action: manipulation;
}

/* Prevent iOS double-tap zoom on interactive product cards */
.products .card {
  -webkit-tap-highlight-color: transparent;
}

/* Make sure the search input doesn't zoom on iPhone */
@media (max-width: 767px) {
  .form-control[type="search"],
  .form-control[type="text"] {
    font-size: 16px !important;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050507; }
::-webkit-scrollbar-thumb { background: #1f1f26; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #33333c; }

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .void-bg, .hero .content h1 { animation: none; }
}

/* ------------------------------------------------------------
   15. INTERACTIONS — cursor, tilt, glint, reveal, progress
   ------------------------------------------------------------ */

/* (custom cursor removed — constellation glow replaces it) */

/* Card tilt (JS drives --tilt-x / --tilt-y / --mx / --my) */
.products .card.void-tilt {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.products .card.void-tilt:hover {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
}

/* spotlight + glint live on the product image */
.products .card .card-img-top { position: relative; }

.products .card .card-img-top::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,0.10), transparent 70%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.products .card:hover .card-img-top::before { opacity: 1; }

.products .card .card-img-top::after {
  content: ''; position: absolute; top: 0; left: -80%; z-index: 1;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .7s ease;
}
.products .card:hover .card-img-top::after { left: 130%; }

/* keep the "view details" overlay + badges above the effects */
.products .card .card-img-top .overlay,
.products .card .card-img-top .badges { z-index: 2; }

/* Reveal on scroll (only active when JS adds .js to <html>) */
.js .void-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.js .void-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Scroll progress bar */
.void-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 1080;
  background: linear-gradient(90deg, rgba(255,255,255,0), #ffffff, rgba(255,255,255,0));
  box-shadow: 0 0 12px rgba(255,255,255,0.7);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Navbar shrink */
.navbar { transition: padding .3s ease, background .3s ease; }
.navbar.is-scrolled {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  background: rgba(5, 5, 7, 0.9) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------
   16. EXTRA FX — ambient, borders, shimmer, fade, parallax, top
   ------------------------------------------------------------ */

/* Constellation canvas — connected stars + cursor glow */
.void-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Rotating gradient border on product cards */
@property --va-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.void-fx-borders .products .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--va-angle),
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 14%, rgba(255,255,255,0) 28%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  animation: vaSpin 3.5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.void-fx-borders .products .card:hover::before { opacity: 1; }
@keyframes vaSpin { to { --va-angle: 360deg; } }

/* Heading shimmer — sheen sweeping across the hero title */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .void-fx-shimmer .hero .content h1 {
    background: linear-gradient(100deg, #ffffff 20%, #8f8f9a 42%, #ffffff 62%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.4));
    animation: vaShimmer 4s linear infinite;
  }
}
@keyframes vaShimmer { to { background-position: -220% center; } }

/* Page fade-in on load */
/* Page fade-in on load.
   NOTE: deliberately NO animation-fill-mode (no `both`). An animation left in
   fill-mode `both` keeps a permanent stacking context on .flex-wrapper, which
   traps Bootstrap modals: the modal (position:fixed, z-index 1055) is scoped
   inside that context while .modal-backdrop (z-index 1050) is appended to
   <body>, so the backdrop paints OVER the dialog and eats every click. */
.flex-wrapper {
  animation: vaPageIn .6s ease-out;
}
@keyframes vaPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* (aurora parallax removed — the constellation handles cursor interaction) */

/* To-top button */
.void-to-top {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(12, 12, 16, 0.75);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 16px rgba(255,255,255,0.12);
  cursor: pointer;
  z-index: 1070;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.void-to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.void-to-top:hover {
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 28px rgba(255,255,255,0.4);
}

@media (prefers-reduced-motion: reduce) {
  .void-fx-borders .products .card::before,
  .void-fx-shimmer .hero .content h1,
  .flex-wrapper { animation: none !important; }
}

/* ============================================================
   17. ASTRO MENU — interactive panel (storefront, below products)
   ============================================================
   Self-contained tokens so it can't collide with the rest of the
   theme. Monochrome + liquid glass, matching the void palette.
   ============================================================ */

.am-menu{
  --am-bg:      #050507;
  --am-surface: #0b0b0e;
  --am-card:    #101014;
  --am-line:    rgba(255,255,255,.075);
  --am-line-2:  rgba(255,255,255,.15);
  --am-text:    #f5f5f7;
  --am-dim:     #9a9aa4;
  --am-faint:   #6c6c75;
  --am-r:       18px;
  --am-r-sm:    10px;
}

.am-stage{
  position: relative;
  border-radius: 24px;
  padding: clamp(1rem, 2.4vw, 1.8rem);
  background:
    radial-gradient(760px 420px at 20% 4%,  rgba(255,255,255,.065), transparent 62%),
    radial-gradient(600px 400px at 86% 96%, rgba(255,255,255,.04),  transparent 64%),
    linear-gradient(180deg, #09090c 0%, #06060a 100%);
  border: 1px solid var(--am-line);
  overflow: hidden;
}
.am-stage::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- the glass panel ---------- */
.am-panel{
  position: relative; z-index: 1;
  border-radius: var(--am-r);
  overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.055) 100%);
  backdrop-filter: blur(24px) saturate(170%) contrast(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(170%) contrast(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 34px 80px rgba(0,0,0,.6),
    0 8px 22px rgba(0,0,0,.4);
}
/* pointer-tracked sheen */
.am-panel::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background: radial-gradient(150px circle at var(--am-x,50%) var(--am-y,0%), rgba(255,255,255,.055), rgba(255,255,255,.015) 45%, transparent 68%);
  opacity:0; transition: opacity .45s ease;
}
.am-panel:hover::after, .am-panel:focus-within::after{ opacity:1; }

/* ---------- title bar ---------- */
.am-bar{
  position: relative; z-index:4;
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .95rem;
  border-bottom:1px solid var(--am-line);
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent);
}
.am-dots{ display:inline-flex; gap:.32rem; }
.am-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.am-dots i:first-child{ background:rgba(255,255,255,.32); }
.am-name{
  flex:1; font-family:'Instrument Sans',sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--am-dim);
}
.am-badge{
  font-size:.58rem; font-weight:700; letter-spacing:.08em;
  padding:.16rem .45rem; border-radius:999px;
  color:#fff; background:rgba(255,255,255,.09); border:1px solid var(--am-line-2);
}

/* ---------- top tab bar (as in the panel UI) ---------- */
.am-tabs{
  position:relative; z-index:4;
  display:flex; gap:.3rem; padding:.5rem .55rem 0;
  border-bottom:1px solid var(--am-line);
}
.am-tab{
  display:inline-flex; align-items:center; gap:.42rem;
  padding:.46rem .82rem .5rem;
  border:0; background:transparent; cursor:pointer;
  border-radius:9px 9px 0 0;
  color:var(--am-faint);
  font-family:'Instrument Sans',sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:-.01em;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.am-tab svg{ width:15px; height:15px; }
.am-tab:hover{ color:var(--am-text); background:rgba(255,255,255,.04); }
.am-tab.is-on{ color:#fff; background:rgba(255,255,255,.08); box-shadow: inset 0 2px 0 0 rgba(255,255,255,.85); }
.am-tab:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:-2px; }

/* ---------- split: controls + live preview ---------- */
.am-split{
  position:relative; z-index:4;
  display:grid; grid-template-columns: minmax(0,1fr) 300px;
  gap: clamp(1rem, 2.2vw, 1.7rem);
  padding: clamp(.9rem, 2vw, 1.4rem);
}
.am-panes{
  min-width:0; max-height:470px; overflow-y:auto; padding-right:.25rem;
  /* All panes share ONE grid cell so the container is always as tall as the
     tallest tab. Switching tabs no longer resizes the panel (the Aim tab used
     to make the whole box jump ~100px taller than every other tab). */
  display:grid;
  grid-template-columns: minmax(0,1fr);
}
.am-pane{ grid-area: 1 / 1; }
.am-panes::-webkit-scrollbar{ width:6px; }
.am-panes::-webkit-scrollbar-track{ background:transparent; }
.am-panes::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:999px; }
/* visibility (not display:none) keeps every pane laid out, so the container
   stays a fixed size; inactive panes are unclickable and hidden from AT. */
.am-pane{ visibility:hidden; pointer-events:none; }
.am-pane.is-on{ visibility:visible; pointer-events:auto; }

/* ---------- section cards (two per row where they fit) ---------- */
.am-cards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.75rem; align-items:stretch; }
.am-card{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid var(--am-line);
  border-radius: 14px;
  overflow: hidden;
}
.am-card-h{
  padding:.5rem .75rem;
  font-family:'Instrument Sans',sans-serif;
  font-size:.625rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--am-dim); text-align:center;
  background: rgba(255,255,255,.028);
  border-bottom: 1px solid var(--am-line);
}
.am-card-b{ padding:.4rem .45rem .5rem; }

/* ---------- control rows ---------- */
.am-line{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.4rem .45rem; border-radius:8px;
  transition: background-color .2s ease;
}
.am-line:hover{ background: rgba(255,255,255,.032); }
.am-label{ font-size:.815rem; color:var(--am-dim); letter-spacing:-.005em; }
.am-line--range{ display:grid; grid-template-columns: 1fr 92px 46px; align-items:center; }

/* switches */
.am-sw{
  position:relative; flex:none; width:34px; height:19px; border-radius:999px;
  border:1px solid var(--am-line-2); background:rgba(255,255,255,.06);
  cursor:pointer; padding:0;
  transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.am-sw::after{
  content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:linear-gradient(180deg,#fff,#d6d6da);
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .24s cubic-bezier(.2,1,.3,1), background .24s ease;
}
.am-sw.is-on{ background:#fff; border-color:#fff; box-shadow:0 0 14px rgba(255,255,255,.22); }
.am-sw.is-on::after{ transform:translateX(15px); background:linear-gradient(180deg,#1a1a1e,#08080a); box-shadow:0 1px 2px rgba(0,0,0,.6); }
.am-sw:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; }

/* sliders */
.am-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; border-radius:999px; margin:0; cursor:pointer; outline:none;
  background-color: rgba(255,255,255,.13);
  background-image: linear-gradient(#fff,#fff);
  background-repeat:no-repeat; background-size:50% 100%;
}
.am-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%; border:0;
  background:linear-gradient(180deg,#fff,#dcdce0);
  box-shadow:0 1px 3px rgba(0,0,0,.55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.am-range::-webkit-slider-thumb:hover{ transform:scale(1.15); box-shadow:0 0 12px rgba(255,255,255,.4); }
.am-range::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; border:0; background:linear-gradient(180deg,#fff,#dcdce0); box-shadow:0 1px 3px rgba(0,0,0,.55); }
.am-range:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.16); }
.am-val{
  font-family:'Instrument Sans',sans-serif;
  font-size:.72rem; font-weight:600; font-variant-numeric: tabular-nums;
  color:#fff; text-align:right;
}

/* keybind / dropdown fields (click cycles) */
.am-field{
  min-width:86px; max-width:140px; padding:.3rem .55rem;
  border-radius:6px; border:1px solid var(--am-line-2);
  background:rgba(255,255,255,.05); color:#fff;
  font-family:inherit; font-size:.72rem; font-weight:600; text-align:center;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: background-color .2s ease, border-color .2s ease, transform .16s ease;
}
.am-field:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); }
.am-field:active{ transform:scale(.97); }
.am-field:focus-visible{ outline:2px solid rgba(255,255,255,.65); outline-offset:2px; }
.am-field[data-value="NONE"], .am-field[data-value="Off"]{ color:var(--am-faint); }

/* ---------- live preview viewport ---------- */
.am-view{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.am-view-cap{
  font-size:.58rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--am-faint);
}
.am-screen{
  position:relative; flex:1; min-height:250px; border-radius:14px; overflow:hidden;
  border:1px solid var(--am-line-2); background:rgba(0,0,0,.34);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.am-grid{
  position:absolute; inset:0; opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:24px 24px;
}
.am-sweep{
  position:absolute; left:50%; top:50%; width:128%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; mix-blend-mode:screen;
  background: conic-gradient(from 0deg, rgba(255,255,255,.15) 0deg, rgba(255,255,255,.05) 26deg, transparent 62deg);
  animation: amSweep 5.5s linear infinite;
}
@keyframes amSweep{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.am-svg{ position:absolute; inset:0; width:100%; height:100%; }
.am-cone{ fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.18); stroke-width:.8; }
.am-ln{ stroke:rgba(255,255,255,.3); stroke-width:.8; }
.am-box{ fill:none; stroke:rgba(255,255,255,.55); stroke-width:.9; }
.am-blip{ fill:#fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.am-dist{ fill:rgba(255,255,255,.5); font-size:6.5px; font-weight:700; }
.am-cross{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:.7; stroke-dasharray:3 3; }
.am-dot{ fill:#fff; }
.am-note{ margin:0; font-size:.78rem; color:var(--am-faint); }

/* declarative visibility (driven by the controls) */
[data-when].is-hidden{ display:none !important; }

@media (max-width: 900px){
  .am-split{ grid-template-columns:1fr; }
  .am-view{ order:-1; }
  .am-cards{ grid-template-columns:1fr; }
  .am-panes{ max-height:none; overflow:visible; }
}
@media (max-width: 520px){
  .am-tab span{ display:none; }
  .am-view-cap{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .am-sweep{ animation:none; }
}


/* ============================================================
   18. VARIANT OPTIONS — glowing white labels
   ============================================================
   The variant buttons carry `.btn-primary`, whose colour
   (#050507) is the ON-ACCENT colour meant for the white primary
   button. On the dark variant surface that rendered the labels
   near-black and unreadable, so the name is forced to white with
   a restrained glow — legibility first, glow second.
   ============================================================ */

.variants .variant,
.variants .variant .name-stock,
.variants .variant .name-stock .name,
.variants .variant .name{
  color: #ffffff !important;
}
.variants .variant .name{
  text-shadow:
    0 0 4px  rgba(255, 255, 255, .26),
    0 0 12px rgba(255, 255, 255, .10);
}
/* secondary lines stay muted so the name is the hero */
.variants .variant .name-stock .description,
.variants .variant .name-stock .stock,
.variants .variant .description,
.variants .variant .stock{
  color: #9a9aa4 !important;
  text-shadow: none;
}
/* the selected option keeps a slightly stronger glow */
.variants .variant.active .name{
  text-shadow:
    0 0 5px  rgba(255, 255, 255, .38),
    0 0 14px rgba(255, 255, 255, .15);
}
.variants .variant:hover .name{
  text-shadow:
    0 0 5px  rgba(255, 255, 255, .32),
    0 0 13px rgba(255, 255, 255, .12);
}
/* out-of-stock options: readable but clearly dimmed */
.variants .variant:disabled .name,
.variants .variant.disabled .name{
  color: #9a9aa4 !important;
  text-shadow: none;
}

/* ============================================================
   19. REVIEWS — premium glass treatment
   ============================================================
   The stock cards carried almost no styling. Everything here is
   CSS-only so the theme's own feedback markup stays untouched
   (safe across SellAuth theme updates).
   Monochrome + liquid glass: the gold stars are re-coloured white
   so they sit inside the void palette.
   ============================================================ */

/* ---- the section reads as a lit stage ---- */
.text-block:has(.testimonial){
  position: relative;
  overflow: hidden;
}
.text-block:has(.testimonial)::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(255,255,255,.055), transparent 66%),
    radial-gradient(700px 480px at 88% 108%, rgba(255,255,255,.028), transparent 68%);
}
.text-block:has(.testimonial) .container{ position: relative; z-index: 1; }

/* even rows + a little more air between cards */
.text-block:has(.testimonial) .row{ align-items: stretch; row-gap: 1.1rem; }
.text-block:has(.testimonial) .row > [class*="col-"]{ display: flex; }
.text-block:has(.testimonial) .row > [class*="col-"] > div{ display: flex; width: 100%; }

/* ---- the card ---- */
.testimonial{
  position: relative;
  display: flex; flex-direction: column; width: 100%;
  padding: 1.35rem 1.35rem 1.05rem;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.028) 46%, rgba(255,255,255,.045) 100%),
    #0b0b0e;
  border: 1px solid rgba(255,255,255,.085);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 22px 55px rgba(0,0,0,.5),
    0 6px 16px rgba(0,0,0,.35);
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              border-color .5s ease, box-shadow .5s ease;
}
/* The oversized quotation-mark watermark read as corny, so it is gone.
   The header keeps its height via an empty spacer instead. */
.testimonial .header .quote{ display: none !important; }
/* sheen sweep on hover */
.testimonial::after{
  content:''; position:absolute; top:0; left:-70%; width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.055) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events:none; z-index: 2;
  transition: left .85s cubic-bezier(.16,1,.3,1);
}
.testimonial:hover{
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 30px 70px rgba(0,0,0,.58),
    0 0 34px rgba(255,255,255,.055);
}
.testimonial:hover::after{ left: 130%; }

.testimonial .main{
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: .85rem;
  flex: 1 1 auto;
}

/* ---- header: stars ---- */
.testimonial .header{
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 20px;
}
.testimonial .stars{ display: inline-flex; align-items: center; gap: .18rem; }
.testimonial .stars svg{ width: 15px; height: 15px; flex: none; }
/* filled stars: white with a soft bloom (the markup ships gold) */
.testimonial .stars svg:not([fill="none"]){
  fill: #ffffff !important; stroke: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.45));
}
/* empty stars: a faint outline, never a solid block */
.testimonial .stars svg[fill="none"]{
  fill: none !important; stroke: rgba(255,255,255,.22) !important;
  filter: none;
}

/* ---- body copy ---- */
.testimonial .content{ position: relative; z-index: 1; }
.testimonial .content .message p{
  margin: 0; font-size: .92rem; line-height: 1.6;
  color: #c9c9d1 !important;
}
.testimonial .content .message a small,
.testimonial .content .message small{
  font-size: .74rem; letter-spacing: .01em;
  color: #fff !important; text-decoration: underline; text-underline-offset: 3px;
}
.testimonial .content .image{ margin-top: .85rem; }
.testimonial .content .image img{
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  transition: transform .6s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.testimonial:hover .content .image img{ transform: scale(1.02); border-color: rgba(255,255,255,.2); }

/* shop reply: indented with a hairline accent */
.testimonial .content .reply{
  margin-top: .9rem; padding: .7rem .85rem;
  border-left: 2px solid rgba(255,255,255,.24);
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.035);
}
.testimonial .content .reply .text p,
.testimonial .content .reply p.text{
  margin: 0; font-size: .84rem; line-height: 1.55; color: #9a9aa4 !important;
}
.testimonial .content .reply .author{
  margin: .4rem 0 0; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: #6c6c75 !important;
}
.testimonial .content .reply .author span{ color: #dcdce2; }

/* ---- footer: product chip + date ---- */
.testimonial .footer{
  position: relative; z-index: 1;
  margin-top: 1.1rem; padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.075);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap;
}
.testimonial .footer .items{
  font-size: .78rem; font-weight: 600; letter-spacing: -.005em;
  color: #f5f5f7;
  padding: .24rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testimonial .footer .date{
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: #6c6c75; white-space: nowrap;
}

/* ---- 4-up keeps breathing room on mid widths ---- */
@media (max-width: 1399px) and (min-width: 992px){
  .text-block:has(.testimonial) .row > .col-xl-3{ flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (max-width: 767px){
  .testimonial{ padding: 1.15rem 1.1rem .95rem; }
  .testimonial .header .quote{ width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce){
  .testimonial, .testimonial::after,
  .testimonial .content .image img{ transition: none !important; }
  .testimonial:hover{ transform: none; }
}


/* ============================================================
   20. COSMOS HERO (test placement)
   ============================================================
   Scroll-scrubbed pinned canvas. Self-contained: every selector is
   namespaced .cosmos-* so nothing else in the theme is touched.
   ============================================================ */

.cosmos-cvs{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ============================================================
   21. HERO — copy left, animation panel right
   ============================================================ */
@media (min-width: 992px){
  .hero .container{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.25rem);
    max-width: 1240px;
  }
  .hero .content{ text-align: left; margin: 0; max-width: 620px; }
  .hero .content p{ margin-left: 0 !important; margin-right: 0 !important; }
  .hero .content .stats{ justify-content: flex-start; margin: 0 !important; }
}

/* The animation is NOT a framed player — it dissolves into the page.
   No border, no fill, no shadow: the canvas' own deep-space background
   already matches the page, and a radial mask feathers its edges so there
   is no visible rectangle at all. */
.hero-video{
  position: relative; width: 100%;
  aspect-ratio: 4 / 3;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.hero-video canvas{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  /* closest-side: the fade reaches FULL transparency exactly at the shorter
     axis, so no part of the canvas touches the page un-faded — measured as a
     5.5/255 seam with the old percentages */
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 58%, transparent 100%);
}

@media (max-width: 991px){
  .hero-video{ aspect-ratio: 16 / 10; margin-top: 2.25rem; }
  .hero .content{ text-align: center; margin: 0 auto; }
  .hero .content .stats{ justify-content: center; margin: 0 auto !important; }
}

/* the cue sits at the bottom of the hero, over the whole section */



/* ============================================================
   22. FIND THE PRODUCT THAT FITS YOU — docked top-left widget
   ============================================================
   Sits under the navbar as a notification; opens into a three-question
   finder. Namespaced .pf-*; z-index kept BELOW the navbar (50) so it
   tucks under rather than fighting it.
   ============================================================ */

.pf-dock{
  position: fixed;
  top: 100px; left: 18px;                /* fallback; JS anchors it to the navbar's real bottom */
  z-index: 45;
  width: 320px; max-width: calc(100vw - 36px);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: pfIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pfIn{ from{ opacity:0; transform: translateX(-14px); } to{ opacity:1; transform:none; } }
.pf-dock.is-hidden{ display:none; }

/* ---------- collapsed notification ---------- */
.pf-notify{
  position: relative; width: 100%;
  display: flex; align-items: center; gap: .7rem;
  padding: .72rem .8rem;
  border-radius: 16px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 18px 44px rgba(0,0,0,.55),
    0 0 26px rgba(255,255,255,.045);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.pf-notify:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 22px 52px rgba(0,0,0,.6), 0 0 30px rgba(255,255,255,.07);
}
.pf-notify-copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-notify-copy b{ font-size:.85rem; font-weight:650; letter-spacing:-.015em; color:#fff; }
.pf-notify-copy span{ font-size:.72rem; color:#9a9aa4; }
.pf-chev{ flex:none; color:#9a9aa4; transition: transform .3s ease; }
.pf-chev svg{ width:15px; height:15px; display:block; }
.pf-notify:hover .pf-chev{ transform: translateX(2px); color:#fff; }

/* the little "something is here" ping */
.pf-ping{
  position: relative; flex:none; width:8px; height:8px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px rgba(255,255,255,.85);
}
.pf-ping::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  animation: pfPing 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pfPing{
  0%   { transform:scale(1);   opacity:.7; }
  70%  { transform:scale(2.6); opacity:0; }
  100% { transform:scale(2.6); opacity:0; }
}

/* ---------- expanded finder ---------- */
.pf-body{
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 26px 60px rgba(0,0,0,.62);
  animation: pfIn .35s cubic-bezier(.16,1,.3,1) both;
}
.pf-head{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .8rem; border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.pf-head-t{ flex:1; font-size:.78rem; font-weight:650; letter-spacing:-.01em; color:#fff; }
.pf-close{
  flex:none; display:grid; place-items:center; width:24px; height:24px;
  border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:#9a9aa4; cursor:pointer; padding:0;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.pf-close svg{ width:13px; height:13px; }
.pf-close:hover{ color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); }

.pf-steps{ display:flex; gap:5px; padding:.7rem .85rem .1rem; }
.pf-steps i{ height:2px; flex:1; border-radius:99px; background:rgba(255,255,255,.14); transition: background-color .3s ease; }
.pf-steps i.is-on{ background:#fff; box-shadow:0 0 8px rgba(255,255,255,.55); }

.pf-pane{ padding:.55rem .85rem .9rem; }
.pf-q{ margin:0 0 .7rem; font-size:.86rem; font-weight:600; color:#fff; letter-spacing:-.01em; }

.pf-opts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pf-opts--col{ flex-direction:column; flex-wrap:nowrap; }
.pf-opt{
  display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  padding:.55rem .7rem; border-radius:11px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:#f5f5f7; font-family:inherit; font-size:.8rem; font-weight:600;
  transition: background-color .2s ease, border-color .2s ease, transform .18s ease;
}
.pf-opts--col .pf-opt{ width:100%; }
.pf-opt span{ font-size:.71rem; font-weight:400; color:#9a9aa4; }
.pf-opt:hover{ background:rgba(255,255,255,.0); background-color:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); }
.pf-opt:active{ transform:scale(.985); }
.pf-opt:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

.pf-slider{ display:flex; align-items:center; gap:.75rem; }
.pf-range{
  -webkit-appearance:none; appearance:none; flex:1; height:3px; border-radius:99px;
  background-color:rgba(255,255,255,.14); background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat; background-size:100% 100%; outline:none; cursor:pointer; margin:0;
}
.pf-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; border:0;
  background:linear-gradient(180deg,#fff,#dcdce0); box-shadow:0 1px 4px rgba(0,0,0,.55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pf-range::-webkit-slider-thumb:hover{ transform:scale(1.14); box-shadow:0 0 12px rgba(255,255,255,.4); }
.pf-range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; border:0; background:linear-gradient(180deg,#fff,#dcdce0); }
.pf-out{
  font-family:'Instrument Sans',sans-serif; font-size:.86rem; font-weight:700;
  color:#fff; min-width:44px; text-align:right; font-variant-numeric:tabular-nums;
}

.pf-nav{ display:flex; gap:.4rem; margin-top:.8rem; }
.pf-back,.pf-next{
  font-family:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
  padding:.5rem .85rem; border-radius:99px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#f5f5f7;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pf-back:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); }
.pf-next{ background:#fff; border-color:#fff; color:#050507; box-shadow:0 0 16px rgba(255,255,255,.22); }
.pf-next:hover{ box-shadow:0 0 26px rgba(255,255,255,.4); }

/* ---------- result ---------- */
.pf-result{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }
.pf-kicker{
  margin:0; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:#6c6c75;
}
.pf-name{ margin:.35rem 0 0; font-family:'Instrument Sans',sans-serif; font-size:1.06rem; font-weight:700; letter-spacing:-.02em; color:#fff; }
.pf-why{ margin:.3rem 0 0; font-size:.76rem; line-height:1.5; color:#9a9aa4; }
.pf-price{ margin:.45rem 0 0; font-size:.74rem; color:#6c6c75; }
.pf-cta{ margin-top:.8rem; width:100%; justify-content:center; text-align:center; }
.pf-restart{
  margin-top:.5rem; align-self:center; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:.72rem; color:#6c6c75; text-decoration:underline;
  text-underline-offset:3px; padding:.2rem;
}
.pf-restart:hover{ color:#fff; }
.pf-ns{ margin:.5rem 0 0; font-size:.72rem; color:#6c6c75; }

@media (max-width: 640px){
  .pf-dock{ left: 10px; width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce){
  .pf-dock, .pf-body{ animation: none; }
  .pf-ping::after{ animation: none; }
}

/* key-length chips in the finder result */
.pf-keys{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; }
.pf-key{
  font-size:.66rem; letter-spacing:-.005em; color:#9a9aa4;
  padding:.24rem .5rem; border-radius:99px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}
.pf-key b{ color:#f5f5f7; font-weight:650; }
.pf-key.is-rec{
  color:#050507; background:#fff; border-color:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.22);
}
.pf-key.is-rec b{ color:#050507; }
.pf-price b{ color:#fff; font-weight:650; }
.pf-warn{ color:#9a9aa4; }

/* ------------------------------------------------------------
   23. PRODUCT PAGE — reference treatment (void, monochrome)
   ------------------------------------------------------------
   Scoped to the product page only. Variant boxes are deliberately
   NOT touched, and the star background is left alone.

   Two notes on what this can and cannot achieve:
   - The reference's thumbnail strip needs products with 2+ images.
     Most products here have exactly one, so the strip will not
     appear for those (nothing to switch between).
   - .btn-primary/​.btn-outline-primary already carry !important
     colour rules in section 13, so colour here needs !important
     too - specificity alone loses to them.
   ------------------------------------------------------------ */

/* --- main image: inset well inside the big box --- */
.product-wrapper #productImageCarousel .carousel-inner{
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.product-wrapper #productImageCarousel .carousel-item img{
  border-radius: 0;
  display: block;
}

/* --- thumbnails: one rectangular row (theme ships a 4-col grid) --- */
.product-wrapper #productImageCarousel .thumbnails{
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  gap: .6rem;
  margin-top: .85rem;
}
.product-wrapper #productImageCarousel .thumbnails button{
  width: 84px;
  height: 54px;
  padding: 0;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  opacity: .5;
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-wrapper #productImageCarousel .thumbnails button img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.product-wrapper #productImageCarousel .thumbnails button:hover{
  opacity: .85;
  border-color: rgba(255,255,255,.28);
}
.product-wrapper #productImageCarousel .thumbnails button.active{
  opacity: 1;
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,.32), 0 6px 18px rgba(0,0,0,.45);
}

/* --- the description panel (nested inside the big box, so it sits lighter) --- */
.product-wrapper .product-tabs .content{
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 40px rgba(0,0,0,.35);
}
.product-wrapper .product-tabs .content .editor{ color: #c9c9d1; }
.product-wrapper .product-tabs .content .editor :is(h1,h2,h3,h4,h5,h6){ color: #ffffff; }

/* --- buy row: taller, rounded, clear hierarchy --- */
.product-wrapper .buy-buttons{ align-items: stretch; }
.product-wrapper .buy-buttons .col{ display: flex; }
.product-wrapper .buy-buttons .btn{
  min-height: 54px;
  width: 100%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem;
  border-radius: 14px !important;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
/* the reference gives "Purchase Now" the most width -> Buy Now is wider */
.product-wrapper .buy-buttons .col:has(.btn-outline-primary){ flex: 1.35; }
.product-wrapper .buy-buttons .col:has(.btn-primary){ flex: 1; }

/* Buy Now — solid, the emphasised CTA */
.product-wrapper .buy-buttons .btn-outline-primary{
  --bs-btn-bg: #ffffff;
  --bs-btn-color: #050507;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-color: #050507;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-active-bg: #ffffff;
  --bs-btn-active-color: #050507;
  background: #ffffff !important;
  color: #050507 !important;
  border: 1px solid #ffffff !important;
  text-shadow: none;
  box-shadow: 0 10px 30px rgba(255,255,255,.16);
}
.product-wrapper .buy-buttons .btn-outline-primary:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(255,255,255,.26);
}

/* Add to Cart — liquid-glass secondary */
.product-wrapper .buy-buttons .btn-primary{
  --bs-btn-bg: transparent;
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: rgba(255,255,255,.17);
  --bs-btn-hover-bg: rgba(255,255,255,.12);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  text-shadow: none;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.product-wrapper .buy-buttons .btn-primary:hover:not(:disabled){
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.30) !important;
  transform: translateY(-1px);
}
.product-wrapper .buy-buttons .btn:disabled{ opacity: .45; transform: none !important; }
.product-wrapper .buy-buttons .btn svg{ width: 1.15rem; height: 1.15rem; }

@media (prefers-reduced-motion: reduce){
  .product-wrapper .buy-buttons .btn,
  .product-wrapper #productImageCarousel .thumbnails button{ transition: none; }
}

/* ------------------------------------------------------------
   24. PRODUCT PAGE — THE BIG BOX
   ------------------------------------------------------------
   Everything (image column, info column, description, variants,
   buttons) wrapped in ONE gray container, as the reference does
   with its .qlf-pp-fold-card (bg #121a26 / radius 8px / pad 32px
   on a #0b1018 page).

   Reference measured live: card 1248px inside a 1296px container.
   Here the wrapper is the inner container, which by DOM contains
   the row, the description AND the buy buttons - verified, not
   assumed.

   Radius is 16px rather than the reference's 8px to sit with the
   rest of this theme's language (14px buttons, 16px panels).
   ------------------------------------------------------------ */

.product-wrapper .py-5-nav > .container{
  background: #131317;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
}

@media (max-width: 991.98px){
  .product-wrapper .py-5-nav > .container{
    padding: 1.25rem;
    border-radius: 14px;
  }
}