/* 2026 full-site quality pass: final semantic layer. */
:root{
  --surface-0:#05030a;
  --surface-1:rgba(14,9,25,.84);
  --surface-2:rgba(255,255,255,.036);
  --surface-3:rgba(255,255,255,.055);
  --border-soft:rgba(255,255,255,.075);
  --border-accent:rgba(196,132,252,.22);
  --accent:#a855f7;
  --accent-soft:#d8b4fe;
  --text-strong:#faf7ff;
  --text-soft:#b4abbf;
  --text-faint:#857b91;
  --good:#4ade80;
  --warn:#fbbf24;
  --bad:#fb7185;
  --focus:0 0 0 3px rgba(168,85,247,.26);
}
html{scroll-padding-top:96px}
body{background-color:var(--surface-0);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:rgba(168,85,247,.35);color:#fff}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:disabled,[aria-disabled="true"]{cursor:not-allowed;opacity:.55!important;transform:none!important;filter:none!important}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none!important;box-shadow:var(--focus)!important}

/* Header/nav: stable desktop layout, intentional mobile drawer. */
.topbar-wrap{padding-top:10px!important}
.topbar{isolation:isolate}
.mobile-menu-btn{display:none;width:42px;height:42px;border:1px solid var(--border-soft);border-radius:13px;background:rgba(255,255,255,.04);color:#fff;align-items:center;justify-content:center}
.nav-more{position:relative;display:flex;align-items:center}
.nav-more>button{height:34px;min-height:34px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:#d8cfe4;font-size:12px;font-weight:760;white-space:nowrap}
.nav-more>button:hover,.nav-more.open>button,.nav-more:focus-within>button{background:rgba(168,85,247,.16);color:#fff}
.nav-more-menu{position:absolute;top:calc(100% + 10px);right:0;width:210px;padding:7px;border:1px solid rgba(216,180,254,.14);border-radius:16px;background:rgba(10,6,18,.97);box-shadow:0 22px 55px rgba(0,0,0,.45);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.16s ease;z-index:40}
.nav-more.open .nav-more-menu,.nav-more:focus-within .nav-more-menu{opacity:1;visibility:visible;transform:none}
.nav-more-menu a{display:flex!important;justify-content:flex-start!important;gap:10px!important;width:100%;padding:0 10px!important;border-radius:11px!important}
.nav-more-menu i{width:16px;text-align:center;color:#c084fc}
.header-actions :where(.cart-icon-btn,.wishlist-icon-btn,.header-cta){transition:background .16s ease,border-color .16s ease,transform .16s ease}
.header-actions :where(.cart-icon-btn,.wishlist-icon-btn,.header-cta):hover{transform:translateY(-1px)}

/* Shared controls and cards. */
:where(input,select,textarea){transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
:where(input,select,textarea):hover{border-color:rgba(216,180,254,.15)!important}
:where(input,select,textarea):focus{border-color:rgba(192,132,252,.38)!important;background:rgba(255,255,255,.045)!important}
.empty-state{border:1px dashed rgba(216,180,254,.16)!important;background:rgba(168,85,247,.035)!important;color:var(--text-soft)!important}
.skeleton-card,.minimal-product-card.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.035)!important}
.skeleton-card::after,.minimal-product-card.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:site-skeleton 1.35s ease-in-out infinite}
@keyframes site-skeleton{to{transform:translateX(100%)}}

/* Footer is informational, never makes a hard-coded uptime claim. */
.footer-smart-status{transition:border-color .16s ease,background .16s ease;color .16s ease}
.footer-smart-status:hover{background:rgba(168,85,247,.08);border-color:var(--border-accent);color:#fff}

/* Offline state is subtle but visible. */
.network-status-banner{position:fixed;left:50%;bottom:18px;z-index:5000;display:flex;align-items:center;gap:10px;width:min(620px,calc(100% - 28px));padding:12px 14px;border:1px solid rgba(251,191,36,.28);border-radius:15px;background:rgba(24,16,7,.96);box-shadow:0 18px 48px rgba(0,0,0,.42);color:#ffe7a3;font-size:12.5px;font-weight:750;line-height:1.45;opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:.18s ease}
.network-status-banner.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.network-status-banner i{color:#fbbf24}
.is-offline [data-requires-network="true"]{opacity:.58}

/* Command palette: real page + product search. */
.command-palette{position:fixed;inset:0;z-index:6000;display:flex;align-items:flex-start;justify-content:center;padding:11vh 18px 18px;background:rgba(2,1,5,.72);backdrop-filter:blur(11px);opacity:0;visibility:hidden;transition:.15s ease}
.command-palette.show{opacity:1;visibility:visible}
.command-box{width:min(650px,100%);overflow:hidden;border:1px solid rgba(216,180,254,.18);border-radius:21px;background:rgba(10,7,17,.985);box-shadow:0 28px 80px rgba(0,0,0,.55)}
.command-box>input{width:100%;height:58px!important;border:0!important;border-bottom:1px solid var(--border-soft)!important;border-radius:0!important;background:transparent!important;padding:0 18px!important;color:#fff;font-size:15px!important}
.command-results{max-height:min(430px,58vh);overflow:auto;padding:8px}
.command-item{display:grid!important;grid-template-columns:26px minmax(0,1fr) auto 18px;align-items:center;gap:10px;min-height:50px;padding:7px 10px!important;border-radius:13px!important;color:#d9d1e2!important}
.command-item:hover,.command-item.active{background:rgba(168,85,247,.11)!important;color:#fff!important}
.command-item>i:first-child{color:#c084fc;text-align:center}
.command-item img{width:30px;height:30px;border-radius:9px;object-fit:cover}
.command-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:820}
.command-item small{color:#7f7489;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.command-item>i:last-child{font-size:10px;color:#776d82}
.command-empty{padding:20px;color:#8f8599;text-align:center;font-size:13px}
.command-open{overflow:hidden}

/* Store/product polish shared across layouts. */
.product-card img,.minimal-product-image img,.pd-cover{background:#09060f}
.product-card{content-visibility:auto;contain-intrinsic-size:390px 520px}
.product-card .product-name{line-height:1.28}
.option,.pd-option{touch-action:manipulation}
.wishlist-toggle,.pd-icon-btn{display:grid!important;place-items:center!important}

/* Better compact footer/mobile spacing. */
@media(max-width:1050px){
  .mobile-menu-btn{display:flex;grid-column:2;grid-row:1;justify-self:end}
  .topbar{grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important}
  .brand{grid-column:1;grid-row:1}
  .header-actions{grid-column:3!important;grid-row:1!important;width:auto!important}
  .nav-links{grid-column:1/-1!important;display:none!important;width:100%;padding:7px!important;border-radius:16px!important;overflow:visible!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .topbar.menu-open .nav-links{display:grid!important}
  .nav-links>a,.nav-more>button{width:100%!important;height:38px!important;justify-content:center!important}
  .nav-more{width:100%}
  .nav-more-menu{position:absolute;top:calc(100% + 6px);left:0;right:auto;width:min(250px,80vw)}
}
@media(max-width:720px){
  html{scroll-padding-top:82px}
  .topbar{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  .mobile-menu-btn{grid-column:2;grid-row:1}
  .header-actions{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:42px 42px 42px minmax(0,1fr);width:100%!important;gap:7px!important}
  .header-actions .header-cta{width:100%!important;justify-content:center!important}
  .nav-links{grid-row:3!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .nav-more-menu{position:fixed;left:12px;right:12px;top:auto;width:auto}
  .footer-smart-top{gap:26px!important}
  .command-palette{padding-top:7vh}
  .command-item{grid-template-columns:26px minmax(0,1fr) 16px}
  .command-item small{display:none}
}
@media(prefers-reduced-motion:reduce){
  .skeleton-card::after,.minimal-product-card.skeleton::after{animation:none}
  .network-status-banner,.command-palette,.nav-more-menu{transition:none}
}
.search-box kbd{margin-left:auto;padding:3px 7px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.035);color:#82788b;font-size:10px;font-family:inherit}.store-result-tools{display:flex;align-items:center;gap:10px;min-width:0}.store-reset{border:0;background:transparent;color:#c6a7e8;font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px}.filter-btn{justify-content:space-between!important;gap:10px!important}.filter-btn small{color:#746b7e;font-size:10px}.filter-btn.active small{color:#d8b4fe}.product-image-link{display:block;height:100%}.product-image-link img{width:100%;height:100%;object-fit:cover}.store-empty{grid-column:1/-1;display:grid;justify-items:center;gap:8px;padding:42px 24px!important}.store-empty>i{font-size:22px;color:#a855f7}.store-empty h3,.store-empty p{margin:0}.store-empty p{max-width:460px;text-align:center}
.minimal-status-row span.warn{color:#ffe3a0}.minimal-status-row span.warn i{background:#fbbf24}.minimal-status-row span.down{color:#ffc4ce}.minimal-status-row span.down i{background:#fb7185}.minimal-product-image>span.warn{color:#ffe3a0}.minimal-product-image>span.down{color:#ffc4ce}.minimal-product-info h3 a:hover{color:#d8b4fe}.minimal-empty{display:grid;gap:9px;justify-items:start}.minimal-empty span{color:var(--text-faint);font-size:12px}
.pd-actions{grid-template-columns:minmax(0,1fr) 48px 48px!important}.pd-button-price{margin-left:auto;padding-left:10px;opacity:.82}.pd-primary{display:flex!important;align-items:center;justify-content:center;gap:8px;padding:0 16px!important}.pd-icon-btn{width:48px;height:54px}.pd-buy{top:88px!important}.pd-description .pd-line{overflow-wrap:anywhere}@media(max-width:640px){.pd-actions{grid-template-columns:minmax(0,1fr) 46px 46px!important}.pd-icon-btn{width:46px}}

/* Cart QoL */
.cart-item-info h3 a { color: inherit; text-decoration: none; }
.cart-item-info h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.empty-cart-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.empty-cart-actions a,
.cart-undo { min-height: 42px; border-radius: 12px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
.cart-undo { border: 1px solid rgba(168,85,247,.35); background: rgba(168,85,247,.1); color: #e9d5ff; cursor: pointer; }
.quantity-control button:disabled { opacity: .36; cursor: not-allowed; }

/* Status QoL */
.st-refresh-button { border: 0; font: inherit; cursor: pointer; }
.st-refresh-button:hover { color: #e9d5ff; }
.st-refresh-button:disabled { cursor: wait; opacity: .72; }
.st-refresh-button.is-loading i { animation: moe-spin .9s linear infinite; }
@keyframes moe-spin { to { transform: rotate(360deg); } }

/* Auth QoL */
.auth-card label.has-password-reveal { position: relative; }
.auth-card label.has-password-reveal > input { padding-right: 46px; }
.password-reveal { position: absolute; right: 9px; bottom: 8px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.58); display: grid; place-items: center; cursor: pointer; }
.password-reveal:hover { background: rgba(168,85,247,.1); color: #e9d5ff; }

/* Support form QoL */
.ticket-form label { position: relative; }
.field-counter { display: block; margin-top: 6px; color: rgba(255,255,255,.42); font-size: 11px; font-weight: 700; text-align: right; }
.field-counter.field-error { color: #fb7185; }

/* Saved reduced-motion preference (not only OS preference). */
html.user-reduced-motion *,
html.user-reduced-motion *::before,
html.user-reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.user-reduced-motion #particle-canvas,
html.user-reduced-motion .shooting-star { display: none !important; }
