@tailwind base;
@tailwind components;
@tailwind utilities;

/* Local Onest Font Faces */


@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest/Onest-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest/Onest-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest/Onest-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest/Onest-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



@layer base {
  /* Set default font weight to 300 */
  body {
    font-weight: 400;
  }

  /* Make media responsive to prevent horizontal overflow */
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  iframe {
    max-width: 100%;
    width: 100%;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-slate-100;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-sm;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400;
  }

  /* Dark mode scrollbar */
  .dark ::-webkit-scrollbar-track {
    @apply bg-dark-secondary;
  }

  .dark ::-webkit-scrollbar-thumb {
    @apply bg-dark-tertiary;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background-color: #555555;
  }

  /* Focus styles for keyboard navigation */
  button:focus,
  a:focus,
  input:focus,
  textarea:focus,
  select:focus {
    @apply outline-2 outline-slate-500 outline-offset-2;
  }

  /* Accessibility improvements */
  .sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .bg-gray-50 {
      @apply bg-white;
    }
    
    .dark .bg-gray-900 {
      @apply bg-black;
    }
  }

  /* Print styles */
  @media print {
    .no-print {
      @apply hidden;
    }
    
    body {
      @apply bg-white text-black;
    }
  }
}

@layer utilities {
  /* Line clamp utilities without plugin */
  .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;
  }
  /* Dark borders match app background */
  .dark .match-app-border {
    --tw-border-opacity: 1;
    border-color: rgb(34 34 34 / var(--tw-border-opacity));
  }

  /* SVG mask icon utility - color via bg-* classes */
  .icon {
    display: inline-block;
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor; /* fallback if bg-* not set */
  }

  /* Extra small icon size for chips etc. */
  .icon-xs { width: 0.75rem; height: 0.75rem; }

  /* Fallback: color external SVG via filter to blue-500 */
  .icon-blue {
    filter: brightness(0) saturate(100%) invert(39%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%);
  }
}

/* Articles list: enforce perfectly circular thumbnails */
.article-list-thumb {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
}
.article-list-thumb > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 9999px; /* safety */
}

