/* Mobile filter bar and drawer improvements */
.filter-bar-mobile {
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  margin-bottom: 0.5rem;
}
.filter-bar-mobile > * {
  margin-bottom: 0.25rem;
}
.filter-drawer-mobile {
  max-width: 98vw;
  margin: 0 auto;
  border-radius: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 1.25rem 1rem;
  z-index: 50;
}
@media (max-width: 640px) {
  .filter-drawer-mobile {
    padding: 1.1rem 0.5rem;
    max-width: 99vw;
  }
}
/* =============================================
   Tayoke Gyi Motor – Premium Dealership Theme
   Sale-Focused • Eye-Catching • Conversion-Optimized
   ============================================= */

/* ---------- CSS Custom Properties ---------- */
:root {
  --brand-primary: #D4A843;
  --brand-secondary: #2EAE7B;
  --brand-accent: #F0D060;
  --brand-dark: #0D1117;
  --brand-card: #161B22;
  --brand-surface: #21262D;
  --brand-gradient: linear-gradient(135deg, #D4A843, #2EAE7B);
  --brand-gradient-gold: linear-gradient(135deg, #F0D060, #D4A843);
  --shadow-glow: 0 0 30px rgba(212,168,67,0.3);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 20px 60px rgba(0,0,0,0.15);
  --radius: 1rem;
  --radius-lg: 1.25rem;
  --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ---------- Scrollbar ---------- */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary)); border-radius: 3px; }

html { scroll-behavior: smooth; }
::selection { background-color: rgba(212,168,67,0.25); color: inherit; }

