/* ==========================================================================
   saucydyes.com — vibrant psychedelic theme
   Fonts: Fredoka (display) + Nunito (body), loaded from Google Fonts.
   ========================================================================== */

:root {
  --pink:   #ff2e88;
  --purple: #7b2ff7;
  --blue:   #00a6ff;
  --teal:   #00d4a8;
  --yellow: #ffc531;
  --orange: #ff7a1a;

  --ink:    #2a1a3e;
  --ink-soft: #5c4a75;
  --cream:  #fff7ee;
  --white:  #ffffff;
  --surface: #ffffff;
  --tint:   #fdefff;
  --header-bg: rgba(255, 247, 238, .92);
  --footer-bg: #2a1a3e;
  --input-bg: #fdfbff;
  --input-border: #e5d9f5;

  --grad-hot: linear-gradient(135deg, var(--pink), var(--orange) 50%, var(--yellow));
  --grad-cool: linear-gradient(135deg, var(--purple), var(--blue) 55%, var(--teal));
  --grad-rainbow: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--teal), var(--blue), var(--purple));

  --radius: 22px;
  --shadow: 0 10px 30px rgba(42, 26, 62, .14);
  --shadow-big: 0 18px 50px rgba(42, 26, 62, .22);

  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

/* ----- gradient text ---------------------------------------------------- */
.rainbow-text {
  background: var(--grad-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
  color: #fff;
  background: var(--grad-hot);
  box-shadow: 0 8px 22px rgba(255, 46, 136, .35);
}
.btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn.cool { background: var(--grad-cool); box-shadow: 0 8px 22px rgba(123, 47, 247, .35); }
.btn.ghost {
  background: var(--surface);
  color: var(--purple);
  box-shadow: inset 0 0 0 3px var(--purple), 0 6px 16px rgba(42,26,62,.10);
}
.btn.small { padding: 8px 18px; font-size: .92rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ----- header ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid transparent;
  border-image: var(--grad-rainbow) 1;
}
.site-header .inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 22px;
  max-width: 1140px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none !important;
  white-space: nowrap;
}
.brand .swirl { width: 40px; height: 40px; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.main-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.main-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background .15s;
}
.main-nav a:hover { background: rgba(123, 47, 247, .1); }
.main-nav a.active { background: var(--grad-cool); color: #fff; }
.main-nav a.cart-link { position: relative; }
.cart-badge {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
}
.cart-badge.show { display: inline-flex; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 1.7rem;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--cream);
    padding: 12px 22px 20px;
    box-shadow: var(--shadow);
    border-bottom: 3px solid transparent;
    border-image: var(--grad-rainbow) 1;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 14px; }
}

/* ----- tie-dye hero ----------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 120px;
  text-align: center;
  color: #fff;
}
.hero .tiedye {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg,
    var(--pink), var(--orange), var(--yellow),
    var(--teal), var(--blue), var(--purple), var(--pink));
  filter: blur(60px) saturate(1.25);
  animation: swirl 45s linear infinite;
  z-index: 0;
}
@keyframes swirl { to { transform: rotate(360deg); } }
.hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .8;
  z-index: 1;
}
.hero .blob.b1 { width: 340px; height: 340px; background: var(--pink);   top: -60px; left: -80px; }
.hero .blob.b2 { width: 300px; height: 300px; background: var(--yellow); bottom: -70px; right: -60px; }
.hero .blob.b3 { width: 260px; height: 260px; background: var(--teal);   top: 30%; right: 12%; }
.hero .inner { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 700;
  text-shadow: 0 4px 24px rgba(42, 26, 62, .35);
}
.hero p.tagline {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  max-width: 620px;
  margin: 18px auto 34px;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(42, 26, 62, .4);
}
.hero .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero .btn.ghost { box-shadow: inset 0 0 0 3px #fff, 0 6px 16px rgba(42,26,62,.2); color: #fff; background: rgba(255,255,255,.12); }

/* wavy divider sitting at the bottom of a section */
.wave {
  display: block;
  width: 100%;
  height: 70px;
  margin-top: -1px;
}
.wave path { fill: var(--cream); }
.hero .wave { position: absolute; bottom: -1px; left: 0; z-index: 3; }

