/* Purple/Blue chromatic animated text (KEEP FONT/VIBE SAME) */ .chromatic-text { /* ✅ IMPORTANT: DO NOT change font settings at all (keeps Featured/Boosted/Plus same) */ /* ✅ Enable “chosen colors” while keeping purple/blue as fallback */ background: linear-gradient( 90deg, var(--c1, #7c3aed), var(--c2, #2563eb), var(--c1, #7c3aed), var(--c2, #2563eb) ); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* ✅ keep the same animation + glow */ animation: chromaMove 2.4s linear infinite; text-shadow: 0 0 12px rgba(124, 58, 237, 0.25); /* ✅ prevent “invisible/blurred” chromatic text issues */ filter: none; opacity: 1; visibility: visible; } @keyframes chromaMove { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* Glow pulse around boosted badge */ .boost-glow { animation: glowPulse 1.8s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 rgba(124, 58, 237, 0.0); } 50% { box-shadow: 0 0 18px rgba(124, 58, 237, 0.28); } } /* Optional helper */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================= ✅ Background vibe (safe version) ========================================================= */ :root{ --sc-purple: #7c3aed; --sc-blue: #2563eb; } body{ min-height: 100vh; position: relative; overflow-x: hidden; } /* ✅ FIX (NECESSARY): DO NOT override Tailwind bg-* utilities on body. The old rule was forcing background-color: inherit which breaks bg-gray-100 / bg-white pages. */ /* (removed) body.bg-white/body.bg-gray-100/body[class*="bg-"] inherit override */ /* Main animated glow layer */ body::after{ content:""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 520px at 12% 12%, rgba(124,58,237,.30), transparent 60%), radial-gradient(850px 520px at 88% 18%, rgba(37,99,235,.28), transparent 60%), radial-gradient(800px 520px at 55% 92%, rgba(124,58,237,.22), transparent 58%), linear-gradient(180deg, rgba(245,247,255,1), rgba(236,242,255,1)); filter: saturate(1.15); animation: scGlowMove 14s ease-in-out infinite alternate; } /* Subtle animated tech grid overlay */ body::before{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; background-image: linear-gradient(rgba(124,58,237,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 50% 20%, black 0%, transparent 68%); animation: scGridDrift 18s linear infinite; } @keyframes scGlowMove{ 0%{ transform: scale(1) translate3d(0, 0, 0); } 50%{ transform: scale(1.03) translate3d(-10px, 12px, 0); } 100%{ transform: scale(1.05) translate3d(14px, -10px, 0); } } @keyframes scGridDrift{ 0%{ transform: translate3d(0,0,0); } 100%{ transform: translate3d(-72px, 72px, 0); } } /* ========================================================= ✅ HARD FIX: If any page uses blur overlays / “locked” states, never blur chromatic text or navbar text. ========================================================= */ .blurred .chromatic-text, .locked .chromatic-text, .dim .chromatic-text, .blurred nav *, .locked nav *, .dim nav *{ filter: none !important; opacity: 1 !important; visibility: visible !important; } /* Respect people who prefer less motion */ @media (prefers-reduced-motion: reduce){ body::after, body::before { animation: none !important; } .chromatic-text { animation: none !important; } } /* ========================================================= ✅ NEW (GAME ONLY): Neon retro grid background like screenshot - applies ONLY on pages that have: (your game page already has this) - does NOT touch other pages ========================================================= */ body[data-hide-inbox="1"]{ /* force a dark base for the game vibe */ background-color: #05070d !important; } /* Override the global glow layer on the GAME page */ body[data-hide-inbox="1"]::after{ content:""; position: fixed; inset: 0; z-index: -2; pointer-events: none; /* dark vignette + neon glows */ background: radial-gradient(900px 520px at 18% 18%, rgba(0, 255, 214, 0.18), transparent 60%), radial-gradient(900px 520px at 82% 18%, rgba(139, 92, 246, 0.18), transparent 60%), radial-gradient(800px 520px at 55% 85%, rgba(56, 189, 248, 0.12), transparent 62%), radial-gradient(1200px 700px at 50% 55%, rgba(255,255,255,0.03), transparent 60%), linear-gradient(180deg, #03040a 0%, #050817 55%, #02030a 100%); filter: saturate(1.25) contrast(1.05); animation: scGameGlowMove 12s ease-in-out infinite alternate; } /* Override the global grid on the GAME page with perspective neon grid */ body[data-hide-inbox="1"]::before{ content:""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; /* two-tone neon grid */ background-image: linear-gradient(rgba(0, 255, 214, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.22) 1px, transparent 1px); background-size: 70px 70px; /* perspective + tilt like the screenshot floor */ transform-origin: 50% 75%; transform: perspective(900px) rotateX(68deg) translate3d(0, 140px, 0); /* fade toward the horizon */ mask-image: linear-gradient(to top, black 0%, black 40%, transparent 78%); opacity: 0.9; /* little drift so it feels alive */ animation: scGameGridDrift 10s linear infinite; } /* extra vignette layer (so edges are darker like screenshot) */ body[data-hide-inbox="1"]::selection{ background: rgba(139,92,246,.35); } @keyframes scGameGridDrift{ 0%{ background-position: 0px 0px; } 100%{ background-position: 0px 70px; } } @keyframes scGameGlowMove{ 0%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(-10px, 8px, 0) scale(1.02); } 100%{ transform: translate3d(12px, -10px, 0) scale(1.04); } } /* Respect reduced motion on GAME background too */ @media (prefers-reduced-motion: reduce){ body[data-hide-inbox="1"]::before, body[data-hide-inbox="1"]::after{ animation: none !important; } } /* ========================================================= ✅ NEW (PRODUCT PAGE): Long description safety - prevents long descriptions from stretching the page - preserves line breaks (Enter) from the seller - optional scroll container if super long ========================================================= */ /* Apply safely to the product content area without changing layout */ #product-wrap{ overflow-wrap: anywhere; word-break: break-word; } /* Preserve formatting for description-like blocks */ #product-wrap p, #product-wrap .description, #product-wrap .desc, #product-wrap .product-desc, #product-wrap [data-desc], #product-wrap [data-field="description"]{ white-space: pre-wrap; /* keeps user line breaks */ overflow-wrap: anywhere; word-break: break-word; } /* If product.js uses 
 for description, keep it readable */
#product-wrap pre{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* OPTIONAL: if you later add class="sc-desc-scroll" to the description element */
.sc-desc-scroll{
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;            /* room for scrollbar */
}

/* =========================================================
   ✅ Sell City: seller link underline fix (works for chromatic text too)
========================================================= */
.sc-seller-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0px;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none; /* we draw our own underline */
}

/* underline “bar” that shows on hover */
.sc-seller-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  border-radius:999px;
  opacity:0;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease;
  background: rgba(17,24,39,.85); /* default: black-ish */
}

/* when chromatic, underline becomes gradient so it shows */
.sc-seller-link.sc-seller-link--chroma::after{
  background: linear-gradient(90deg, var(--c1,#7c3aed), var(--c2,#3b82f6));
}

.sc-seller-link:hover::after{
  opacity:1;
  transform: translateY(0);
}

/* =========================================================
   ✅ ONLY FIX YOU ASKED FOR:
   Out-of-stock "Manage" menu hover text turning white.
   We ONLY target the OOS modal container by its ids,
   and force text color to stay dark on hover.
   (No other styling changes.)
========================================================= */
#sc-oos-modal-backdrop button,
#sc-oos-modal-backdrop a{
  color:#111827;
  -webkit-text-fill-color: initial;
}

#sc-oos-modal-backdrop button:hover,
#sc-oos-modal-backdrop a:hover,
#sc-oos-modal-backdrop button:focus,
#sc-oos-modal-backdrop a:focus{
  color:#111827;
  -webkit-text-fill-color: initial;
}

/* Keep delete red (so it doesn't go white) */
#sc-oos-modal-backdrop #sc-oos-delete{
  color:#000000;
}
#sc-oos-modal-backdrop #sc-oos-delete:hover,
#sc-oos-modal-backdrop #sc-oos-delete:focus{
  color:#b91c1c;
}

