/*
Theme Name: ZGS FavHouse
Theme URI: https://webproject.info
Author: Hennadii Zagornyi
Author URI: https://webproject.info
Description: Інтернет магазин FavHouse.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zgs-favhouse
*/

  :root {
            --primary-color1: #50c878;
            --primary-color: #7ed957;
            --secondary-color: #1a1a1a;
            --accent-gold: #c9a14a;
            --light-color: #fff;
            --gray-color: #f8f9fa;
            --dark-gray: #6c757d;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --glossy-black: #1a1a1a;
            --glossy-highlight: rgba(255, 255, 255, 0.2);
            --rating-color: #ffc107;
        }

        body {
            font-family: 'Roboto', sans-serif;
            color: var(--secondary-color);
            background-color: var(--light-color);
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }

        /* Header styles */
        .navbar {
            padding: 15px 0;
            background-color: #ffffff !important;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.4s ease;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(8px);
            animation: fadeInDown 0.6s ease forwards;
            opacity: 0;
        }

        .navbar.scrolled {
            padding: 10px 0;
            background-color: rgba(255, 255, 255, 0.95) !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            backdrop-filter: blur(12px);
        }

        .navbar-brand img {
            height: 40px;
            transition: all 0.3s ease;
        }

        .navbar.scrolled .navbar-brand img {
            height: 35px;
        }

        /* Search Box */
        .search-box {
            position: relative;
            max-width: 500px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .search-box input {
            padding-right: 50px;
            border-radius: 30px;
            border: 1px solid #ddd;
            height: 45px;
            font-family: 'Roboto', sans-serif;
            transition: all 0.3s ease;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .search-box input:focus {
            border-color: #7ED957;
            box-shadow: 0 0 0 0.25rem rgba(126, 217, 87, 0.25);
        }

        /* Search Button */
        .search-box button {
            position: absolute;
            right: 3px;
            top: 3px;
            background: #7ED957;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 18px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(126, 217, 87, 0.3);
        }

        .search-box button:hover {
            background: #6bbf4a;
            transform: scale(1.05);
        }

        /* User Actions */
        .user-actions .btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            transition: all 0.3s ease;
            font-size: 18px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .user-actions .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .user-actions .btn-primary {
            background: #7ED957;
            border: 1px solid #7ED957;
            color: white;
        }

        .user-actions .btn-outline-secondary {
            border: 1px solid #ddd;
            color: #555;
            background: white;
        }

        .user-actions .btn-outline-secondary:hover {
            background: rgba(126, 217, 87, 0.1);
            border-color: rgba(126, 217, 87, 0.3);
        }

        /* Cart Count */
        .cart-count, .wishlist-count, .compare-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4757;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }	
		 

        /* Animations */
        @keyframes fadeInDown {
            0% {
                transform: translateY(-30px);
                opacity: 0;
            }
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }

        /* Mobile Catalog Menu */
        .mobile-catalog-menu {
            position: fixed;
            top: 0;
            left: -100%;
            width: 80%;
            height: 100%;
            background-color: #fff;
            transition: all 0.3s ease;
            z-index: 1001;
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
            padding: 20px;
            overflow-y: auto;
        }

        .mobile-catalog-menu.active {
            left: 0;
        }

        .mobile-catalog-menu-close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            cursor: pointer;
        }

        .mobile-catalog-menu ul {
            list-style: none;
            padding: 0;
        }

        .mobile-catalog-menu ul li {
            margin-bottom: 15px;
        }

        .mobile-catalog-menu ul li a {
            text-decoration: none;
            color: #333;
            font-size: 18px;
        }

        .mobile-catalog-menu .main-category {
            color: #7ed957;
            font-weight: bold;
        }

        .mobile-catalog-menu .sub-category {
            margin-left: 15px;
        }

        .mobile-catalog-menu .sub-sub-category {
            margin-left: 30px;
            display: none;
        }

        .mobile-catalog-menu .sub-category.has-sub .toggle-sub {
            cursor: pointer;
        }

        .mobile-catalog-menu .sub-category.has-sub.active .sub-sub-category {
            display: block;
        }

        /* Dropdown Menu */
        .dropdown-menu {
            position: static;
            display: none;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 0;
            padding: 10px 0;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-menu a {
            color: #333;
            padding: 10px 20px;
            text-decoration: none;
            display: block;
        }

        .dropdown-menu a:hover {
            background-color: #f8f9fa;
        }
		


        /* Bottom Mobile Bar */
        .bottom-mobile-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .bottom-mobile-bar a {
            text-decoration: none;
            color: #333;
            font-size: 20px;
            text-align: center;
            position: relative;
        }

        .bottom-mobile-bar a i {
            display: block;
            margin-bottom: 5px;
        }

        .bottom-mobile-bar .count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4757;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

        /* Responsive adjustments */
        @media (max-width: 991.98px) {
            .navbar .container {
                flex-direction: row;
                align-items: center;
            }

            .navbar-brand {
                order: 1;
            }

            .navbar-toggler {
                order: 3;
            }

            .navbar-collapse {
                order: 4;
                width: 100%;
            }

            .search-box, .user-actions {
                display: none;
            }

            .catalog-btn {
                order: 2;
                margin-right: 10px;
            }
        }
		
		
		
        /* Glossy black buttons */
        .btn-glossy-black {
            background: linear-gradient(145deg, #1a1a1a, #000);
            border: 1px solid #333;
            box-shadow: inset 0 0 0 rgba(255,255,255,0.2);
            color: white;
            position: relative;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            font-family: 'PT Sans', sans-serif;
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 0.5px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .btn-glossy-black:hover {
            background: linear-gradient(145deg, #000, var(--glossy-black));
            transform: translateY(-2px);
			box-shadow: 0 0 15px rgba(201,161,74, 0.6);
        }

        .btn-glossy-black:active {
            transform: translateY(1px);
        }

        .btn-glossy-black::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
            opacity: 0.3;
            transition: var(--transition);
        }

        .btn-glossy-black:hover::before {
            opacity: 0.4;
        }

        .btn-glossy-black i {
            transition: var(--transition);
        }

        .btn-glossy-black:hover i {
            transform: scale(1.1);
        }

        /* Main banner styles */
        .main-banner {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://favhouse.com.ua/bgm.jpg') no-repeat center center;
            background-size: cover;
            color: white;
            padding: 120px 0;
            border-radius: 15px;
            margin-bottom: 50px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .main-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(126, 217, 87, 0.1) 0%, rgba(126, 217, 87, 0) 50%);
        }

        .main-banner h1 {
            font-size: 3rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            animation: fadeInDown 1s ease;
            font-family: 'PT Sans', sans-serif;
            font-weight: 700;
        }

        .main-banner p {
            font-size: 1.5rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            animation: fadeInUp 1s ease;
            font-family: 'Roboto', sans-serif;
        }

        .main-banner .btn {
            animation: fadeIn 1.5s ease;
            padding: 12px 30px;
            font-weight: 700;
            border-radius: 30px;
            transition: var(--transition);
            font-family: 'Raleway', sans-serif;
            font-size: 16px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .main-banner .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(126, 217, 87, 0.4);
        }

        /* Styled catalog button */
.btn-glossy-green {
  background: #7ED957;
  color: white;
  border: 1px solid #7ED957;
  position: relative;
  overflow: hidden;
  padding: 10px 24px;
  font-family: 'PT Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  border-radius: 30px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 12px rgba(126, 217, 87, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: all 0.35s ease;
  vertical-align: middle; /* Поднимает кнопку */
  top: -1px; /* Немного вверх */
}

.btn-glossy-green::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  opacity: 0.25;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.btn-glossy-green:hover::before {
  animation: shine 1.2s ease-in-out forwards;
  opacity: 0.4;
}

.btn-glossy-green:hover {
  background: #6ACA4C;
  box-shadow: 0 8px 22px rgba(126, 217, 87, 0.45), inset 0 0 3px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.btn-glossy-green:active {
  transform: translateY(1px);
}

.btn-glossy-green i {
  transition: transform 0.3s ease;
  margin-right: 8px;
  z-index: 2;
}

.btn-glossy-green:hover i {
  transform: scale(1.1);
}

/* Ripple Effect */
.btn-glossy-green .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.4);
  animation: ripple 0.6s linear;
  z-index: 0;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes shine {
  0% {
    top: -100%;
    left: -100%;
  }
  50% {
    top: 0%;
    left: 0%;
  }
  100% {
    top: 100%;
    left: 100%;
  }
}



/* неиспользуемая кнопка */
.catalog-btn {
  background-color: #3A5A40;
  color: white;
  font-family: var(--font-sans);
  font-weight: 600;
  border: 1px solid #CBA135;
  padding: 10px 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  font-size: 16px;
  text-shadow: none;
}

.catalog-btn:hover {
  background-color: #2E4730;
  border-color: #D3B15A;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.catalog-btn i {
  margin-right: 8px;
  font-size: 1.1rem;
  color: #CBA135;
}

.catalog-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  transition: all 0.4s ease;
}

.catalog-btn:hover::after {
  left: 0;
}

/* Хлебные крошки */
.breadcrumbs {
    font-size: 14px;
    margin-bottom: 20px;
}

.breadcrumbs a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs span.separator {
    margin: 0 6px;
    color: #888;
}

        /* Mega Menu styles - FIXED */
        .mega-dropdown {
            position: static;
        }

        .mega-dropdown .dropdown-menu {
            width: 100%;
            left: 0;
            right: 0;
            padding: 20px;
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 0;
            background: white;
        }

        .mega-dropdown .dropdown-menu .row {
            margin: 0;
        }

        .mega-dropdown .dropdown-menu .col-md-3 {
            padding: 0 15px;
            margin-bottom: 15px;
        }

        .mega-dropdown .dropdown-menu .col-md-3:not(:last-child) {
            border-right: 1px solid #eee;
        }

        .mega-dropdown .dropdown-menu h6 {
            color: var(--primary-color);
            margin-bottom: 15px;
            position: relative;
            padding-bottom: 5px;
            font-family: 'PT Sans', sans-serif;
            font-weight: 700;
            font-size: 18px;
        }

        .mega-dropdown .dropdown-menu h6::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 30px;
            height: 2px;
            background: var(--primary-color);
        }

        .mega-dropdown .dropdown-menu .list-unstyled {
            margin-bottom: 0;
        }

        .mega-dropdown .dropdown-menu .dropdown-item {
            padding: 8px 0;
            color: var(--secondary-color);
            font-family: 'Roboto', sans-serif;
            transition: var(--transition);
            font-size: 16px;
        }

        .mega-dropdown .dropdown-menu .dropdown-item:hover {
            color: var(--primary-color);
            padding-left: 5px;
            font-weight: 500;
        }
		
		/* Основной контейнер меню */
