@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap);
/* Import Google Fonts */
:root {
  --primary-color: rgb(24, 62, 138);
  --primary-hover: rgb(24, 62, 138);
  --secondary-color: #9FA6B2;
  --success-color: #14A44D;
  --warning-color: #E4A11B;
  --danger-color: #DC4C64;
  --info-color: #0b5ed7;
  --light-color: #FBFBFB;
  --dark-color: #332D2D;
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  --border-color: #e0e0e0;
  --text-color: #333333;
  --text-muted: #666666;
  --bs-body-font-size: 15px !important;
  --bs-btn-font-size: 15px !important;
  --bs-dropdown-font-size: 15px !important;
  --bs-navbar-brand-font-size: 15px !important;
  --bs-navbar-toggler-font-size: 15px !important;
  --bs-pagination-font-size: 15px !important;
  --bs-badge-font-size: 15px !important;
  --bs-progress-font-size: 15px !important;
  --bs-toast-font-size: 15px !important;
  --bs-tooltip-font-size: 15px !important;
  --bs-popover-font-size: 15px !important;
  --bs-popover-header-font-size: 15px !important;
}

* {
  box-sizing: border-box;
}

html body * {
  font-size: 15px !important;
}

html body *::before,
html body *::after {
  font-size: 15px !important;
}

/* Target every possible element type */
html body div,
html body span,
html body p,
html body a,
html body button,
html body input,
html body textarea,
html body select,
html body option,
html body label,
html body li,
html body td,
html body th,
html body small,
html body code,
html body kbd,
html body pre,
html body samp,
html body sub,
html body sup {
  font-size: 15px !important;
}

/* Target all Bootstrap classes */
html body .small,
html body .initialism,
html body .figure-caption,
html body .form-text,
html body .valid-feedback,
html body .invalid-feedback,
html body .dropdown-header,
html body .btn-sm,
html body .btn-xs,
html body .form-control-sm,
html body .form-select-sm,
html body .input-group-sm *,
html body .badge,
html body .text-xs,
html body .text-sm,
html body .text-muted,
html body .tooltip,
html body .tooltip *,
html body .popover,
html body .popover *,
html body .breadcrumb,
html body .breadcrumb *,
html body .pagination,
html body .pagination *,
html body .page-link,
html body .dropdown-menu,
html body .dropdown-item,
html body .navbar,
html body .navbar *,
html body .nav-link,
html body .card,
html body .card *,
html body .card-title,
html body .card-text,
html body .table,
html body .table *,
html body .alert,
html body .alert *,
html body .modal,
html body .modal *,
html body .modal-title,
html body .modal-body {
  font-size: 15px !important;
}

/* Font-size utility classes */
html body .fs-1,
html body .fs-2,
html body .fs-3,
html body .fs-4,
html body .fs-5,
html body .fs-6 {
  font-size: 15px !important;
}

/* Headings - maintain hierarchy but minimum 15px */
html body h1, html body .h1 {
  font-size: 32px !important;
}

html body h2, html body .h2 {
  font-size: 28px !important;
}

html body h3, html body .h3 {
  font-size: 24px !important;
}

html body h4, html body .h4 {
  font-size: 20px !important;
}

html body h5, html body .h5 {
  font-size: 18px !important;
}

html body h6, html body .h6 {
  font-size: 15px !important;
}

/* Special cases - ensure minimum 15px */
html body .lead {
  font-size: max(15px, 1.25rem) !important;
}

html body .blockquote {
  font-size: max(15px, 1.25rem) !important;
}

html body .display-1,
html body .display-2,
html body .display-3,
html body .display-4,
html body .display-5,
html body .display-6 {
  font-size: max(15px, 2rem) !important;
}

html body legend {
  font-size: max(15px, 1.5rem) !important;
}