/* =========================================================
   ✅ NEW (NECESSARY): MOBILE NAVBAR + BROWSE PAGE FIXES
   - Phones only (desktop + iPad stay the same)
   - Fixes navbar wrapping / cramped links
   - Fixes “browse/view all listings only shows 1 row / weird scroll”
========================================================= */

@media (max-width: 768px){

  /* -------------------------
     1) NAVBAR: stack cleanly on phone
     ------------------------- */

  nav{
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* brand on its own row */
  nav > a{
    width: 100% !important;
  }

  /* link row becomes a scrollable chip row instead of wrapping ugly */
  nav > div{
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
    scrollbar-width: none; /* Firefox */
  }
  nav > div::-webkit-scrollbar{ display:none; }

  /* keep nav links readable + not shrinking */
  nav > div a{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* keep auth slot from squishing everything */
  #nav-auth-slot{
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* ✅ NEW (NECESSARY): “scroll hint” slider under nav links (phones only) */
  nav > div{
    position: relative !important;
  }

  /* base track */
  nav > div::after{
    content:"";
    position:absolute;
    left: 10px;
    right: 10px;
    bottom: 0px;
    height: 3px;
    border-radius: 999px;
    background: rgba(17,24,39,0.10);
    pointer-events:none;
  }

  /* moving thumb */
  nav > div::before{
    content:"";
    position:absolute;
    left: 10px;
    bottom: 0px;
    height: 3px;
    width: 44px;
    border-radius: 999px;
    background: rgba(124,58,237,0.55);
    animation: scNavHint 1.8s ease-in-out infinite;
    pointer-events:none;
  }

  @keyframes scNavHint{
    0%{ transform: translateX(0); opacity: .65; }
    50%{ transform: translateX(70px); opacity: 1; }
    100%{ transform: translateX(0); opacity: .65; }
  }

  /* -------------------------
     2) BROWSE / VIEW ALL LISTINGS:
        If any container is accidentally horizontal scrolling,
        force it back to normal vertical flow on phones.
     ------------------------- */

  /* common “listings rows” that get forced into a single row by overflow */
  #products,
  #listings,
  #listing-grid,
  #browse-grid,
  #results-grid,
  #viewall-grid,
  .product-grid,
  .products-grid,
  .listings-grid{
    overflow-x: visible !important;
  }

  /* If script.js uses a horizontal flex row, make it wrap on mobile */
  #products,
  #listings,
  #listing-grid,
  #browse-grid,
  #results-grid,
  #viewall-grid{
    flex-wrap: wrap !important;
  }

  /* If it’s a grid already, lock it to 1 column on phone */
  .product-grid,
  .products-grid,
  .listings-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Any big cards should fit screen width */
  .product-card,
  .listing-card,
  .card{
    width: 100% !important;
    max-width: 100% !important;
  }

}

/* =========================================================
   ✅ NEW (NECESSARY): MOBILE DASHBOARD EDIT SCROLL FIX
   - Fixes “can’t scroll / can’t close” when editing on iPhone
   - Only affects mobile
   - Works with most modal/backdrop ids/classes
========================================================= */

@media (max-width: 640px){

  /* Backdrops/overlays should allow vertical scroll */
  .modal-backdrop,
  .sc-modal-backdrop,
  #edit-backdrop,
  #modal-backdrop,
  #edit-modal-backdrop,
  [data-modal-backdrop]{
    position: fixed !important;
    inset: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    touch-action: pan-y !important;
  }

  /* Modal containers should NOT trap scroll with fixed height + hidden overflow */
  .modal,
  .sc-modal,
  #edit-modal,
  #editModal,
  [data-modal]{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* If your modal has an inner body container, make that the scroll area */
  .modal-body,
  .sc-modal-body,
  #edit-modal-body,
  #editModalBody,
  [data-modal-body]{
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* If your JS adds a "modal-open" class, keep body locked but let modal scroll */
  body.modal-open{
    overflow: hidden !important;
    touch-action: none !important;
  }
}

/* =========================================================
   ✅ NEW (NECESSARY): PRODUCT CAROUSEL "1 PHOTO AT A TIME" + FULL IMAGE VIEW
   - Fixes iPad showing multiple big photos / messy layout
   - Ensures only one main image area exists and behaves consistently
   - Forces contained image (no weird stretch/crop)
   - Makes arrow taps always stable
   - Does NOT change desktop layout vibe
========================================================= */

/* Carousel container safety */
#sc-carousel{
  overflow: hidden;
  position: relative;
}

/* Only the #main-img is allowed to be the big photo */
#sc-carousel img{
  max-width: 100%;
  height: auto;
}

/* Main image display: show full photo */
#sc-carousel #main-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Prevent any accidental second “main image” from showing big */
#sc-carousel img:not(#main-img){
  max-height: 100%;
}

