/* ==========================================================================
   wstore.uz — CSS Design System (Tailwind 1:1 Pixel Match)
   ========================================================================== */

/* Google Fonts: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   Color Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: 11 11 15;            /* #0b0b0f */
  --surface: 21 21 28;       /* #15151c */
  --surface-2: 28 28 37;     /* #1c1c25 */
  --border: 38 38 49;        /* #262631 */
  --border-strong: 51 51 63; /* #33333f */
  --muted: 138 138 149;      /* #8a8a95 */
  --fg: 255 255 255;         /* #ffffff */
  --accent: 109 94 246;      /* #6d5ef6 */
  --accent-hover: 91 76 224; /* #5b4ce0 */
  --gold: 230 180 80;        /* #e6b450 */
  --green: 34 197 94;        /* #22c55e */
  --red: 239 68 68;          /* #ef4444 */

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-card: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: 255 255 255;
  --surface: 247 247 249;
  --surface-2: 238 238 242;
  --border: 226 226 232;
  --border-strong: 209 209 218;
  --muted: 107 107 118;
  --fg: 17 17 22;
  --accent: 109 94 246;
  --accent-hover: 91 76 224;
  --gold: 176 121 15;
}

/* --------------------------------------------------------------------------
   Base Elements
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

input, select, textarea {
  font-family: inherit;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--border));
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--border-strong));
}

/* --------------------------------------------------------------------------
   Color & Background Utility Classes
   -------------------------------------------------------------------------- */
.bg-bg { background-color: rgb(var(--bg)); }
.bg-surface { background-color: rgb(var(--surface)); }
.bg-surface-2 { background-color: rgb(var(--surface-2)); }
.bg-accent { background-color: rgb(var(--accent)); }
.bg-accent-hover:hover { background-color: rgb(var(--accent-hover)); }

