/* ==========================================================================
   ENLIGHTENED REPUBLIC GARDEN — pixel assets (PNGTubers + game assets)
   Mirrors Gion's Gumroad storefront (gion/brand_logo/storefront_built.html),
   namespaced with g- so it sits on top of landing.css without collisions.
   Used by shop.html (full store) and index.html (homepage Garden section).
   ========================================================================== */

.garden {
  --g-bg: #140c2c;
  --g-card: #1d1240;
  --g-card-hover: #2c1a63;
  --g-line: #3d2578;
  --g-purple: #7a14e0;
  --g-cyan: #19f0f0;
  --g-text: #f3eeff;
  --g-soft: #d9ccff;
  --g-rainbow: linear-gradient(90deg, #ff4d6d, #ff9f1c, #ffe250, #3cdc78, #19f0f0, #4d7cff, #b14dff);
  position: relative;
  z-index: 2;
  color: var(--g-text);
  font-family: var(--font-body);
  line-height: 1.55;
}
.garden h2, .garden h3 { text-wrap: balance; }
.garden .section-desc { color: var(--g-soft); font-family: var(--font-body); }
.garden a:focus-visible,
.garden summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.garden-section { padding: clamp(4rem, 10vh, 7rem) 0; }
.garden-section + .garden-section { padding-top: 0; }

/* --- rainbow-border buttons --- */
.g-rb {
  border: 3px solid transparent;
  background: linear-gradient(var(--g-card), var(--g-card)) padding-box, var(--g-rainbow) border-box;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-label);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  border-radius: 14px;
  cursor: pointer;
}
.g-rb:hover { background: linear-gradient(var(--g-card-hover), var(--g-card-hover)) padding-box, var(--g-rainbow) border-box; }

