/* ✅ Force pure white page background everywhere (desktop + mobile) */
html, body,
.site, .site-main, .content-area, .entry-content,
.woocommerce, .woocommerce-page,
.elementor, .elementor-location-body, .elementor-section-wrap {
  background: #ffffff !important;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
  text-align: center;
  padding: 0;
}

/* ✅ Remove top spacing under header on all devices */
.elementor-page .elementor-section-wrap > section.elementor-section:first-child,
.woocommerce .elementor .elementor-section.elementor-top-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 767px) {
  header, .site-header,
  .elementor-page .elementor-section-wrap > section.elementor-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ===== Container ===== */
.shop-container {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: none;
}

/* ✅ Reduce big vertical whitespace (all devices) */
.shop-container h1 {
  margin: 16px 0 10px !important;
  line-height: 1.1;
}

.shop-container h2 {
  margin: 18px 0 10px !important;
}

/* 👶 Kid-friendly shop instruction */
.shop-hint {
  margin: 0 0 14px;
  color: #5b6470;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Slightly clearer on mobile */
@media (max-width: 768px) {
  .shop-hint {
    font-size: 1rem;
    margin-bottom: 16px;
  }
}

/* ✅ Slightly tighter top padding on mobile */
@media (max-width: 768px) {
  .shop-container {
    padding-top: 10px !important;
  }
}

/* 🖥️ Wider bordered panel on desktop */
@media (min-width: 1024px) {
  .shop-container { max-width: 1200px; }
}
@media (min-width:1024px){
  .elementor-section:has(.shop-container){ --container-max-width: 1200px !important; }
  .elementor-section.elementor-top-section:has(.shop-container) > .elementor-container,
  .elementor-section:has(.shop-container) > .elementor-container { max-width: 1200px !important; }
}

/* ===== Balance ===== */
.balance {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #003272;
  font-weight: bold;
}

/* Avatar Preview */
.avatar-wrapper { position: relative; width: 200px; height: 200px; margin: 20px auto; }
.base-avatar { position: absolute; top: 0; left: 0; width: 100%; }

/* ===========================
   ✅ NO-FLICKER HERO AVATAR (FIX)
   Stops the “wrong avatar → correct avatar” flash in the hero.

   IMPORTANT:
   - Elementor HTML uses: html.tbHeroLoading   (camelCase)
   - Some older scripts may use: html.tb-hero-loading (dashes)
   So we support BOTH to prevent blank/flash.
   =========================== */
html.tbHeroLoading #baseAvatar,
html.tbHeroLoading #accessoryLayer,
html.tb-hero-loading #baseAvatar,
html.tb-hero-loading #accessoryLayer {
  opacity: 0 !important;
  visibility: hidden !important;
}

#baseAvatar,
#accessoryLayer {
  transition: opacity 180ms ease;
}

/* ===========================
   AVATAR GRID (base layout)
   =========================== */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  align-items: start;
  justify-items: center;
  visibility: hidden;

  /* ✅ ONLY CHANGE: add space after each grid section */
  margin-bottom: 55px !important;
}

/* Card */
.avatar-card,
.avatar-shop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: #ffffff;
  border-radius: 18px;
  width: 180px;
  padding-bottom: 58px;
  position: relative;
  box-sizing: border-box;
}

/* Image */
.avatar-card .avatar-option,
.avatar-shop-item .avatar-option,
.avatar-shop-item img {
  width: 160px !important;
  height: 160px !important;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
  flex: 0 0 auto;
}

/* Button position (desktop/base)
   ✅ FIX: include <a> as well so it never changes size when swapping element types */