/* ----- sections --------------------------------------------------------- */
.section { padding: 72px 0; }
.section.tint { background: var(--tint); }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); }
.section-head p { color: var(--ink-soft); max-width: 560px; margin: 10px auto 0; }

/* ----- product grid ----------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}
.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none !important;
  color: var(--ink);
}
.product-card:hover { transform: translateY(-6px) rotate(-.7deg); box-shadow: var(--shadow-big); }
.product-card .thumb {
  aspect-ratio: 1;
  background: var(--grad-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .thumb .placeholder { font-size: 3.2rem; }
.product-card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .cat {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-hot);
  border-radius: 999px;
  padding: 3px 11px;
}
.product-card h3 { font-size: 1.12rem; }
.product-card .size { color: var(--ink-soft); font-size: .9rem; }
.product-card .price {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--purple);
}
.sold-out-ribbon {
  position: absolute;
  top: 14px; right: -34px;
  transform: rotate(38deg);
  background: #221733;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 5px 40px;
  z-index: 2;
}

/* filter chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.chip {
  font-family: var(--font-display);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid var(--purple);
  background: var(--surface);
  color: var(--purple);
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { background: rgba(123,47,247,.08); }
.chip.active { background: var(--grad-cool); border-color: transparent; color: #fff; }

/* ----- product detail --------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; } }
.gallery .main {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1;
  background: var(--grad-cool);
  display: flex; align-items: center; justify-content: center;
}
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.gallery .main .placeholder { font-size: 5rem; }
.gallery .thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gallery .thumbs button {
  width: 72px; height: 72px;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid transparent;
  padding: 0;
  cursor: pointer;
  background: none;
}
.gallery .thumbs button.active { border-color: var(--pink); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }

.detail-info h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 8px; }
.detail-info .price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--purple); margin: 12px 0 4px; }
.detail-info .meta { color: var(--ink-soft); margin-bottom: 16px; }
.detail-info .description { margin: 18px 0 26px; white-space: pre-line; }
.one-left {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
  font-size: .85rem;
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 8px;
}

/* ----- cart ------------------------------------------------------------- */
.cart-list { display: flex; flex-direction: column; gap: 18px; }
.cart-row {
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: 18px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
@media (max-width: 620px) { .cart-row { grid-template-columns: 66px 1fr; } }
.cart-row .thumb {
  width: 88px; height: 88px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--grad-cool);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 620px) { .cart-row .thumb { width: 66px; height: 66px; } }
.cart-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.qty-stepper { display: inline-flex; align-items: center; gap: 10px; }
.qty-stepper button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--purple);
  background: var(--surface);
  color: var(--purple);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.qty-stepper button:hover { background: rgba(123,47,247,.08); }
.cart-row .remove {
  background: none;
  border: 0;
  color: var(--pink);
  font-weight: 800;
  cursor: pointer;
  font-size: .9rem;
}
.cart-summary {
  margin-top: 30px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  text-align: right;
}
.cart-summary .total { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-bottom: 16px; }