.text-fg { color: rgb(var(--fg)); }
.text-muted { color: rgb(var(--muted)); }
.text-accent { color: rgb(var(--accent)); }
.text-gold { color: rgb(var(--gold)); }
.text-white { color: #ffffff; }

.border-border { border-color: rgb(var(--border)); }
.border-border-strong { border-color: rgb(var(--border-strong)); }
.border-accent { border-color: rgb(var(--accent)); }

/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-\[1400px\] { max-width: 1400px; }
.max-w-\[1100px\] { max-width: 1100px; }
.max-w-md { max-width: 28rem; }
.max-w-xs { max-width: 20rem; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0px; }

.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:hidden { display: none; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:gap-5 { gap: 1.25rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .sm\:text-base { font-size: 1rem; }
  .sm\:text-lg { font-size: 1.125rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:inline { display: inline; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-start { align-items: flex-start; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0 { top: 0; }
.top-16 { top: 4rem; }
.top-20 { top: 5rem; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-full { top: 100%; }
.top-1\/2 { top: 50%; }
.left-2 { left: 0.5rem; }
.top-2 { top: 0.5rem; }
.right-2 { right: 0.5rem; }
.bottom-2 { bottom: 0.5rem; }
.left-3 { left: 0.75rem; }
.left-3\.5 { left: 0.875rem; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-y-0 { transform: translateY(0); }
.translate-y-full { transform: translateY(100%); }
.translate-x-0 { transform: translateX(0); }
.translate-x-full { transform: translateX(100%); }

/* Sizing */
.w-full { width: 100%; }
.w-64 { width: 16rem; }
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.w-20 { width: 5rem; }
.h-16 { height: 4rem; }
.h-full { height: 100%; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }

/* Border Radius */
.rounded-card { border-radius: 14px; }
.rounded-2xl { border-radius: 1rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded { border-radius: 0.25rem; }
.rounded-full { border-radius: 9999px; }
.rounded-t-2xl { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }

/* Borders & Dividers */
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; border-style: solid; }
.border-dashed { border-style: dashed; }
.border-transparent { border-color: transparent; }

.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 1px;
  border-top-style: solid;
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--border));
}

/* Padding & Margins */
.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-12 { padding: 3rem; }

.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.pt-2\.5 { padding-top: 0.625rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-28 { padding-bottom: 7rem; }
.pl-9 { padding-left: 2.25rem; }
.pl-10 { padding-left: 2.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-auto { margin-top: auto; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }

/* Typography */
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-\[1\.7rem\] { font-size: 1.7rem; }
.text-\[2\.25rem\] { font-size: 2.25rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-relaxed { line-height: 1.625; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.whitespace-pre-line { white-space: pre-line; }

/* Backdrop, Shadows & Transitions */
.backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bg-bg\/70 { background-color: rgba(var(--bg), 0.7); }
.bg-bg\/80 { background-color: rgba(var(--bg), 0.8); }
.bg-bg\/90 { background-color: rgba(var(--bg), 0.9); }
.bg-bg\/95 { background-color: rgba(var(--bg), 0.95); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }

.transition { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.opacity-0 { opacity: 0; }
.opacity-70 { opacity: 0.7; }
.opacity-100 { opacity: 1; }

.hover\:border-border-strong:hover { border-color: rgb(var(--border-strong)); }
.hover\:border-accent:hover { border-color: rgb(var(--accent)); }
.hover\:bg-accent-hover:hover { background-color: rgb(var(--accent-hover)); }
.hover\:bg-surface-2:hover { background-color: rgb(var(--surface-2)); }
.hover\:text-fg:hover { color: rgb(var(--fg)); }
.hover\:text-accent:hover { color: rgb(var(--accent)); }
.hover\:text-red-400:hover { color: #f87171; }
.hover\:underline:hover { text-decoration: underline; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:bg-accent-hover { background-color: rgb(var(--accent-hover)); }

/* --------------------------------------------------------------------------
   Star Rating
   -------------------------------------------------------------------------- */
.star-filled {
  color: rgb(var(--gold));
  fill: rgb(var(--gold));
}
.star-empty {
  color: rgb(var(--border-strong));
}

/* --------------------------------------------------------------------------
   Product Card Component
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-card);
  transition: all 0.2s ease;
  overflow: hidden;
}
.product-card:hover {
  border-color: rgb(var(--border-strong));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.product-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: rgb(var(--surface-2));
  overflow: hidden;
}
.product-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card-image-wrap img {
  transform: scale(1.05);
}

.product-badge {
  background-color: rgb(var(--accent));
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}

.product-cat-pill {
  background-color: rgba(var(--bg), 0.7);
  border: 1px solid rgb(var(--border-strong));
  backdrop-filter: blur(8px);
  color: rgb(var(--muted));
}

.wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(var(--bg), 0.6);
  border: 1px solid rgb(var(--border-strong));
  backdrop-filter: blur(8px);
  color: rgb(var(--fg));
  transition: all 0.2s ease;
}
.wishlist-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}
.wishlist-btn.wishlisted,
.wishlist-btn.active {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
.wishlist-btn.wishlisted i,
.wishlist-btn.wishlisted svg,
.wishlist-btn.active i,
.wishlist-btn.active svg {
  fill: #ef4444 !important;
  color: #ef4444 !important;
}

/* --------------------------------------------------------------------------
   Filter Sidebar Components
   -------------------------------------------------------------------------- */
.sidebar-sticky-wrap {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-sticky-wrap::-webkit-scrollbar {
  display: none;
}

.sidebar-section {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid rgb(var(--border));
}
.sidebar-section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.sidebar-sec-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--muted));
  margin-bottom: 0.75rem;
}
.sidebar-sec-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background-color: rgba(var(--accent), 0.6);
}

.currency-btn {
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--border-strong));
  background-color: rgb(var(--surface-2));
  color: rgb(var(--muted));
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.5rem;
  transition: all 0.15s ease;
  text-align: center;
}
.currency-btn:hover {
  color: rgb(var(--fg));
  border-color: rgb(var(--border-strong));
}
.currency-btn.active {
  background-color: rgb(var(--accent)) !important;
  border-color: rgb(var(--accent)) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(var(--accent), 0.35);
}

.filter-radio-item,
.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-radio-item:hover,
.filter-checkbox-item:hover {
  background-color: rgb(var(--surface-2));
  color: rgb(var(--fg));
}
.filter-radio-item input[type="radio"],
.filter-checkbox-item input[type="checkbox"] {
  accent-color: rgb(var(--accent));
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.tech-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background-color: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border));
  color: rgb(var(--muted));
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tech-tag-pill:hover,
.tech-tag-pill.active {
  background-color: rgb(var(--accent));
  border-color: rgb(var(--accent));
  color: #ffffff;
}

.subcat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  color: rgb(var(--muted));
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.subcat-chip:hover {
  color: rgb(var(--fg));
  border-color: rgb(var(--border-strong));
}
.subcat-chip.active {
  background-color: rgb(var(--accent));
  border-color: rgb(var(--accent));
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Highlights Scrollers
   -------------------------------------------------------------------------- */
.highlight-scroller {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.highlight-scroller::-webkit-scrollbar {
  display: none;
}

.slider-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgb(var(--border-strong));
  background-color: rgb(var(--surface));
  color: rgb(var(--fg));
  transition: all 0.15s ease;
}
.slider-arrow-btn:hover {
  border-color: rgb(var(--accent));
  color: rgb(var(--accent));
}

/* --------------------------------------------------------------------------
   Live Search Dropdown
   -------------------------------------------------------------------------- */
.live-search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--surface));
  padding: 0.375rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  text-align: left;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.search-suggestion-item:hover {
  background-color: rgb(var(--surface-2));
}

/* --------------------------------------------------------------------------
   Navbar Dropdowns & Modals
   -------------------------------------------------------------------------- */
.lang-dropdown,
.account-dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 140px;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--surface));
  padding: 0.375rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  display: none;
}
.lang-dropdown.show,
.account-dropdown-panel.show {
  display: block;
}
.account-dropdown-panel {
  width: 220px;
}

.lang-opt,
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: rgb(var(--muted));
  text-align: left;
  transition: all 0.15s ease;
}
.lang-opt:hover,
.account-menu-item:hover {
  background-color: rgb(var(--surface-2));
  color: rgb(var(--fg));
}

.dropdown-divider {
  height: 1px;
  background-color: rgb(var(--border));
  margin: 0.375rem 0;
}

.avatar-circle-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--muted));
}

