/* FRIZBYS / DEEP SPACE — standalone skin for your site.
   Upload this CSS through Admin > Skins. No images or fonts to install. */
.public-menu {
  --public-color-scheme: dark;
  --public-paper: #060914;
  --public-surface: #10192d;
  --public-subtle-surface: #17213a;
  --public-footer-surface: #0b1223;
  --public-ink: #f2f6ff;
  --public-muted: #b5c2da;
  --public-accent: #c0ff70;
  --public-on-accent: #101b09;
  --public-focus: #7df4ff;
  --public-line: #384766;
  --public-input-border: #8193b8;
  --public-eyebrow: #c0ff70;
  --public-hero: #131b36;
  --public-image-surface: #101a30;
  --public-placeholder-end: #2a2050;
  --public-placeholder-ink: #d6e7ff;
  --public-selected-surface: #233e32;
  --public-notice-border: #8ca1cc;
  --public-progress-border: #667ca4;
  --public-progress-ink: #c5d3ed;
  --public-info: #99e4ff;
  --public-info-surface: #102b3d;
  --public-success-surface: #142e25;
  --public-warning: #ffe28a;
  --public-warning-border: #9d8243;
  --public-warning-surface: #332a16;
  --public-danger: #ffb5c7;
  --public-danger-border: #9e6073;
  --public-danger-surface: #361c2c;
  --public-font: "Segoe UI", system-ui, sans-serif;
  --public-heading-font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --public-heading-size: clamp(2.3rem, 5.5vw, 4.75rem);
  --public-radius: 1.35rem;
  --public-control-radius: .8rem;
  --public-content-width: 76rem;
  --public-space-unit: .25rem;
  --public-card-padding: 1.35rem;
  --public-section-space: 2.5rem;
  --public-image-ratio: 16 / 10;
  --public-shadow: 0 18px 50px rgb(0 0 0 / .3), 0 0 30px rgb(100 77 255 / .08);
  min-block-size: 100vh;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 10% 0%, rgb(114 48 193 / .3), transparent 48%),
    radial-gradient(ellipse at 100% 35%, rgb(0 171 178 / .14), transparent 48%),
    radial-gradient(circle, #dce8ff 1px, transparent 1.6px) 19px 37px / 191px 211px,
    radial-gradient(circle, #93b4e7 .8px, transparent 1.5px) 71px 13px / 113px 157px,
    radial-gradient(circle, #d8d2ff 1.2px, transparent 1.8px) 31px 89px / 293px 269px,
    radial-gradient(circle, #566784 .7px, transparent 1.3px) 7px 11px / 67px 83px,
    #060914;
}
/* A distant planet and orbital ring. Decorative layers cannot intercept taps. */
.public-menu::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  inset-block-start: 9rem; inset-inline-end: 1rem;
  inline-size: clamp(13rem, 32vw, 30rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #8d91c7, #38446c 28%, #141c39 57%, #070d20 75%);
  box-shadow: inset -2rem -2rem 4rem #040813, inset .4rem .4rem 2rem #a9bbef, 0 0 0 1px #5b6898, 0 0 5rem rgb(121 80 255 / .2);
  opacity: .38;
}
.public-menu::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  inset-block-start: 16rem; inset-inline-end: 1.25rem;
  inline-size: clamp(14rem, 37vw, 34rem); block-size: clamp(4rem, 10vw, 8rem);
  border: 1px solid rgb(157 232 218 / .3); border-radius: 50%;
  box-shadow: 0 0 0 .5rem rgb(130 145 220 / .025), 0 0 0 1rem rgb(130 145 220 / .02);
  transform: rotate(-24deg);
}
.public-menu h1 { font-weight: 900; letter-spacing: -.045em; text-shadow: 0 0 38px rgb(173 153 255 / .2); }
.public-menu h2, .public-menu h3 { font-family: var(--public-heading-font); font-weight: 800; }
.public-menu .menu-eyebrow { color: var(--public-accent); letter-spacing: .17em; font-weight: 800; }
.public-menu .public-header {
  background: rgb(8 14 30 / .95); border-block-end-color: #495779;
  box-shadow: 0 1px 0 rgb(192 255 112 / .12), 0 10px 35px rgb(0 0 0 / .2);
}
.public-menu .public-brand { letter-spacing: -.025em; }
.public-menu .public-brand__mark { background: linear-gradient(140deg, #dcff9c, #8be8bb); box-shadow: 0 0 22px rgb(192 255 112 / .25); }
.public-menu .public-brand__logo { filter: drop-shadow(0 0 10px rgb(192 255 112 / .15)); }
.public-menu .category-nav { background: rgb(8 14 30 / .97); border-color: #384766; }
.public-menu .category-nav a { background: #131d34; border-color: #495878; }
.public-menu .category-nav a[aria-current] { background: #c0ff70; border-color: #c0ff70; color: #101b09; box-shadow: 0 0 20px rgb(192 255 112 / .15); }
.public-menu .menu-category > header h2 { border-inline-start: 4px solid #c0ff70; padding-inline-start: .85rem; }
.public-menu .menu-intro { padding-block: .65rem; }
/* The sign's own photograph, crop and focal points continue to come from settings. */
.public-menu .marquee, .public-menu .menu-hero {
  background: radial-gradient(ellipse at 95% 0%, rgb(133 67 211 / .3), transparent 65%), linear-gradient(125deg, #112d35, #121a33 50%, #24143a);
  border-color: #64729a; box-shadow: 0 0 0 1px rgb(160 171 255 / .06), 0 20px 65px rgb(0 0 0 / .35), 0 0 45px rgb(105 63 210 / .14);
}
.public-menu .marquee__copy { gap: .85rem; }
.public-menu .marquee__copy h1, .public-menu .marquee__copy h2 { text-shadow: 0 0 35px rgb(189 153 255 / .2); }
.public-menu .marquee--overlay .marquee__copy { background: rgb(6 10 24 / .92); border: 1px solid #617293; }
.public-menu .menu-item-card { background: linear-gradient(145deg, #17223b, #0e1629 85%); border-color: #495574; box-shadow: var(--public-shadow); }
.public-menu .menu-item-image { border-block-end: 1px solid #3e4b68; }
.public-menu .menu-item-body h3 { font-size: 1.2rem; }
.public-menu .menu-price { color: #d2ff9b; font-variant-numeric: tabular-nums; }
.public-menu .menu-image-placeholder {
  background: radial-gradient(circle at 72% 32%, #8999cb 0, #494573 12%, #171d35 15%, transparent 15.5%), radial-gradient(ellipse at 20% 80%, #21454d, transparent 65%), linear-gradient(135deg, #151a38, #251638);
}
.public-menu .card, .public-menu .configurator-layout, .public-menu dialog { border-color: #495574; box-shadow: var(--public-shadow); }
.public-menu .button { font-weight: 800; letter-spacing: .01em; border: 1px solid #627397; }
.public-menu .button--primary {
  background: linear-gradient(115deg, #d5ff8e, #adf466); border-color: #d5ff8e; color: #101b09;
  box-shadow: 0 5px 20px rgb(164 255 78 / .13), inset 0 1px 0 rgb(255 255 255 / .35);
}
.public-menu .button--outline, .public-menu .public-header__cart { background: #152139; color: #edf5ff; }
.public-menu .button--danger { border-color: var(--public-danger-border); color: var(--public-danger); }
.public-menu .input, .public-menu .select, .public-menu .textarea { background: #0c1426; color: #f2f6ff; border-color: #8193b8; }
.public-menu .input::placeholder, .public-menu .textarea::placeholder { color: #a6b5d0; opacity: 1; }
.public-menu .menu-choice:has(input:checked) { background: #19312d; border-color: #c0ff70; box-shadow: inset 0 0 0 1px #c0ff70; }
.public-menu .menu-cart-dock { border-color: #d5ff8e; box-shadow: 0 8px 35px #02040e, 0 0 25px rgb(192 255 112 / .2); }
.public-menu .order-progress [data-step-state="current"] .progress-number { box-shadow: 0 0 0 .25rem #233e32, 0 0 24px rgb(192 255 112 / .22); }
.public-menu .menu-footer { background: rgb(6 10 23 / .92); border-color: #384766; }
.public-menu :focus-visible { outline: 3px solid #7df4ff; outline-offset: 4px; }
.public-menu ::selection { background: #c0ff70; color: #101b09; }
@supports (backdrop-filter: blur(12px)) {
  .public-menu .public-header, .public-menu .category-nav { backdrop-filter: blur(12px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .public-menu .menu-item-card { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
  .public-menu .menu-item-card:hover { transform: translateY(-4px); border-color: #9ac478; box-shadow: 0 22px 55px rgb(0 0 0 / .4), 0 0 25px rgb(192 255 112 / .08); }
  .public-menu .button:not(:disabled):not([aria-disabled="true"]):hover { border-color: #c0ff70; }
  .public-menu .button--primary:not(:disabled):hover { background: #d5ff8e; color: #101b09; box-shadow: 0 0 28px rgb(192 255 112 / .24); }
}
@media (max-width: 39.99rem) {
  .public-menu { --public-card-padding: 1.1rem; --public-section-space: 2rem; }
  .public-menu::before { inset-block-start: 11rem; opacity: .28; }
  .public-menu .marquee__copy { padding: 1.25rem; }
  .public-menu .menu-category > header h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .public-menu .button, .public-menu .menu-item-card { transition: none; }
}
@media (forced-colors: active) {
  .public-menu { background: Canvas; }
  .public-menu::before, .public-menu::after { display: none; }
  .public-menu .button, .public-menu .menu-item-card, .public-menu .marquee { box-shadow: none; }
}
