@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Permanent+Marker&family=Nunito:wght@400;700;800;900&display=swap");

:root {
  --ink: #171323;
  --paper: #ffffff;
  --charcoal: #2d2a2f;
  --grey-dark: #3e3a41;
  --grey-light: #737078;
  --yellow: #f3c337;
  --yellow-deep: #efab10;
  --blue: #47b7e4;
  --blue-light: #98def6;
  --orange: #ff8a1d;
  --orange-light: #ffb44a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Nunito", Arial, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background: linear-gradient(180deg, #000 0%, #130312 34%, #42081f 68%, #c15b0f 100%);
  overflow-x: hidden;
}
body::before,
body::after,
main::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  z-index: 0;
}
body::before {
  background-image: url('assets/twinkle-a.svg');
  background-size: 1120px 800px;
  animation: twinkleA 1.9s steps(9) infinite;
  opacity: 0.8;
}
body::after {
  background-image: url('assets/twinkle-b.svg');
  background-size: 1260px 930px;
  animation: twinkleB 2.5s steps(11) infinite;
  opacity: 0.48;
}
main::before {
  background-image: url('assets/twinkle-c.svg');
  background-size: 1400px 1000px;
  animation: twinkleC 3.1s steps(10) infinite reverse;
  opacity: 0.36;
}
main { position: relative; z-index: 1; }
a { text-decoration: none; color: inherit; }
img, video { max-width: 100%; display: block; }

.page-wrap { padding-bottom: 2.2rem; }
.site-width { width: min(860px, calc(100% - 4.2rem)); margin: 0 auto; position: relative; }
.story-shell { position: relative; }

.logo-float {
  position: absolute;
  left: -52px;
  top: 12px;
  width: min(160px, 29vw);
  z-index: 50;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.18)) drop-shadow(0 12px 18px rgba(0,0,0,.22));
  transform-origin: center bottom;
  animation: logoHover 5.3s ease-in-out infinite;
}

.nav-panel {
  margin: 0;
  min-height: 78px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 1.35rem 0.95rem;
  background: repeating-conic-gradient(from 0deg at 100% 0%, #78757d 0deg 12deg, #414047 12deg 24deg);
  border-left: 6px solid var(--paper);
  border-right: 6px solid var(--paper);
  border-bottom: 6px solid var(--paper);
  box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink), inset 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink);
}
.nav-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.nav-links a {
  font-family: "Permanent Marker", cursive;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  position: relative;
  transform-origin: center;
}
.nav-links a:nth-child(1) { animation: floatWobbleA 5.1s ease-in-out infinite; }
.nav-links a:nth-child(2) { animation: floatWobbleB 6.2s ease-in-out infinite; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px; background: rgba(255,255,255,.88);
  transform: scaleX(0); transform-origin: center; transition: transform .18s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a,
.btn,
.tabs a,
a.flat-button,
.js-buy-toggle {
  cursor: pointer;
}


.board {
  margin-top: 1rem;
  display: grid;
  gap: .95rem;
  grid-template-columns: 1.07fr .93fr;
  grid-template-areas:
    "intro live"
    "item1 item2"
    "item3 item3"
    "contact contact"
    "alerts alerts";
}

.panel, .product-card, .contact-card { position: relative; overflow: visible; }
.area-intro { grid-area: intro; }
.area-live { grid-area: live; }
.area-item1 { grid-area: item1; }
.area-item2 { grid-area: item2; }
.area-item3 { grid-area: item3; }
.area-contact { grid-area: contact; }
.area-alerts { grid-area: alerts; }

.panel-fill,
.product-fill {
  position: relative;
  min-height: 100%;
  padding: 1rem;
  border: 6px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
  overflow: hidden;
}
.panel-fill::before,
.product-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.panel-fill::after,
.product-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 1;
}
.contact-fill {
  position: relative;
  min-height: 100%;
  padding: 1rem;
  border: 6px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
  overflow: hidden;
  background: linear-gradient(180deg, #ff9f35 0%, #ff8618 100%);
}
.contact-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(164,61,0,.22) 0 3.5px, transparent 3.8px);
  background-size: 18px 18px;
  z-index: 0;
}
.contact-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 1;
}

