/* ==========================================================================
   IdolJapan.store — Custom Stylesheet
   Path: css/custom.css
   ========================================================================== */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.img-fade-in {
  animation: fadeIn 0.25s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .img-fade-in {
    animation: none;
    opacity: 1;
  }
}

html.layout-desktop body {
  min-width: 1280px;
  overflow-x: auto;
}

html.layout-mobile body {
  min-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   Critical Layout & Drawer Fallbacks (Anti-DOM Bleed)
   ========================================================================== */

/* Fallback visibility rules if Tailwind CDN fails or is blocked */
.hidden,
[hidden] {
  display: none !important;
}

/* Keep drawers and modals out of the normal document flow until activated */
#quick-view-modal:not(.active),
#crypto-modal:not(.active),
#haul-drawer:not(.open),
#filter-drawer:not(.open) {
  display: none !important;
}

/* ==========================================================================
   Scrollbars & Interactive States
   ========================================================================== */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.autocomplete-item.active {
  background-color: rgba(225, 29, 72, 0.12);
}

.dark .autocomplete-item.active {
  background-color: rgba(225, 29, 72, 0.25);
}

/* File: css/custom.css | Block/Target: Custom Slim Mega-Menu Scrollbars */
.mega-menu-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(225, 29, 72, 0.3) transparent;
}
.mega-menu-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.mega-menu-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.mega-menu-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(225, 29, 72, 0.3);
  border-radius: 9999px;
}
.mega-menu-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(225, 29, 72, 0.65);
}
.dark .mega-menu-scrollbar {
  scrollbar-color: rgba(251, 113, 133, 0.3) transparent;
}
.dark .mega-menu-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(251, 113, 133, 0.3);
}
.dark .mega-menu-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(251, 113, 133, 0.65);
}