/* Product gallery thumbnails and controls */
.thumb-btn {
  width: 84px; /* fixed width */
  height: 84px; /* fixed height */
  flex: 0 0 84px; /* prevent shrinking/growing in horizontal list */
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb; /* gray-200 */
  overflow: hidden;
  background-color: #ffffff;
  position: relative;
}
.dark .thumb-btn {
  border-color: rgb(51,51,51);
  background-color: transparent;
}
.thumb-btn:hover {
  border-color: #3B82F6; /* match active border color */
}
.thumb-btn:hover::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid #3B82F6;
  border-radius: 0.625rem;
  pointer-events: none;
}
.thumb-active {
  border-color: #3B82F6;
}
.thumb-active::before {
  content: "";
  position: absolute;
  inset: -3px; /* extend outside to avoid being clipped */
  border: 2px solid #3B82F6; /* primary-500 per request */
  border-radius: 0.625rem; /* slightly larger to follow rounded corners */
  pointer-events: none;
}
.thumbs-hide-scrollbar {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
.thumbs-hide-scrollbar::-webkit-scrollbar { display: none; } /* WebKit */

/* Breadcrumbs: horizontal scroll on mobile without global overflow */
.bread-scroll {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
.bread-scroll::-webkit-scrollbar { display: none; } /* WebKit */

/* Swipe/drag affordance */
#product-thumbs { touch-action: pan-x; cursor: grab; -webkit-overflow-scrolling: touch; }
#product-thumbs.is-dragging { cursor: grabbing; }

/* Main image mobile nav buttons */
.main-nav-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem; /* rounded */
  background-color: rgba(0,0,0,0.6);
  color: #ffffff;
  align-items: center;
  justify-content: center;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-loading .thumb-img { opacity: 0; }
.thumb-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-btn:not(.thumb-loading) .thumb-spinner { display: none; }
.thumb-spinner::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: #3B82F6; /* primary */
  animation: thumb-spin 0.9s linear infinite;
}
@keyframes thumb-spin {
  to { transform: rotate(360deg); }
}
.thumb-prev,
.thumb-next {
  width: 36px;
  height: 36px;
  border-radius: 0.375rem; /* rounded-md */
  background-color: #ffffff;
  color: #374151; /* gray-700 */
  border: 1px solid #e5e7eb; /* gray-200 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.thumb-prev:hover, .thumb-next:hover {
  background-color: #f9fafb; /* gray-50 */
  border-color: #e5e7eb; /* keep subtle */
  color: #2563EB; /* hover to primary-700-ish to match cards */
}
.thumb-prev:focus, .thumb-next:focus { outline: 2px solid #3B82F6; outline-offset: 2px; }

/* Disabled state for gallery nav buttons */
.thumb-prev[disabled],
.thumb-next[disabled] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  color: #9ca3af; /* gray-400 */
}

/* Dark mode for gallery nav buttons */
.dark .thumb-prev,
.dark .thumb-next {
  background-color: transparent;
  color: #d1d5db; /* gray-300 */
  border-color: rgb(51,51,51);
}
.dark .thumb-prev:hover,
.dark .thumb-next:hover {
  background-color: #0b0b0b; /* dark hover akin to slate-800 */
  border-color: #4b5563; /* gray-600 */
  color: #60A5FA; /* primary-400 */
}

/* Disabled state for main image nav buttons */
.main-nav-btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Place prev/next as inline controls flanking the carousel (no overlay) */
.thumbs-wrapper { position: relative; }
.thumbs-wrapper #product-thumbs { padding-left: 0; padding-right: 0; flex: 1 1 auto; min-width: 0; }
.thumbs-wrapper .thumb-prev,
.thumbs-wrapper .thumb-next {
  position: static;
  transform: none;
  z-index: auto;
}

/* Immediate overrides for accent utilities until Tailwind rebuild */
.text-primary-600 { color: #3B82F6 !important; } /* map 600 -> blue-500 */
.text-primary-500 { color: #3B82F6 !important; }
.dark .text-primary-400 { color: #60A5FA !important; }
.hover\:text-primary-600:hover { color: #3B82F6 !important; }
.dark .hover\:text-primary-400:hover { color: #60A5FA !important; }
.bg-primary-600 { background-color: #3B82F6 !important; }
.hover\:bg-primary-700:hover { background-color: #2563EB !important; } /* hover step up to blue-600 */
.border-primary-600 { border-color: #3B82F6 !important; }
.hover\:border-primary-600:hover { border-color: #3B82F6 !important; }

/* Ultra-small devices: force single-column grids below 340px */
@media (max-width: 339px) {
  /* Apply to category tiles grid */
  .categories-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Apply to product cards grid */
  .products-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* Mobile gap adjustments for product grid */
@media (max-width: 639px) {
  /* Product page: price block layout on mobile */
  .product-price-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .product-order-btn { width: 100%; justify-content: center; }
  .product-price-info { margin-top: 0.5rem; margin-bottom: 0.25rem; }
  .products-grid {
    gap: 0.75rem; /* 12px, smaller than default 1.5rem */
  }
  /* Reduce paddings and font sizes on mobile */
  .categories-grid > a {
    padding: 0.375rem; /* ~p-1.5 */
  }
  .categories-grid > a > .relative {
    padding: 0.375rem; /* inner padding */
  }
  .categories-grid h4 {
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.25rem; /* mb-1 */
  }
  .categories-grid p {
    font-size: 0.75rem; /* text-xs */
  }

  .products-grid .p-4 {
    padding: 0.75rem; /* p-3 */
  }
  .products-grid h4 {
    font-size: 1rem; /* text-base */
    margin-bottom: 0.25rem; /* mb-1 */
  }
  /* Description and specs cards on product page */
  .product-mobile-card { padding: 1rem !important; font-size: 0.9em; }
  /* Smaller heading margins on mobile */
  .product-mobile-card > h2 { margin-bottom: 0.75rem !important; }
  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  /* Mobile heading sizes for plain tags inside prose */
  .prose h1 { font-size: 1.75rem; }
  .prose h2 { font-size: 1.375rem; }
  .prose h3 { font-size: 1.25rem; }
  .prose h4 { font-size: 1.125rem; }
  .prose h5 { font-size: 1rem; }
  .prose h6 { font-size: 0.9375rem; }
  /* Use thumbnail arrows like desktop; hide main image nav on mobile */
  .main-nav-btn { display: none; }
  .thumbs-wrapper .thumb-prev, .thumbs-wrapper .thumb-next { display: flex; }
}

/* Position main image nav buttons inside the image */
.main-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
}
.main-prev { left: 8px; }
.main-next { right: 8px; }

/* GLightbox controls more prominent */
.glightbox-container { z-index: 2147483647 !important; }
.glightbox-container .gbtn {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 999999 !important;
  border-radius: 0.5rem !important;
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
.glightbox-container .gbtn:hover {
  background: rgba(0,0,0,0.75) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.glightbox-container .gbtn svg {
  width: 22px !important;
  height: 22px !important;
}
/* Explicitly ensure built-in classes are visible */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* Ensure mobile heading overrides load AFTER base prose headings */
@media (max-width: 639px) {
  .prose h1 { font-size: 1.75rem !important; }
  .prose h2 { font-size: 1.375rem; }
  .prose h3 { font-size: 1.25rem; }
  .prose h4 { font-size: 1.125rem; }
  .prose h5 { font-size: 1rem; }
  .prose h6 { font-size: 0.9375rem; }
}

/* Gallery grid thumbnails: image should occupy ~1/3 of the tile */
/* Gallery tiles: image fills the tile */
#gallery-grid .gallery-tile { display: flex; position: relative; }
#gallery-grid .gallery-tile img { width: 100%; height: 100%; object-fit: cover; }
/* Match product spinner behavior for gallery tiles */
.gallery-tile:not(.thumb-loading) .thumb-spinner { display: none; }

/* Category tiles mirror gallery/product */
#category .cat-tile { position: relative; }
.#catalog .cat-tile { position: relative; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile:not(.thumb-loading) .thumb-spinner { display: none; }

/* Override Tailwind dark border gray-700 to app bg in dark mode */
.dark .border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(34 34 34 / var(--tw-border-opacity)) !important;
}



/* (removed quick-nav separators per request) */

/* Prose/Typography styles for description content */
.prose ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.prose ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.prose li {
  margin-bottom: 0;
  line-height: 1.75;
}

.prose div {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}

.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;
}

.prose strong {
  font-weight: 700;
  color: inherit;
}

/* Headings */
.prose h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.prose h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.prose h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.prose h5 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.prose h6 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Links */
.prose a {
  color: #3B82F6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.prose a:hover {
  color: #2563EB;
  text-decoration-thickness: 2px;
}

/* Tables */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #e5e7eb;
}

.prose th,
.prose td {
  padding: 0.75rem;
  text-align: left;
  border: 1px solid #e5e7eb;
  vertical-align: top;
}

.prose th {
  background-color: #f9fafb;
  font-weight: 700;
  color: #374151;
}

.prose tr:nth-child(even) {
  background-color: #f9fafb;
}

.prose tr:hover {
  background-color: #f3f4f6;
}

/* Dark mode support for prose elements */
.dark .prose ul,
.dark .prose ol,
.dark .prose li,
.dark .prose div,
.dark .prose p,
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
  color: inherit;
}

.dark .prose strong {
  color: inherit;
}

.dark .prose a {
  color: #60A5FA;
}

.dark .prose a:hover {
  color: #93C5FD;
}

/* Dark mode table styles */
.dark .prose table {
  border-color: #374151;
}

.dark .prose th,
.dark .prose td {
  border-color: #374151;
}

.dark .prose th {
  background-color: #374151;
  color: #f9fafb;
}

.dark .prose tr:nth-child(even) {
  background-color: #374151;
}

.dark .prose tr:hover {
  background-color: #4b5563;
}

/* Contact card icons styling */
.contact-icon {
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  margin-right: 0.75rem; /* mr-3 */
  margin-top: 0.125rem; /* mt-0.5 */
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-400 */
  transition: filter 0.2s ease;
}

.dark .contact-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-400 for dark mode */
}

/* Theme toggle icon styling */
#theme-icon {
  filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-700 */
  transition: filter 0.25s ease;
}

.dark #theme-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-300 */
}

/* Mobile menu icon styling - same as theme toggle */
#mobile-menu-open img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-700 */
  transition: filter 0.25s ease;
}

.dark #mobile-menu-open img {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-300 */
}

/* Close button icons styling - same as theme toggle and menu */
[data-contact-close] img,
#mobile-menu-close img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-700 */
  transition: filter 0.25s ease;
}

.dark [data-contact-close] img,
.dark #mobile-menu-close img {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-300 */
}

/* Dropdown expand icon styling - same as close buttons */
.group img[src*="expand_more"] {
  filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-700 */
  transition: filter 0.25s ease;
}

.dark .group img[src*="expand_more"] {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-300 */
}

/* Dropdown expand icon hover - blue color */
.group:hover img[src*="expand_more"] {
  filter: brightness(0) saturate(100%) invert(39%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%); /* primary-600 blue */
}

.dark .group:hover img[src*="expand_more"] {
  filter: brightness(0) saturate(100%) invert(60%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%); /* primary-400 blue for dark mode */
}

/* Product card "Подробнее" button styling */
.products-grid a[href="product.html"] {
  letter-spacing: 0.5px;
}

/* Product page icons styling */
/* Zoom in icon */
img[src*="zoom_in"] {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* white for overlay */
}

/* Check circle icons - green-700 color */
img[src*="check_circle"] {
  filter: brightness(0) saturate(100%) invert(25%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); /* green-700 */
}

/* Shopping cart icon - white color */
img[src*="shopping_cart"] {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* white */
}

/* Gallery navigation icons - same color as theme toggle */
.thumb-prev img,
.thumb-next img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-700 */
  transition: filter 0.25s ease;
}