.mega-menu {
  background-color: #2F3E33;
  border: 1px solid #CBA135;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  color: white;
  min-width: 100%;
  margin-top: 12px;
  animation: fadeInDown 0.3s ease;
}

/* Анимация появления */
@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Заголовки колонок */
.mega-menu h6 {
  font-weight: 700;
  color: #F5E5B8;
  margin-bottom: 10px;
  font-size: 16px;
  text-transform: uppercase;
}

/* Ссылки */
.mega-menu .dropdown-item {
  color: #f0f0f0;
  padding: 6px 0;
  font-size: 14px;
  transition: all 0.2s ease;
  border-radius: 6px;
}

.mega-menu .dropdown-item:hover {
  background-color: rgba(203, 161, 53, 0.1);
  color: #CBA135;
  padding-left: 8px;
}

/* Убираем стандартный фон Bootstrap у выпадающего меню */
.dropdown-menu {
  background: transparent;
  border: none;
  padding: 0;
}

        /* Mobile menu styles */
        @media (max-width: 991px) {
            .catalog-btn {
                padding: 8px 15px;
                font-size: 16px;
                margin-right: 10px;
            }

            .catalog-btn i {
                font-size: 1rem;
            }

            .mega-dropdown .dropdown-menu {
                position: static;
                width: 100%;
                padding: 15px;
                box-shadow: none;
                border-top: 1px solid #eee;
            }

            .mega-dropdown .dropdown-menu .col-md-3 {
                padding: 0;
                margin-bottom: 10px;
                border-right: none !important;
            }

            .mega-dropdown .dropdown-menu .col-md-3:not(:last-child) {
                border-bottom: 1px solid #eee;
                padding-bottom: 10px;
                margin-bottom: 10px;
            }

            .mega-dropdown .dropdown-menu h6 {
                margin-bottom: 10px;
                padding-bottom: 3px;
                font-size: 16px;
            }

            .mega-dropdown .dropdown-menu h6::after {
                width: 20px;
            }
        }

        /* Category card styles */
        .category-card {
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            background: white;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .category-card:hover {
            transform: translateY(-10px) rotateX(5deg);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .category-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: var(--transition);
        }

        .category-card:hover img {
            transform: scale(1.05);
        }

        .category-card .card-body {
            padding: 20px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .category-card h5 {
            margin-bottom: 5px;
            color: var(--secondary-color);
            font-family: 'PT Sans', sans-serif;
            font-weight: 700;
            font-size: 18px;
        }

        .category-card p {
            color: var(--dark-gray);
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
        }

        /* Product card styles - UPDATED DESIGN */
        .product-card {
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            background: #fff;
            border: 1px solid #eaeaea;
            backdrop-filter: blur(4px);
            position: relative;
            height: 330px;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .product-card .image-container {
            height: 70%;
            overflow: hidden;
            position: relative;
        }

        .product-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

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

        .product-card .card-body {
            height: 30%;
            padding: 15px;
            display: flex;
            flex-direction: column;
        }

        /* Action buttons on image */
        .product-card .action-buttons {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 2;
        }

        .product-card .action-btn {
            background: rgba(255, 255, 255, 0.7);
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            color: var(--secondary-color);
            cursor: pointer;
            font-size: 18px;
        }

        .product-card .action-btn:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: scale(1.1);
        }
		
		.action-btn:hover i {
    transform: rotate(20deg) scale(1.2);
}

        /* Badges on image */
        .product-card .badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--accent-gold);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            z-index: 2;
            font-family: 'PT Sans', sans-serif;
            font-weight: 700;
            font-size: 14px;
        }

        /* Product title */
        .product-card .card-title a {
            font-size: 1rem;
            margin-bottom: 5px;
            color: var(--secondary-color);
            text-align: center;
            font-weight: 700;
            font-family: 'PT Sans', sans-serif;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: var(--transition);
            position: relative;
            font-size: 16px;
			text-decoration: none;
			color:inherit;
        }

        .product-card .card-title a:hover::after {
            content: attr(data-full-title);
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9rem;
            white-space: nowrap;
            z-index: 10;
            margin-top: 5px;
            font-size: 14px;
        }		
		

        /* Rating */
        .product-card .rating {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            color: var(--rating-color);
            font-size: 18px;
        }

        .product-card .rating .fas {
            color: var(--rating-color);
        }

        .product-card .rating .far {
            color: #ddd;
        }

        /* Price and cart */
        .product-card .price-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
        }

        .product-card .price {
            font-weight: 700;
            color: var(--accent-gold);
            font-size: 1.2rem;
            font-family: 'PT Sans', sans-serif;
        }

        .product-card .old-price {
            text-decoration: line-through;
            color: var(--dark-gray);
            font-size: 0.8rem;
            display: block;
            font-family: 'Roboto', sans-serif;
        }

        .product-card .cart-btn {
            background: transparent;
            border: none;
            color: var(--primary-color);
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .product-card .cart-btn:hover {
            transform: scale(1.1);
        }
		
		.category-card:hover,
.product-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px) scale(1.02);
}


        /* Special offer styles */
       .special-offer {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 50px;
  animation: fadeInUp 0.9s ease forwards;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s ease;
  background: white;
  position: relative;
  z-index: 1;
}

