/* ==========================================================================
   GIFTIE THEME SYSTEM & CUSTOM STYLES
   Designed with web-design-engineer precision:
   - Theme A (Dark): "Warm Dark Collector's Loft" (Anime & LEGO Collector Boutique)
   - Theme B (Light): "Cozy Tokyo Collector Store" (Warm Alabaster Minimal)
   ========================================================================== */

@import url('https://fonts.cdnfonts.com/css/sf-pro-display');

/* ==================== OPTIMIZED RUSSIAN FONT (HIRRO SANS - WOFF2/TTF) ==================== */
@font-face {
  font-family: 'Hirro Sans';
  src: url('/fonts/HirroSans-Regular.woff2') format('woff2'),
       url('/fonts/HirroSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+0000-007F;
}

@font-face {
  font-family: 'Hirro Sans';
  src: url('/fonts/HirroSans-Medium.woff2') format('woff2'),
       url('/fonts/HirroSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+0000-007F;
}

@font-face {
  font-family: 'Hirro Sans';
  src: url('/fonts/HirroSans-Semibold.woff2') format('woff2'),
       url('/fonts/HirroSans-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+0000-007F;
}

@font-face {
  font-family: 'Hirro Sans';
  src: url('/fonts/HirroSans-Bold.woff2') format('woff2'),
       url('/fonts/HirroSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+0000-007F;
}

@font-face {
  font-family: 'Hirro Sans';
  src: url('/fonts/HirroSans-Black.woff2') format('woff2'),
       url('/fonts/HirroSans-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+0000-007F;
}

.font-hirrosans {
  font-family: 'Hirro Sans', sans-serif !important;
}

/* Fallback legacy fonts */
@font-face {
  font-family: 'Transita Modern';
  src: url('/fonts/TransitaModernSemibold.woff2') format('woff2'),
       url('/fonts/TransitaModernSemibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zenter';
  src: url('/fonts/Zenter-Black.woff2') format('woff2'),
       url('/fonts/Zenter-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.font-transita {
  font-family: 'Transita Modern', sans-serif !important;
}

.font-zenter {
  font-family: 'Zenter', sans-serif !important;
}

/* ==================== RUSSIAN LANGUAGE ONLY (HIRRO SANS + 0.3px LETTER-SPACING) ==================== */
html[lang="ru"],
html[lang="ru"] body,
body.lang-ru,
.lang-ru {
  font-family: 'Hirro Sans', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
  letter-spacing: 0.3px !important;
}

html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] h4,
html[lang="ru"] h5,
html[lang="ru"] h6,
html[lang="ru"] p,
html[lang="ru"] a,
html[lang="ru"] button,
html[lang="ru"] input,
html[lang="ru"] select,
html[lang="ru"] textarea,
html[lang="ru"] label,
html[lang="ru"] span:not([class*="font-mono"]):not([class*="countdown"]):not([class*="lucide"]),
html[lang="ru"] .font-sans,
html[lang="ru"] .font-serif,
html[lang="ru"] .font-display,
body.lang-ru h1,
body.lang-ru h2,
body.lang-ru h3,
body.lang-ru h4,
body.lang-ru h5,
body.lang-ru h6,
body.lang-ru p,
body.lang-ru a,
body.lang-ru button,
body.lang-ru input,
body.lang-ru select,
body.lang-ru textarea,
body.lang-ru label,
body.lang-ru span:not([class*="font-mono"]):not([class*="countdown"]):not([class*="lucide"]),
body.lang-ru .font-sans,
body.lang-ru .font-serif,
body.lang-ru .font-display {
  font-family: 'Hirro Sans', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
  letter-spacing: 0.3px !important;
}

/* ==================== UZBEK & ENGLISH LANGUAGES (PRESERVE CLEAN APPLE SF PRO) ==================== */
html[lang="uz"],
html[lang="uz"] body,
html[lang="uz"] h1,
html[lang="uz"] h2,
html[lang="uz"] h3,
html[lang="uz"] h4,
html[lang="uz"] h5,
html[lang="uz"] h6,
html[lang="uz"] p,
html[lang="uz"] a,
html[lang="uz"] button,
html[lang="uz"] input,
html[lang="uz"] select,
html[lang="uz"] textarea,
html[lang="uz"] label,
html[lang="uz"] span,
html[lang="uz"] .font-sans,
html[lang="uz"] .font-serif,
html[lang="uz"] .font-display,
html[lang="en"],
html[lang="en"] body,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] p,
html[lang="en"] a,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] label,
html[lang="en"] span,
html[lang="en"] .font-sans,
html[lang="en"] .font-serif,
html[lang="en"] .font-display {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", system-ui, sans-serif !important;
  letter-spacing: -0.015em !important;
}

/* Keep monospace, countdowns and code blocks strictly monospace */
html[lang="ru"] .font-mono,
html[lang="ru"] [class*="font-mono"],
html[lang="ru"] [class*="countdown"],
body.lang-ru .font-mono,
body.lang-ru [class*="font-mono"],
body.lang-ru [class*="countdown"],
html[lang="uz"] .font-mono,
html[lang="uz"] [class*="font-mono"],
html[lang="uz"] [class*="countdown"],
html[lang="en"] .font-mono,
html[lang="en"] [class*="font-mono"],
html[lang="en"] [class*="countdown"] {
  font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: normal !important;
}

/* ==================== THEME B: COZY TOKYO COLLECTOR STORE (LIGHT) ==================== */
:root {
  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Page & Surfaces */
  --bg-page: #FAF7F2;          /* Мягкий тёплый кремовый/алебастровый фон */
  --bg-surface: #FFFFFF;       /* Чисто белый фон карточек товаров */
  --bg-surface-subtle: #F5F2EC;/* Тёплый камень для инпутов, тегов и подложек */
  --bg-surface-elevated: #FFFFFF;

  /* Borders */
  --border-subtle: #E7E5E4;    /* Тонкая рамка цвета тёплого камня */
  --border-card: #E7E5E4;
  --border-hover: #D6D3D1;

  /* Typography */
  --text-primary: #1C1917;     /* Заголовки и цены: глубокий древесно-угольный */
  --text-secondary: #57534E;   /* Второстепенный текст */
  --text-muted: #78716C;       /* Подписи, дата */
  --text-walnut: #44403C;      /* Теги: цвет тёмного ореха */

  /* Buttons & Accents */
  --accent-btn: #EA580C;       /* Тёплый янтарно-оранжевый / терракотовый */
  --accent-btn-hover: #C2410C;
  --accent-btn-gradient: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
  --accent-btn-text: #FFFFFF;  /* Контрастный белый текст */

  /* Badges & Tags */
  --badge-bg: #EA580C;
  --badge-text: #FFFFFF;
  --tag-bg: #F5F2EC;
  --tag-text: #44403C;         /* Цвета тёмного ореха */

  /* Shadows & Radius */
  --card-radius: 16px;
  --card-shadow: 0 4px 20px -2px rgba(28, 25, 23, 0.05), 0 1px 3px rgba(28, 25, 23, 0.04);
  --card-hover-shadow: 0 16px 32px -8px rgba(28, 25, 23, 0.12), 0 2px 6px rgba(28, 25, 23, 0.06);

  /* Header & Navigation */
  --header-bg: rgba(250, 247, 242, 0.92);
  --header-border: #E7E5E4;
  --glass-bg: rgba(255, 255, 255, 0.88);

  /* Tailwind bridge */
  --brand-50: #FAF7F2;
  --brand-100: #F5F0E8;
  --brand-600: #EA580C;
  --brand-700: #C2410C;
}

/* ==================== THEME A: WARM DARK COLLECTOR'S LOFT (DARK) ==================== */
html.dark {
  color-scheme: dark;

  /* Page & Surfaces */
  --bg-page: #141210;          /* Основной фон страницы: глубокий тёплый графит */
  --bg-surface: #1F1B18;       /* Фон карточек товаров: тёмный эспрессо/орех */
  --bg-surface-subtle: #29231E;/* Подложка превью и инпутов */
  --bg-surface-elevated: #241E1A;

  /* Borders */
  --border-subtle: #332B25;    /* Тонкие полупрозрачные рамки цвета ореха */
  --border-card: #332B25;
  --border-hover: #F59E0B;     /* Мягкое тёплое свечение рамки цвета янтаря */

  /* Typography */
  --text-primary: #F5F5F4;     /* Основной текст: мягкий молочно-белый */
  --text-secondary: #A8A29E;   /* Второстепенный текст: тёплый серый */
  --text-muted: #78716C;
  --text-walnut: #F59E0B;      /* Золотисто-янтарный акцент тегов */

  /* Buttons & Accents */
  --accent-btn: #D97706;       /* Насыщенный тёплый янтарный */
  --accent-btn-hover: #B45309;
  --accent-btn-gradient: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  --accent-btn-text: #141210;  /* Контрастный тёмный текст на кнопках покупки */

  /* Badges & Tags */
  --badge-bg: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  --badge-text: #141210;
  --tag-bg: rgba(245, 158, 11, 0.12);
  --tag-text: #F59E0B;

  /* Shadows & Amber Glow */
  --card-radius: 16px;
  --card-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --card-hover-shadow: 0 0 0 1.5px #F59E0B, 0 0 24px -2px rgba(245, 158, 11, 0.35), 0 12px 36px -6px rgba(0, 0, 0, 0.85);

  /* Header & Navigation */
  --header-bg: rgba(20, 18, 16, 0.94);
  --header-border: #332B25;
  --glass-bg: rgba(31, 27, 24, 0.88);

  /* Tailwind bridge */
  --brand-50: #29231E;
  --brand-100: #332B25;
  --brand-600: #F59E0B;
  --brand-700: #D97706;
}

/* ==================== GLOBAL BASE RULES & STICKY FOOTER ==================== */
html {
  scroll-behavior: smooth;
  background-color: var(--bg-page);
  min-height: 100%;
  min-height: 100dvh;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
}

body {
  font-family: var(--font-apple);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.015em;
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s var(--ease-apple), color 0.3s var(--ease-apple);
  min-height: 100%;
  min-height: 100dvh;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

#clientView {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
}

#clientFooter {
  margin-top: auto !important;
  width: 100% !important;
}

/* ==================== USER PROFILE / AUTH BUTTON ==================== */
#userProfileBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem; /* 36px - exact match with h-9 header buttons */
  padding: 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.75rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.16);
  flex-shrink: 0;
  cursor: pointer;
}

/* Light Mode: Sleek Obsidian Black with warm gold icon chip */
html:not(.dark) #userProfileBtn {
  background: #141210;
  color: #FFFFFF;
  border: 1px solid #282420;
}
html:not(.dark) #userProfileBtn:hover {
  background: #000000;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