/* --------------------------------------------------------------------------
   Forms & Controls
   -------------------------------------------------------------------------- */
input[type="text"]:not(#desktopSearchInput):not(#mobileSearchInput),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  background-color: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: rgb(var(--fg));
  outline: none;
  transition: border-color 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgb(var(--accent));
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  margin-top: auto;
  border-top: 1px solid rgb(var(--border));
  background-color: rgb(var(--surface));
  padding: 2.5rem 0 2rem;
  color: rgb(var(--muted));
  font-size: 0.875rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   Alerts / Messages
   -------------------------------------------------------------------------- */
.messages-container {
  max-width: 1400px;
  margin: 1rem auto 0;
  padding: 0 1rem;
  width: 100%;
}
.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  border: 1px solid;
}
.alert-success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}
.alert-error, .alert-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.alert-warning {
  background: rgba(230, 180, 80, 0.12);
  border-color: rgba(230, 180, 80, 0.3);
  color: #fbbf24;
}
.alert-info {
  background: rgba(109, 94, 246, 0.12);
  border-color: rgba(109, 94, 246, 0.3);
  color: #a5b4fc;
}

/* ==========================================================================
   YETISHMAYOTGAN KLASSLAR — shablonlarda ishlatilgan, lekin aniqlanmagan edi
   (audit: 73 ta klass). Quyida ikki guruh: komponentlar va utility'lar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tugmalar (.btn) — 9 ta shablonda ishlatiladi, hech biri stilga ega emasdi
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background-color: rgb(var(--accent));
  border-color: rgb(var(--accent));
  color: #ffffff;
}
.btn-primary:hover {
  background-color: rgb(var(--accent-hover));
  border-color: rgb(var(--accent-hover));
}

.btn-secondary {
  background-color: rgb(var(--surface-2));
  border-color: rgb(var(--border));
  color: rgb(var(--fg));
}
.btn-secondary:hover {
  border-color: rgb(var(--border-strong));
  background-color: rgb(var(--surface));
}

/* "Google bilan kirish" — Google brend qo'llanmasiga ko'ra oq fon va
   qora matn. Qorong'i mavzuda ham aynan shunday qoladi: tugma tanish
   ko'rinishda bo'lishi foydalanuvchi ishonchi uchun muhim. */
.btn-google {
  background-color: #ffffff;
  border-color: #dadce0;
  color: #1f1f1f;
  font-weight: 600;
}
.btn-google:hover {
  background-color: #f4f4f6;
  border-color: #c6c8cc;
}
.btn-google svg {
  flex-shrink: 0;
}

/* Tugma bilan parol formasi orasidagi "yoki" ajratgichi */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.35rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--muted));
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgb(var(--border));
}

.btn-outline {
  background-color: transparent;
  border-color: rgb(var(--border-strong));
  color: rgb(var(--muted));
}
.btn-outline:hover {
  border-color: rgb(var(--accent));
  color: rgb(var(--fg));
}