/* Градиентный фон */
.special-offer .bg-primary {
  background: linear-gradient(135deg, #7ed957 0%, #5ebf3a 100%) !important;
  animation: gradientShift 5s ease infinite alternate;
}

/* Заголовок */
.special-offer h2 {
  font-size: 2.2rem;
  font-family: 'PT Sans', sans-serif;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  animation: slideInLeft 1s ease forwards;
  opacity: 0;
}

/* Описание */
.special-offer p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.1rem;
  color: #f8f8f8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  animation: slideInRight 1s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

/* Кнопка */
.special-offer .btn {
  padding: 12px 30px;
  font-weight: 700;
  border-radius: 30px;
  transition: all 0.35s ease;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 15px rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.special-offer .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.15);
}

/* Shine эффект по кнопке */
.special-offer .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-20deg);
  transition: all 0.75s ease;
}

.special-offer .btn:hover::before {
  left: 120%;
}

/* Анимации */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}


        /* Features styles */
        .feature-item {
            transition: var(--transition);
        }

        .feature-item:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            transition: var(--transition);
        }

        .feature-item:hover .feature-icon {
            transform: rotateY(180deg);
        }

        .feature-item h6 {
            font-family: 'PT Sans', sans-serif;
            font-weight: 700;
            font-size: 18px;
        }

        .feature-item p {
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
        }

        /* Footer styles */
       .footer {
    background: var(--secondary-color);
    color: white;
    padding: 60px 0 30px;
    margin-top: 80px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    z-index: 1;
}