/* ----- forms ------------------------------------------------------------ */
.form-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px;
  max-width: 640px;
  margin: 0 auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 11px 14px;
  border: 2px solid var(--input-border);
  border-radius: 14px;
  background: var(--input-bg);
  color: var(--ink);
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--purple); }
textarea { resize: vertical; min-height: 120px; }
.form-msg { margin-top: 14px; font-weight: 800; display: none; }
.form-msg.ok { display: block; color: var(--teal); }
.form-msg.err { display: block; color: var(--pink); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ----- footer ----------------------------------------------------------- */
.site-footer {
  margin-top: 80px;
  background: var(--footer-bg);
  color: #cfc2e4;
  padding: 54px 0 30px;
  position: relative;
}
.site-footer .top-wave { position: absolute; top: -68px; left: 0; width: 100%; height: 70px; }
.site-footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 36px;
}
@media (max-width: 700px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; margin-bottom: 12px; }
.site-footer a { color: #cfc2e4; display: block; padding: 3px 0; }
.site-footer a:hover { color: #fff; }
.site-footer .fine { margin-top: 36px; text-align: center; font-size: .85rem; color: #8a7aa5; }
.site-footer .brand { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }

/* ----- misc ------------------------------------------------------------- */
.empty-state {
  text-align: center;
  color: var(--ink-soft);
  padding: 60px 0;
  font-size: 1.1rem;
}
.spinner {
  width: 42px; height: 42px;
  margin: 50px auto;
  border-radius: 50%;
  border: 5px solid rgba(123,47,247,.2);
  border-top-color: var(--purple);
  animation: spin-slow 0.9s linear infinite;
}
.notice-bar {
  background: var(--grad-hot);
  color: #fff;
  text-align: center;
  font-weight: 800;
  padding: 9px 16px;
  font-size: .95rem;
}
.success-hero { text-align: center; padding: 70px 0 30px; }
.success-hero .big { font-size: 4rem; }

/* ==========================================================================
   Themes — selected in Admin → Site, applied as data-theme on <html>.
   Default (no attribute) is "classic". Each theme only swaps the tokens.
   ========================================================================== */

/* Retro 70s — mustard, burnt orange, avocado, warm cream */
:root[data-theme="retro"] {
  --pink:   #e8563f;
  --purple: #8c5fa8;
  --blue:   #3d8c84;
  --teal:   #7c9a3d;
  --yellow: #f7c948;
  --orange: #f2a03d;
  --ink:    #3d2b1f;
  --ink-soft: #7a624d;
  --cream:  #fbf3e4;
  --surface: #fffdf6;
  --tint:   #f7e8cf;
  --header-bg: rgba(251, 243, 228, .92);
  --footer-bg: #3d2b1f;
  --input-bg: #fffdf6;
  --input-border: #e8d9bd;
}

/* Midnight Neon — near-black with glowing dye colors */
:root[data-theme="dark"] {
  --pink:   #ff3d9a;
  --purple: #9d5cff;
  --blue:   #22c8ff;
  --teal:   #2ee8b8;
  --yellow: #ffd23d;
  --orange: #ff8b3d;
  --ink:    #f2ecff;
  --ink-soft: #b5a8cc;
  --cream:  #14101f;
  --surface: #221a33;
  --tint:   #1b1430;
  --header-bg: rgba(20, 16, 31, .9);
  --footer-bg: #0b0814;
  --input-bg: #1b1430;
  --input-border: #3a2d55;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-big: 0 18px 50px rgba(0, 0, 0, .65);
}

/* Ocean Breeze — blues, teals, and sea glass */
:root[data-theme="ocean"] {
  --pink:   #3f8efc;
  --purple: #7a4ff7;
  --blue:   #5b7bff;
  --teal:   #2bd9a4;
  --yellow: #3ae6c4;
  --orange: #31c3f5;
  --ink:    #12283a;
  --ink-soft: #4a6a82;
  --cream:  #eef7fb;
  --surface: #ffffff;
  --tint:   #ddeff7;
  --header-bg: rgba(238, 247, 251, .92);
  --footer-bg: #12283a;
  --input-bg: #f8fcfe;
  --input-border: #cfe4ef;
}

/* Sunset Blaze — hot pinks, oranges, and golds */
:root[data-theme="sunset"] {
  --pink:   #ff2e70;
  --purple: #a437d6;
  --blue:   #c74fe8;
  --teal:   #ffb17a;
  --yellow: #ffc531;
  --orange: #ff7a1a;
  --ink:    #3a1430;
  --ink-soft: #7d4a6b;
  --cream:  #fff2ea;
  --surface: #fffaf6;
  --tint:   #ffe6dd;
  --header-bg: rgba(255, 242, 234, .92);
  --footer-bg: #3a1430;
  --input-bg: #fffaf6;
  --input-border: #f3d5c8;
}