.dark .thumb-prev img,
.dark .thumb-next img {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-300 */
}

/* Breadcrumb home icon - blue color */
.bread-scroll img[src*="home"] {
  filter: brightness(0) saturate(100%) invert(39%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%); /* primary-600 blue */
  transition: filter 0.25s ease;
}

.dark .bread-scroll img[src*="home"] {
  filter: brightness(0) saturate(100%) invert(60%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%); /* primary-400 blue for dark mode */
}

/* Pagination chevron icons - match button text color */
nav button img[src*="chevron_left"],
nav button img[src*="chevron_right"] {
  filter: brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-600 */
  transition: filter 0.25s ease;
}

.dark nav button img[src*="chevron_left"],
.dark nav button img[src*="chevron_right"] {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-300 */
}

/* Pagination chevron icons hover state */
nav button:hover img[src*="chevron_left"],
nav button:hover img[src*="chevron_right"] {
  filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-700 on hover */
}

.dark nav button:hover img[src*="chevron_left"],
.dark nav button:hover img[src*="chevron_right"] {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* gray-500 on hover in dark mode */
}

/* Stronger contrast for catalog/category pagination chevrons */
#catalog nav a img[src*="chevron_left"],
#catalog nav a img[src*="chevron_right"],
#catalog nav button img[src*="chevron_left"],
#catalog nav button img[src*="chevron_right"],
#category-pagination nav a img[src*="chevron_left"],
#category-pagination nav a img[src*="chevron_right"],
#category-pagination nav button img[src*="chevron_left"],
#category-pagination nav button img[src*="chevron_right"] {
  /* primary-600 blue */
  filter: brightness(0) saturate(100%) invert(39%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%);
}
#catalog nav a:hover img[src*="chevron_left"],
#catalog nav a:hover img[src*="chevron_right"],
#catalog nav button:hover img[src*="chevron_left"],
#catalog nav button:hover img[src*="chevron_right"],
#category-pagination nav a:hover img[src*="chevron_left"],
#category-pagination nav a:hover img[src*="chevron_right"],
#category-pagination nav button:hover img[src*="chevron_left"],
#category-pagination nav button:hover img[src*="chevron_right"] {
  /* primary-700 on hover */
  filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(1966%) hue-rotate(197deg) brightness(91%) contrast(101%);
}
.dark #catalog nav a img[src*="chevron_left"],
.dark #catalog nav a img[src*="chevron_right"],
.dark #catalog nav button img[src*="chevron_left"],
.dark #catalog nav button img[src*="chevron_right"],
.dark #category-pagination nav a img[src*="chevron_left"],
.dark #category-pagination nav a img[src*="chevron_right"],
.dark #category-pagination nav button img[src*="chevron_left"],
.dark #category-pagination nav button img[src*="chevron_right"] {
  /* primary-400 for dark backgrounds */
  filter: brightness(0) saturate(100%) invert(64%) sepia(50%) saturate(749%) hue-rotate(193deg) brightness(95%) contrast(100%);
}