.footer h5,
.footer h6 {
    color: white;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
    position: relative;
}

.footer h5::after,
.footer h6::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--primary-color);
    margin-top: 8px;
    border-radius: 2px;
}

.footer p,
.footer a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--primary-color);
}

.footer ul {
    padding-left: 0;
    list-style: none;
}

.footer .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.footer .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
    font-size: 18px;
    text-align: center;
    line-height: 1;
    padding: 0; 
}

.footer .social-icons a i {
    margin: 0;
    line-height: 1;
}


.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 40px;
    font-size: 14px;
}

.footer-bottom img {
    height: 26px;
    opacity: 0.9;
    transition: 0.3s ease;
}

.footer-bottom img:hover {
    opacity: 1;
    transform: scale(1.05);
}

.footer .fas,
.footer .fab {
    margin-right: 10px;
    color: var(--primary-color);
}


        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .main-banner {
                padding: 80px 0;
            }

            .main-banner h1 {
                font-size: 2.2rem;
            }

            .main-banner p {
                font-size: 1.2rem;
            }

            .user-actions .btn {
                width: 40px;
                height: 40px;
            }
        }

        @media (max-width: 768px) {
            .navbar-brand img {
                height: 35px;
            }

            .main-banner {
                padding: 60px 0;
            }

            .main-banner h1 {
                font-size: 1.8rem;
            }

            .main-banner p {
                font-size: 1rem;
            }

            .phone-number {
                display: none;
            }

            .product-card {
                height: 320px;
            }

            .product-card .image-container {
                height: 65%;
            }

            .product-card .card-body {
                height: 35%;
                padding: 10px;
            }

            .product-card .btn {
                width: 30px;
                height: 30px;
                font-size: 0.8rem;
            }
        }
		