/* ---------- Keyframes ---------- */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInScale { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
@keyframes pulse-glow { 0%,100% { box-shadow:0 0 5px rgba(212,168,67,0.3); } 50% { box-shadow:0 0 25px rgba(212,168,67,0.6),0 0 50px rgba(212,168,67,0.2); } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes float-gentle { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes spin-slow { to { transform:rotate(360deg); } }
@keyframes price-pop { 0% { transform:scale(1); } 50% { transform:scale(1.06); } 100% { transform:scale(1); } }
@keyframes badge-bounce { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@keyframes gradient-x { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes lightbox-in { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
@keyframes scroll-left { 0% { transform:translateX(100vw); } 100% { transform:translateX(-100%); } }
@keyframes wiggle { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(2deg); } }
@keyframes car-drive { 0% { transform:translateX(-120%); } 100% { transform:translateX(calc(100vw + 120%)); } }
@keyframes sparkle { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.2); } }

/* ---------- Navigation ---------- */
.nav-pill {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:0.6rem;
  font-size:0.8rem; font-weight:700;
  color:#4b5563; transition:var(--transition);
  position:relative; overflow:hidden;
}
.dark .nav-pill { color:#d1d5db; }
.nav-pill:hover { background:rgba(212,168,67,0.08); color:var(--brand-primary); transform:translateY(-1px); }
.nav-pill::after {
  content:''; position:absolute; bottom:2px; left:50%; width:0; height:2px;
  background:var(--brand-gradient); border-radius:1px; transition:all 0.3s; transform:translateX(-50%);
}
.nav-pill:hover::after { width:50%; }
.nav-active {
  background:var(--brand-gradient); color:#fff !important;
  box-shadow:0 4px 15px rgba(212,168,67,0.3);
}
.nav-active::after { display:none; }

/* ---------- Theme Toggle ---------- */
.theme-toggle-btn {
  display:flex; align-items:center; justify-content:center;
  border-radius:0.7rem; border:2px solid transparent;
  background:#f3f4f6; cursor:pointer; transition:var(--transition);
}
.dark .theme-toggle-btn { background:var(--brand-surface); }
.theme-toggle-btn:hover { border-color:rgba(212,168,67,0.3); transform:scale(1.1) rotate(10deg); }
.theme-toggle-btn:active { transform:scale(0.95); }

/* ---------- Mobile Nav ---------- */
.mobile-nav {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:0.75rem;
  font-weight:700; font-size:0.9rem;
  color:#4b5563; transition:var(--transition);
}
.dark .mobile-nav { color:#d1d5db; }
.mobile-nav:hover { background:rgba(212,168,67,0.06); color:var(--brand-primary); transform:translateX(4px); }
.mobile-nav-active {
  background:linear-gradient(to right,rgba(212,168,67,0.08),rgba(46,174,123,0.06));
  color:var(--brand-primary); border-left:3px solid var(--brand-primary);
}

/* ---------- Social Icons ---------- */
.social-icon-btn {
  width:2.5rem; height:2.5rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:0.6rem; background:rgba(255,255,255,0.08);
  color:#9ca3af; font-size:0.875rem; transition:var(--transition);
}
.social-icon-btn:hover { background:var(--brand-primary); color:#fff; transform:translateY(-3px) scale(1.1); box-shadow:0 8px 20px rgba(212,168,67,0.35); }

/* ---------- Footer ---------- */
.footer-link { color:#9ca3af; transition:var(--transition); display:inline-flex; align-items:center; gap:4px; }
.footer-link::before { content:'›'; margin-right:4px; color:rgba(212,168,67,0.5); }
.footer-link:hover { color:var(--brand-primary); transform:translateX(6px); }

/* ---------- Floating Social ---------- */
.float-social-btn {
  width:3.25rem; height:3.25rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:1rem; color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,0.25);
  transition:var(--transition);
  animation:float-gentle 3s ease-in-out infinite;
}
.float-social-btn:nth-child(2) { animation-delay:0.5s; }
.float-social-btn:nth-child(3) { animation-delay:1s; }
.float-social-btn:hover { transform:scale(1.15) translateY(-4px); box-shadow:0 12px 35px rgba(0,0,0,0.35); }

/* ---------- Language ---------- */
.lang-switcher-dropdown {
  position:absolute; right:0; top:100%; margin-top:0.5rem;
  background:#fff; border-radius:0.75rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.2);
  border:1px solid rgba(0,0,0,0.06);
  overflow:hidden; min-width:160px; z-index:50;
}
.dark .lang-switcher-dropdown { background:var(--brand-card); border-color:rgba(255,255,255,0.08); }
.lang-switcher-dropdown .lang-btn {
  width:100%; text-align:left; padding:12px 16px; font-size:0.875rem; font-weight:700;
  color:#4b5563; transition:var(--transition); display:flex; align-items:center; gap:8px;
  border:none; background:none; cursor:pointer;
}
.dark .lang-switcher-dropdown .lang-btn { color:#d1d5db; }
.lang-switcher-dropdown .lang-btn:hover { background:rgba(212,168,67,0.08); color:var(--brand-primary); }
.lang-switcher-dropdown .lang-btn.active { background:rgba(212,168,67,0.1); color:var(--brand-primary); }
.lang-switcher-dropdown .lang-btn .check-mark { margin-left:auto; color:#22c55e; font-size:10px; opacity:0; }
.lang-switcher-dropdown .lang-btn.active .check-mark { opacity:1; }

/* ---------- Cards ---------- */
.cartoon-shadow { box-shadow: 4px 4px 0px 0px rgba(212,168,67,0.15); }
.cartoon-shadow:hover { box-shadow: 6px 6px 0px 0px rgba(212,168,67,0.25); }

.cartoon-card, .comic-card {
  background:#fff; border-radius:var(--radius-lg);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow-card);
  transition:var(--transition);
  overflow:hidden; position:relative;
}
.dark .cartoon-card, .dark .comic-card {
  background:var(--brand-card); border-color:rgba(255,255,255,0.06);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.cartoon-card:hover, .comic-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-card-hover);
}
.dark .cartoon-card:hover, .dark .comic-card:hover {
  box-shadow:0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,168,67,0.15);
}

/* Sale Card */
.sale-card {
  background:#fff; border-radius:var(--radius-lg);
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  transition:var(--transition);
  overflow:hidden; position:relative;
}
.dark .sale-card { background:var(--brand-card); border-color:rgba(255,255,255,0.05); }
.sale-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(212,168,67,0.12),0 8px 30px rgba(0,0,0,0.08);
}
.dark .sale-card:hover { box-shadow:0 20px 50px rgba(212,168,67,0.1),0 8px 30px rgba(0,0,0,0.3); border-color:rgba(212,168,67,0.18); }
.sale-card::after {
  content:''; position:absolute; inset:0; border-radius:var(--radius-lg);
  padding:1px;
  background:linear-gradient(135deg,transparent,rgba(212,168,67,0.2),transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.sale-card:hover::after { opacity:1; }

/* ---------- Buttons ---------- */
.cartoon-btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:0.75rem;
  font-weight:800; font-size:0.875rem; color:#fff;
  background:var(--brand-gradient);
  box-shadow:0 4px 15px rgba(212,168,67,0.3);
  transition:var(--transition); cursor:pointer;
  position:relative; overflow:hidden;
}
.cartoon-btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transform:translateX(-100%); transition:transform 0.6s;
}
.cartoon-btn-primary:hover::before { transform:translateX(100%); }
.cartoon-btn-primary:hover { box-shadow:0 8px 30px rgba(212,168,67,0.45); transform:translateY(-3px); }
.cartoon-btn-primary:active { transform:translateY(0) scale(0.97); }

.cartoon-btn-outline {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:0.75rem;
  font-weight:800; font-size:0.875rem;
  border:2px solid var(--brand-primary); color:var(--brand-primary);
  background:transparent; transition:var(--transition); cursor:pointer;
}
.cartoon-btn-outline:hover { background:var(--brand-primary); color:#fff; transform:translateY(-3px); box-shadow:0 8px 25px rgba(212,168,67,0.3); }

.cartoon-btn-outline-dark {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:0.75rem;
  font-weight:800; font-size:0.875rem;
  border:2px solid #e5e7eb; color:#4b5563;
  background:transparent; transition:var(--transition); cursor:pointer;
}
.dark .cartoon-btn-outline-dark { border-color:#374151; color:#d1d5db; }
.cartoon-btn-outline-dark:hover { border-color:var(--brand-primary); color:var(--brand-primary); transform:translateY(-3px); }

.comic-btn-sm {
  display:inline-flex !important; align-items:center; gap:4px;
  padding:8px 18px; border-radius:0.6rem;
  font-weight:800; font-size:0.75rem; color:#fff !important;
  background:linear-gradient(135deg, #D4A843, #2EAE7B) !important;
  box-shadow:0 4px 12px rgba(212,168,67,0.25);
  transition:var(--transition); cursor:pointer; text-decoration:none !important; border:none;
  position:relative; overflow:hidden;
  flex-shrink:0; white-space:nowrap;
}
.dark .comic-btn-sm {
  color:#fff !important;
  background:linear-gradient(135deg, #D4A843, #2EAE7B) !important;
  box-shadow:0 4px 15px rgba(212,168,67,0.35);
}
.comic-btn-sm::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:translateX(-100%); transition:transform 0.5s;
}
.comic-btn-sm:hover::before { transform:translateX(100%); }
.comic-btn-sm:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(212,168,67,0.35); color:#fff !important; }

/* ---------- Inputs ---------- */
.cartoon-input {
  padding:10px 16px; border-radius:0.6rem;
  font-size:0.875rem; font-weight:500;
  background:#f9fafb; border:2px solid #e5e7eb;
  outline:none; transition:var(--transition); width:100%;
}
.dark .cartoon-input { background:var(--brand-surface); border-color:#374151; color:#f3f4f6; }
.cartoon-input::placeholder { color:#9ca3af; }
.cartoon-input:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(212,168,67,0.1); }

.cartoon-select {
  padding:10px 36px 10px 16px; border-radius:0.6rem;
  font-size:0.875rem; font-weight:500;
  background:#f9fafb; border:2px solid #e5e7eb;
  outline:none; transition:var(--transition);
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.dark .cartoon-select { background-color:var(--brand-surface); border-color:#374151; color:#f3f4f6; }
.cartoon-select:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(212,168,67,0.1); }

/* ---------- Section Headings ---------- */
.section-heading { text-align:center; margin-bottom:2rem; }
@media (min-width:640px) { .section-heading { margin-bottom:2.5rem; } }
.section-emoji { font-size:2rem; margin-bottom:0.5rem; display:inline-block; }
@media (min-width:640px) { .section-emoji { font-size:2.5rem; } }
.section-title {
  font-size:1.5rem; font-weight:900; position:relative; display:inline-block;
}
@media (min-width:640px) { .section-title { font-size:2rem; } }
.section-title::after {
  content:''; position:absolute; bottom:-6px; left:20%; right:20%;
  height:3px; background:var(--brand-gradient); border-radius:2px;
}
.section-desc { font-size:0.8rem; color:#6b7280; margin-top:0.75rem; max-width:32rem; margin-left:auto; margin-right:auto; }
@media (min-width:640px) { .section-desc { font-size:0.9rem; } }
.dark .section-desc { color:#9ca3af; }

/* ---------- Spec Tags ---------- */
.spec-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:0.5rem;
  background:#f3f4f6; border:1px solid #e5e7eb;
  font-size:11px; font-weight:700; color:#4b5563; transition:var(--transition);
}
.dark .spec-tag { background:var(--brand-surface); border-color:#374151; color:#d1d5db; }
.comic-spec:hover { border-color:var(--brand-primary); color:var(--brand-primary); }

.spec-detail-tag {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:0.75rem;
  background:#f9fafb; border:1px solid #f3f4f6;
  transition:var(--transition);
}
.dark .spec-detail-tag { background:var(--brand-surface); border-color:#374151; }
.spec-detail-tag:hover { border-color:rgba(212,168,67,0.25); }

/* ---------- Filter Chips ---------- */
.filter-chip {
  padding:8px 18px; border-radius:9999px;
  font-size:0.75rem; font-weight:800;
  background:#fff; border:2px solid #e5e7eb;
  color:#4b5563; transition:var(--transition); cursor:pointer;
}
.dark .filter-chip { background:var(--brand-surface); border-color:#374151; color:#d1d5db; }
.filter-chip:hover { border-color:var(--brand-primary); color:var(--brand-primary); transform:translateY(-1px); }
.filter-chip-active {
  background:var(--brand-gradient) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 4px 15px rgba(212,168,67,0.3);
}

/* ---------- Stagger Animation ---------- */
.stagger-item {
  opacity:0; transform:translateY(25px);
  transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.25,0.8,0.25,1);
}
.stagger-item.visible { opacity:1; transform:translateY(0); }

/* ---------- Line Clamp ---------- */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Prose Dark ---------- */
.dark .prose { color:#d1d5db; }
.dark .prose h1,.dark .prose h2,.dark .prose h3,.dark .prose h4 { color:#f3f4f6; }
.dark .prose strong { color:#f3f4f6; }
.dark .prose a { color:var(--brand-primary); }
.dark .prose blockquote { border-left-color:var(--brand-secondary); color:#9ca3af; }

/* ---------- Hamburger ---------- */
.hamburger-active .hamburger-line:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.hamburger-active .hamburger-line:nth-child(2) { opacity:0; }
.hamburger-active .hamburger-line:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); width:1.25rem; }

/* ---------- Preloader ---------- */
#preloader.fade-out { opacity:0; pointer-events:none; }

/* ---------- Back to Top ---------- */
#backToTop.visible { opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important; }

/* ---------- Lang Toast ---------- */
.lang-toast {
  position:fixed; top:80px; right:20px; z-index:9999;
  padding:12px 20px; border-radius:0.75rem;
  background:var(--brand-gradient);
  color:#fff; font-weight:700; font-size:0.875rem;
  box-shadow:0 15px 35px rgba(212,168,67,0.3);
  transform:translateX(120%); transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.lang-toast.show { transform:translateX(0); }

/* =============================================
   PRICE DISPLAY
   ============================================= */
.price-tag { position:relative; padding:2px 0; min-width:0; }
.price-main {
  font-size:1.3rem; font-weight:900;
  color:#D4A843;
  background:var(--brand-gradient);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1.2;
  word-break:break-word;
}
.price-original { font-size:0.7rem; color:#9ca3af; text-decoration:line-through; }
.price-currency { font-size:0.65rem; font-weight:700; -webkit-text-fill-color:#6b7280; }

/* ---------- Badges ---------- */
.badge-sale {
  display:inline-flex; align-items:center; gap:3px;
  padding:4px 10px; border-radius:0.5rem;
  font-size:0.6rem; font-weight:900;
  text-transform:uppercase; letter-spacing:0.05em;
  white-space:nowrap; z-index:10;
}
@media (max-width:640px) {
  .badge-sale { padding:3px 8px; font-size:0.55rem; gap:2px; border-radius:0.4rem; }
}
.badge-hot { background:linear-gradient(135deg,#D4A843,#2EAE7B); color:white; box-shadow:0 4px 15px rgba(212,168,67,0.35); animation:badge-bounce 2s ease-in-out infinite; }
.badge-new { background:linear-gradient(135deg,#22c55e,#16a34a); color:white; }
.badge-sold { background:#6b7280; color:white; }
.badge-available { background:linear-gradient(135deg,#22c55e,#16a34a); color:white; }
.badge-discount { background:var(--brand-gradient-gold); color:#1a1a2e; font-weight:900; box-shadow:0 4px 12px rgba(240,208,96,0.3); }
.comic-badge { text-transform:uppercase; letter-spacing:0.05em; }

/* =============================================
   CARD GALLERY
   ============================================= */
.card-gallery {
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  -ms-overflow-style:none; scrollbar-width:none;
}
.card-gallery::-webkit-scrollbar { display:none; }
.card-gallery > div { scroll-snap-align:center; flex-shrink:0; width:100%; }

.gallery-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:15;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,0.95);
  color:#1a1a2e; border:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  font-size:12px; cursor:pointer;
  opacity:0; transition:var(--transition);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  backdrop-filter:blur(8px);
}
@media (hover:none) { .gallery-arrow { opacity:0.85; } }
.comic-card:hover .gallery-arrow, .sale-card:hover .gallery-arrow, article:hover .gallery-arrow { opacity:1; }
.gallery-arrow:hover { background:var(--brand-primary); color:#fff; transform:translateY(-50%) scale(1.15); box-shadow:0 6px 20px rgba(212,168,67,0.35); }
.gallery-arrow:active { transform:translateY(-50%) scale(0.9); }
.gallery-arrow-left { left:8px; }
.gallery-arrow-right { right:8px; }

.gallery-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  z-index:15; display:flex; gap:5px;
  padding:4px 10px; background:rgba(0,0,0,0.45);
  backdrop-filter:blur(8px); border-radius:20px;
}
.gallery-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.4); border:none;
  cursor:pointer; transition:var(--transition);
}
.gallery-dot.active { background:var(--brand-primary); width:18px; border-radius:3px; box-shadow:0 0 8px rgba(212,168,67,0.5); }

/* Image overlay gradient */
.card-image-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 50%);
  opacity:0; transition:opacity 0.3s; pointer-events:none; z-index:5;
}
.sale-card:hover .card-image-overlay, .comic-card:hover .card-image-overlay { opacity:1; }

/* =============================================
   LIGHTBOX GALLERY
   ============================================= */
.lightbox-overlay {
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,0.96); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all 0.3s ease;
}
.lightbox-overlay.active { opacity:1; visibility:visible; }
.lightbox-overlay.active .lightbox-content { animation:lightbox-in 0.4s cubic-bezier(0.25,0.8,0.25,1) forwards; }
.lightbox-content {
  position:relative; max-width:90vw; max-height:85vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-content img {
  max-width:90vw; max-height:85vh; object-fit:contain;
  border-radius:0.5rem; box-shadow:0 25px 80px rgba(0,0,0,0.5);
}
.lightbox-close {
  position:fixed; top:20px; right:20px;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15); border-radius:50%;
  color:white; font-size:1.25rem; cursor:pointer;
  transition:var(--transition); z-index:100000;
}
.lightbox-close:hover { background:var(--brand-primary); transform:rotate(90deg) scale(1.1); }
.lightbox-nav {
  position:fixed; top:50%; transform:translateY(-50%);
  width:50px; height:50px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15); border-radius:50%;
  color:white; font-size:1.1rem; cursor:pointer;
  transition:var(--transition); z-index:100000;
}
.lightbox-nav:hover { background:var(--brand-primary); border-color:var(--brand-primary); transform:translateY(-50%) scale(1.1); }
.lightbox-prev { left:20px; }
.lightbox-next { right:20px; }
.lightbox-counter {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  padding:8px 20px; background:rgba(255,255,255,0.1);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1);
  border-radius:9999px; color:white; font-size:0.85rem; font-weight:700; z-index:100000;
}
.lightbox-thumbnails {
  position:fixed; bottom:60px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; padding:6px;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(8px);
  border-radius:0.75rem; max-width:80vw; overflow-x:auto; z-index:100000;
}
.lightbox-thumbnails::-webkit-scrollbar { display:none; }
.lightbox-thumb {
  flex-shrink:0; width:56px; height:42px;
  border-radius:0.35rem; overflow:hidden;
  border:2px solid transparent; cursor:pointer;
  opacity:0.5; transition:var(--transition);
}
.lightbox-thumb.active { border-color:var(--brand-primary); opacity:1; box-shadow:0 0 12px rgba(212,168,67,0.4); }
.lightbox-thumb:hover { opacity:0.8; }
.lightbox-thumb img { width:100%; height:100%; object-fit:cover; }

/* =============================================
   STAT CARDS
   ============================================= */
.stat-card {
  background:#fff; border-radius:var(--radius-lg); padding:1.5rem;
  text-align:center; box-shadow:0 2px 12px rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.04); transition:var(--transition);
  position:relative; overflow:hidden;
}
.dark .stat-card { background:var(--brand-card); border-color:rgba(255,255,255,0.04); }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 12px 35px rgba(0,0,0,0.08); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--brand-gradient); opacity:0; transition:opacity 0.3s;
}
.stat-card:hover::before { opacity:1; }
.stat-number {
  font-size:2rem; font-weight:900;
  background:var(--brand-gradient);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1.2;
}

/* =============================================
   TRUST / WHY CHOOSE US CARDS
   ============================================= */
.trust-card {
  background:#fff; border-radius:var(--radius-lg); padding:1.5rem;
  text-align:center; border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 2px 8px rgba(0,0,0,0.03); transition:var(--transition);
}
.dark .trust-card { background:var(--brand-card); border-color:rgba(255,255,255,0.04); }
.trust-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,0.08); }
.dark .trust-card:hover { box-shadow:0 16px 40px rgba(0,0,0,0.3); border-color:rgba(212,168,67,0.12); }
.trust-icon {
  width:56px; height:56px; margin:0 auto 0.75rem;
  border-radius:1rem; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; transition:var(--transition);
}
.trust-card:hover .trust-icon { transform:scale(1.1) rotate(5deg); }

/* =============================================
   CATEGORY CARDS
   ============================================= */
.category-card {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  transition:var(--transition); box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.category-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.15); }
.category-card img { transition:transform 0.8s cubic-bezier(0.25,0.8,0.25,1); }
.category-card:hover img { transform:scale(1.1); }
.category-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.15) 50%,transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; transition:var(--transition);
}

/* =============================================
   DETAIL PAGE
   ============================================= */
.detail-thumb {
  flex-shrink:0; width:64px; height:48px;
  border-radius:0.4rem; overflow:hidden;
  border:2px solid transparent; cursor:pointer;
  transition:var(--transition); opacity:0.5;
}
.detail-thumb.active, .detail-thumb:hover { border-color:var(--brand-primary); opacity:1; box-shadow:0 4px 12px rgba(212,168,67,0.25); }
@media (min-width:640px) { .detail-thumb { width:80px; height:60px; } }

.zoom-hint {
  position:absolute; bottom:12px; right:12px;
  padding:6px 12px; background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px); border-radius:9999px;
  color:white; font-size:0.7rem; font-weight:700;
  display:flex; align-items:center; gap:4px;
  z-index:10; opacity:0; transition:opacity 0.3s; pointer-events:none;
}
#mainImageContainer:hover .zoom-hint { opacity:1; }

#mainImageContainer { border-radius:var(--radius-lg); overflow:hidden; cursor:zoom-in; }

/* =============================================
   HALFTONE & PATTERNS
   ============================================= */
.comic-halftone { position:relative; }
.comic-halftone::after {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(212,168,67,0.03) 1px,transparent 1px);
  background-size:16px 16px; pointer-events:none; z-index:1;
}
.comic-bg-dots {
  background-image:radial-gradient(circle,rgba(212,168,67,0.02) 1px,transparent 1px);
  background-size:24px 24px;
}
.animated-gradient-bg {
  background:linear-gradient(-45deg,rgba(212,168,67,0.04),rgba(46,174,123,0.04),rgba(240,208,96,0.02),rgba(34,197,94,0.02));
  background-size:400% 400%; animation:gradient-x 15s ease infinite;
}

/* =============================================
   URGENCY ELEMENTS
   ============================================= */
.urgency-banner {
  background:var(--brand-gradient); color:white;
  padding:6px 0; text-align:center;
  font-size:0.7rem; font-weight:800;
  letter-spacing:0.05em; overflow:hidden !important; position:relative;
  width:100%; max-width:100vw;
  height:32px; line-height:20px;
}
.urgency-banner.gold-green-banner {
  background:linear-gradient(135deg, #B8942E, #D4A843, #2EAE7B);
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
@media (max-width:640px) {
  .urgency-banner { padding:4px 0; font-size:0.6rem; height:24px; line-height:16px; }
}
.urgency-banner .scroll-text {
  display:inline-block; white-space:nowrap !important;
  width:max-content; min-width:100%;
  animation:scroll-left 25s linear infinite;
  word-break:keep-all; overflow-wrap:normal;
  line-height:inherit;
}

/* =============================================
   CONTACT ACTION BTNS
   ============================================= */
.contact-action-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:0.75rem;
  font-weight:800; font-size:0.85rem; color:white;
  transition:var(--transition); text-decoration:none;
}
.contact-action-btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.2); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:640px) {
  .gallery-arrow { width:32px; height:32px; font-size:10px; }
  .lightbox-nav { width:40px; height:40px; font-size:0.9rem; }
  .lightbox-close { width:40px; height:40px; font-size:1rem; }
  .lightbox-thumbnails { bottom:50px; }
  .lightbox-thumb { width:44px; height:33px; }
  .price-main { font-size:1rem; }
  .stat-number { font-size:1.5rem; }
  .comic-btn-sm { padding:8px 16px; font-size:0.75rem; gap:4px; flex-shrink:0; white-space:nowrap; min-width:0; }
  .section-title { font-size:1.25rem; }
  .float-social-btn { width:2.75rem; height:2.75rem; }
  /* Prevent horizontal overflow */
  html, body { overflow-x:hidden; max-width:100vw; }
  .filter-bar-mobile { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Fix contact/blog/accessory page headers on mobile */
  section[class*="pt-20"] { padding-top:5rem; }
  /* Price + button row: let them share space */
  .price-tag { max-width:50%; min-width:0; flex-shrink:1; overflow:hidden; }
  /* Make stat cards smaller */
  .stat-card { padding:1rem 0.5rem; }
  .stat-card .text-2xl { font-size:1.25rem; }
  /* Hero buttons mobile */
  .cartoon-btn-primary { padding:12px 20px; font-size:0.85rem; }
  .cartoon-btn-outline { padding:12px 20px; font-size:0.85rem; }
  /* Card padding tighter */
  .sale-card > .p-4, .sale-card > div:last-child { padding:0.75rem; }
  /* Spec tags smaller */
  .spec-tag { padding:3px 7px; font-size:10px; gap:3px; }
  /* Contact action buttons */
  .contact-action-btn { padding:10px 12px; font-size:0.8rem; gap:6px; }
  /* Trust cards */
  .trust-card { padding:1rem 0.75rem; }
  .trust-icon { width:44px; height:44px; font-size:1.25rem; margin-bottom:0.5rem; }
  /* Category cards */
  .category-overlay { padding:1rem; }
  /* Detail page specs */
  .spec-detail-tag { padding:8px 10px; gap:8px; }
  .spec-detail-tag .text-base { font-size:0.875rem; }
  /* Lightbox */
  .lightbox-content img { max-width:95vw; max-height:80vh; }
  /* Footer tighter */
  footer .grid { gap:1.25rem; }
  /* Blog prose */
  .prose { font-size:0.875rem; }
  /* Urgency banner */
  .urgency-banner { font-size:0.6rem; }
  /* Prevent long words from breaking layout */
  h1, h2, h3, h4, p, span, a { overflow-wrap:break-word; word-wrap:break-word; }
}

@media (max-width:480px) {
  /* Tighter section padding */
  section.px-4 { padding-left:0.75rem; padding-right:0.75rem; }
  /* Stat cards smaller */
  .stat-card { padding:0.75rem 0.375rem; }
  .stat-number { font-size:1.35rem; }
  /* Trust icons */
  .trust-icon { width:40px; height:40px; font-size:1.1rem; }
  .trust-card h3 { font-size:0.75rem; }
  .trust-card p { font-size:0.65rem; }
  /* Footer single column */
  footer .grid { grid-template-columns:1fr !important; }
  footer .col-span-2 { grid-column:span 1; }
  /* Pagination */
  .pagination-btn { width:32px; height:32px; font-size:0.7rem; }
  /* Contact cards */
  .contact-action-btn { font-size:0.75rem; padding:8px 10px; }
  /* Price tag */
  .price-tag { max-width:50%; }
  /* Section headings */
  .section-title { font-size:1.1rem; }
  .section-desc { font-size:0.75rem; }
  /* Card image height */
  .sale-card .h-48 { height:10rem; }
  .sale-card .h-52 { height:11rem; }
}

@media (max-width:380px) {
  .stat-number { font-size:1.15rem; }
  .stat-card .text-2xl { font-size:1rem; }
  .nav-pill { padding:6px 10px; font-size:0.7rem; }
  .hero-badge { padding:6px 12px; }
  .hero-badge span { font-size:0.7rem; }
  .cartoon-btn-primary { padding:10px 16px; font-size:0.78rem; }
  .cartoon-btn-outline { padding:10px 16px; font-size:0.78rem; }
  .price-main { font-size:0.85rem; }
  .comic-btn-sm { padding:7px 14px; font-size:0.7rem; }
  /* Price tag even more compact */
  .price-tag { max-width:48%; }
  /* Trust card text */
  .trust-card h3 { font-size:0.68rem; }
  .trust-card p { font-size:0.6rem; line-height:1.3; }
  /* Footer single column */
  footer .grid { grid-template-columns:1fr !important; }
  /* Contact cards smaller */
  .contact-action-btn { font-size:0.7rem; padding:8px 8px; gap:4px; }
  /* Section titles */
  .section-title { font-size:1rem; }
  /* Tighter padding overall */
  section.px-4 { padding-left:0.5rem; padding-right:0.5rem; }
}

/* Navbar scroll effect */
#navbar {
  border-bottom:1px solid rgba(0,0,0,0.03) !important;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s, background 0.3s;
  will-change:transform;
}
#navbar.scrolled { box-shadow:0 4px 20px rgba(0,0,0,0.06); }
.dark #navbar { border-bottom-color:rgba(255,255,255,0.04) !important; }

/* Scroll indicator */
.scroll-indicator {
  display:flex; align-items:center; gap:4px;
  padding:4px 10px; background:rgba(212,168,67,0.1);
  border-radius:20px; font-size:0.65rem; font-weight:700;
  color:var(--brand-primary);
}

/* Speed lines (hero) */
.manga-speed-lines {
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 49%,rgba(255,255,255,0.015) 49%,rgba(255,255,255,0.015) 51%,transparent 51%);
  pointer-events:none; z-index:1;
}
.manga-action-bg { position:relative; overflow:hidden; }

/* =============================================
   HERO BADGE & TEXT
   ============================================= */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.12);
  border-radius:9999px; color:white;
}
@media (max-width:640px) {
  .hero-badge { padding:6px 14px; gap:6px; }
  .hero-badge span { font-size:0.75rem; }
}
.hero-text-shadow { text-shadow:0 4px 30px rgba(0,0,0,0.5); }

/* Hero outline button fix for mobile visibility */
.cartoon-btn-outline.border-white\/30 {
  border-color:rgba(255,255,255,0.5) !important;
  backdrop-filter:blur(4px);
  background:rgba(255,255,255,0.08);
}
.cartoon-btn-outline.border-white\/30:hover {
  background:#fff;
  color:#1a1a2e;
  border-color:#fff !important;
}

/* =============================================
   FILTER SEARCH INPUT
   ============================================= */
.filter-search {
  padding:8px 14px; border-radius:9999px;
  font-size:0.75rem; font-weight:600;
  background:#f9fafb; border:2px solid #e5e7eb;
  outline:none; transition:var(--transition);
  width:140px;
}
.dark .filter-search { background:var(--brand-surface); border-color:#374151; color:#f3f4f6; }
.filter-search:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(212,168,67,0.1); width:180px; }
@media (min-width:640px) { .filter-search { width:180px; } .filter-search:focus { width:220px; } }

/* =============================================
   PAGINATION
   ============================================= */
.pagination-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:0.6rem;
  font-size:0.8rem; font-weight:800; color:#6b7280;
  background:#fff; border:1px solid #e5e7eb;
  transition:var(--transition); cursor:pointer;
}
.dark .pagination-btn { background:var(--brand-card); border-color:#374151; color:#d1d5db; }
.pagination-btn:hover { border-color:var(--brand-primary); color:var(--brand-primary); transform:translateY(-2px); }
.pagination-active {
  background:var(--brand-gradient) !important; color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 15px rgba(212,168,67,0.3);
}