/*
 * Donut Depot — Glitch theme custom layer
 * Override: cleaner, Minecraft store aesthetic
 */

/* ==================== FONTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* Apply Inter to text — BUT exclude Font Awesome icons (they need their icon font) */
html body,
html body p, html body span, html body div,
html body a, html body button,
html body input, html body select, html body textarea,
html body nav, html body nav *,
html body header, html body header *,
html body footer, html body footer *,
html body .text-t-primary,
html body .navbar, html body .navbar * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.005em !important;
}

/* Font Awesome — RESTORE icon font (we broke it with the * override before) */
i, i.fa, i.fab, i.fas, i.far, i.fal,
[class*="fa-"], [class^="fa-"],
.fa, .fab, .fas, .far, .fal {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome' !important;
  font-weight: 900 !important;
}
.fab, [class*="fa-cc-"], [class^="fab"] {
  font-family: 'Font Awesome 6 Brands', 'FontAwesome' !important;
  font-weight: 400 !important;
}

/* Headers — Outfit bold, no all-caps */
h1, h2, h2 span,
section.component h2,
section.component h1 {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

/* Eyebrow text (small section labels above titles) */
section.component p.text-sm.text-gray-300,
section.component p.text-xs.font-mono {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Prices, item counts — keep Chivo Mono for the receipt feel */
.font-mono,
[x-text*="price"],
[x-text*="cost"],
[x-text*="$"] {
  font-family: 'Chivo Mono', 'Courier New', monospace !important;
}

/* ==================== ROUND CORNERS — GLOBAL (Minecraft store look) ==================== */
/* Kill ALL angular glitch clip-paths site-wide. Buttons are handled separately below. */
.corner,
.corner-xs,
[class*="corner"]:not(.glitch-btn):not(.glitch-btn *),
section.component [style*="clip-path"]:not(.glitch-btn):not(.glitch-btn *) {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 12px !important;
}
.corner-xs { border-radius: 8px !important; }

/* Nested corners get smaller radius so they don't look weird */
.corner .corner,
.corner-xs .corner-xs { border-radius: 8px !important; }

/* ==================== CARDS & PANELS — chunky Minecraft depth ==================== */
/* Product cards */
.product-card, [class*="product-card"] {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(251,191,36,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 0 -1px rgba(0,0,0,0.45), 0 8px 18px -6px rgba(0,0,0,0.5) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.product-card:hover, [class*="product-card"]:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(251,191,36,0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 0 -1px rgba(0,0,0,0.45), 0 14px 28px -8px rgba(251,191,36,0.18) !important;
}

/* Generic content panels (calculator box, free-coins card, stats cards,
   FAQ items, feedback cards, socials cards, etc.) — give them depth + amber-tinted border */
section.component .bg-b-secondary.corner,
section.component .bg-b-tertiary.corner,
section.component .p-0\.5.bg-border.corner,
section.component .bg-b-secondary.corner-xs,
section.component .bg-b-tertiary.corner-xs {
  border: 1px solid rgba(251,191,36,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 4px 0 -2px rgba(0,0,0,0.4), 0 8px 20px -8px rgba(0,0,0,0.45) !important;
}

/* ==================== INPUTS — rounded, dark, amber focus ==================== */
section.component input[type="text"],
section.component input[type="number"],
section.component input[type="email"],
section.component select,
section.component textarea {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 10px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
section.component input[type="number"]:focus,
section.component input[type="text"]:focus,
section.component textarea:focus {
  border-color: #FBBF24 !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.15) !important;
  outline: none !important;
}

/* ==================== NAVBAR CURRENCY SELECTOR — matches dark button ==================== */
.currency-selector select,
nav select {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 10px !important;
  background: #1C1D21 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.45), 0 5px 10px -3px rgba(0,0,0,0.3) !important;
  color: #F5F5F5 !important;
  font-weight: 700 !important;
  transition: filter 0.1s ease !important;
}
.currency-selector select:hover,
nav select:hover { filter: brightness(1.1); }

/* ==================== FAQ ACCORDION — rounded item cards ==================== */
section.component[data-component-id="faq"] .corner,
section.component[data-component-id="faq"] [class*="corner"],
[data-component-id="faq-page"] .corner,
[data-component-id="faq-page"] [class*="corner"] {
  border-radius: 12px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* ==================== MINECRAFT-STORE BUTTONS (glitch-btn rebuild) ==================== */
/* The theme's .glitch-btn has 3 layers: .invisible (width), .content (text+bg), .anim (slide).
   We remove the angular clip, kill the slide animation, and make a clean chunky button. */

/* Works on BOTH <a> and <button> glitch buttons */
a.glitch-btn, button.glitch-btn {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: none !important;
  border-radius: 9px !important;
  overflow: visible !important;
  transition: transform 0.07s ease-out, filter 0.1s ease-out !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Kill the futuristic slide-in animation layer entirely */
.glitch-btn .anim {
  display: none !important;
}

/* The visible text+icon layer — round it, no clip */
.glitch-btn .content {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 9px !important;
}

/* --- PRIMARY (gold) button --- clean flat gold, subtle solid drop */
.glitch-btn.bg-accent-500\/60 {
  background: transparent !important;
  box-shadow: 0 4px 0 0 #B45309, 0 5px 10px -2px rgba(0,0,0,0.35) !important;
}
.glitch-btn.bg-accent-500\/60 .content {
  background: #FFC833 !important;
  color: #2A1A05 !important;
}

/* --- SECONDARY (dark) button --- covers bg-b-secondary/60 AND bg-white/[0.03] variants --- */
.glitch-btn.bg-b-secondary\/60,
.glitch-btn[class*="bg-white"] {
  background: transparent !important;
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.55), 0 5px 10px -2px rgba(0,0,0,0.3) !important;
}
.glitch-btn.bg-b-secondary\/60 .content,
.glitch-btn[class*="bg-white"] .content {
  background: #1C1D21 !important;
  color: #F5F5F5 !important;
}

/* Hover: brighten. Active: press down into the shadow. */
.glitch-btn:hover { filter: brightness(1.06); }
.glitch-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 0 #B45309, 0 2px 4px -2px rgba(0,0,0,0.35) !important;
}
.glitch-btn.bg-b-secondary\/60:active,
.glitch-btn[class*="bg-white"]:active {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.55), 0 2px 4px -2px rgba(0,0,0,0.3) !important;
}

/* Nav links (HOME / PRODUCTS / REVIEWS / STATUS / FAQ) stay plain text */
header nav a:not(.glitch-btn),
nav a:not(.glitch-btn):not([href*="discord"]) {
  background: transparent !important;
  box-shadow: none !important;
}

/* ==================== RAW GOLD BUTTONS (calculator Add-to-Cart, product Buy Now) ==================== */
/* These use bg-accent-500 directly (not glitch-btn) — give them the same chunky gold treatment */
section.component button.bg-accent-500:not(.anim):not(.content),
.product-card button[class*="bg-accent"],
.product-card a[class*="bg-accent"],
button.bg-accent-500.flex-1 {
  border-radius: 10px !important;
  background: #FFC833 !important;
  color: #2A1A05 !important;
  border: none !important;
  box-shadow: 0 4px 0 0 #B45309, 0 5px 10px -2px rgba(0,0,0,0.35) !important;
  transition: transform 0.07s ease-out, filter 0.1s ease-out !important;
}
section.component button.bg-accent-500:not(.anim):not(.content):hover,
.product-card button[class*="bg-accent"]:hover,
.product-card a[class*="bg-accent"]:hover {
  filter: brightness(1.06);
}
section.component button.bg-accent-500:not(.anim):not(.content):active,
.product-card button[class*="bg-accent"]:active,
.product-card a[class*="bg-accent"]:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 0 #B45309, 0 2px 4px -2px rgba(0,0,0,0.35) !important;
}

/* ==================== SMALL CONTROL BUTTONS (calculator +/−, preset chips) ==================== */
section.component[data-component-id="calculator"] button {
  border-radius: 8px !important;
  transition: transform 0.07s ease-out, border-color 0.12s, color 0.12s !important;
}
section.component[data-component-id="calculator"] button:active {
  transform: translateY(2px) !important;
}
/* Reset button (dark, in calculator) gets subtle depth */
section.component[data-component-id="calculator"] button.bg-b-tertiary {
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.4) !important;
}
section.component[data-component-id="calculator"] button.bg-b-tertiary:active {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.4) !important;
}

/* ==================== GLITCH HIGHLIGHT — SUBTLE amber, no big yellow blocks ==================== */
/* The [bracket] syntax wraps text in a span — remove the big yellow background, just color it amber */
.glitch-text-accent,
[class*="glitch"] [class*="accent"],
section.component h1 span:not(:only-child),
section.component h2 span:not(:only-child) {
  background: none !important;
  background-color: transparent !important;
  color: #FBBF24 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Catch the typical Glitch theme bracket-highlight span — it usually has padding + amber bg */
section.component h1 [style*="background"],
section.component h2 [style*="background"],
section.component h1 [class*="bg-accent"],
section.component h2 [class*="bg-accent"] {
  background: none !important;
  background-color: transparent !important;
  color: #FBBF24 !important;
  padding: 0 !important;
}

/* The [bracket] highlight is a span inside the heading with a gold gradient box
   plus animated ::before/::after layers. Target it STRUCTURALLY (any span in a
   component heading) so it works regardless of the class name — strip the box and
   the animation layers, leave clean gold text. */
section.component h1 span,
section.component h2 span,
.vip-band h2 span {
  background: none !important;
  background-image: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: #FBBF24 !important;
  -webkit-text-fill-color: #FBBF24 !important;
  text-decoration: none !important;
}
section.component h1 span::before,
section.component h1 span::after,
section.component h2 span::before,
section.component h2 span::after,
.vip-band h2 span::before,
.vip-band h2 span::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
}

/* ==================== HERO — SLIM band, not a giant section ==================== */
section.component[data-component-id="hero"] {
  min-height: auto !important;
  margin-bottom: 0 !important;
}
/* The hero's inner wrapper has pb-12 mb-12 (~6rem) baked in, which made the
   hero->VIP gap way bigger than VIP->Browse. Trim it so the gaps match. */
section.component[data-component-id="hero"] > div {
  padding-bottom: 1.5rem !important;
  margin-bottom: 0 !important;
}
section.component[data-component-id="hero"] .container {
  padding-top: 2rem !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 0 !important;
}
section.component[data-component-id="hero"] h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 1.25rem !important;
  font-weight: 800 !important;
}
section.component[data-component-id="hero"] p.text-sm {
  margin-bottom: 0.5rem !important;
  font-size: 0.7rem !important;
  opacity: 0.55 !important;
}
section.component[data-component-id="hero"] p.text-base,
section.component[data-component-id="hero"] p:empty {
  display: none !important;
}

/* ==================== BROWSE — Minecraft block icons + tight layout ==================== */
.mc-block-icon {
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
  display: block;
}
section.component[data-component-id="browse"] {
  margin-top: 0 !important;
}
section.component[data-component-id="browse"] .container {
  padding-top: 1.5rem !important;
}
section.component[data-component-id="browse"] button {
  border-width: 2px !important;
  border-radius: 14px !important;
}

/* Category-pill icons must stay 36px (the global .mc-block-icon 100% rule
   collapses tiny block textures fine but balloons larger icons like the crown) */
.mc-block-icon.shrink-0 {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  /* pill icons are hi-res custom art now — render smooth, NOT pixelated */
  image-rendering: auto !important;
}

/* ==================== BLOG SHOP CTA (convert blog readers -> buyers) ==================== */
.blog-side-sticky { position: sticky; top: 6rem; }
.blog-head { padding-bottom: 1.25rem !important; }
@media (min-width: 1024px) { .blog-head { padding-bottom: 1.75rem !important; } }
/* Amber gradient button — used across blog CTAs */
/* Buttons match the homepage hero: rounded 9px, chunky gold, raised bottom edge */
.blog-cta-btn {
  display: block; width: 100%; padding: 0.72rem 1.1rem; font-weight: 800;
  letter-spacing: 0; font-size: 0.92rem; text-align: center; border-radius: 9px;
  transition: transform .08s ease-out, box-shadow .12s ease-out, filter .12s ease-out;
}
.blog-cta-btn.primary { background: #FFC833; color: #2A1A05; box-shadow: 0 4px 0 0 #B45309, 0 5px 12px -2px rgba(0,0,0,0.35); }
.blog-cta-btn.primary:hover { filter: brightness(1.03); }
.blog-cta-btn.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #B45309, 0 3px 8px -2px rgba(0,0,0,0.35); }
.blog-cta-btn.secondary { background: rgba(255,255,255,0.05); color: #F5F5F5; border: 1px solid rgba(255,255,255,0.14); }
.blog-cta-inline {
  background: radial-gradient(120% 140% at 80% 0%, rgba(251,191,36,0.15), rgba(251,191,36,0) 60%), #17171b;
  text-align: center;
}
/* In-content links: make them obviously clickable */
.editor a { color: #FBBF24; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
.editor a:hover { color: #FCD34D; }
/* Best-seller / product cards */
.blog-prod { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem; background: rgba(255,255,255,0.028); border: 1px solid rgba(255,255,255,0.08); transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.blog-prod:hover { border-color: rgba(251,191,36,0.6); background: rgba(251,191,36,0.06); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.32); }
.blog-prod-img { width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; image-rendering: auto; }
.blog-prod-info { flex: 1; min-width: 0; text-align: left; }
.blog-prod-name { font-weight: 700; font-size: 0.84rem; color: #F5F5F5; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog-prod-meta { display: flex; align-items: center; gap: 0.45rem; margin-top: 3px; flex-wrap: wrap; }
.blog-prod-price { font-size: 0.82rem; color: #FBBF24; font-weight: 800; }
.blog-prod-hook { font-size: 0.64rem; font-weight: 700; color: #FBBF24; background: rgba(251,191,36,0.13); border: 1px solid rgba(251,191,36,0.32); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.blog-prod-btn { flex-shrink: 0; background: #FFC833; color: #2A1A05; font-weight: 800; font-size: 0.8rem; padding: 0.5rem 1.05rem; border-radius: 9px; box-shadow: 0 3px 0 0 #B45309, 0 4px 8px -2px rgba(0,0,0,0.3); transition: filter .15s ease; }
.blog-prod:hover .blog-prod-btn { filter: brightness(1.05); }
.blog-prod-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 640px) { .blog-prod-grid { grid-template-columns: 1fr 1fr; } }
/* Contextual featured-product banner (top of every post — seen by 100% of readers) */
.blog-hero-cta { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; margin-bottom: 2rem; background: linear-gradient(90deg, rgba(251,191,36,0.16), rgba(251,191,36,0.02) 70%), #17171b; border: 1px solid rgba(251,191,36,0.4); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.blog-hero-cta:hover { border-color: rgba(251,191,36,0.75); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(245,166,35,0.18); }
.blog-hero-img { width: 58px; height: 58px; flex-shrink: 0; object-fit: contain; image-rendering: auto; }
.blog-hero-text { flex: 1; min-width: 0; }
.blog-hero-kicker { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #FBBF24; }
.blog-hero-name { font-size: 1.02rem; font-weight: 800; color: #F5F5F5; line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog-hero-sub { font-size: 0.75rem; color: rgba(245,245,245,0.6); margin-top: 3px; }
.blog-hero-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.blog-hero-price { font-size: 1.2rem; font-weight: 800; color: #FBBF24; line-height: 1; }
.blog-hero-btn { background: #FFC833; color: #2A1A05; font-weight: 800; font-size: 0.8rem; padding: 0.45rem 0.95rem; border-radius: 9px; white-space: nowrap; box-shadow: 0 3px 0 0 #B45309, 0 4px 8px -2px rgba(0,0,0,0.3); }
@media (max-width: 520px) { .blog-hero-sub { display: none; } .blog-hero-cta { gap: 0.7rem; padding: 0.75rem 0.8rem; } .blog-hero-img { width: 48px; height: 48px; } .blog-hero-name { font-size: 0.92rem; } }
/* Liquid-glass floating mobile buy bar (sits above the live-chat widget) */
.blog-mobile-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.55rem 0.5rem 0.7rem;
  background: rgba(20,20,24,0.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(251,191,36,0.4); border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
.blog-mobile-bar-img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; image-rendering: auto; }
.blog-mobile-bar-info { flex: 1; min-width: 0; }
.blog-mobile-bar-name { font-size: 0.8rem; font-weight: 700; color: #F5F5F5; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog-mobile-bar-price { font-size: 0.78rem; font-weight: 800; color: #FBBF24; line-height: 1.2; }
.blog-mobile-bar-btn { flex-shrink: 0; background: #FFC833; color: #2A1A05; font-weight: 800; font-size: 0.82rem; padding: 0.6rem 1.05rem; border-radius: 10px; box-shadow: 0 3px 0 0 #B45309, 0 4px 8px -2px rgba(0,0,0,0.3); }
.blog-mobile-pad { padding-bottom: 0; }
@media (max-width: 1023px) { .blog-mobile-pad { padding-bottom: 96px; } }
@media (min-width: 1024px) { .blog-mobile-bar { display: none; } }

/* ==================== EARN MONEY / REWARD CENTER ==================== */
.em-page { max-width: 1080px; margin: 0 auto; padding: 4rem 1.25rem 5rem; }
@media (min-width: 1024px) { .em-page { padding: 5rem 1.5rem 6rem; } }
.em-head { text-align: center; margin-bottom: 3rem; }
.em-eyebrow { font-family: 'Courier New', monospace; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,245,245,0.5); margin-bottom: 0.75rem; }
.em-h1 { font-family: 'Courier New', monospace; font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1.05; color: #F5F5F5; }
.em-h1 span { color: #FBBF24; }
.em-lead { color: rgba(245,245,245,0.6); font-size: 1.05rem; line-height: 1.55; max-width: 34rem; margin: 1rem auto 0; }
.em-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; max-width: 680px; margin: 0 auto 3.5rem; }
@media (min-width: 768px) { .em-stats { grid-template-columns: repeat(4, 1fr); } }
.em-stat { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 1.15rem 0.75rem; text-align: center; }
.em-stat-num { display: block; font-size: 2rem; font-weight: 800; color: #FBBF24; font-family: 'Courier New', monospace; line-height: 1; }
.em-stat-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(245,245,245,0.5); margin-top: 0.5rem; }
.em-tabs { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 3.5rem; }
.em-tab { padding: 0.7rem 1.5rem; border-radius: 11px; font-weight: 700; font-size: 0.92rem; background: rgba(255,255,255,0.04); color: rgba(245,245,245,0.6); border: 1px solid rgba(255,255,255,0.09); transition: all .15s ease; cursor: pointer; }
.em-tab:hover { color: #F5F5F5; }
.em-tab-active, .em-tab-active:hover { background: #FFC833; color: #2A1A05; border-color: #FFC833; box-shadow: 0 3px 0 0 #B45309; }
.em-section-head { text-align: center; margin-bottom: 2.5rem; }
.em-h2 { font-family: 'Courier New', monospace; font-weight: 800; text-transform: uppercase; font-size: 1.75rem; color: #F5F5F5; }
.em-sub { color: rgba(245,245,245,0.55); font-size: 1rem; margin-top: 0.5rem; }
.em-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.15rem; margin: 0 auto 3rem; }
@media (min-width: 640px) { .em-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .em-card-grid { grid-template-columns: repeat(4, 1fr); } }
.em-card { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 1.75rem 1.25rem; text-align: center; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.em-card:hover { transform: translateY(-4px); border-color: rgba(251,191,36,0.5); box-shadow: 0 14px 32px rgba(0,0,0,0.35); }
.em-card-featured { border-color: rgba(251,191,36,0.55); background: radial-gradient(130% 120% at 50% 0%, rgba(251,191,36,0.14), rgba(251,191,36,0.02)); }
.em-card-badge { position: absolute; top: 12px; right: 12px; background: #FFC833; color: #2A1A05; font-weight: 800; font-size: 0.64rem; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; }
.em-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 15px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 1rem; }
.em-card-title { font-weight: 800; font-size: 1.08rem; color: #F5F5F5; }
.em-card-sub { font-size: 0.8rem; color: rgba(245,245,245,0.5); margin: 3px 0 1.1rem; }
.em-card-rate { font-size: 1.7rem; font-weight: 800; color: #FBBF24; font-family: 'Courier New', monospace; }
.em-card-rate span { font-size: 0.72rem; color: rgba(245,245,245,0.5); font-family: inherit; font-weight: 600; }
.em-panel { max-width: 680px; margin: 0 auto; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 2rem; }
.em-panel-title { font-family: 'Courier New', monospace; font-weight: 800; text-transform: uppercase; color: #F5F5F5; font-size: 1.2rem; margin-bottom: 1.4rem; text-align: center; }
.em-steps { display: flex; flex-direction: column; gap: 1.1rem; }
.em-step { display: flex; align-items: flex-start; gap: 1rem; }
.em-step-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: #FFC833; color: #2A1A05; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.em-step > p { color: rgba(245,245,245,0.85); font-size: 0.95rem; line-height: 1.45; padding-top: 0.35rem; }
.em-step-t { font-weight: 700; color: #F5F5F5; font-size: 0.98rem; }
.em-step-d { font-size: 0.87rem; color: rgba(245,245,245,0.55); margin-top: 2px; }
.em-note { text-align: center; color: rgba(245,245,245,0.5); font-size: 0.82rem; margin-top: 1.6rem; letter-spacing: 0.02em; }
.em-affiliate-hero { max-width: 620px; margin: 0 auto 2rem; text-align: center; background: radial-gradient(120% 140% at 50% 0%, rgba(251,191,36,0.15), rgba(251,191,36,0) 62%), #17171b; border: 1px solid rgba(251,191,36,0.35); border-radius: 18px; padding: 2.5rem 1.5rem; }
.em-aff-big { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 800; color: #FBBF24; font-family: 'Courier New', monospace; line-height: 1; }
.em-aff-sub { color: rgba(245,245,245,0.65); font-size: 1rem; margin-top: 0.75rem; line-height: 1.5; }
.em-cta-btn { display: block; text-align: center; background: #FFC833; color: #2A1A05; font-weight: 800; padding: 0.95rem; border-radius: 11px; margin-top: 1.75rem; box-shadow: 0 4px 0 0 #B45309; text-transform: uppercase; letter-spacing: 0.02em; transition: filter .15s ease; }
.em-cta-btn:hover { filter: brightness(1.04); }
.em-foot { text-align: center; color: rgba(245,245,245,0.5); font-size: 0.9rem; margin-top: 3rem; }
.em-foot a { color: #FBBF24; text-decoration: underline; }
/* Hide SellAuth's auto page-title AND its padded hero wrapper on the Reward Center page — our component has its own styled header */
body:has(.em-page) h1.font-mono.text-center.uppercase,
body:has(.em-page) *:has(h1.font-mono.text-center.uppercase):not(:has(.em-page)) { display: none !important; }

/* ==================== VIP FEATURE BAND ==================== */
.vip-band {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.vip-eyebrow {
  color: #FBBF24;
}
.vip-text { text-align: center; }
.vip-perks { justify-content: center; }
@media (min-width: 1024px) {
  .vip-text { text-align: left; }
  .vip-perks { justify-content: flex-start; }
}

/* ==================== PRODUCT PAGE — TRUST SECTION ==================== */
.trust-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.10);
  color: #FBBF24;
  font-size: 15px;
}
.trust-badge, .trust-rating { transition: border-color 0.15s ease; }
.trust-badge:hover, .trust-rating:hover { border-color: rgba(251, 191, 36, 0.45) !important; }
.trust-ico.trust-green  { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.trust-ico.trust-blue   { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.trust-ico.trust-purple { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }

/* ==================== PRODUCT PAGE LAYOUT ====================
   Mobile: image → buy → description.  Desktop: original 2-col (image+desc left, buy right).
   Custom CSS (not Tailwind utilities) because the theme's Tailwind build is purged. */
.pp-a { order: 1; }   /* image */
.pp-b { order: 2; }   /* buy panel */
.pp-c { order: 3; }   /* description / faq / reviews */
@media (min-width: 1024px) {
  .pp-wrap { display: grid; grid-template-columns: 3fr 2fr; align-items: start; }
  .pp-a { grid-column: 1; grid-row: 1; }            /* image: top-left */
  .pp-c { grid-column: 1; grid-row: 2; }            /* description: directly under image */
  .pp-b { grid-column: 2; grid-row: 1 / span 2; align-self: start; }  /* buy: right side, spans both rows */
}
.vip-priceline {
  color: #F5F5F5;
  font-weight: 700;
}
.vip-priceline .glitch-highlight,
.vip-priceline b { color: #FBBF24; }
.vip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #FBBF24;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 10px;
  white-space: nowrap;
}
.vip-chip-icon { font-size: 0.72rem; opacity: 0.9; }
.vip-crown {
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: auto !important;
  filter: drop-shadow(0 6px 18px rgba(251, 191, 36, 0.45));
}
.vip-price-big {
  font-size: 1.9rem;
  font-weight: 800;
  color: #FBBF24;
  font-family: 'Chivo Mono', monospace;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .vip-crown { width: 76px; height: 76px; }
}

/* ==================== PRODUCT CARDS — chunky, lift on hover ==================== */
.product-card, [class*="product-card"] {
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 191, 36, 0.25) !important;
}

/* ==================== SECTION SPACING — less giant gaps ==================== */
.component .container.mb-32 { margin-bottom: 4rem !important; }
.component .container.lg\:mb-32 { margin-bottom: 4rem !important; }
@media (min-width: 1024px) {
  .component .container.lg\:mb-32 { margin-bottom: 5rem !important; }
}
.component .container.mb-16 { margin-bottom: 3rem !important; }
.component .container.lg\:mb-16 { margin-bottom: 3rem !important; }

/* Soften borders */
section.component .border-line {
  border-color: rgba(245, 245, 245, 0.08) !important;
}

/* ==================== MARQUEES (announcement bar + payment methods) ==================== */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.animate-marquee:hover { animation-play-state: paused; }

@keyframes payments-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-payments-marquee {
  animation: payments-marquee 50s linear infinite;
  will-change: transform;
}
.animate-payments-marquee:hover { animation-play-state: paused; }

/* Each payment method on a uniform white card — all visible, evenly sized, never squished */
.pm-card {
  flex-shrink: 0;
  width: 60px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.4);
}
.pm-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ==================== BACKGROUND + DETAILS ==================== */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(251, 191, 36, 0.08), transparent 70%),
    linear-gradient(rgba(245, 245, 245, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 245, 245, 0.012) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-position: top center, 0 0, 0 0;
  background-attachment: fixed;
}

::selection { background: #FBBF24; color: #0A0A0B; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0A0A0B; }
::-webkit-scrollbar-thumb { background: rgba(251, 191, 36, 0.25); }
::-webkit-scrollbar-thumb:hover { background: rgba(251, 191, 36, 0.45); }

/* ==================== FREE COINS BLOCK ==================== */
#free-coins { position: relative; }
#free-coins h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  margin-bottom: 0 !important;
}
#free-coins p.text-gray-300 {
  color: #FBBF24 !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.85rem !important;
}
#free-coins > div > div > div:first-child {
  margin-bottom: 1.5rem !important;
  gap: 0.5rem !important;
}
#free-coins > div > div > div:has(p.text-base) {
  border: 1.5px solid rgba(251, 191, 36, 0.25);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.03), rgba(251, 191, 36, 0.01)) !important;
  padding: 2rem 1.5rem !important;
}
#free-coins .text-base.text-t-primary\/50 {
  color: rgba(245, 245, 245, 0.85) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
#free-coins > div > div > div:has(p.text-base) > div {
  gap: 1.5rem !important;
}
#free-coins .container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(251, 191, 36, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ==================== STICKY FREE-COINS BUTTON ==================== */
#free-coins-sticky:hover { filter: brightness(1.06); }
#free-coins-sticky:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 0 #B45309, 0 2px 6px -2px rgba(0,0,0,0.4) !important;
}
@media (max-width: 640px) {
  #free-coins-sticky {
    bottom: 1rem; left: 1rem;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.72rem !important;
  }
}

/* ==================================================================== */
/* ============ PRODUCT PAGE — the money-maker, premium ============== */
/* ==================================================================== */

/* Product title — clean Outfit, not mono-uppercase */
section[data-component-id="product-page"] h1,
.component[data-component-id*="product"] h1 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}

/* Image frame — rounded, amber-tinted border, soft depth (kill the harsh border-2) */
[data-component-id="product-page"] .splide__slide,
[data-component-id="product-page"] .border-2.border-border {
  border-radius: 14px !important;
  border: 1px solid rgba(251,191,36,0.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 16px -8px rgba(0,0,0,0.5) !important;
  overflow: hidden !important;
}
[data-component-id="product-page"] .splide.thumbnails .splide__slide {
  border-radius: 10px !important;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s !important;
}
[data-component-id="product-page"] .splide.thumbnails .splide__slide:hover {
  opacity: 1 !important;
  border-color: rgba(251,191,36,0.5) !important;
}

/* Description / Reviews tabs — rounded pill tabs */
[data-component-id="product-page"] .corner-sm {
  border-radius: 9px !important;
  clip-path: none !important;
}
[data-component-id="product-page"] [\:class*="activeTab"] {
  transition: all 0.15s ease !important;
}

/* Price box — premium gold-tinted panel */
[data-component-id="product-page"] .p-0\.5.bg-border.corner:first-of-type {
  background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(251,191,36,0.08)) !important;
  border-radius: 14px !important;
}

/* ---- VARIANT SELECTOR (package picker) — the #1 conversion element ---- */
/* Each variant = chunky rounded card. Selected = bold amber. */
#productForm [\:class*="activeVariant"],
form[\@submit] button[\@click*="activeVariant"],
.component[data-component-id="product-page"] button[\@click*="activeVariant"] {
  border-radius: 12px !important;
  border: 2px solid rgba(255,255,255,0.07) !important;
  background: #16171A !important;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease !important;
  padding: 0.85rem 1rem !important;
}
.component[data-component-id="product-page"] button[\@click*="activeVariant"]:hover {
  border-color: rgba(251,191,36,0.4) !important;
  transform: translateY(-2px) !important;
}
/* Selected variant — the theme adds ring-accent-500 ring-2; reinforce it strongly */
.component[data-component-id="product-page"] button[\@click*="activeVariant"].ring-2,
.component[data-component-id="product-page"] button[\:class*="activeVariant"][class*="ring-accent"] {
  border-color: #FBBF24 !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(251,191,36,0.04)) !important;
  box-shadow: 0 0 0 1px #FBBF24, 0 4px 14px -4px rgba(251,191,36,0.35) !important;
}

/* ---- QUANTITY STEPPER — chunky rounded ---- */
[data-component-id="product-page"] .flex.overflow-hidden:has(input[name="quantity"]) {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
[data-component-id="product-page"] input[name="quantity"] {
  border-radius: 0 !important;
  background: rgba(255,255,255,0.04) !important;
}
[data-component-id="product-page"] button:has(svg path[d*="M19.5 12h-15"]),
[data-component-id="product-page"] button:has(svg path[d*="M12 4.5v15"]) {
  background: rgba(255,255,255,0.08) !important;
  transition: background 0.12s ease !important;
}
[data-component-id="product-page"] button:has(svg path[d*="M19.5 12h-15"]):hover,
[data-component-id="product-page"] button:has(svg path[d*="M12 4.5v15"]):hover {
  background: #FBBF24 !important;
  color: #2A1A05 !important;
}

/* Category + badges on product page — chunky pills */
[data-component-id="product-page"] .badges a,
[data-component-id="product-page"] .badges > div {
  border-radius: 9px !important;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.3) !important;
}

/* ==================================================================== */
/* ============ PRODUCTS PAGE (/products) grid polish ================ */
/* ==================================================================== */
[data-component-id="products-page"] h1,
[data-component-id="products-page"] h2 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}

/* ==================================================================== */
/* ============ FEEDBACK PAGE (/feedback) review cards =============== */
/* ==================================================================== */
[data-component-id="feedback-page"] h1,
[data-component-id="feedback-page"] h2 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}
/* Review cards — rounded with depth + amber-tinted border */
[data-component-id="feedback-page"] .corner,
[data-component-id="feedback-page"] [class*="corner"],
section.component[data-component-id="feedbacks"] .corner,
section.component[data-component-id="feedbacks"] [class*="corner"] {
  border-radius: 14px !important;
  clip-path: none !important;
}
[data-component-id="feedback-page"] .bg-b-secondary,
section.component[data-component-id="feedbacks"] .bg-b-secondary {
  border: 1px solid rgba(251,191,36,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 4px 0 -2px rgba(0,0,0,0.4), 0 8px 18px -8px rgba(0,0,0,0.4) !important;
}

/* ==================================================================== */
/* ============ STATUS PAGE (/status) panels ======================== */
/* ==================================================================== */
[data-component-id="status-page"] h1,
[data-component-id="status-page"] h2 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}
[data-component-id="status-page"] .corner,
[data-component-id="status-page"] [class*="corner"] {
  border-radius: 12px !important;
  clip-path: none !important;
}
[data-component-id="status-page"] .bg-b-secondary {
  border: 1px solid rgba(251,191,36,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 4px 0 -2px rgba(0,0,0,0.4) !important;
}

/* ==================== /products PAGE ==================== */
/* Products-page title — clean Outfit */
[data-component-id="products-page"] h1 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}
/* Trim the huge default top/bottom padding so products show sooner */
[data-component-id="products-page"] .container.py-24 {
  padding-top: 3rem !important;
  padding-bottom: 4rem !important;
}
[data-component-id="products-page"] .mb-24 {
  margin-bottom: 2.5rem !important;
}