.go-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
}

.go-to-top:hover {
  background-color: #000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.go-to-top.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
	.go-to-top { bottom: 60px; }
}

.review-card {
  background: white;
  border-radius: 15px;
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 0 15px; /* добавляем отступ между карточками */
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}


.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.07);
}

.review-text {
  font-style: italic;
  font-size: 1.1rem;
  color: #333;
}

.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.product-name {
  font-size: 1rem;
  color: #2c3e50;
}

.review-author {
  font-size: 0.9rem;
}

.review-rating i {
  font-size: 1rem;
}
/* Стрелки slick */
/* Кнопки навигации */
.slick-prev,
.slick-next {
  background: #7ED957;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 5;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

.slick-prev:hover,
.slick-next:hover {
  background: #5ebf3a;
  transform: translateY(-50%) scale(1.1);
}

/* Настоящие стрелки (влево и вправо) */
.slick-prev::before,
.slick-next::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-width: 2px 2px 0 0;
  border-color: white;
  transform: rotate(-135deg);
}

.slick-next::before {
  transform: rotate(45deg);
}

/* Удаляем стандартные точки slick (чёрные в кружках) */
.slick-dots li button::before {
  content: none !important;
}

/* Кастомные точки */
.slick-dots {
  text-align: center;
  position: relative;
  top: 30px; /* или больше, если нужно ниже */
  list-style: none;
}

.slick-dots li {
  display: inline-block;
  margin: 0 6px;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ccc;
  transition: all 0.3s ease;
}

.slick-dots li.slick-active button {
  background: #7ED957;
  transform: scale(1.2);
  box-shadow: 0 0 0 2px #CBA135;
}