/* Media queries for all screen sizes */
@media (max-width: 1400px) {
  html body * {
    font-size: 15px !important;
  }
}
@media (max-width: 1200px) {
  html body * {
    font-size: 15px !important;
  }
}
@media (max-width: 992px) {
  html body * {
    font-size: 15px !important;
  }
}
@media (max-width: 768px) {
  html body * {
    font-size: 15px !important;
  }
}
@media (max-width: 576px) {
  html body * {
    font-size: 15px !important;
  }
}
/* Print styles */
@media print {
  html body * {
    font-size: 15px !important;
  }
}
/* ABSOLUTE LAST RESORT - Inline style level specificity */
* {
  font-size: 15px !important;
  min-font-size: 15px !important;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--white);
}

/* Header */
.top-header {
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 0;
  font-size: 16px !important;
}

.top-header .text-muted {
  color: var(--text-muted) !important;
}

/* Navigation */
.main-navbar {
  background-color: var(--white);
  border-bottom: 2px solid var(--border-color);
  padding: 12px 0;
}

/* Mobile Navigation Styles */
.navbar-toggler {
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 4px;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(32, 83, 184, 0.25);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
  }
  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }
  .search-form {
    margin-bottom: 1rem;
  }
}
/* Mobile Category Styles */
.list-group-item {
  border: 1px solid var(--border-color);
  font-size: 16px !important;
}

.list-group-item:hover {
  background-color: var(--gray-50);
}

.list-group-item .bi-chevron-down {
  transition: transform 0.2s ease;
}

.list-group-item[aria-expanded=true] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Mobile Action Buttons */
@media (max-width: 991.98px) {
  .mobile-action-buttons {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .mobile-action-buttons .btn {
    padding: 12px 8px;
    font-size: 16px !important;
    font-weight: 600;
    min-height: 48px;
  }
  .mobile-action-buttons .dropdown-menu {
    width: 100% !important;
    margin-top: 0.125rem;
  }
  .mobile-action-buttons .dropdown-item {
    padding: 12px 16px;
    font-size: 16px !important;
  }
  .mobile-action-buttons .dropdown-item i {
    width: 20px;
    text-align: center;
  }
}
.navbar-brand {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--primary-color) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.navbar-brand:hover {
  color: var(--primary-hover) !important;
}

.vetker-logo {
  height: 40px;
  width: auto;
  max-width: 100%;
  transition: all 0.3s ease;
}

.vetker-logo:hover {
  transform: scale(1.05);
}

.main-nav .nav-link {
  font-family: "Open Sans", sans-serif;
  font-size: 16px !important;
  font-weight: 600;
  color: var(--text-color) !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease;
  border-radius: 0;
  margin: 0 2px;
  min-height: 21px;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--primary-color) !important;
  background-color: var(--gray-50);
}

/* Category Navigation */
.category-navbar {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.category-navbar .nav-link {
  font-family: "Open Sans", sans-serif;
  font-size: 16px !important;
  font-weight: 600;
  color: var(--text-color) !important;
  padding: 12px 20px !important;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
  min-height: 21px;
}

.category-navbar .nav-link:hover {
  color: var(--primary-color) !important;
  background-color: var(--gray-50);
  border-bottom-color: var(--primary-color);
}

/* Mega Menu */
.mega-menu {
  min-width: 600px;
  padding: 20px;
  border: none;
  border-top: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 0px;
  margin-top: 0 !important;
}

.mega-menu .dropdown-header {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 16px !important;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
}

.mega-menu .dropdown-item {
  padding: 6px 12px;
  font-size: 16px !important;
  color: var(--text-color);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.mega-menu .dropdown-item:hover {
  background-color: var(--gray-50);
  color: var(--primary-color);
}

/* Search Form */
.search-form .form-control {
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  font-size: 16px !important;
}

.search-form .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(32, 83, 184, 0.1);
}

.search-form .btn {
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.search-form .btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* Cart Badge */
.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--danger-color);
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 16px !important;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
}

/* Hero Banner */
.hero-banner {
  background: var(--white);
  padding: 40px 0 20px;
}

.hero-banner .display-5 {
  font-weight: 700;
  color: var(--text-color);
  font-size: 2.5rem;
  line-height: 1.2;
}

.hero-banner .lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hero-banner .btn-lg {
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
}