/* Dark Mode: Collector Warm Amber/Glow */
html.dark #userProfileBtn {
  background: rgba(245, 158, 11, 0.14);
  color: #FDE68A;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 12px -2px rgba(245, 158, 11, 0.2);
}
html.dark #userProfileBtn:hover {
  background: rgba(245, 158, 11, 0.24);
  border-color: rgba(245, 158, 11, 0.65);
  color: #FFFFFF;
  box-shadow: 0 0 16px 0 rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

#userProfileBtn:active {
  transform: scale(0.96);
}

header {
  background-color: var(--header-bg) !important;
  border-color: var(--header-border) !important;
  transition: background-color 0.3s var(--ease-apple), border-color 0.3s var(--ease-apple);
}

/* Hide scrollbar for category pills on mobile */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Glassmorphism styling */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Universal Smooth Micro-interactions */
button, a, input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-apple);
}

/* ==================== BENTO GRID & 75% PHOTO CARD SYSTEM ==================== */

/* Bento Grid Container */
.bento-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 768px) {
  .bento-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (min-width: 1280px) {
  .bento-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

/* Bento Card Geometry & Proportion */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--card-radius) !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform 0.35s var(--ease-apple), box-shadow 0.35s var(--ease-apple), border-color 0.35s var(--ease-apple), background-color 0.3s var(--ease-apple) !important;
  height: 380px !important;
}