.brand-carousel .brand-logo {
  max-height: 120px;
  margin: 0 auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.brand-carousel .brand-logo:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.brand-carousel .slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.brand-carousel .slick-dots {
  margin-top: 30px;
}

.brand-carousel .slick-dots li button:before {
  font-size: 12px;
  color: #ccc;
}

.brand-carousel .slick-dots li.slick-active button:before {
  color: #7ED957;
}

.brand-carousel .slick-arrow {
  z-index: 2;
  width: 40px;
  height: 40px;
  background: #7ED957;
  border-radius: 50%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 0;
  border: none;
  transition: 0.3s ease;
}

.brand-carousel .slick-arrow:hover {
  background: #5ebf3a;
}

.brand-carousel .slick-prev::before,
.brand-carousel .slick-next::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  color: white;
}

.brand-carousel .slick-prev::before {
  content: "\f104"; /* fa-angle-left */
}

.brand-carousel .slick-next::before {
  content: "\f105"; /* fa-angle-right */
}

/* Общий стиль формы */
.woocommerce form.checkout {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    color: #000;
}

/* Заголовки секций */
.woocommerce form.checkout h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
}

/* Стили для инпутов */
.woocommerce form.checkout .form-row input,
.woocommerce form.checkout .form-row textarea,
.woocommerce form.checkout .form-row select {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
    width: 100%;
    transition: 0.2s ease;
}

.woocommerce form.checkout .form-row input:focus,
.woocommerce form.checkout .form-row textarea:focus,
.woocommerce form.checkout .form-row select:focus {
    border-color: #7ed957;
    outline: none;
    background: #fff;
}

/* Кнопка оформления заказа */
.woocommerce #place_order,
.woocommerce form.checkout input[type="submit"] {
    background-color: #7ed957;
    color: #000;
    font-weight: 600;
    border: none;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 18px;
    transition: all 0.2s ease;
}

.woocommerce #place_order:hover,
.woocommerce form.checkout input[type="submit"]:hover {
    background-color: #6cc54e;
}

/* Сообщения об ошибках */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message {
    border-radius: 10px;
    padding: 16px;
    background: #fef2f2;
    border-left: 5px solid #dc2626;
    color: #000;
}

/* Комментарии — поле внизу */
.woocommerce form.checkout .form-row.order_comments {
    margin-top: 30px;
}

/* Радиокнопки доставки и оплаты */
.woocommerce-checkout .woocommerce-shipping-methods label,
.woocommerce-checkout .payment_methods label {
    font-weight: 500;
    padding: 6px 0;
    display: block;
}

/* Разделы доставки и оплаты */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-payment {
    margin-top: 30px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
}

.woocommerce-billing-fields > h3:first-child {
    display: none !important;
}
			
/* Скрыть правую колонку с адресом доставки */
.woocommerce-checkout .col-2 {
    display: none !important;
}

/* Сделать левую колонку на всю ширину */
.woocommerce-checkout .col-1 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
}

/* Стили для радиокнопок и чекбоксов */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 2px solid #7ed957;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
    transition: all 0.2s ease;
}

.woocommerce-checkout input[type="checkbox"] {
    border-radius: 4px;
}

/* Внутренняя точка радиокнопки */
.woocommerce-checkout input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background-color: #7ed957;
    border-radius: 50%;
}

/* Внутренний квадрат для чекбокса */
.woocommerce-checkout input[type="checkbox"]:checked::before {
    content: '✔';
    position: absolute;
    top: -2px;
    left: 2px;
    font-size: 14px;
    color: #7ed957;
}

/* Выравнивание меток */
.woocommerce-checkout .woocommerce-form__label,
.woocommerce-checkout .woocommerce-checkout-payment label,
.woocommerce-checkout .woocommerce-shipping-methods label {
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 8px;
    cursor: pointer;
}

/* Исправление смещений */
.woocommerce-checkout .form-row .input-radio,
.woocommerce-checkout .form-row .input-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}



/* Сам чекбокс */
.woocommerce-checkout .woocommerce-account-fields input#createaccount {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #7ed957;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    margin: 0;
}

/* Галочка при виборі */
.woocommerce-checkout .woocommerce-account-fields input#createaccount:checked::before {
    content: '✔';
    position: absolute;
    top: -2px;
    left: 2px;
    font-size: 14px;
    color: #7ed957;
}

/* Текст праворуч — по центру */
.woocommerce-checkout .woocommerce-account-fields label.woocommerce-form__label {
    margin: 0;
    font-size: 16px;
    display: inline;
    vertical-align: middle;
}

