/* category-navigation.css */

/* Main element styling - ensures it doesn't break layout */
main.site-main,
#main.site-main {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container styling */
.container-category-page {
  max-width: var(--bs-container-md);
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 40px); /* Responsive padding: min 20px, preferred 4vw, max 40px */

  /* 🔒 Προστασία flickering σε όλο το template */
  min-height: 500px;
}

.category-page-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
  min-height: 40px;
  }


/* Show-all button (mobile) */
.show-all-categories-button-wrapper {
  text-align: center;
  margin-bottom: 30px;
  min-height: 60px;
}
.show-all-btn {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  background-color: #4F7EFF;
  color: white;
  cursor: pointer;
}

/* 🎯 Grid Κατηγοριών */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  min-height: 360px;

  content-visibility: auto;
  contain-intrinsic-size: 800px; /* Εκτιμώμενο ύψος μέχρι να renderάρει */
}
@media (max-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .container-category-page {
    padding: var(--bs-spacing-6) var(--bs-spacing-4);
  }
  
  .category-grid {
    gap: 16px;
  }
}


/* 🖼️ Καρτέλες Κατηγοριών */
.category-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f8f8f8;
  transition: transform 0.2s ease;
}
.category-card:hover { transform: translateY(-4px); }
.category-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.category-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.category-card .overlay span {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* 🧲 Carousel προϊόντων */
.featured-products-section {
  margin-top: 60px;
  position: relative;
}
/* 🎯 Carousel wrapper */
.pns-carousel-wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}


/* 🎯 Carousel track (το εσωτερικό flex container) */
.pns-carousel-track {
display: flex;
gap: 20px;
padding: 0 10px; /* Προαιρετικό, για να μη κολλάνε τα items στον τοίχο */
}

/* 🎯 Carousel item default για desktop (4 ανά σειρά) */
.pns-carousel-item {
flex: 0 0 calc(25% - 20px);  /* 4 items με gap 20px */
max-width: calc(25% - 20px);
border: 1px solid #eee;
border-radius: 12px;
padding: 12px;
text-align: center;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: transform 0.2s ease;
scroll-snap-align: start;
}
.pns-carousel-item:hover {
transform: translateY(-4px);
}

/* ✅ Tablet view: 3 items */
@media (max-width: 1024px) {
.pns-carousel-item {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
}
}

/* ✅ Mobile view: 2 items */
@media (max-width: 768px) {
.pns-carousel-track {
  gap: 16px;
  padding: 0 8px;
}
.pns-carousel-item {
  flex: 0 0 calc(50% - 12px);
  max-width: calc(50% - 12px);
}
.carousel-nav {
  display: none;
}
}

/* ✅ Extra small mobile: 1 item (προαιρετικά) */
@media (max-width: 480px) {
.pns-carousel-item {
  flex: 0 0 100%;
  max-width: 100%;
}
}

/* 🔘 Carousel navigation buttons */
.carousel-nav {
background: #004dff;
border: none;
color: #fff;
font-size: 20px;
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
position: absolute;
top: 40%;
z-index: 10;
transition: background 0.2s ease;
}
.carousel-prev { left: -15px; }
.carousel-next { right: -15px; }
.carousel-nav:hover {
background: #052768;
}


/* 📱 Mobile drawer */
.all-categories-drawer {
  display: none; /* Αρχικά κρυφό */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80%;
  background: #fff;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 10001;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
}

.all-categories-drawer.active {
  display: block;
  transform: translateY(0%);
}


#allCategoriesDrawer {
  max-height: 60vh;         /* Σταθερό ύψος (π.χ. 60% του viewport) */
  overflow: hidden;         /* Κρύβει ό,τι περισσεύει */
  display: block;
}
#allCategoriesDrawer .drawer-content {
  height: 75vh;           /* Σταθερό ύψος */
  min-height: 350px;
  max-height: 75vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4F7EFF #e0e0e0;
  padding: 1em;
  box-sizing: border-box;
}
#allCategoriesDrawer .drawer-content a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #222;
  font-size: 15px;      /* Μικρότερα γράμματα */
  text-decoration: none;
  transition: background 0.15s;
}
#allCategoriesDrawer .drawer-content a:last-child {
  border-bottom: none;
}
#allCategoriesDrawer .drawer-content a:hover {
  background: #f5f8ff;
  color: #004dff;
}

/* Overlay σκοτείνιασμα */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10000;
  transition: opacity 0.2s;
  opacity: 0;
}
.drawer-overlay.active {
  display: block;
  opacity: 1;
}

/* Drawer */
.all-categories-drawer,
#allCategoriesDrawer {
  max-height: 85vh !important;
}
#allCategoriesDrawer .drawer-content {
  max-height: 75vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4F7EFF #e0e0e0;
  padding: 1em;
}
#allCategoriesDrawer .drawer-content::-webkit-scrollbar {
  width: 10px;
}
#allCategoriesDrawer .drawer-content::-webkit-scrollbar-thumb {
  background: #4F7EFF;
  border-radius: 8px;
}
#allCategoriesDrawer .drawer-content::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 8px;
}

.drawer-content {
  position: relative;
}

#categorySearchInput {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 16px;
  box-sizing: border-box;
}