/* --- sticker-bomb hero (shop) --- */
.g-hero { text-align: center; padding: clamp(2.5rem, 7vh, 4.5rem) 0 1rem; }
.g-bomb { display: flex; justify-content: center; flex-wrap: nowrap; padding: 0.5rem 0; }
.g-st {
  width: clamp(4.2rem, 14vw, 8rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 12px;
  margin: 0 -0.6rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  background: #0e0820;
}
.g-s0 { transform: rotate(-7deg); }
.g-s1 { transform: rotate(5deg) translateY(10px); }
.g-s2 { transform: rotate(-3deg) translateY(-6px); }
.g-s3 { transform: rotate(8deg); }

.g-titlebox {
  position: relative;
  z-index: 2;
  margin: 0.6rem auto;
  max-width: 40rem;
  background: #0a0814;
  border: 6px solid var(--g-purple);
  outline: 4px solid var(--g-cyan);
  outline-offset: -14px;
  border-radius: 6px;
  padding: 2rem 1rem 1.6rem;
  box-shadow: 0 0 0 4px #0a0814, 0 18px 50px rgba(122, 20, 224, 0.5);
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.375rem;
  line-height: 1;
}
.g-titlebox i {
  font-style: normal;
  text-shadow: 3px 0 #000, -3px 0 #000, 0 3px #000, 0 -3px #000, 3px 3px #000, -3px -3px #000, 3px -3px #000, -3px 3px #000;
}
.g-titlebox > span { display: block; }
.g-l1 { font-size: clamp(1.75rem, 7vw, 3.5rem); letter-spacing: 0.06em; }
.g-l2 { font-size: clamp(2.5rem, 10vw, 5.25rem); letter-spacing: 0.06em; line-height: 0.95; }
.g-l3 { font-size: clamp(1.5rem, 5.6vw, 2.625rem); margin-top: 0.7rem; letter-spacing: 0.12em; }
.g-l4 { font-family: var(--font-label); font-size: clamp(1.125rem, 3.6vw, 1.375rem); color: #d0d0d0; margin-top: 0.7rem; letter-spacing: 0.1em; }

.g-tag { margin: 1.2rem auto 0; max-width: 36rem; color: var(--g-soft); font-size: 1rem; text-wrap: balance; }
.g-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.g-chips li { background: #241548; border: 2px solid #4a2f8f; border-radius: 999px; padding: 0.35rem 0.95rem; font-family: var(--font-label); font-size: 1.25rem; line-height: 1.2; letter-spacing: 0.04em; color: #efe8ff; }
.g-jump { display: flex; gap: 0.75rem; justify-content: center; margin: 1.4rem 0 0; flex-wrap: wrap; }
.g-jump a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem; white-space: nowrap; font-size: 1.375rem; }

/* --- product cards --- */
.g-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 1.1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.g-products.g-featured { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.g-card {
  background: var(--g-card);
  border: 2px solid var(--g-line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.g-card:hover { transform: translateY(-4px); border-color: var(--g-cyan); box-shadow: 0 10px 0 var(--g-purple); }
.g-card .g-pic { display: block; }
.g-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #0e0820; }
.g-details { padding: 0.85rem 1rem 1.1rem; }
.g-card h3 { margin: 0 0 0.7rem; font-size: 1.5rem; line-height: 1.1; letter-spacing: 0.02em; color: #fff; font-family: var(--font-title); }
.g-card.g-feat h3 { font-size: 1.75rem; }
.g-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.g-pill { display: inline-flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.9rem; font-size: 1.375rem; letter-spacing: 0; white-space: nowrap; }
.g-pill b { color: var(--g-cyan); font-variant-numeric: tabular-nums; }

/* --- streaming kits: 16:9 GIF covers, shown uncropped --- */
.g-products.g-kits { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.g-card.g-kit img { aspect-ratio: 16 / 9; }

/* --- free starters: rainbow pill links --- */
.g-freepills { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
.g-freepills li { max-width: 100%; }
.g-freepills a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; max-width: 100%; padding: 0.35rem 1.2rem; font-size: 1.375rem; }
.g-freepills b { color: #3cdc78; }

/* --- browse-all (details/summary) --- */
.g-allwrap { margin-top: 2rem; text-align: center; }
.g-all > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 2rem;
  font-size: 1.5rem;
  list-style: none;
  white-space: nowrap;
}
.g-all > summary::-webkit-details-marker { display: none; }
.g-all[open] > summary { margin-bottom: 1.5rem; }
.g-all .g-products { text-align: left; }

/* --- planting soon --- */
.g-soon { grid-column: 1 / -1; }
.g-soonbox { border: 3px dashed var(--g-purple); border-radius: 18px; padding: 1.6rem; text-align: center; background: #1a0f38; }
.g-soonbox .g-big { font-size: 2.4rem; }
.g-soonbox h3 { margin: 0.3rem 0; color: var(--g-cyan); font-size: 1.625rem; font-family: var(--font-title); }
.g-soonbox p { margin: 0 auto; max-width: 32rem; line-height: var(--body-leading); color: var(--g-soft); }

/* --- store note --- */
.g-note {
  margin-top: 3rem;
  border: 2px dashed var(--g-line);
  border-radius: 18px;
  background: rgba(20, 12, 44, 0.85);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.g-note p { color: var(--g-soft); max-width: 60ch; margin: 0; }
.g-note strong { color: #fff; }
.g-note a:not(.g-rb) { color: var(--g-cyan); }
.g-note .g-rb { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem; }

/* --- homepage intro (logo + pitch) --- */
.g-home-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: 2.5rem;
}
.g-logo {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 18px;
  border: 2px solid var(--g-line);
  box-shadow: 0 10px 0 var(--g-purple), 0 0 40px rgba(25, 240, 240, 0.15);
}
.g-home-intro .section-desc { margin-bottom: 1.4rem; }
.g-home-intro .g-chips { justify-content: flex-start; margin-top: 0; }
.g-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; align-items: center; }
.g-cta-row .btn { display: inline-flex; align-items: center; min-height: 48px; }
.garden .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 820px) {
  .g-home-intro { grid-template-columns: 1fr; }
  .g-logo { max-width: 380px; margin: 0 auto; }
}

/* homepage teaser: compact 2-up grid on phones so the CTA isn't 4 screens down */
@media (max-width: 600px) {
  .g-products.g-featured.g-home-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .g-home-featured .g-details { padding: 0.7rem 0.6rem 0.8rem; }
  .g-home-featured.g-featured .g-feat h3 { font-size: 1.25rem; }
  .g-home-featured .g-pill { flex-basis: 100%; padding: 0 0.4rem; font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .g-card { transition: none; }
  .g-card:hover { transform: none; }
  .g-st { transform: none; }
}