/* Контейнер радиокнопки и текста */
.woocommerce-checkout .woocommerce-checkout-payment .payment_methods > li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

/* Радиокнопка */
.woocommerce-checkout .woocommerce-checkout-payment input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #7ed957;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Галочка внутренняя */
.woocommerce-checkout .woocommerce-checkout-payment input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background-color: #7ed957;
    border-radius: 50%;
}

/* Текст способа оплаты */
.woocommerce-checkout .woocommerce-checkout-payment label {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    display: inline-block;
}

/* Контейнер метода оплаты — вертикальное расположение */
.woocommerce-checkout .woocommerce-checkout-payment .payment_methods > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 1.5rem;
}

/* Радиокнопка и её текст — в строку */
.woocommerce-checkout .woocommerce-checkout-payment .payment_methods > li > label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
}

/* Радиокнопка */
.woocommerce-checkout .woocommerce-checkout-payment input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #7ed957;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

/* Внутренняя точка выбранной радиокнопки */
.woocommerce-checkout .woocommerce-checkout-payment input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background-color: #7ed957;
    border-radius: 50%;
}

/* Описание под методом оплаты */
.woocommerce-checkout .payment_box {
    margin-left: 28px; /* выравниваем с текстом радиокнопки */
    background: #f8f8f8;
    border-left: 2px solid #7ed957;
    padding: 10px 15px;
    font-size: 15px;
    color: #444;
    animation: fadeIn 0.3s ease-in-out;
}

/* Плавное появление */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ======== ОБЩИЙ СТИЛЬ КОРЗИНЫ ======== */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart table.cart {
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 30px;
}