/* Feature Icons */
.feature-icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Product Cards */
.product-card {
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  margin-bottom: 20px;
}

.product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

/* Unified Product Card Styles */
.product-card {
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: #dee2e6;
}

.product-image {
  height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.3s ease, opacity 0.2s ease;
  background-color: #f8f9fa;
  border-bottom: 1px solid #f1f3f4;
}

.product-card:hover .product-image {
  transform: scale(1.03);
}

.product-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.product-card .card-title a {
  color: #212529;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-card .card-title a:hover {
  color: rgb(24, 62, 138);
}

.product-card .card-text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #6c757d;
  margin-bottom: 1rem;
}

.product-price {
  font-weight: 600;
  color: rgb(24, 62, 138);
}

.product-price .original-price {
  font-weight: 400;
  color: #6c757d;
  text-decoration: line-through;
}

.price-protected {
  color: #6c757d;
  font-size: 0.875rem;
  font-style: italic;
  background-color: #f8f9fa;
  padding: 6px 12px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #e9ecef;
}

.product-card .btn {
  font-size: 0.875rem;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.product-card .btn-primary {
  background-color: rgb(24, 62, 138);
  border-color: rgb(24, 62, 138);
}

.product-card .btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  transform: translateY(-1px);
}

.product-card .btn-outline-secondary:hover {
  transform: translateY(-1px);
}

/* Badge Styles */
.product-card .badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

.product-card .badge.bg-danger {
  background-color: #dc3545 !important;
}

.product-card .badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

.product-card .badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

.badge.bg-info {
  background: linear-gradient(135deg, #0d6efd, #0b5ed7) !important;
  color: white !important;
  font-weight: 600;
  border: 1px solid #0d6efd;
}

.card-body {
  padding: 15px;
}

.card-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 16px !important;
  color: var(--text-color);
  margin-bottom: 8px;
  line-height: 1.3;
  min-height: 21px;
}

.card-text {
  font-family: "Open Sans", sans-serif;
  color: var(--text-muted);
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}

.product-price {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 10px;
  min-height: 21px;
}

.price-protected {
  font-family: "Open Sans", sans-serif;
  font-size: 16px !important;
  font-weight: 600;
  color: var(--text-muted);
  font-style: italic;
}

/* Star Rating */
.star-rating {
  color: #ffc107;
  font-size: 0.9rem;
}

.star-rating .bi-star-fill {
  color: #ffc107;
}

.star-rating .bi-star {
  color: var(--gray-300);
}

/* Price */
.price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
}

.original-price {
  font-size: 1rem;
  color: var(--gray-500);
  text-decoration: line-through;
}

/* Buttons */
.btn {
  font-family: "Open Sans", sans-serif;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 16px !important;
  padding: 8px 16px;
  min-height: 21px;
}

.btn-primary {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-outline-primary {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--primary-color);
  color: white;
}

.btn-outline-secondary {
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  background: transparent;
}

.btn-outline-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--text-color);
}

.btn-outline-light {
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
}

.btn-outline-secondary {
  border: 2px solid var(--gray-400);
  color: var(--gray-600);
}

.btn-outline-secondary:hover {
  background: var(--gray-400);
  color: white;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 16px !important;
}

.btn-lg {
  padding: 15px 30px;
  font-size: 1.1rem;
}

/* Category Cards */
.category-card {
  background: white;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid var(--gray-200);
  height: 100%;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  border-color: var(--primary-color);
}

.category-card h5 {
  color: var(--gray-800);
  font-weight: 600;
}

.category-card p {
  color: var(--gray-600);
}

/* Badges */
.badge {
  font-size: 16px !important;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
}

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

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

.badge.bg-warning {
  background: var(--warning-color) !important;
  color: var(--gray-800) !important;
}

/* Sections */
section {
  padding: 80px 0;
}

.bg-light {
  background-color: var(--gray-100) !important;
}

.bg-dark {
  background-color: var(--gray-900) !important;
}

