/* Shop filters, preorder introduction and Custom Lab shortcut */
.lab-shortcut {
  position:fixed;
  right:24px;
  bottom:72px;
  z-index:110;
  display:flex;
  align-items:center;
  gap:18px;
  padding:15px 20px;
  border:1px solid #69d7ff50;
  border-radius:18px;
  background:linear-gradient(135deg,#172734,#101820);
  box-shadow:0 12px 40px #0008;
  color:#f5f7fa;
  text-align:left;
  animation:labFloat 4s ease-in-out infinite
}

.lab-shortcut small {
  display:block;
  color:#91a9bb;
  font-size:.65rem;
  margin-bottom:4px
}

.lab-shortcut strong {
  font-size:.85rem
}

.lab-shortcut .lab-arrow {
  font-size:24px;
  color:var(--blue)
}

.lab-shortcut:hover,.lab-shortcut:focus-visible {
  animation-play-state:paused;
  border-color:var(--blue)
}

.lab-shortcut[hidden] {
  display:none
}

@keyframes labFloat {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-6px)
  }
}

#view-shop > .subhero {
  padding:18px 0 12px
}

#view-shop > .content {
  padding-top:0
}

.shop-filters-toggle { display:none; }

.shop-layout {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:32px;
  align-items:start
}

.shop-sidebar {
  position:sticky;
  top:100px;
  max-height:calc(100dvh - 120px);
  overflow-y:auto;
  border:1px solid var(--line);
  background:#0e141b;
  border-radius:20px;
  padding:22px 16px
}

.shop-sidebar h3 {
  font-size:.95rem;
  margin:0 0 20px
}

.shop-sidebar fieldset {
  border:0;
  padding:0;
  margin:0 0 24px;
  min-width:0
}

.shop-sidebar legend {
  color:#728596;
  text-transform:uppercase;
  font-size:.65rem;
  letter-spacing:.14em;
  margin-bottom:12px
}

.shop-filter {
  display:flex;
  align-items:center;
  gap:10px;
  color:#a9b6c2;
  font-size:.8rem;
  padding:9px 8px;
  border-radius:9px;
  cursor:pointer
}

.shop-filter:has(input:checked) {
  background:#1b2a37;
  color:#f2f7fa
}

.shop-filter input {
  appearance:none;
  -webkit-appearance:none;
  width:17px;
  height:17px;
  margin:0;
  padding:0;
  flex:none;
  border:1px solid #526675;
  border-radius:5px;
  background:#0a1016;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.shop-filter input::before {
  content:"";
  width:8px;
  height:5px;
  border-left:2px solid #071016;
  border-bottom:2px solid #071016;
  transform:rotate(-45deg) scale(0);
  transition:transform .16s ease
}
.shop-filter input:checked {
  border-color:#83f7ff;
  background:#83f7ff;
  box-shadow:0 0 5px rgba(0,213,255,.7),0 0 12px rgba(0,213,255,.28)
}
.shop-filter input:checked::before {
  transform:rotate(-45deg) scale(1)
}
.shop-filter input:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:3px
}

.shop-reset {
  width:100%;
  border:1px solid var(--line);
  background:none;
  color:#aabac7;
  padding:9px;
  border-radius:10px;
  font-size:.73rem
}

.shop-toolbar {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:22px
}

/* Search belongs to the product column, never the collapsible filter panel. */
#view-shop .shop-search { display:flex; align-items:center; gap:12px; width:100%; min-width:0; min-height:50px; margin:0 0 18px; padding:9px 14px; border:1px solid #bdcfee; border-radius:16px; background:#fffdf9; color:#174487; box-shadow:0 5px 16px rgba(24,65,143,.045); }
#view-shop .shop-search:focus-within { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.shop-search > svg { flex:0 0 21px; }
.shop-search-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#view-shop #shopSearch { flex:1; min-width:0; width:100%; height:32px; margin:0; padding:0; border:0; border-radius:0; outline:0; box-shadow:none; font-size:16px; line-height:1.4; }
#view-shop #shopSearch::placeholder { color:#6b7689; opacity:1; }

.shop-toolbar h3 {
  margin:0 0 5px;
  font-size:1.35rem;
  letter-spacing:-.03em
}

.shop-count {
  font-size:.75rem;
  color:var(--muted);
  margin:0
}

.shop-info-btn {
  background:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  color:#a9bfd0;
  font-size:.73rem;
  white-space:nowrap
}

.shop-concept-note {
  color:#8394a3;
  font-size:.74rem;
  line-height:1.7;
  margin:0 0 24px
}

.shop-empty {
  border:1px dashed #334454;
  border-radius:20px;
  padding:40px 24px;
  text-align:center;
  color:var(--muted)
}

.shop-empty[hidden] {
  display:none
}

.shop-empty h3 {
  color:#f5f7fa;
  margin-top:0
}

.shop-product-art {
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at center,#23465a44,transparent 70%),#0c131a;
  color:#6d899e;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase
}

.shop-card .card-body h3 {
  font-size:1rem;
  line-height:1.35
}

.shop-card .card-body p {
  font-size:.8rem
}

.shop-card .pill {
  font-size:.63rem
}

.shop-card .preorder-label {
  color:var(--blue);
  border-color:#69d7ff30
}

.shop-card .card-body {
  padding:15px 20px 10px
}

.preorder-dialog {
  position:fixed;
  width:min(460px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:36px;
  border:1px solid #ffffff1c;
  border-radius:26px;
  background:radial-gradient(ellipse at top right,#244b6640,transparent 65%),#10161d;
  color:var(--text);
  box-shadow:0 30px 100px #0009
}

.preorder-dialog::backdrop {
  background:#03070cc7;
  backdrop-filter:blur(10px)
}

.preorder-dialog h2 {
  font-size:2.2rem;
  line-height:1.05;
  letter-spacing:-.045em;
  margin:24px 0 18px
}

.preorder-dialog p {
  color:#a2b1bf;
  font-size:.86rem;
  line-height:1.8
}

.preorder-dialog .preorder-preview {
  font-size:.71rem;
  color:#7f92a2;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:22px
}

.preorder-dialog .actions {
  display:grid;
  gap:10px;
  margin-top:24px
}

.preorder-dialog .btn {
  font-size:.8rem
}

.preorder-dialog .auth-close {
  top:14px;
  right:14px
}

#closePreorder {
  display:grid;
  place-items:center;
  padding:0;
  line-height:1;
}

.shop-info-btn:focus-visible,.shop-reset:focus-visible,.lab-shortcut:focus-visible,.preorder-dialog button:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px
}

.shop-filter input:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:3px
}

@media(max-width:1050px) {
  .shop-layout .grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:640px) {
  .shop-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .shop-sidebar {
    position:static;
    max-height:none;
    padding:20px
  }
  .shop-sidebar fieldset {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:18px
  }
  .shop-filter {
    font-size:.73rem;
    padding:8px
  }
  .shop-toolbar {
    align-items:flex-start
  }
  .shop-info-btn {
    white-space:normal;
    max-width:120px
  }
  .shop-layout .grid {
    grid-template-columns:1fr
  }
  .lab-shortcut {
    right:16px;
    bottom:calc(64px + env(safe-area-inset-bottom));
    padding:12px 16px;
    gap:14px
  }
  .lab-shortcut small {
    display:none
  }
  .lab-shortcut strong {
    font-size:.78rem
  }
  .preorder-dialog {
    padding:30px 24px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lab-shortcut {
    animation:none
  }
}