.avatar-card button,
.avatar-card a,
.avatar-shop-item button,
.avatar-shop-item a {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

/* =========================================================
   ✅ BUTTONS — MATCH HOMEPAGE CTA (from leaderboard.css)
   (Icons stay: 🛒 Buy, ✓ Equip, ★ Equipped)
   ========================================================= */

/* Buttons (base)
   ✅ FIX: include <a> as well */
.avatar-card button,
.avatar-card a,
.shop-item button,
.shop-item a,
.avatar-shop-item button,
.avatar-shop-item a {
  /* ✅ match homepage CTA */
  padding: 16px 55px;
  border: 2px solid #003272;
  border-radius: 100px;

  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1;
  text-decoration: none;

  cursor: pointer;
  transition: border 0.3s ease, background 0.3s ease;

  /* keep your safety bits */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 120px;
  overflow: hidden;
  white-space: nowrap;

  /* remove the old “raised” look so it matches leaderboard */
  box-shadow: none;
}

/* ✅ EQUIP (blue CTA)
   ✅ FIX: include <a> as well */
.avatar-shop-item button.btn-equip,
.avatar-shop-item a.btn-equip,
.avatar-card button.btn-equip,
.avatar-card a.btn-equip {
  background: linear-gradient(135deg, #007BFF 0%, #0056CC 100%);
  border: 2px solid #003272;
  color: #ffffff !important;
}
.avatar-shop-item button.btn-equip::before,
.avatar-shop-item a.btn-equip::before,
.avatar-card button.btn-equip::before,
.avatar-card a.btn-equip::before {
  content: "✓";
  display: inline-block;
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
}

/* ✅ BUY (BOLT YELLOW — brighter like your logo)
   ✅ FIX: include <a> as well */
.avatar-shop-item button.btn-buy,
.avatar-shop-item a.btn-buy,
.avatar-card button.btn-buy,
.avatar-card a.btn-buy {
  background: linear-gradient(135deg, #FFE100 0%, #FFC400 100%);
  border: 2px solid #003272;
  color: #00224f !important;
}
.avatar-shop-item button.btn-buy::before,
.avatar-shop-item a.btn-buy::before,
.avatar-card button.btn-buy::before,
.avatar-card a.btn-buy::before {
  content: "🛒";
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* ✅ EQUIPPED (STATUS — not disabled, no hover/click)
   ✅ FIX: include <a> as well (in case equipped state is rendered as a link) */
.avatar-shop-item button.btn-equipped,
.avatar-shop-item a.btn-equipped,
.avatar-card button.btn-equipped,
.avatar-card a.btn-equipped,
.avatar-shop-item button[disabled],
.avatar-card button[disabled] {
  background: linear-gradient(135deg, #5FA8FF 0%, #2F7BFF 100%);
  border: 2px solid #FFD700;
  color: #ffffff !important;

  cursor: default;
  box-shadow: none;

  opacity: 1;            /* ✅ no faded look */
  pointer-events: none;  /* ✅ no hover/click */
}
.avatar-shop-item button.btn-equipped::before,
.avatar-shop-item a.btn-equipped::before,
.avatar-card button.btn-equipped::before,
.avatar-card a.btn-equipped::before {
  content: "★";
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
}

/* Hover — match homepage hover (for clickable buttons only)
   ✅ FIX: include <a> as well */
.avatar-card button:hover,
.avatar-card a:hover,
.avatar-card button:focus-visible,
.avatar-card a:focus-visible,
.avatar-shop-item button:hover,
.avatar-shop-item a:hover,
.avatar-shop-item button:focus-visible,
.avatar-shop-item a:focus-visible,
.shop-item button:hover,
.shop-item a:hover,
.shop-item button:focus-visible,
.shop-item a:focus-visible {
  border: 2px solid #FFD700;
  background: linear-gradient(180deg, #007BFF 0%, #0056CC 100%);
  outline: none;
}

/* Hover for BUY: keep bolt-yellow feel
   ✅ FIX: include <a> as well */
.avatar-shop-item button.btn-buy:hover,
.avatar-shop-item a.btn-buy:hover,
.avatar-shop-item button.btn-buy:focus-visible,
.avatar-shop-item a.btn-buy:focus-visible,
.avatar-card button.btn-buy:hover,
.avatar-card a.btn-buy:hover,
.avatar-card button.btn-buy:focus-visible,
.avatar-card a.btn-buy:focus-visible {
  border: 2px solid #FFD700;
  background: linear-gradient(135deg, #FFED55 0%, #FFD200 100%);
}

/* 🚫 HARD OVERRIDE: Equipped never changes on hover/active
   ✅ FIX: include <a> as well */
.avatar-shop-item button.btn-equipped:hover,
.avatar-shop-item a.btn-equipped:hover,
.avatar-card button.btn-equipped:hover,
.avatar-card a.btn-equipped:hover,
.avatar-shop-item button.btn-equipped:focus-visible,
.avatar-shop-item a.btn-equipped:focus-visible,
.avatar-card button.btn-equipped:focus-visible,
.avatar-card a.btn-equipped:focus-visible,
.avatar-shop-item button.btn-equipped:active,
.avatar-shop-item a.btn-equipped:active,
.avatar-card button.btn-equipped:active,
.avatar-card a.btn-equipped:active {
  background: linear-gradient(135deg, #5FA8FF 0%, #2F7BFF 100%) !important;
  border: 2px solid #FFD700 !important;
  transform: none !important;
}

/* ✅ FIX: Pressed state should NOT remove centring translateX(-50%) */
.avatar-card button:active,
.avatar-shop-item button:active {
  transform: translateX(-50%);
}
/* ✅ FIX: include <a> active too */
.avatar-card a:active,
.avatar-shop-item a:active {
  transform: translateX(-50%);
}

.shop-item button:active {
  transform: none;
}
.shop-item a:active {
  transform: none;
}

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

/* Shop grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  align-items: start;
}

.shop-item { padding: 10px; background: #ffffff; }
.shop-item img { width: 100px; height: 100px; object-fit: contain; }

/* Fade-in */
#baseAvatar { opacity: 1; } /* (hero reveal is controlled by tbHeroLoading now) */

/* 📱 MOBILE — ALWAYS 3 columns (matches real iPhone), no “4th peeking” */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .shop-container { padding-left: 0; padding-right: 0; }

  .avatar-grid {
    width: 100%;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* ✅ FIX: equal columns */
    gap: 12px 8px !important;
    justify-items: stretch !important;
    padding: 0 12px !important;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;

    /* ✅ ONLY CHANGE (mobile too): add space after each grid section */
    margin-bottom: 45px !important;
  }

  .avatar-card,
  .avatar-shop-item {
    width: 100% !important;
    min-width: 0; /* ✅ FIX: prevent any column from “pushing” wider */
    padding: 0 2px 10px 2px;
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    box-sizing: border-box;
    overflow: visible;
    margin-bottom: 10px;
  }

  .avatar-card .avatar-option,
  .avatar-shop-item .avatar-option,
  .avatar-shop-item img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin: 0 0 8px 0 !important;
    display: block;
  }

  /* ✅ FIX: include <a> as well so mobile sizing never changes */
  .avatar-card button,
  .avatar-card a,
  .avatar-shop-item button,
  .avatar-shop-item a {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* ✅ FIX: include <a> as well */
  .avatar-card button,
  .avatar-card a,
  .avatar-shop-item button,
  .avatar-shop-item a,
  .shop-item button,
  .shop-item a {
    /* ✅ mobile buttons slightly narrower + keep pill ends */
    width: auto !important;
    max-width: 92% !important;
    padding: 9px 12px;
    min-height: 36px;
    min-width: 0;
    font-size: clamp(12px, 3.2vw, 14px);
    border-radius: 100px;
    white-space: nowrap;
  }

  /* ✅ FIX: include <a> as well */
  .avatar-card button:hover,
  .avatar-card a:hover,
  .avatar-card button:focus-visible,
  .avatar-card a:focus-visible,
  .avatar-card button:active,
  .avatar-card a:active,
  .avatar-shop-item button:hover,
  .avatar-shop-item a:hover,
  .avatar-shop-item button:focus-visible,
  .avatar-shop-item a:focus-visible,
  .avatar-shop-item button:active,
  .avatar-shop-item a:active,
  .shop-item button:hover,
  .shop-item a:hover,
  .shop-item button:focus-visible,
  .shop-item a:focus-visible,
  .shop-item button:active,
  .shop-item a:active {
    transform: none !important;
  }
}

/* ✅ Extra-small phones (optional): 2 columns if needed */
@media (max-width: 360px) {
  .avatar-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 🖥️ DESKTOP (unchanged layout) */
@media (min-width: 1024px) {
  .shop-container .avatar-grid {
    width: 100%;
    margin: 0 auto;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
    justify-items: center;
    padding: 0;
  }

  .shop-container .avatar-card,
  .shop-container .avatar-shop-item {
    width: 100% !important;
    padding: 10px;
    padding-bottom: 58px;
    background: #ffffff;
  }

  .shop-container .avatar-card .avatar-option,
  .shop-container .avatar-shop-item .avatar-option,
  .shop-container .avatar-shop-item img {
    width: 96% !important;
    max-width: 250px !important;
    margin: 0 auto 12px auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .shop-container .avatar-card button,
  .shop-container .avatar-card a,
  .shop-container .avatar-shop-item button,
  .shop-container .avatar-shop-item a { bottom: 12px; }
}

/* Accessories grid uses same styling as avatars */
.accessory-option{
  cursor: pointer;
}

/* Slightly smaller so overlays don't look huge in the grid */
#accessoryGrid .accessory-option{
  width: 160px;
  height: 160px;
  object-fit: contain;
}