/** Shopify CDN: Minification failed

Line 395:1 Expected "}" to go with "{"

**/
* {/* ===============================

   CRAZY NEON / GLITCH THEME

   =============================== */



:root {

  --crazy-bg: #05000e;

  --crazy-pink: #ff00ff;

  --crazy-cyan: #00f5ff;

  --crazy-yellow: #ffea00;

  --crazy-white: #fdfdff;

}



/* Global background + typography */

html,

body {

  margin: 0;

  padding: 0;

}



body {

  min-height: 100vh;

  background:

    radial-gradient(circle at 0% 0%, rgba(255, 0, 255, 0.35), transparent 55%),

    radial-gradient(circle at 100% 0%, rgba(0, 245, 255, 0.35), transparent 60%),

    radial-gradient(circle at 50% 100%, rgba(255, 234, 0, 0.25), transparent 60%),

    var(--crazy-bg);

  background-attachment: fixed;

  color: var(--crazy-white);

  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",

    sans-serif;

}



/* Glow headings */

h1,

h2,

h3,

h4,

h5 {

  text-transform: uppercase;

  letter-spacing: 0.18em;

  text-shadow: 0 0 10px var(--crazy-pink), 0 0 18px var(--crazy-cyan);

}



/* Layout container */

.page-width {

  max-width: 1180px;

}



/* Links */

a {

  color: var(--crazy-cyan);

  text-decoration: none;

  position: relative;

}



a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -2px;

  height: 2px;

  width: 100%;

  transform-origin: left;

  transform: scaleX(0);

  background: linear-gradient(

    90deg,

    var(--crazy-pink),

    var(--crazy-cyan),

    var(--crazy-yellow)

  );

  transition: transform 0.2s ease-out;

}



a:hover::after {

  transform: scaleX(1);

}



/* Scrollbar */

::-webkit-scrollbar {

  width: 9px;

}

::-webkit-scrollbar-track {

  background: rgba(255, 255, 255, 0.04);

}

::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg, var(--crazy-cyan), var(--crazy-pink));

  border-radius: 999px;

}



/* Cursor */

body,

button,

a,

input,

textarea,

select {

  cursor: crosshair;

}



/* TV scan lines */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background-image: repeating-linear-gradient(

    to bottom,

    rgba(255, 255, 255, 0.05),

    rgba(255, 255, 255, 0.05) 1px,

    transparent 1px,

    transparent 3px

  );

  mix-blend-mode: soft-light;

  opacity: 0.7;

  z-index: 9999;

}



/* Buttons */

.button,

.shopify-payment-button__button,

button[type="submit"],

.btn {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  padding: 0.9rem 2.1rem;

  border-radius: 999px;

  border: none;

  background: conic-gradient(

    from 120deg,

    var(--crazy-pink),

    var(--crazy-yellow),

    var(--crazy-cyan),

    var(--crazy-pink)

  );

  color: #15001b;

  font-size: 0.72rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  font-weight: 800;

  box-shadow: 0 0 30px rgba(255, 0, 255, 0.85);

  overflow: hidden;

}



.button::before,

.shopify-payment-button__button::before,

button[type="submit"]::before,

.btn::before {

  content: "";

  position: absolute;

  inset: -50%;

  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.7), transparent 60%);

  transform: translate3d(-100%, 0, 0);

  opacity: 0.7;

  transition: transform 0.6s ease-out;

}



.button:hover::before,

.shopify-payment-button__button:hover::before,

button[type="submit"]:hover::before,

.btn:hover::before {

  transform: translate3d(120%, 0, 0);

}



/* Generic glass card */

.crazy-card {

  background:

    radial-gradient(circle at top left, rgba(255, 0, 255, 0.2), transparent 60%)

      border-box,

    radial-gradient(circle at bottom right, rgba(0, 245, 255, 0.25), transparent 60%)

      border-box,

    rgba(5, 0, 24, 0.96);

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow: 0 0 28px rgba(255, 0, 255, 0.35);

  padding: 1.8rem;

  backdrop-filter: blur(18px);

  position: relative;

  overflow: hidden;

}



/* Hover wobble */

@keyframes crazy-wobble {

  0% { transform: translateY(0) rotate(0deg); }

  25% { transform: translateY(-2px) rotate(-0.5deg); }

  50% { transform: translateY(0) rotate(0.7deg); }

  75% { transform: translateY(2px) rotate(-0.3deg); }

  100% { transform: translateY(0) rotate(0deg); }

}



.crazy-wobble:hover {

  animation: crazy-wobble 0.4s ease-in-out;

}