/* Footer */
.footer {
  background: linear-gradient(180deg, #e9ecef 0%, #dee2e6 100%);
  color: #212529;
  padding: 60px 0 30px;
}

.footer-heading {
  color: #212529;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links li a,
.footer-contact li a,
.footer-contact li span {
  color: #495057;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.footer-links li a:hover,
.footer-contact li a:hover {
  color: #212529;
  padding-left: 5px;
}

.footer-contact li {
  display: flex;
  align-items: center;
  color: #495057;
}

.footer-contact li i {
  color: var(--primary-color);
  font-size: 1rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  color: #495057;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-3px);
}

.footer-divider {
  border-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.footer a {
  color: #495057;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #212529;
}

.footer h5 {
  color: #212529;
  font-weight: 600;
  margin-bottom: 1rem;
}

.developer-logo {
  transition: all 0.3s ease;
  opacity: 0.8;
}

.developer-logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 20px 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: var(--gray-500);
}

.breadcrumb-item a {
  color: var(--primary-color);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--gray-600);
}

/* Utilities */
.shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.shadow-sm {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.shadow-lg {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Search Bar */
.search-bar {
  max-width: 500px;
  margin: 0 auto;
}

.search-bar .form-control {
  border-radius: 50px;
  padding: 12px 20px;
  border: 2px solid var(--gray-200);
}

.search-bar .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

/* Toast Container */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1055;
}

.loading {
  opacity: 0.6;
  pointer-events: none;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Logo Responsive Styles */
.footer-logo {
  max-height: 50px;
  width: auto;
  transition: all 0.3s ease;
}

.footer-logo:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Alert Improvements */
.alert .flex-grow-1 {
  flex: 1;
  padding-right: 10px;
}

.alert .btn-close {
  flex-shrink: 0;
}

/* Responsive Design */
/* Fix layout issues between 1190px and 1400px */
@media (min-width: 1190px) and (max-width: 1400px) {
  /* Prevent category navigation from wrapping - reduce padding */
  .category-navbar .nav-link {
    padding: 12px 8px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
  /* Adjust category navbar container padding */
  .category-navbar .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Ensure category nav items fit */
  .category-navbar .navbar-nav {
    flex-wrap: nowrap;
  }
  /* Adjust search bar if needed */
  .search-form {
    max-width: 300px;
  }
}
/* Fix layout issues between 992px and 1192px */
@media (min-width: 992px) and (max-width: 1192px) {
  /* Adjust sidebar and content area for better balance */
  .container > .row > .col-lg-3 {
    flex: 0 0 28%;
    max-width: 28%;
  }
  .container > .row > .col-lg-9 {
    flex: 0 0 72%;
    max-width: 72%;
  }
  /* Adjust product grid - show 2 columns with better spacing */
  #products-container .col-lg-4,
  .products-container .col-lg-4,
  .product-item.col-lg-4 {
    flex: 0 0 48%;
    max-width: 48%;
    margin-bottom: 1.5rem;
  }
  /* Ensure proper spacing in containers */
  .main-navbar .container,
  .category-navbar .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Prevent category navigation from wrapping */
  .category-navbar .nav-link {
    padding: 12px 10px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
  /* Adjust search bar in header */
  .search-form {
    max-width: 280px;
  }
  .search-form .form-control {
    font-size: 14px !important;
    padding: 6px 12px;
  }
  /* Better spacing for product cards */
  .product-card {
    margin-bottom: 1.5rem;
  }
  /* Adjust header elements */
  .main-navbar .navbar-brand {
    margin-right: 15px;
  }
  .vetker-logo {
    height: 36px;
  }
}
@media (max-width: 992px) {
  .mega-menu {
    min-width: 95vw;
    left: 2.5vw !important;
    right: 2.5vw !important;
    transform: none !important;
  }
  .vetker-logo {
    height: 35px;
  }
  /* Hide category navbar on tablet and mobile */
  .category-navbar {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .hero-banner {
    padding: 30px 0 20px;
    text-align: center;
  }
  .hero-banner .display-5 {
    font-size: 2rem;
  }
  .top-header {
    padding: 4px 0;
    font-size: 14px !important;
  }
  .top-header small {
    font-size: 13px !important;
    line-height: 1.4;
  }
  .top-header .text-muted {
    font-size: 13px !important;
  }
  .top-header .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  .top-header a {
    font-size: 13px !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
  }
  .top-header .d-md-none {
    padding: 0;
  }
  .top-header .d-md-none .row {
    margin: 0;
  }
  .top-header .d-md-none .col-12 {
    padding: 1px 0;
  }
  .product-image {
    height: 180px;
  }
  section {
    padding: 40px 0;
  }
  /* Mobile mega menu adjustments */
  .mega-menu {
    position: static !important;
    width: 100% !important;
    min-width: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-shadow: none;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: 0;
  }
  .mega-menu .container {
    padding: 15px;
  }
  .mega-menu .row {
    margin: 0;
  }
  .mega-menu .col-md-6,
  .mega-menu .col-md-3 {
    padding: 0;
    margin-bottom: 15px;
  }
  .mega-menu .col-md-6:last-child,
  .mega-menu .col-md-3:last-child {
    margin-bottom: 0;
  }
}
/* Category Navigation Mobile Styles */
.category-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
}

/* Mega Menu Container Width Styles */
.category-navbar .dropdown {
  position: static;
}

.mega-menu {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 1200px !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  top: 100% !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-top: none !important;
}

.mega-menu .container {
  max-width: none;
  margin: 0;
  padding: 20px;
}

/* Remove any gap between navbar and dropdown */
.category-navbar .nav-link {
  margin-bottom: 0 !important;
  padding-bottom: 1rem !important;
}

.category-navbar .dropdown-menu {
  margin-top: 0 !important;
  border-top: none !important;
}

/* Ensure dropdown is flush with navbar */
.category-navbar .dropdown-toggle::after {
  margin-left: 0.5rem;
}

.category-navbar .dropdown:hover .dropdown-menu,
.category-navbar .dropdown.show .dropdown-menu {
  display: block;
  margin-top: 0 !important;
}

/* Ensure hover functionality works for clickable nav links */
.category-navbar .nav-item.dropdown:hover .dropdown-menu {
  display: block !important;
  margin-top: 1px !important;
}

/* Remove Bootstrap default dropdown spacing */
.dropdown-menu {
  --bs-dropdown-spacer: 0rem !important;
}

/* FORCE remove gap - aggressive CSS */
.category-navbar .dropdown .dropdown-menu {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  top: 100% !important;
}

/* Override Bootstrap dropdown positioning */
.category-navbar .dropdown-menu.show {
  margin-top: 0 !important;
  transform: translate3d(0px, 0px, 0px) !important;
}

/* Remove any spacing from nav items */
.category-navbar .nav-item {
  margin: 0 !important;
}

.category-navbar .nav-item .nav-link {
  margin: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Ensure mega menu is positioned correctly */
.category-navbar .nav-item.dropdown {
  position: static !important;
}

.category-navbar .dropdown-menu.mega-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  border-radius: 0 !important;
  /* Temporary debug - remove gap completely */
  margin-top: -1px !important;
}

/* Additional gap removal for category navbar */
.category-navbar {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.category-navbar .navbar-nav {
  margin-bottom: 0 !important;
}

/* Force dropdown to stick to navbar */
.category-navbar .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: white;
  z-index: 1000;
}

.dropdown-subheader {
  font-size: 0.9rem;
  font-weight: 600;
  color: #6c757d;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.category-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.category-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 767.98px) {
  .category-navbar .navbar-collapse {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .main-nav .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .main-nav .nav-item:last-child {
    border-bottom: none;
  }
  .main-nav .nav-link {
    padding: 15px 0;
    justify-content: space-between;
  }
  /* When any menu is open, lock body scroll */
  body.menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  /* Prevent horizontal scrolling on mobile */
  body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
  }
  html {
    overflow-x: hidden !important;
  }
  .container,
  .container-fluid {
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Make the navbar collapse container scrollable - show all content */
  /* Account for Safari bottom navigation bar on iOS */
  .navbar-collapse {
    /* Account for Safari bottom bar (44px) */
    max-height: calc(100vh - 100px - 44px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Extra padding at bottom to account for Safari bottom bar */
    padding-bottom: 64px;
  }
  /* Use dvh for better mobile support if available */
  @supports (height: 100dvh) {
    .navbar-collapse {
      max-height: calc(100dvh - 100px - 44px);
    }
  }
  /* Use safe area insets if available (iOS devices with notches) */
  @supports (padding: env(safe-area-inset-bottom)) {
    .navbar-collapse {
      padding-bottom: calc(20px + env(safe-area-inset-bottom, 44px));
    }
  }
  /* Prevent horizontal overflow in navbar */
  .navbar-collapse * {
    max-width: 100%;
    word-wrap: break-word;
    box-sizing: border-box;
  }
  /* Ensure all content inside navbar-collapse is visible */
  .navbar-collapse .d-lg-none {
    width: 100%;
    max-width: 100%;
  }
  /* Make sure mobile action buttons are visible at bottom */
  .navbar-collapse .mobile-action-buttons {
    margin-top: auto;
    padding-top: 15px;
  }
  /* Mobile collapse menu - remove max-height restriction, let parent handle scrolling */
  .list-group-item[data-bs-toggle=collapse] + .collapse {
    overflow: visible;
  }
  /* Make the collapse content visible */
  .list-group-item[data-bs-toggle=collapse] + .collapse .bg-light {
    overflow: visible;
  }
  /* Ensure list group doesn't cause horizontal scroll */
  .list-group {
    overflow-x: hidden;
    width: 100%;
  }
  /* Ensure mobile action buttons are visible and don't cause overflow */
  .mobile-action-buttons {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  .mobile-action-buttons .row {
    margin-left: 0;
    margin-right: 0;
  }
  .mobile-action-buttons .col-6 {
    padding-left: 4px;
    padding-right: 4px;
  }
  /* Arrow rotation animation - ensure arrows are always visible */
  .list-group-item[data-bs-toggle=collapse] .bi-chevron-down {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
  }
  /* Rotate arrow when expanded */
  .list-group-item[data-bs-toggle=collapse][aria-expanded=true] .bi-chevron-down,
  .list-group-item[data-bs-toggle=collapse]:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
  }
  /* Ensure collapsed state shows arrow pointing down */
  .list-group-item[data-bs-toggle=collapse].collapsed .bi-chevron-down,
  .list-group-item[data-bs-toggle=collapse][aria-expanded=false] .bi-chevron-down {
    transform: rotate(0deg);
  }
  /* Filter sidebar collapse chevron rotation */
  .card-header[data-bs-toggle=collapse] .bi-chevron-down {
    transition: transform 0.3s ease;
  }
  .card-header[data-bs-toggle=collapse][aria-expanded=true] .bi-chevron-down {
    transform: rotate(180deg);
  }
}
@media (max-width: 576px) {
  .hero-banner {
    padding: 20px 0;
  }
  .hero-banner .display-5 {
    font-size: 1.5rem;
  }
  .hero-banner .lead {
    font-size: 1rem;
  }
  .product-card .card-body {
    padding: 12px;
  }
  .product-card .card-title {
    font-size: 16px !important;
  }
  .product-card .card-text {
    font-size: 16px !important;
  }
  section {
    padding: 30px 0;
  }
  .vetker-logo {
    height: 30px;
  }
  .footer-logo {
    height: 30px;
  }
}
/* ULTIMATE 16px FONT-SIZE ENFORCEMENT - HIGHEST PRIORITY */
* {
  font-size: 16px !important;
}

html, body {
  font-size: 16px !important;
}

small, .small, code, kbd, pre, samp, sub, sup {
  font-size: 16px !important;
}

.btn, .form-control, .form-select, .badge, .nav-link, .dropdown-item {
  font-size: 16px !important;
}

h1, h2, h3, h4, h5, h6 {
  font-size: max(16px, 1.5rem) !important;
}