.bg-white-dots .panel-fill { background: #f6f6f6; }
.bg-white-dots .panel-fill::before { background-image: radial-gradient(circle, rgba(147,147,147,.24) 0 4px, transparent 4.4px); background-size: 24px 24px; }
.bg-yellow-rays .panel-fill { background: var(--yellow); }
.bg-yellow-rays .panel-fill::before { background: repeating-conic-gradient(from 0deg at 50% 50%, #f7e16f 0deg 12deg, #f2b215 12deg 24deg); opacity: .9; }

.p-yellow .product-fill { background: var(--yellow); }
.p-yellow .product-fill::before { background: repeating-conic-gradient(from 0deg at 50% 50%, #f7e16f 0deg 12deg, #f2b215 12deg 24deg); opacity: .95; }
.p-blue .product-fill { background: var(--blue); }
.p-blue .product-fill::before { background: repeating-conic-gradient(from 0deg at 50% 50%, #aee8fa 0deg 12deg, #45b4e1 12deg 24deg); opacity: .95; }
.p-orange-rays .product-fill { background: var(--orange); }
.p-orange-rays .product-fill::before { background: repeating-conic-gradient(from 0deg at 50% 50%, #ffc266 0deg 12deg, #ff7b00 12deg 24deg); opacity: .94; }

.panel-inner, .contact-inner { position: relative; z-index: 2; }
.product-inner { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100%; flex: 1 1 auto; width: 100%; }
.product-fill { display: flex; }

.title-bubble {
  position: absolute;
  top: -22px;
  left: 18px;
  z-index: 45;
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 999px;
  padding: .96rem 1.28rem 1.08rem;
  line-height: 1.08;
  font-family: "Permanent Marker", cursive;
  font-size: 1.04rem;
  box-shadow: 0 6px 0 rgba(0,0,0,.14);
  transform-origin: center;
}
.title-bubble::after {
  content: "";
  position: absolute;
  left: 30px;
  bottom: -14px;
  width: 22px; height: 22px;
  background: var(--paper);
  border-right: 5px solid var(--ink);
  border-bottom: 5px solid var(--ink);
  transform: rotate(45deg);
}
.title-bubble.right { left: auto; right: 18px; }
.title-bubble.right::after { left: auto; right: 30px; }
.bubble-a { animation: floatWobbleC 6.4s ease-in-out infinite; }
.bubble-b { animation: floatWobbleD 7.1s ease-in-out infinite; }
.bubble-c { animation: floatWobbleA 5.8s ease-in-out infinite; }

.story-title, .section-title {
  font-family: "Bangers", cursive;
  letter-spacing: .04em;
  line-height: 1;
  margin: .5rem 0 .7rem;
}
.story-title { font-size: clamp(2.4rem, 5vw, 4rem); }
.section-title { font-size: clamp(2rem, 4vw, 2.85rem); }
.area-intro .panel-inner p {
  font-size: 1.03rem;
  font-weight: 800;
  color: #1f1a31;
  line-height: 1.7;
  margin: 0 0 .8rem;
}
.lead { max-width: 58ch; }

.video-frame {
  margin-top: .75rem;
  border: 5px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  min-height: 370px;
}
.video-frame video {
  width: 100%;
  height: 100%;
  min-height: 370px;
  object-fit: cover;
  background: #000;
}

.image-space {
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  border: 4px dashed var(--ink);
  border-radius: 26px;
  background: rgba(244,244,244,.9);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1e1930;
}
.product-tag {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  margin-top: .72rem;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: .34rem .72rem;
  font-weight: 900;
  text-transform: uppercase;
  font-size: .82rem;
}
.card-title, .contact-title { font-family: "Permanent Marker", cursive; font-weight: 400; }
.card-title { font-size: 1.1rem; margin: .55rem 0 .35rem; }
.product-inner p, .contact-inner p { line-height: 1.6; }
.price-row {
  margin-top: auto;
  padding-top: .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}
.price-row strong {
  font-size: 1.9rem;
  line-height: 1;
  font-family: "Permanent Marker", cursive;
}
.flat-button, button {
  display: inline-block;
  padding: .76rem .94rem;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 #f26d1b;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor: pointer;
}
.flat-button:hover, button:hover { transform: translateY(2px); box-shadow: 0 2px 0 #f26d1b; background: #fff6c7; cursor: pointer; }
.flat-button:disabled,
button:disabled,
.sold-btn,
.sold-btn:hover {
  cursor: not-allowed;
}

.effect-burst {
  position: absolute;
  right: -12px;
  bottom: -18px;
  z-index: 46;
  min-width: 98px;
  padding: .42rem .95rem;
  text-align: center;
  font-family: "Bangers", cursive;
  font-size: 1.35rem;
  letter-spacing: .04em;
  border: 4px solid var(--ink);
  color: var(--ink);
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
  filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(0 5px 0 rgba(0,0,0,.18));
  transform-origin: center;
  border-radius: 999px;
  animation: burstFloatWow 6.7s ease-in-out infinite;
}
.effect-blue { background: #83dcff; }
.effect-yellow { background: #ffdc4f; }
.effect-orange { background: #ff9a52; }
.effect-white { background: #ffffff; }
.effect-sold { background: #ffffff; }
.sold-btn {
  opacity: .9;
}



.form-grid { display: grid; gap: .92rem; }
label { display: grid; gap: .35rem; font-weight: 800; }
input, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 14px;
  padding: .9rem 1rem;
}
textarea { min-height: 150px; resize: vertical; }
.footer-note { text-align: center; color: #fff; padding-top: 1rem; }

@keyframes logoHover {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  24% { transform: translateY(-5px) rotate(-1deg) scale(1.01); }
  52% { transform: translateY(-11px) rotate(1.2deg) scale(1.03); }
  78% { transform: translateY(-4px) rotate(-.8deg) scale(1.01); }
}
@keyframes floatWobbleA {
  0%,100% { transform: translateY(0) rotate(0deg); }
  22% { transform: translateY(-4px) rotate(-1.2deg); }
  48% { transform: translateY(-6px) rotate(1.2deg); }
  75% { transform: translateY(-2px) rotate(-.8deg); }
}
@keyframes floatWobbleB {
  0%,100% { transform: translateY(0) rotate(0deg); }
  18% { transform: translateY(-3px) rotate(1deg); }
  45% { transform: translateY(-6px) rotate(-1.4deg); }
  73% { transform: translateY(-3px) rotate(1deg); }
}
@keyframes floatWobbleC {
  0%,100% { transform: translateY(0) rotate(0deg); }
  26% { transform: translateY(-4px) rotate(-1.05deg); }
  53% { transform: translateY(-7px) rotate(1.15deg); }
  81% { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes floatWobbleD {
  0%,100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-2px) rotate(1deg); }
  50% { transform: translateY(-6px) rotate(-1.25deg); }
  77% { transform: translateY(-3px) rotate(.85deg); }
}
@keyframes burstFloatWow {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  26% { transform: translateY(-5px) rotate(-6.5deg); }
  53% { transform: translateY(-8px) rotate(-9.2deg); }
  81% { transform: translateY(-3px) rotate(-7deg); }
}
@keyframes twinkleA {
  0%,100% { opacity: .78; }
  8% { opacity: .35; }
  19% { opacity: .92; }
  34% { opacity: .48; }
  51% { opacity: .88; }
  67% { opacity: .3; }
  82% { opacity: .96; }
}
@keyframes twinkleB {
  0%,100% { opacity: .46; }
  12% { opacity: .74; }
  27% { opacity: .22; }
  43% { opacity: .7; }
  61% { opacity: .33; }
  79% { opacity: .8; }
  91% { opacity: .4; }
}
@keyframes twinkleC {
  0%,100% { opacity: .3; }
  9% { opacity: .5; }
  21% { opacity: .18; }
  38% { opacity: .42; }
  55% { opacity: .24; }
  73% { opacity: .48; }
  87% { opacity: .16; }
}

@media (max-width: 900px) {
  .site-width { width: min(860px, calc(100% - 2.2rem)); }
  .logo-float { left: -24px; width: 142px; }
}
@media (max-width: 760px) {
  .site-width { width: min(860px, calc(100% - 1rem)); }
  .logo-float { width: 108px; left: -6px; }
  .board {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "live" "item1" "item2" "item3" "contact" "alerts";
  }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 1.24rem; }
  .video-frame, .video-frame video { min-height: 280px; }
}


/* CMS shop styling options */
.p-grey .product-fill { background: #f1f1f1; }
.p-grey .product-fill::before { background-image: radial-gradient(circle, rgba(140,140,140,.24) 0 4px, transparent 4.4px); background-size: 24px 24px; opacity: 1; }
.p-white .product-fill { background: #ffffff; }
.p-white .product-fill::before { background-image: radial-gradient(circle, rgba(170,170,170,.18) 0 4px, transparent 4.4px); background-size: 24px 24px; opacity: 1; }
.p-dark-rays .product-fill { background: #3a3740; color: #fff; }
.p-dark-rays .product-fill::before { background: repeating-conic-gradient(from 0deg at 50% 50%, #7b7780 0deg 12deg, #3e3a42 12deg 24deg); opacity: .9; }
.p-dark-rays .product-fill .card-title,
.p-dark-rays .product-fill p,
.p-dark-rays .product-fill .price-row strong { color: #fff; }
.p-dark-rays .product-fill .product-tag,
.p-dark-rays .product-fill .flat-button { color: var(--ink); }

.title-bubble.left { left: 18px; right: auto; }
.title-bubble.left::after { left: 30px; right: auto; }

.bubble-style-classic { background: var(--paper); color: var(--ink); }
.bubble-style-blue { background: #88dcff; color: var(--ink); }
.bubble-style-yellow { background: #ffdf63; color: var(--ink); }
.bubble-style-orange { background: #ffa13d; color: var(--ink); }
.bubble-style-dark { background: #2f2b30; color: #fff; }
.bubble-style-classic::after { background: var(--paper); }
.bubble-style-blue::after { background: #88dcff; }
.bubble-style-yellow::after { background: #ffdf63; }
.bubble-style-orange::after { background: #ffa13d; }
.bubble-style-dark::after { background: #2f2b30; }


.burst-top-right { top: -18px; right: -12px; bottom: auto; left: auto; }
.burst-top-left { top: -18px; left: -12px; bottom: auto; right: auto; }
.burst-bottom-right { bottom: -18px; right: -12px; top: auto; left: auto; }
.burst-bottom-left { bottom: -18px; left: -12px; top: auto; right: auto; }

.shop-board { grid-template-areas: "intro intro"; grid-template-columns: 1fr; }
.shop-product-grid {
  margin-top: 1rem;
  display: grid;
  gap: .95rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.notice {
  background: #fff;
  border: 6px solid var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--ink);
  padding: 1rem;
  font-weight: 800;
}
.image-space img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}
@media (max-width: 860px) {
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shop-product-grid { grid-template-columns: 1fr; }
}


.paypal-wrap { margin-top: .9rem; }
.paypal-placeholder {
  background: rgba(255,255,255,.88);
  border: 4px dashed var(--ink);
  border-radius: 16px;
  padding: .9rem;
  font-weight: 800;
  line-height: 1.5;
}


.alerts-fill {
  position: relative;
  min-height: 100%;
  padding: 1rem;
  border: 6px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
  overflow: hidden;
  background: #f6f6f6;
}
.alerts-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(147,147,147,.24) 0 4px, transparent 4.4px);
  background-size: 24px 24px;
  z-index: 0;
}
.alerts-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 1;
}
.alerts-inner { position: relative; z-index: 2; }
.alerts-inner p {
  font-size: 1.08rem;
  font-weight: 900;
  color: #1f1a31;
  line-height: 1.7;
  margin: 0 0 .95rem;
}
.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem;
  align-items: end;
}
.inline-form .field-wrap { display: grid; gap: .35rem; }
.public-flash {
  margin-top: 1rem;
  background: #fff;
  border: 6px solid var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--ink);
  padding: .9rem 1rem;
  font-weight: 800;
}
.public-flash.danger { background: #ffe5e5; }
@media (max-width: 760px) {
  .inline-form { grid-template-columns: 1fr; }
}


.stock-alert-burst {
  background: #ffdc4f;
  top: -22px;
  right: 18px;
  bottom: auto;
  left: auto;
  z-index: 48;
  border-radius: 999px;
  animation: burstFloatWow 6.7s ease-in-out infinite;
}


.theme-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0,0,0,.48);
}
.theme-popup {
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border: 6px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink), 0 12px 0 rgba(0,0,0,.22);
  padding: 1.2rem;
  text-align: center;
}
.theme-popup::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid var(--ink);
  pointer-events: none;
}
.theme-popup-burst {
  display: inline-block;
  margin-bottom: .65rem;
  background: #ffdc4f;
  border: 5px solid var(--ink);
  border-radius: 999px;
  padding: .7rem 1.1rem .82rem;
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  box-shadow: 0 6px 0 rgba(0,0,0,.16);
}
.theme-popup p {
  position: relative;
  z-index: 2;
  margin: .4rem 0 1rem;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.55;
}
.theme-popup button {
  position: relative;
  z-index: 2;
}
.public-flash {
  animation: bubbleFloat 4.8s ease-in-out infinite;
}

@keyframes bubbleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }