@charset "utf-8";
/* CSS Document */
.gallery-container {
            width: 100%;
            max-width: 1400px;
            margin: 20px auto;
	        background-color: #f7f8f9;
	        padding: 0 5px 0 5px;
        }

        .gallery-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0 0.5rem;
        }

        .gallery-title {
            font-size: 18px;
            font-weight: 700;
            color: #1a202c;
        }

        .gallery-nav {
            display: flex;
            gap: 1.0rem;
			padding: 3px;
			border-left: 1px solid #cccccc;
			border-right: 1px solid #cccccc;
			border-bottom: 1px solid #cccccc;
			border-radius: 0 0 20px 20px;
        }
        
        .swiper-button-prev,
        .swiper-button-next {
            position: static;
            margin: 0;
            width: 40px;
            height: 40px;
            background-color: #ffffff;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .swiper-button-prev:hover,
        .swiper-button-next:hover {
             background-color: #f7fafc;
        }

        .swiper-button-prev::after,
        .swiper-button-next::after {
            font-size: 18px;
            font-weight: 900;
            color: #4a5568;
        }
        
        .swiper-button-disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .swiper { /* Swiper-ის კონტეინერის ზოგადი კლასი */
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .swiper-wrapper {
             padding: 0.5rem 0;
        }

        .swiper-slide {
            width: auto;
        }

        .card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            text-decoration: none;
            color: inherit;
            display: block;
			border: 1px solid #f1f1f1;
        }
		.card a{
            text-decoration: none;
		}

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
        }
        
        .tag-card {
            padding: 0.75rem 1.5rem;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid #e2e8f0;
            color: #2d3748;
            white-space: nowrap;
        }

        .tag-card.add-btn {
            background-color: #38a169;
            color: white;
            border-color: #38a169;
            font-weight: 700;
        }
        
        .product-card.swiper-slide {
            width: 220px;
			border: 0 solid red;
        }

        .product-card {
            overflow: hidden;
        }
        
        .product-card-img-wrapper {
            width: 100%;
            height: 100px;
            overflow: hidden;
        }

        .product-card-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .product-card:hover .product-card-img-wrapper img {
            transform: scale(1.05);
        }
        
        .product-card-content {
            padding: 1rem;
			height: 75px;
			color: #333333;
			text-align: center;
        }

        .product-card-title {
            font-weight: 700;
            color: #2d3748;
            font-size: 14px; 
        }
		.button {
		  position: relative; /* აუცილებელია შიდა აბსოლუტური ელემენტისთვის */
		  display: inline-block; /* დამატებულია <a> ტეგთან თავსებადობისთვის */
		  background-color: #f1f1f1;
		  border: 1px solid #CCCCCC;
		  font-size: 16px; /* შრიფტი მორგებულია გრძელ ტექსტზე */
		  color: #333333;
		  margin: 5px;
		  padding: 8px;
		  width: 200px; /* სიგანე გაზრდილია ტექსტისთვის */
		  text-align: center;
		  transition-duration: 0.4s;
		  text-decoration: none; /* აშორებს ლინკის ხაზგასმას */
		  overflow: hidden; /* მალავს ეფექტს ღილაკის ჩარჩოს გარეთ */
		  cursor: pointer;
		  border-radius: 8px; /* დამატებულია მომრგვალებული კუთხეებისთვის */
		}

		/* :after ქმნის ფსევდო-ელემენტს, რომელიც არის ჩვენი ანიმაცია */
		.button:after {
		  content: "";
		  background: #f1f1f1; /* ფერი შევცვალე უკეთესი კონტრასტისთვის */
		  display: block;
		  position: absolute;
		  padding-top: 300%;
		  padding-left: 350%;
		  margin-left: -20px !important;
		  margin-top: -120%;
		  opacity: 0;
		  transition: all 0.8s;
		  border-radius: 50%; /* დამატებულია, რომ ეფექტი იყოს წრიული */
		}

		/* :active ააქტიურებს ანიმაციას ღილაკზე დაჭერისას */
		.button:active:after {
		  padding: 0;
		  margin: 0;
		  opacity: 1;
		  transition: 0s; /* ანიმაცია იწყება მომენტალურად */
		}