/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require cookie_banner
 */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pagination a, .pagination span.page.current {
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
}

.pagination a {
  color: #3b82f6;
}
.pagination a:hover {
  background-color: #eff6ff;
}

.pagination span.page.current {
  background-color: #3b82f6;
  color: #fff;
  font-weight: 600;
}


/* Prevent layout shifts in main container */
main.container {
  min-height: 60vh; /* Ensure minimum height to prevent shifts */
  /* Critical mobile optimizations */
  will-change: transform;
  content-visibility: auto;
  contain-intrinsic-size: 0 1000px;
}

/* Reserve space for content loading to prevent layout shifts */
main.container.mx-auto.mt-21.flex-grow {
  contain: layout style size;
  min-height: calc(100vh - 280px); /* Account for navbar (112px) and footer (168px) */
  display: block; /* Ensure block layout */
  overflow: hidden; /* Prevent content overflow causing shifts */
  position: relative;
  transform: translateZ(0); /* Force hardware acceleration */
  backface-visibility: hidden;
}

/* Prevent layout shifts in flex containers */
.flex.items-center {
  min-height: 1.5rem; /* Prevent collapse during loading */
}

/* Specific navbar height to prevent shifts */
nav .flex.items-center {
  min-height: 2rem;
}

/* Mobile menu items stable height */
.mobile-menu .flex.items-center {
  min-height: 2.5rem;
}

/* Trust seal and external images - prevent layout shifts */
img[src*="positivessl.com"] {
  display: block !important;
  width: 167px !important;
  height: 42px !important;
  max-width: none !important; /* Override any responsive image CSS */
  object-fit: contain;
}

/* Ensure all images have explicit dimensions to prevent layout shifts */
img:not([width]):not([height]) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Force layout stability for carousel images */
.best-selling-carousel img {
  width: 100% !important;
  height: 288px !important; /* 18rem = 288px */
  object-fit: cover;
}

/* Social media icons in footer - prevent layout shifts */
.fa-facebook, .fa-instagram, .fa-pinterest {
  width: 32px;
  height: 32px;
  display: inline-block;
}

.fa-cookie-bite {
  width: 12px;
  height: 12px;
  display: inline-block;
}

/* Mobile menu performance optimizations */
@media (max-width: 768px) {
  /* Prevent mobile menu from causing layout shifts */
  [data-mobile-menu-target="menu"] {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity, visibility;
  }
  
  /* Optimize mobile navbar height */
  nav .h-28 {
    height: 6rem; /* 96px - consistent navbar height */
    min-height: 6rem;
  }

  /* Mobile container optimizations */
  main.container {
    contain: layout style;
    transform: translateZ(0);
  }
  
  /* Fast mobile font loading */
  body {
    font-display: swap;
  }
}