@media (min-width: 640px) {
  .product-card {
    height: 420px !important;
  }
}
@media (min-width: 1024px) {
  .product-card {
    height: 440px !important;
  }
}

/* 75% Photo Section: edge-to-edge, zero margin/padding */
.product-card .bento-media {
  height: 75% !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--bg-surface-subtle) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-card .product-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s var(--ease-apple) !important;
}

.product-card:hover .product-img {
  transform: scale(1.06) !important;
}

/* 25% Info Section */
.product-card .bento-content {
  height: 25% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 10px 14px 12px 14px !important;
  background-color: var(--bg-surface) !important;
}

/* Bento Card Hover States */
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--card-hover-shadow) !important;
  border-color: var(--border-hover) !important;
}

/* Theme A (Warm Dark Loft): Amber glow border on card hover */
html.dark .product-card:hover {
  transform: translateY(-4px) !important;
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 1.5px #F59E0B, 0 0 24px -2px rgba(245, 158, 11, 0.35), 0 12px 36px -6px rgba(0, 0, 0, 0.85) !important;
}

/* Bento Typography */
.product-card-category {
  color: var(--tag-text) !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.product-card-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
.product-card:hover .product-card-title {
  color: var(--accent-btn) !important;
}

.product-card-price {
  color: var(--text-primary) !important;
  font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.product-card-oldprice {
  color: var(--text-muted) !important;
}

/* Bento Buy Button */
.product-card-buy-btn {
  background: var(--accent-btn-gradient) !important;
  color: var(--accent-btn-text) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px -1px rgba(234, 88, 12, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html.dark .product-card-buy-btn {
  box-shadow: 0 2px 12px -1px rgba(245, 158, 11, 0.45);
}
.product-card-buy-btn:hover {
  filter: brightness(1.08);
  transform: scale(1.03);
}

/* Bento Badge */
.product-badge {
  background: var(--badge-bg) !important;
  color: var(--badge-text) !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Details pill overlay */
.product-details-pill {
  background: var(--glass-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ==================== MODALS, DRAWERS & SYSTEM DIALOGS ==================== */

/* Backdrop overlay transition */
.modal-backdrop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s var(--ease-apple), visibility 0.32s;
  will-change: opacity, visibility;
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Left Offcanvas Drawer (Categories & Menu) */
.drawer-left {
  transform: translateX(-100%);
  transition: transform 0.36s var(--ease-apple);
  will-change: transform;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-right: 1px solid var(--border-subtle);
}
.modal-backdrop.active .drawer-left {
  transform: translateX(0);
}

/* Right Offcanvas Drawer (Cart) */
.drawer-right {
  transform: translateX(100%);
  transition: transform 0.36s var(--ease-apple);
  will-change: transform;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-left: 1px solid var(--border-subtle);
}
.modal-backdrop.active .drawer-right {
  transform: translateX(0);
}

/* Center Modal Dialog */
.modal-dialog {
  opacity: 0;
  transform: scale(0.92) translateY(12px);
  transition: opacity 0.28s var(--ease-apple), transform 0.3s var(--ease-apple);
  will-change: opacity, transform;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
}
.modal-backdrop.active .modal-dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Dropdown Menu */
.dropdown-menu-animated {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92) translateY(-8px);
  transform-origin: top right;
  transition: opacity 0.22s var(--ease-apple), transform 0.22s var(--ease-apple), visibility 0.22s;
  pointer-events: none;
  will-change: opacity, transform;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
.dropdown-menu-animated.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Smooth Slide Transitions for Hero & Reviews */
#reviewSlideContainer, #heroSlideContainer {
  transition: opacity 0.32s var(--ease-apple), transform 0.32s var(--ease-apple);
  will-change: opacity, transform;
}

/* Smooth Product Grid Transition */
#productGrid, #categoryProductsGrid {
  transition: opacity 0.25s var(--ease-apple);
}

/* ==================== FORM INPUTS & INTERACTIVE ELEMENTS ==================== */
input, select, textarea {
  background-color: var(--bg-surface-subtle) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-btn) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

/* Borders helper */
.border-subtle {
  border-color: var(--border-subtle) !important;
}

.bg-surface {
  background-color: var(--bg-surface) !important;
}

.bg-surface-subtle {
  background-color: var(--bg-surface-subtle) !important;
}

/* Chevron rotation */
#langChevron {
  transition: transform 0.25s var(--ease-apple);
}

/* Page Views & Transitions */
.page-view {
  animation: pageViewFadeIn 0.28s var(--ease-apple);
}

@keyframes pageViewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gallery Thumbnails Active State & Scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.gallery-thumb {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
}
.gallery-thumb:not(.active) {
  opacity: 0.75;
}
.gallery-thumb:not(.active):hover {
  opacity: 1;
}
.gallery-thumb.active {
  border-color: var(--accent-btn, #ea580c) !important;
  box-shadow: 0 0 0 2px var(--accent-btn, #ea580c);
  opacity: 1 !important;
}

/* Product Gallery Navigation Arrows */
#productGalleryPrevBtn,
#productGalleryNextBtn {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

#productGalleryPrevBtn:hover,
#productGalleryNextBtn:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

#productGalleryPrevBtn:active,
#productGalleryNextBtn:active {
  transform: translateY(-50%) scale(0.92) !important;
}

/* Star Rating Selector */
.star-btn {
  transition: transform 0.15s var(--ease-apple), color 0.15s;
}
.star-btn:hover {
  transform: scale(1.2);
}

/* ==================== COMPREHENSIVE DARK MODE OVERRIDES ==================== */
html.dark .bg-white {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

/* Match all stone-50 variations including opacities like .bg-stone-50/80 */
html.dark .bg-stone-50,
html.dark [class*="bg-stone-50"] {
  background-color: var(--bg-page) !important;
  border-color: var(--border-subtle) !important;
}

html.dark .bg-stone-100,
html.dark [class*="bg-stone-100"] {
  background-color: var(--bg-surface-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

html.dark .bg-stone-200,
html.dark [class*="bg-stone-200"] {
  background-color: #332B25 !important;
  color: var(--text-primary) !important;
}

html.dark .text-stone-900,
html.dark .text-stone-800 {
  color: var(--text-primary) !important;
}

html.dark .text-stone-700,
html.dark .text-stone-600 {
  color: var(--text-secondary) !important;
}

html.dark .text-stone-500,
html.dark .text-stone-400 {
  color: var(--text-muted) !important;
}

html.dark .border-stone-100,
html.dark .border-stone-200,
html.dark .border-stone-300,
html.dark [class*="border-stone-"] {
  border-color: var(--border-subtle) !important;
}

/* Form inputs, selects & textareas in dark mode */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
  background-color: var(--bg-surface-subtle) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

html.dark select option {
  background-color: #1F1B18 !important;
  color: #F5F5F4 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #78716C !important;
}

html.dark .hover\:bg-brand-50:hover,
html.dark .hover\:bg-stone-100:hover,
html.dark .hover\:bg-stone-50:hover {
  background-color: #29231E !important;
}

html.dark .hover\:text-brand-600:hover,
html.dark .hover\:text-brand-700:hover {
  color: #F59E0B !important;
}

html.dark .text-brand-600,
html.dark .text-brand-700,
html.dark .text-brand-800,
html.dark .text-brand-900 {
  color: #F59E0B !important;
}

html.dark .bg-brand-50 {
  background-color: #29231E !important;
  color: #F59E0B !important;
}

html.dark .bg-brand-600 {
  background: var(--accent-btn-gradient) !important;
  color: #141210 !important;
  font-weight: 800 !important;
}

html.dark .hover\:bg-brand-700:hover {
  filter: brightness(1.1) !important;
}

/* ==================== BADGE & ACCENT CONTRAST SYSTEM (DARK MODE) ==================== */
/* Amber / Gold / Pending */
html.dark [class*="bg-amber-50"],
html.dark [class*="bg-amber-100"] {
  background-color: rgba(217, 119, 6, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.38) !important;
  color: #FCD34D !important;
}
html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700 {
  color: #FCD34D !important;
}
html.dark .border-amber-300,
html.dark .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.38) !important;
}
html.dark .hover\:bg-amber-100:hover {
  background-color: rgba(217, 119, 6, 0.32) !important;
}

/* Rose / Red / Cancel / Delete */
html.dark [class*="bg-rose-50"],
html.dark [class*="bg-rose-100"] {
  background-color: rgba(225, 29, 72, 0.18) !important;
  border-color: rgba(244, 63, 94, 0.38) !important;
  color: #FDA4AF !important;
}
html.dark .text-rose-900,
html.dark .text-rose-800,
html.dark .text-rose-700,
html.dark .text-rose-600 {
  color: #FDA4AF !important;
}
html.dark .border-rose-300,
html.dark .border-rose-200 {
  border-color: rgba(244, 63, 94, 0.38) !important;
}
html.dark .hover\:bg-rose-100:hover {
  background-color: rgba(225, 29, 72, 0.32) !important;
}

/* Sky / Blue / Dispatch */
html.dark [class*="bg-sky-50"],
html.dark [class*="bg-sky-100"] {
  background-color: rgba(14, 165, 233, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
  color: #BAE6FD !important;
}
html.dark .text-sky-900,
html.dark .text-sky-800,
html.dark .text-sky-700,
html.dark .text-sky-600 {
  color: #7DD3FC !important;
}
html.dark .border-sky-300,
html.dark .border-sky-200 {
  border-color: rgba(56, 189, 248, 0.38) !important;
}

/* Indigo / Purple / Delivery */
html.dark [class*="bg-indigo-50"],
html.dark [class*="bg-indigo-100"] {
  background-color: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(129, 140, 248, 0.38) !important;
  color: #C7D2FE !important;
}
html.dark .text-indigo-900,
html.dark .text-indigo-800,
html.dark .text-indigo-700 {
  color: #A5B4FC !important;
}
html.dark .border-indigo-300,
html.dark .border-indigo-200 {
  border-color: rgba(129, 140, 248, 0.38) !important;
}

/* Emerald / Green / Delivered */
html.dark [class*="bg-emerald-50"],
html.dark [class*="bg-emerald-100"] {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(52, 211, 153, 0.38) !important;
  color: #A7F3D0 !important;
}
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700,
html.dark .text-emerald-600 {
  color: #6EE7B7 !important;
}
html.dark .border-emerald-300,
html.dark .border-emerald-200 {
  border-color: rgba(52, 211, 153, 0.38) !important;
}

/* Violet / Purple / Payment */
html.dark [class*="bg-violet-50"],
html.dark [class*="bg-violet-100"] {
  background-color: rgba(139, 92, 246, 0.18) !important;
  border-color: rgba(167, 139, 250, 0.38) !important;
  color: #DDD6FE !important;
}
html.dark .text-violet-900,
html.dark .text-violet-800,
html.dark .text-violet-700 {
  color: #C4B5FD !important;
}
html.dark .border-violet-300,
html.dark .border-violet-200 {
  border-color: rgba(167, 139, 250, 0.38) !important;
}

/* Orange / Warning */
html.dark [class*="bg-orange-50"],
html.dark [class*="bg-orange-100"] {
  background-color: rgba(249, 115, 22, 0.18) !important;
  border-color: rgba(251, 146, 60, 0.38) !important;
  color: #FED7AA !important;
}
html.dark .text-orange-900,
html.dark .text-orange-800,
html.dark .text-orange-700 {
  color: #FDBA74 !important;
}
html.dark .border-orange-300,
html.dark .border-orange-200 {
  border-color: rgba(251, 146, 60, 0.38) !important;
}

/* Admin order filter chips in dark mode */
html.dark .order-filter-chip:not(.bg-brand-600) {
  background-color: var(--bg-surface-subtle) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
}
html.dark .order-filter-chip:not(.bg-brand-600):hover {
  background-color: #332B25 !important;
  color: var(--text-primary) !important;
}

/* ==================== HIGH-CONTRAST DARK MODE ENHANCEMENTS ==================== */
html.dark .bg-white\/95,
html.dark .bg-white\/90,
html.dark .bg-white\/85,
html.dark .bg-white\/80 {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

html.dark [class*="bg-brand-50"] {
  background-color: #1F1B18 !important;
  border-color: #332B25 !important;
}

/* Quest & Achievement Cards in Dark Mode */
html.dark #profileQuestCard {
  background: linear-gradient(135deg, #1C1917 0%, #26201B 50%, #171412 100%) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.8), 0 0 20px -2px rgba(245, 158, 11, 0.12) !important;
}

html.dark #profileQuestCard h3 {
  color: #F5F5F4 !important;
}

html.dark #profileQuestCard p {
  color: #D6D3D1 !important;
}

html.dark #profileQuestCard #questStatusBadge {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #FBBF24 !important;
}

html.dark #profileQuestCard .bg-white\/90 {
  background-color: rgba(20, 18, 16, 0.92) !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark #profileQuestCard .text-stone-800 {
  color: #F5F5F4 !important;
}

html.dark #profileQuestCard #questRemainingInfo {
  color: #D6D3D1 !important;
}

html.dark #profileQuestCard #questRemainingInfo b,
html.dark #profileQuestCard #questRemainingInfo span {
  color: #F59E0B !important;
}

html.dark #profileQuestCard .bg-stone-100 {
  background-color: #241E1A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Offcanvas Drawer */
html.dark .drawer-left {
  background-color: #141210 !important;
  border-right-color: #332B25 !important;
}

/* Telegram Web App Theme Adaptation */
body.telegram-app {
  background-color: var(--tg-theme-bg-color, var(--bg-page));
  color: var(--tg-theme-text-color, var(--text-primary));
}

/* Carousel animations */
.announcement-slide {
  transition: opacity 0.4s var(--ease-apple), transform 0.4s var(--ease-apple);
}

/* ==================== 3D CYLINDER CONVEYOR / STEP-BY-STEP CAROUSEL ==================== */
.category-conveyor-row {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
}

.conveyor-stage {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overflow-x: clip !important;
  contain: paint !important;
  isolation: isolate !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  padding: 42px 0 38px 0;
  perspective: 1200px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(100% - 50px), transparent 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.conveyor-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  touch-action: pan-y !important;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform: translateX(0px);
}

@media (max-width: 639px) {
  .conveyor-track {
    gap: 16px;
  }
}

/* Base Conveyor Card */
.conveyor-card {
  width: 230px;
  min-width: 230px;
  max-width: 230px;
  flex-shrink: 0;
  border-radius: 1.5rem;
  background-color: #ffffff;
  border: 1px solid rgba(231, 229, 228, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.3, 1),
              opacity 0.65s ease,
              box-shadow 0.65s ease,
              border-color 0.65s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
  cursor: pointer;
  transform-origin: center center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat;
}

.conveyor-card img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (min-width: 640px) {
  .conveyor-card {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }
}

/* 1. CENTER CARD: Largest, front & center spotlight, glowing amber accent, full opacity */
.conveyor-card.card-center {
  transform: scale(1.08) translateY(-8px) translateZ(16px) !important;
  opacity: 1 !important;
  z-index: 30 !important;
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 22px 40px -10px rgba(0, 0, 0, 0.18), 0 0 28px rgba(245, 158, 11, 0.25) !important;
  filter: none !important;
  -webkit-filter: none !important;
  will-change: auto !important;
}

/* 2. SIDE CARDS: The 2 companion front cards — slightly smaller, prominent, framing the center */
.conveyor-card.card-side-left {
  transform: scale(0.96) translateY(-2px) rotateY(-4deg) translateZ(8px) !important;
  opacity: 0.95 !important;
  z-index: 20 !important;
  border-color: rgba(220, 218, 215, 0.9) !important;
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  filter: none !important;
  -webkit-filter: none !important;
  will-change: auto !important;
}

.conveyor-card.card-side-right {
  transform: scale(0.96) translateY(-2px) rotateY(4deg) translateZ(8px) !important;
  opacity: 0.95 !important;
  z-index: 20 !important;
  border-color: rgba(220, 218, 215, 0.9) !important;
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  filter: none !important;
  -webkit-filter: none !important;
  will-change: auto !important;
}

/* 3. OUTER CARDS: Noticeably smaller, stepping back into the background */
.conveyor-card.card-outer-left {
  transform: scale(0.80) translateY(4px) rotateY(-12deg) translateZ(-10px) !important;
  opacity: 0.52 !important;
  z-index: 8 !important;
  cursor: pointer;
  pointer-events: auto;
  filter: none !important;
}

.conveyor-card.card-outer-right {
  transform: scale(0.80) translateY(4px) rotateY(12deg) translateZ(-10px) !important;
  opacity: 0.52 !important;
  z-index: 8 !important;
  cursor: pointer;
  pointer-events: auto;
  filter: none !important;
}

/* 4. FAR CARDS: Deep background, smallest */
.conveyor-card.card-far {
  transform: scale(0.66) translateY(10px) rotateY(-18deg) translateZ(-25px) !important;
  opacity: 0.16 !important;
  z-index: 2 !important;
  pointer-events: none;
}

/* Hover on center card */
.conveyor-card.card-center:hover {
  transform: scale(1.10) translateY(-10px) translateZ(20px) !important;
  box-shadow: 0 26px 45px -10px rgba(0, 0, 0, 0.22), 0 0 32px rgba(245, 158, 11, 0.35) !important;
}

/* Hover on side cards (front trio) */
.conveyor-card.card-side-left:hover,
.conveyor-card.card-side-right:hover {
  transform: scale(0.99) translateY(-4px) translateZ(12px) !important;
  opacity: 1 !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.14), 0 0 20px rgba(245, 158, 11, 0.2) !important;
}

/* Hover on outer cards */
.conveyor-card.card-outer-left:hover,
.conveyor-card.card-outer-right:hover {
  opacity: 0.85 !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

/* Dark mode support */
html.dark .conveyor-card {
  background-color: #1c1917;
  border-color: #292524;
}

html.dark .conveyor-card.card-center {
  border-color: #f59e0b !important;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.7), 0 0 30px rgba(245, 158, 11, 0.35) !important;
}

html.dark .conveyor-card.card-side-left,
html.dark .conveyor-card.card-side-right {
  border-color: #383431 !important;
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.5) !important;
}

/* ==================== TELEGRAM AUTH & DIGIT BOXES ==================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tg-digit-box {
  caret-color: #0284c7;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-digit-box:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(14, 165, 233, 0.25);
}

/* ==================== CART HALO PULSE & FLYING PARTICLE ==================== */
@keyframes cartHaloPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.85);
  }
  30% {
    transform: scale(1.22);
    box-shadow: 0 0 0 16px rgba(245, 158, 11, 0.45);
  }
  60% {
    transform: scale(1.08);
    box-shadow: 0 0 0 26px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.cart-pulse-active {
  animation: cartHaloPulse 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes flyDotArc {
  0% {
    transform: translate(0, 0) scale(1.2);
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--fly-x) * 0.55), calc(var(--fly-y) * 0.45 - 50px)) scale(1.4);
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--fly-x), var(--fly-y)) scale(0.35);
    opacity: 0.15;
  }
}

.cart-flying-particle {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.9), 0 0 32px rgba(234, 88, 12, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  animation: flyDotArc 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}