/* iOS/iPad tap stability */
#img-prev,
#img-next{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================================================
   ✅ NEW (TABLET / IPAD PRODUCT PAGE ONLY)
   - Fixes ugly stretched product layout on iPad/tablet
   - Makes price darker/bolder and easier to see
   - Makes Add to Cart / Buy Now buttons look clean and even
   - ONLY tablet range, desktop + phone stay the same
========================================================= */

@media (min-width: 768px) and (max-width: 1180px){

  /* product page main card spacing */
  #product-wrap{
    min-width: 0;
  }

  /* big main image area looks balanced on iPad */
  #sc-carousel{
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 26px rgba(15,23,42,0.06);
  }

  #sc-carousel .sc-carousel-stage{
    height: clamp(320px, 42vh, 500px) !important;
    max-height: 500px !important;
    background: #f8fafc !important;
  }

  #sc-carousel #main-img{
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important;
  }

  #sc-carousel .sc-carousel-arrow,
  .sc-carousel-arrow{
    width: 50px !important;
    height: 50px !important;
    font-size: 28px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.16) !important;
  }

  #sc-carousel .sc-carousel-count,
  .sc-carousel-count{
    font-size: 13px !important;
    padding: 7px 12px !important;
    font-weight: 900 !important;
  }

  #sc-carousel .sc-carousel-thumbs,
  .sc-carousel-thumbs{
    gap: 12px !important;
    margin-top: 12px !important;
  }

  #sc-carousel .sc-thumb,
  .sc-thumb{
    width: 84px !important;
    height: 84px !important;
    border-radius: 14px !important;
  }

  /* title looks cleaner on iPad */
  #product-wrap .sc-product-title{
    font-size: 2rem !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  /* description readability */
  #product-wrap .sc-product-desc{
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
  }

  /* meta / price card */
  #product-wrap .sc-product-card{
    border-radius: 20px !important;
    padding: 18px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
  }

  #product-wrap .sc-price-strong{
    color: #111827 !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: none !important;
  }

  #product-wrap .sc-meta-stack{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
  }

  #product-wrap .sc-meta-chip,
  #product-wrap .sc-stock-badge{
    min-height: 40px !important;
  }

  /* seller row spacing */
  #product-wrap .sc-seller-row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 20px !important;
  }

  /* buttons row on iPad */
  #product-wrap .sc-product-actions{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  #product-wrap .sc-product-actions > *{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #product-wrap #add-to-cart,
  #product-wrap #buy-now,
  #product-wrap .add-btn,
  #product-wrap .buy-btn{
    min-height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    box-shadow: none !important;
  }

  #product-wrap #add-to-cart,
  #product-wrap .add-btn{
    border: 1px solid rgba(0,0,0,0.12) !important;
    background: #fff !important;
    color: #111827 !important;
  }

  #product-wrap #buy-now,
  #product-wrap .buy-btn{
    color: #fff !important;
  }
}