/* Dyronics glass surfaces. Static backdrop, no animation or additional JavaScript. */
body {
  background: #efeaf7 url('./assets/glass-background.svg') center top / max(100%, 1500px) 1900px no-repeat;
}
.site-shell { padding-top: 1px; }
.glass, .product-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #ffffff8f, #ffffff3b 52%, #f4f4ff42);
  border: 1px solid #ffffffc9;
  border-bottom-color: #c2b8d775;
  border-right-color: #ffffff94;
  box-shadow: 0 12px 30px #45375f17, 0 2px 5px #735a7910,
    inset 1px 1px 0 #fffffff0, inset -1px -1px 0 #ffffff70;
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
}
.glass::before, .product-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(117deg, #ffffff66 0%, #ffffff06 27%, #ffffff00 54%, #ffffff2b 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 0 14px #ffffff45;
}
.site-header {
  background: linear-gradient(120deg, #ffffff94, #ffffff42 58%, #ffffff75);
  border: 1px solid #ffffffc9;
  box-shadow: 0 12px 30px #54416d12, inset 0 1px 0 white, inset 0 -1px 0 #ffffffa3;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.usp-bar {
  background: linear-gradient(180deg, #ff70c3b5 0%, #fa1198e6 48%, #ed0084ee 52%, #f51898c9 100%);
  border: 1px solid #ffffff8f;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 #ffffffb8, 0 3px 16px #f5008724;
}
.search-form {
  background: linear-gradient(150deg, #ffffffa6, #ffffff47);
  border-color: #ffffffc7;
  box-shadow: inset 1px 2px 5px #484e7414, 0 1px 0 #ffffffd9;
}
.search-form input::placeholder { color: #6e7990; }
.desktop-nav {
  margin-top: 9px;
  border: 1px solid #ffffff63;
  border-radius: 13px;
  background: linear-gradient(115deg, #364151e0, #202b3bd9 48%, #172537dc);
  box-shadow: 0 9px 24px #2938502b, inset 0 1px 0 #ffffff3b, inset 0 -1px 0 #111b3438;
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
}
.mega-menu {
  background: linear-gradient(135deg, #fffffff0, #edf0ffe3);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
.category-list { background: linear-gradient(140deg, #ffffff6b, #fff5fc45); }
.category-list button { border-bottom-color: #ffffff7d; }
.category-list button:not(:first-child):hover,
.category-list button.active:not(:first-child) {
  background: #ffffff8c;
  box-shadow: inset 0 1px 0 white, 0 2px 8px #73496c0a;
}
.assurances { background: linear-gradient(140deg, #ffffff80, #fcf5ff3b); }
.assurances > div { border-bottom-color: #ffffff85; }
.hero {
  background: linear-gradient(112deg, #fff6ff91, #f6f5ff47 44%, #97c9ff47);
  box-shadow: 0 18px 36px #42578820, inset 1px 1px 0 white,
    inset -1px -1px 0 #ffffff94, inset 0 0 34px #ffffff40;
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
}
.hero::before {
  background: linear-gradient(116deg, #ffffff80 0%, #ffffff00 36%, #ffffff38 36.4%, #ffffff00 59%, #ffffff24 100%);
}
.hero-orb {
  border-color: #ffffff45;
  box-shadow: 0 0 0 45px #ffffff17, 0 0 0 90px #ffffff0d, inset 0 1px 1px #ffffffbf;
}
.hero p, .hero-checks { color: #35425f; }
.eyebrow {
  background: linear-gradient(145deg, #ffffffb3, #ffffff4d);
  border-color: #ffffffd9;
  box-shadow: 0 4px 12px #4d3c7012, inset 0 1px 0 white;
}
.brand-strip { background: linear-gradient(125deg, #ffffff9c, #ffffff47 55%, #ffffff75); }
.product-card {
  background: linear-gradient(142deg, #ffffffab, #ffffff52 62%, #fff3fb59);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.product-card:hover {
  background: linear-gradient(142deg, #ffffffc4, #ffffff80 62%, #fff3fb85);
  box-shadow: 0 17px 30px #49366b21, inset 1px 1px 0 white, inset -1px -1px 0 #ffffffb3;
}
.product-category { color: #637188; }
.favorite { color: #7d829d; }
.demo-note, .footer-bottom { color: #62677f; }
.filter-button {
  background: linear-gradient(135deg, #ffffffa8, #ffffff52);
  border-color: #ffffffd9;
  box-shadow: inset 0 1px 0 white, 0 3px 10px #6448760d;
}
.primary-button, .add-cart, .search-form button, .category-list button:first-child {
  background: linear-gradient(180deg, #ff7cc7 0%, #ff2da3 14%, #f7008b 48%, #e6007e 51%, #ff199b 100%);
  border: 1px solid #ffffff80;
  box-shadow: 0 6px 16px #df007b30, inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #b7006833;
}
.primary-button:hover, .add-cart:hover, .search-form button:hover {
  background: linear-gradient(180deg, #ff8bce 0%, #fb36a7 18%, #eb0083 50%, #d90078 51%, #f5068c 100%);
}
.service-card {
  background: linear-gradient(130deg, #ffffff91, #f0edff40 54%, #fff0fb52);
}
.service-art {
  background: linear-gradient(135deg, #ffffffe6, #ff8dcb42);
  box-shadow: 0 7px 17px #ac508c1f, inset 1px 1px 0 white, inset -1px -1px 0 #ffffff80;
}
.service-art.blue { background: linear-gradient(135deg, #ffffffd9, #82b7ff52); }
.service-art.purple { background: linear-gradient(135deg, #ffffffd9, #c5a0ff52); }
.service-card:hover { box-shadow: 0 16px 30px #51396024, inset 1px 1px 0 white; }
.site-footer {
  background: linear-gradient(115deg, #293546de, #162337e6);
  border: 1px solid #ffffff66;
  box-shadow: 0 16px 32px #24304726, inset 0 1px 0 #ffffff33;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}
.modal, .drawer {
  background: linear-gradient(145deg, #fffffff2, #f6edffe8);
  border-color: #ffffffd9;
  box-shadow: 0 24px 90px #17243f40, inset 1px 1px 0 white;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
@media (max-width: 1023px) {
  .mobile-bottom {
    background: linear-gradient(120deg, #ffffffb3, #f5eeff94);
    border-top-color: #ffffffe6;
    box-shadow: 0 -6px 25px #5141681c, inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
  }
}
@media (max-width: 700px) {
  body { background-position: 42% top; background-size: 1150px 1500px; }
  .glass { -webkit-backdrop-filter: blur(12px) saturate(145%); backdrop-filter: blur(12px) saturate(145%); }
  .product-card { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hero { background: linear-gradient(115deg, #fff4fc9c, #eef3ff57 60%, #b5d7ff47); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .product-card, .site-header { background-color: #f8f6fbe8; }
  .mobile-bottom { background-color: #faf7fcf2; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .product-card, .site-header, .mobile-bottom, .mega-menu, .modal, .drawer {
    background-color: #faf7fc;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}