/* Заголовки */
.woocommerce-cart h1, 
.woocommerce-cart h2, 
.woocommerce-cart h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* ======== ТАБЛИЦА ТОВАРОВ ======== */
.woocommerce-cart table.cart th {
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

.woocommerce-cart table.cart td {
    padding: 15px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

/* Увеличенные картинки */
.woocommerce-cart table.cart img {
    width: 100px !important;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Название товара */
.woocommerce-cart table.cart .product-name a {
    font-weight: 600;
    font-size: 16px;
    color: #000;
}

/* Кнопка удаления */
.woocommerce-cart table.cart .product-remove a {
    color: red;
    font-size: 22px;
}

/* Количество */
.woocommerce-cart table.cart input.qty {
    width: 70px;
    padding: 6px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Купон и кнопка пересчета */
.woocommerce .cart .actions .coupon input.input-text {
    width: 180px;
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    font-size: 15px;
}

.woocommerce .cart .actions .coupon .button,
.woocommerce-cart .cart input.button,
.woocommerce input.button.alt {
    background-color: #7ed957;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.woocommerce .cart .actions .coupon .button:hover,
.woocommerce-cart .cart input.button:hover {
    background-color: #67c245;
}

/* ======== СУММА И ОФОРМЛЕНИЕ ЗАКАЗА ======== */
.cart_totals {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
}

.cart_totals h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.cart_totals table {
    width: 100%;
}

.cart_totals table th,
.cart_totals table td {
    padding: 8px 0;
    font-size: 16px;
    color: #333;
}

/* Кнопка перехода к оформлению */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: #7ed957;
    color: #fff;
    border-radius: 10px;
    padding: 14px 20px;
    display: block;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    transition: 0.3s ease;
    margin-top: 20px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #67c245;
}

.out-of-stock-text {
    color: #d9534f;
    font-size: 0.9em;
    font-weight: bold;
}

/* Модальное окно "в один клік" */
#oneClickModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#oneClickModal form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
}

/* карточка товара дополнение */
/* ===== SCOPE ===== */
.product-card { position: relative; }

/* Image header */
.product-card .image-container { position: relative; }
.product-card .image-container .badge-sale{
    position: absolute; top:10px; left:10px; z-index:2;
    background: linear-gradient(135deg,#e53935,#fb8c00);
    color:#fff; padding:6px 10px; border-radius:8px;
    font-weight:700; font-size:12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Action buttons on image */
.product-card .image-container .action-buttons{
    position:absolute; right:10px; bottom:10px; z-index:2;
    display:flex; gap:8px;
}
.product-card .image-container .action-btn{
    background:#fff; border:1px solid #eee; border-radius:10px; width:38px; height:38px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    transition:transform .15s ease, box-shadow .15s ease;
}
.product-card .image-container .action-btn:hover{
    transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* Title */
.product-card .card-title{ margin-bottom:.4rem; }
.product-card .card-title a{ color:#212529; text-decoration:none; }
.product-card .card-title a:hover{ text-decoration:underline; }

/* Row: status + rating */
.product-card .rating-and-stock{
    display:flex; align-items:center; gap:10px; margin:8px 0 12px; flex-wrap:wrap;
}

/* ===== STATUS CHIP — stronger specificity & reset ===== */
.product-card .rating-and-stock .stock-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:700; padding:4px 10px;
    border-radius:999px; line-height:1;
    background: transparent; color:#fff;
    text-transform:none; letter-spacing:0; border:none;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    /* reset possible badge defaults */
    text-decoration:none; vertical-align:middle;
    -webkit-text-fill-color: #fff;
}
.product-card .rating-and-stock .stock-chip.in-stock{
    background: linear-gradient(135deg,#28a745,#34ce57) !important; color:#fff !important;
}
.product-card .rating-and-stock .stock-chip.on-backorder{
    background: linear-gradient(135deg,#f39c12,#e67e22) !important; color:#fff !important;
}
.product-card .rating-and-stock .stock-chip.out-of-stock{
    background: linear-gradient(135deg,#dc3545,#c82333) !important; color:#fff !important;
}

/* Rating (conditionally rendered) */
.product-card .rating{
    display:flex; align-items:center; gap:6px;
}
.product-card .rating i.fa{ color:#FFC107; font-size:14px; }
.product-card .rating .rating-count{ font-size:12px; color:#666; }

/* Price row */
.product-card .price-container{
    display:flex; justify-content:space-between; align-items:center; margin-top:6px; gap:8px;
}
.product-card .old-price{ text-decoration:line-through; color:#888; }

/* Right label when unavailable */
.product-card .out-of-stock-text{
    font-size: 12px; background: #f1f1f1; padding: 6px 10px; border-radius: 8px; color: #666; font-weight: 600;
}

/* Kill any old status placements (safety) */
.product-card .image-container .badge-stock{ display:none !important; }
.product-card .stock-inline{ display:none !important; }

/* === FIX: мобильный overflow при сохранении единой высоты карточек === */
@media (max-width: 768px) {
  /* 1) Карточка становится grid из двух строк:
        - верх: картинка (растяжимая minmax(0,1fr))
        - низ: тело (авто) — всегда помещается
   */
  .product-card {
    /* фиксированная высота уже задана в стилях темы: 320px */
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto; /* изображение / контент */
  }

  /* 2) Контейнер изображения не фиксируем в %, даём ему сжиматься */
  .product-card .image-container {
    height: auto !important;
    min-height: 0;            /* важно для корректного сжатия в grid */
    overflow: hidden;
  }
  .product-card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* визуально аккуратно, можно сменить на contain */
  }

  /* 3) Контент — столбец; цена прижата к низу card-body */
  .product-card .card-body {
    height: auto !important;
    min-height: 0;            /* не даём переполнять общую высоту */
    display: flex;
    flex-direction: column;
    padding: 10px;            /* у тебя так и задано, оставляем */
    overflow: hidden;         /* на всякий случай, чтобы ничего не торчало */
  }

  /* 4) Заголовок и рейтинг/статус — компактнее и обрезаем по строкам */
  .product-card .card-title { margin-bottom: 6px; }
  .product-card .card-title a {
    font-size: 15px;          /* чуть компактнее, чтобы не съедать высоту */
    -webkit-line-clamp: 2;    /* уже есть, фиксируем на 2 строки */
  }
  .product-card .rating-and-stock {
    margin: 6px 0 8px;
    gap: 8px;
    flex-wrap: wrap;          /* переносим, если тесно */
  }

  /* 5) Цена + корзина всегда в видимой зоне карточки */
  .product-card .price-container {
    margin-top: auto;         /* уходит к низу внутри card-body */
    gap: 10px;
    flex-shrink: 0;
  }

  /* 6) Лёгкая минификация, чтобы точно не было переполнения */
  .product-card .price { font-size: 1rem; }
  .product-card .old-price { font-size: 0.75rem; }
  .product-card .cart-btn { font-size: 1.25rem; }
}