.btn-sm {
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
  gap: 0.35rem;
}
.btn-lg {
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Kartalar (.card)
   -------------------------------------------------------------------------- */
.card {
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.card-hover {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  border-color: rgb(var(--border-strong));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Formalar — forms.py har bir widget'ga class="form-control" beradi
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgb(var(--fg));
}
.form-control {
  width: 100%;
  background-color: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: rgb(var(--fg));
  outline: none;
  transition: border-color 0.15s ease;
}
.form-control:focus {
  border-color: rgb(var(--accent));
}
/* fayl input'i umumiy input qoidasiga tushmaydi — alohida kerak */
input[type="file"].form-control {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
input[type="file"].form-control::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgb(var(--border-strong));
  background-color: rgb(var(--surface));
  color: rgb(var(--fg));
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.form-error {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #f87171;
}
.form-error ul { list-style: none; }

/* --------------------------------------------------------------------------
   Statistika kartalari (kabinet / sotuvchi paneli)
   -------------------------------------------------------------------------- */
.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-card);
  padding: 1.25rem 1.4rem;
  transition: border-color 0.2s ease;
}
a.stat-card:hover {
  border-color: rgb(var(--border-strong));
}
.stat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border));
}
.stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  color: rgb(var(--fg));
}
.stat-lbl {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: rgb(var(--muted));
}

/* --------------------------------------------------------------------------
   Kichik komponentlar
   -------------------------------------------------------------------------- */
.badge-tech {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 3px 9px;
  border-radius: 9999px;
  background-color: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border));
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--muted));
  white-space: nowrap;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background-color: rgb(var(--accent));
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: rgb(var(--fg));
}

.navbar-header {
  position: sticky;
  top: 0;
  z-index: 30;
}

.product-card-link {
  display: block;
  color: inherit;
}

.product-price {
  letter-spacing: -0.01em;
}

.heart-icon {
  transition: fill 0.15s ease, color 0.15s ease;
}

.gallery-thumb-btn {
  display: block;
  padding: 0;
  cursor: pointer;
  background: none;
}
.gallery-thumb-btn.active {
  border-color: rgb(var(--accent));
  opacity: 1;
}

.loader-spinner {
  display: inline-block;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Yetishmayotgan utility'lar
   -------------------------------------------------------------------------- */
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.outline-none { outline: none; }
.pointer-events-none { pointer-events: none; }
.fill-current { fill: currentColor; }
.font-normal { font-weight: 400; }

.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.h-1 { height: 0.25rem; }
.min-w-5 { min-width: 1.25rem; }
.w-\[26px\] { width: 26px; }
.h-\[26px\] { height: 26px; }
.w-\[78\%\] { width: 78%; }
.max-w-\[130px\] { max-width: 130px; }
.max-h-\[85vh\] { max-height: 85vh; }

.ml-2 { margin-left: 0.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.pb-3 { padding-bottom: 0.75rem; }

.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-border-strong { color: rgb(var(--border-strong)); }
.text-fg\/70 { color: rgba(var(--fg), 0.7); }
.text-fg\/90 { color: rgba(var(--fg), 0.9); }

.bg-bg\/60 { background-color: rgba(var(--bg), 0.6); }
.bg-accent\/15 { background-color: rgba(var(--accent), 0.15); }
.bg-gold\/10 { background-color: rgba(var(--gold), 0.1); }
.bg-border-strong { background-color: rgb(var(--border-strong)); }
.bg-red-600 { background-color: #dc2626; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }

.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.shadow-black\/10 { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-black\/20 { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); }
.shadow-accent\/25 { box-shadow: 0 10px 15px -3px rgba(var(--accent), 0.25); }
.shadow-\[0_-8px_24px_rgba\(0\,0\,0\,0\.35\)\] { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); }

.divide-border\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--border), 0.6); }

.placeholder\:text-muted\/70::placeholder { color: rgba(var(--muted), 0.7); }

.first\:pt-0:first-child { padding-top: 0; }
.last\:pb-0:last-child { padding-bottom: 0; }

.\[scrollbar-width\:none\] { scrollbar-width: none; }
.\[scrollbar-width\:none\]::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .sm\:right-3 { right: 0.75rem; }
  .sm\:top-3 { top: 0.75rem; }
  .sm\:pb-12 { padding-bottom: 3rem; }
}

.footer-link {
  color: rgb(var(--muted));
  transition: color 0.15s ease;
}
.footer-link:hover {
  color: rgb(var(--fg));
}

/* ==========================================================================
   RESPONSIV TUZATISH — katta ekranlarda moslashuv
   Muammo: 1024px dan yuqorida hech qanday breakpoint yo'q edi, shuning uchun
   1920px li ekran ham 1024px kabi ko'rinardi: kontent 1400px da qotib qolib,
   har ikki chetda 255px dan bo'sh joy qolardi va to'r 3 ustunda turardi.
   ========================================================================== */

/* Sahifa kengligi — yagona manba. Ekran kattalashgani sari o'sadi,
   lekin cheksiz cho'zilmaydi (juda uzun qator o'qishni qiyinlashtiradi). */
