body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f9f9f9; }
        
.nav-link { position: relative; padding-bottom: 4px; }
.nav-link::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: 0; left: 0; background-color: #ffffff; transform-origin: bottom right; transition: transform 0.3s ease-out; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }

.hero-slider { height: 75vh; min-height: 650px; width: 100%; position: relative; overflow: hidden; }
.hero-slide { overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.slide-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: brightness(0.8); transform: scale(1.15); transition: transform 10s ease-out; }
.swiper-slide-active .slide-background { transform: scale(1); }

.hero-content { position: relative; z-index: 10; }
.hero-element { opacity: 0; transform: translateY(20px); transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.swiper-slide-active .hero-element { opacity: 1; transform: translateY(0); }

.fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

.product-card { border: 1px solid transparent; transition: all 0.4s ease; cursor: pointer; }
.product-image-container { position: relative; overflow: hidden; }

.product-image {
    /* სიმაღლე ახლა ავტომატურია */
    width: 100%;
    height: auto; 
    aspect-ratio: 3 / 4; /* <-- ეს აიძულებს სურათს, შეინარჩუნოს პროპორცია (3:4) */
    object-fit: cover;
    transition: filter 0.4s ease, transform 0.4s ease;
}

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

/* პროდუქტის სურათიდან ნაცრისფერი ფილტრის მოშორება */
.product-image.shop-page {
    filter: none;
}

/* Grayscale-ის შენარჩუნება მხოლოდ მთავარ გვერდზე */
main:not(:has(.shop-page)) .product-image {
    filter: grayscale(100%);
}

main:not(:has(.shop-page)) .product-card:hover .product-image {
    filter: grayscale(0%);
}.product-card:hover .product-image { filter: grayscale(0%); transform: scale(1.05); }

.product-actions {
    position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
    background-color: white; padding: 0.75rem 1rem;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border: 1px solid #f3f4f6;
    opacity: 0; transform: translateY(15px); transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none; z-index: 10;
}

.product-card:hover .product-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }

.product-info-wrapper { transition: opacity 0.3s ease; }
.product-card:hover .product-info-wrapper { opacity: 0; }

.category-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; filter: brightness(0.95); }
.category-link:hover .category-image { transform: scale(1.03); }
.category-overlay-text { font-family: 'Inter', sans-serif; letter-spacing: 0.15em; color: white; font-weight: 400; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

.brand-logo { filter: grayscale(100%) brightness(0.7); transition: all 0.4s ease; }
.brand-logo:hover { filter: grayscale(0%) brightness(1); transform: scale(1.1); }

.campaign-scroller { display: flex; overflow-x: auto; scrollbar-width: none; }
.campaign-scroller::-webkit-scrollbar { display: none; }
.campaign-card {
    flex-shrink: 0;
    width: 500px;
    height: 280px;
}
.campaign-image { transition: transform 0.5s ease, filter 0.5s ease; filter: brightness(0.9); }
.campaign-card:hover .campaign-image { transform: scale(1.03); filter: brightness(1); }

/* --- ჩასვი ეს კოდი style.css-ის ბოლოში --- */

/* ლამაზი ანიმაცია ჰედერის კალათის რიცხვისთვის */
@keyframes pulse-animation {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.pulse {
  animation: pulse-animation 0.5s ease-in-out;
}

/* "დამატების" ღილაკის ჩატვირთვის ანიმაცია */
.loader {
  width: 18px;
  height: 18px;
  border: 2px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Custom CSS for Category Grid --- */

#custom-category-grid {
  display: grid;
  gap: 1rem; /* 16px დაშორება */
  
  /* 
    ვქმნით ვირტუალურ ბადეს. წარმოიდგინე 4 სვეტი და 4 რიგი.
    თითოეულ სახელს ვანიჭებთ ჩვენს სურათებს.
  */
  grid-template-areas:
    "main main item2 item3"
    "main main item2 item3"
    "main main item4 item5"
    "main main item4 item5";
}

/* თითოეული სურათის ბლოკის სტილი */
.category-item {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 0.5rem; /* მომრგვალებული კუთხეები */
}

.category-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* სურათი ავსებს ბლოკს და იჭრება პროპორციულად */
  transition: transform 0.4s ease;
}

.category-item:hover img {
  transform: scale(1.05); /* გადიდების ეფექტი */
}

.category-item .overlay-text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  text-shadow: 0 1px 5px rgba(0,0,0,0.8);
  pointer-events: none;
}

/* ვუთითებთ თითოეულ ელემენტს თავის ადგილს ბადეში */
#custom-category-grid .main-item    { grid-area: main; }
#custom-category-grid .sub-item-1   { grid-area: item2; }
#custom-category-grid .sub-item-2   { grid-area: item3; }
#custom-category-grid .sub-item-3   { grid-area: item4; }
#custom-category-grid .sub-item-4   { grid-area: item5; }

/* მობილური ვერსიის სტილები (როცა ეკრანი 768px-ზე ნაკლებია) */
@media (max-width: 768px) {
  #custom-category-grid {
    grid-template-areas:
      "main main"
      "main main"
      "item2 item3"
      "item4 item5";
  }
}