/* Disabled pagination chevrons: darker gray for better visibility */
#catalog nav span img[src*="chevron_left"],
#catalog nav span img[src*="chevron_right"] {
  /* gray-700 */
  filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
.dark #catalog nav span img[src*="chevron_left"],
.dark #catalog nav span img[src*="chevron_right"] {
  /* gray-500 on dark */
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
/* Client-side category pager: disabled state uses opacity-50 class on button */
#category-pagination nav button.opacity-50 img[src*="chevron_left"],
#category-pagination nav button.opacity-50 img[src*="chevron_right"] {
  /* gray-600 */
  filter: brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
.dark #category-pagination nav button.opacity-50 img[src*="chevron_left"],
.dark #category-pagination nav button.opacity-50 img[src*="chevron_right"] {
  /* gray-500 */
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Breadcrumb chevron icons - primary-500 color */
.breadcrumb-chevron {
  filter: brightness(0) saturate(100%) invert(39%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%); /* primary-600 blue */
  transition: filter 0.25s ease;
}

.dark .breadcrumb-chevron {
  filter: brightness(0) saturate(100%) invert(60%) sepia(89%) saturate(1411%) hue-rotate(191deg) brightness(97%) contrast(95%); /* primary-400 blue for dark mode */
}

/* Compact filter toolbar styles */
.filter-toolbar {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 0;
  border-radius: 0.75rem;
  background-color: transparent;
  box-shadow: none;
}
.dark .filter-toolbar { background-color: transparent; border-color: transparent; box-shadow: none; }
.filter-dropdown {
  min-width: 10rem;
}
.filter-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.875rem;
}
.filter-dropdown[open] .filter-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dark .filter-summary {
  background-color: #111111;
  color: #d1d5db;
  border-color: rgb(51,51,51);
}
.filter-panel {
  margin-top: 0.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  min-width: 14rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.dark .filter-panel {
  background-color: #0b0b0b;
  border-color: rgb(51,51,51);
}
.filter-panel .max-h-60 { padding: 0.25rem 0.25rem 0.5rem 0.25rem; }
.filter-panel label { font-size: 0.875rem; }
.filter-panel input[type="checkbox"] { margin-right: 0.5rem; }

/* New filter components */
.filter-bar-row { display: flex; align-items: center; gap: 0.75rem; }
.filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #e5e7eb;
  background-color: #ffffff; color: #374151; font-size: 0.875rem;
}
.dark .filter-btn { background-color: #111111; color: #d1d5db; border-color: rgb(51,51,51); }
.filter-field { display: flex; flex-direction: column; gap: 0.375rem; }
.filter-label { font-size: 0.8125rem; color: #6b7280; }
.dark .filter-label { color: #9ca3af; }
.filter-inline { display: flex; align-items: center; gap: 0.5rem; }
.filter-input {
  display: inline-block; padding: 0.5rem 0.625rem; border-radius: 0.5rem; border: 1px solid #e5e7eb;
  background-color: #ffffff; color: #111827; font-size: 0.875rem;
}
.dark .filter-input { background-color: #0b0b0b; color: #e5e7eb; border-color: rgb(51,51,51); }
.filter-select { padding: 0.5rem 0.625rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; background-color: #ffffff; font-size: 0.875rem; }
.dark .filter-select { background-color: #0b0b0b; color: #e5e7eb; border-color: rgb(51,51,51); }
.filter-apply { padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: #3B82F6; color: #fff; font-size: 0.875rem; }
.filter-reset { padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; color: #374151; font-size: 0.875rem; }
.dark .filter-reset { border-color: rgb(51,51,51); color: #d1d5db; }
.filter-select-list { position: relative; }
.filter-select-scroll { max-height: 14rem; overflow-y: auto; padding-right: 0.25rem; }
.filter-check { display: flex; align-items: center; padding: 0.25rem 0.25rem; }

/* Drawer for mobile */
.filter-drawer { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 60; }
.filter-drawer-inner { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top-left-radius: 1rem; border-top-right-radius: 1rem; padding: 1rem; }
.dark .filter-drawer-inner { background: #0b0b0b; }
.filter-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }

@media (min-width: 640px) {
  .filter-toolbar { padding: 0.75rem 1rem; }
  /* Make filter fields one row with equal widths */
  .filter-toolbar .filter-dropdown { flex: 1 1 0; min-width: 0; }
  .filter-toolbar .filter-summary { width: 100%; justify-content: space-between; }
  .filter-toolbar .filter-panel { min-width: 100%; }
}
.filter-dropdown {
  position: relative;
  display: inline-block;
}
.filter-summary {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #374151; /* gray-700 */
  font-size: 0.875rem;
  cursor: pointer;
}
.filter-dropdown[open] .filter-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dark .filter-summary { background-color: #0b0b0b; color: #d1d5db; border-color: rgb(51,51,51); }
.filter-summary:hover { background-color: #f9fafb; }
.dark .filter-summary:hover { background-color: #111111; }
.filter-panel {
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  min-width: 14rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.dark .filter-panel { background-color: #0b0b0b; border-color: rgb(51,51,51); }
.filter-panel select { width: 100%; }

@media (max-width: 639px) {
  .filter-toolbar { gap: 0.375rem; }
  .filter-summary { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
  .filter-panel { min-width: 12rem; }
}