:root {
  --page-max: 1400px;
  --page-pad: 1rem;
}
@media (min-width: 640px)  { :root { --page-pad: 1.5rem; } }
@media (min-width: 1600px) { :root { --page-max: 1560px; } }
@media (min-width: 1800px) { :root { --page-max: 1720px; } }
@media (min-width: 2200px) { :root { --page-max: 1880px; --page-pad: 2rem; } }

.page-shell {
  width: 100%;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* Footer va kabinet sahifalari navbar bilan bir xil chiziqda tursin */
.container {
  max-width: var(--page-max);
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.messages-container {
  max-width: var(--page-max);
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* --------------------------------------------------------------------------
   Katta ekran breakpointlari (ilgari umuman yo'q edi)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:gap-6 { gap: 1.5rem; }
}
@media (min-width: 1600px) {
  .\32xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Gorizontal slayder — o'ng chetdagi "kesilgan" ko'rinishni yumshatish
   Oxirgi karta chetda keskin kesilib, sahifa tugamagandek ko'rinardi.
   Mask yana kontent borligini bildiradi va chetni toza qiladi.
   -------------------------------------------------------------------------- */
.highlight-scroller {
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
}
/* Oxirigacha surilganda mask kerak emas */
.highlight-scroller.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.highlight-item-wrap {
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Slayder kartalari — asosiy to'r bilan bitta formuladan
   Ilgari kengliklar qo'lda yozilgan edi (168/220/248/268 px) va 1280px da
   slayder kartasi (248px) asosiy to'r kartasidan (216px) KATTA bo'lib qolardi.
   Endi ikkalasi bir xil ustun sonidan kelib chiqadi: slayder har doim
   "ustunlar + 0.5" ta karta ko'rsatadi — ya'ni keyingisi yarim ko'rinib,
   surish mumkinligini bildiradi, lekin kartasi to'rdagidan kattaroq emas.
   -------------------------------------------------------------------------- */
.highlight-scroller {
  --hs-gap: 0.75rem;   /* to'r: gap-3 */
  --hs-vis: 2.2;       /* to'r: grid-cols-2 */
  --hs-gaps: 2;
  gap: var(--hs-gap);
}
@media (min-width: 640px) {
  .highlight-scroller { --hs-gap: 1.25rem; }   /* to'r: sm:gap-5 */
}
@media (min-width: 1024px) {
  .highlight-scroller { --hs-vis: 3.5; --hs-gaps: 3; }   /* to'r: lg:grid-cols-3 */
}
@media (min-width: 1280px) {
  .highlight-scroller { --hs-gap: 1.5rem; --hs-vis: 4.5; --hs-gaps: 4; }  /* xl:grid-cols-4 */
}
@media (min-width: 1600px) {
  .highlight-scroller { --hs-vis: 5.5; --hs-gaps: 5; }   /* 2xl:grid-cols-5 */
}

.highlight-item-wrap {
  flex-shrink: 0;
  width: calc((100% - var(--hs-gaps) * var(--hs-gap)) / var(--hs-vis));
  /* Pastki chegara: tor telefon ekranida formula 128px beradi va kartadagi
     sarlavha/narx ikki qatorga bo'linib ketadi. 160px — kontent sig'adigan
     eng kichik kenglik. */
  min-width: 160px;
  scroll-snap-align: start;
}

/* Katalog vertikal ritmi */
.pb-14 { padding-bottom: 3.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
@media (min-width: 640px) {
  .sm\:pb-20 { padding-bottom: 5rem; }
}

/* --------------------------------------------------------------------------
   Mahsulot sahifasi — o'qish uchun qulay kenglik
   1100px da qotib turardi: 1920px ekranda galereya kichkina bo'lib,
   ikki yonida katta bo'sh joy qolardi.
   -------------------------------------------------------------------------- */
.detail-shell {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
@media (min-width: 1600px) { .detail-shell { max-width: 1240px; } }
@media (min-width: 1920px) { .detail-shell { max-width: 1320px; } }

/* Uzun matn qatori o'qishni qiyinlashtiradi — 72 belgida cheklanadi */
.prose-measure { max-width: 72ch; }

@media (min-width: 640px) { .sm\:pb-16 { padding-bottom: 4rem; } }

/* Til tanlash ro'yxati */
.lang-dropdown { min-width: 168px; }
.lang-opt {
  justify-content: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.lang-opt .lang-code {
  min-width: 26px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgb(var(--border-strong));
}
.lang-opt .lang-name { font-size: 0.875rem; }
.lang-opt.active { color: rgb(var(--fg)); background-color: rgb(var(--surface-2)); }
.lang-opt.active .lang-code { color: rgb(var(--accent)); }