.products-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px;
}

.product {
    border: 2px solid blue;
    min-width: 300px;
    background: white;
    border-radius: 16px;
    padding: 12px;
    margin-right: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    /*    transition: .3s;
*/ position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}



    .product::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #ff6b6b, /* قرمز روشن */
        #ffd93d, /* زرد */
        #6bcf7f, /* سبز */
        #4d96ff, /* آبی */
        #ff6b6b /* قرمز */
        );
        background-size: 400% 400%;
        border-radius: 14px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

  /*  .product:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    }*/

     /*   .product:hover::after {
            opacity: 1;
            animation: borderGlow 3s linear infinite;
        }*/

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

    50% {
        background-position: 100% 50%;
    }
}

/* برای اینکه فقط کادر درخشان باشد و پس زمینه ندهد */
.product {
    background-clip: padding-box;
}

    /* اطمینان از اینکه محتوای داخل تحت تأثیر قرار نگیرد */
    .product > * {
        position: relative;
        z-index: 2;
    }

.product:hover img {
    transform: scale(1.08);
    transition: transform 0.6s ease;
}

    .product img {
        width: 100%;
        height: 250px;
        border-radius: 12px;
        object-fit: cover;
    }

.add {
    margin-top: 10px;
    width: 100%;
    border: none;
    padding: 12px;
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

    /* افکت هاور */
    .add:hover {
        background: linear-gradient(135deg, #0b5ed7, #0a58ca);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(13, 110, 253, 0.3);
    }

   
    .add:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
    }



.product-card {
    padding: 1.5rem;
    border: 1px solid #eee;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
    max-width: 320px;
}

  /*  .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        border-color: #ddd;
    }*/

.product-title {

    font-weight: 600;
    font-size: 1.5rem;
    color: #222;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

.product-description {
 
    font-weight: 500;
    font-size: 1rem;
    color: black;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.product-price {
    font-weight: 700;
    font-size: 1.5rem;
    color: black !important;
    background: linear-gradient(135deg, #050506, #060506);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0.25rem 0;
}

/* حالت ریسپانسیو */
@media (max-width: 768px) {
    .product-card {
        padding: 1.25rem;
    }

    .product-title {
        font-size: 1rem;
    }

    .product-price {
        font-size: 1.1rem;
    }
}


.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: 1.2rem;
    color: #333;
    z-index: 20;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* دکمه سمت راست - موقعیت‌دهی صحیح */
    .carousel-arrow.right {
        right: 5px; /* از حاشیه داخلی wrapper فاصله بگیرد */
    }

    /* دکمه سمت چپ - موقعیت‌دهی صحیح */
    .carousel-arrow.left {
        left: 5px; /* از حاشیه داخلی wrapper فاصله بگیرد */
    }

    /* استایل‌های هاور */
    .carousel-arrow:hover {
        background: #0d6efd;
        color: white;
        box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3);
        transform: translateY(-50%) scale(1.1);
    }

/* برای موبایل */
@media (max-width: 768px) {
    .carousel-wrapper {
        padding: 0 30px !important;
    }

    .carousel-arrow {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

        .carousel-arrow.right {
            right: 2px;
        }

        .carousel-arrow.left {
            left: 2px;
        }
}

hr.gradient-hr {
    height: 3px;
    border: none;
    background: linear-gradient(90deg, #007bff 0%, #00b4ff 25%, #ff6b6b 50%, #20c997 75%, #007bff 100% );
    background-size: 400% 100%;
    animation: gradientMove 3s linear infinite;
    border-radius: 3px;
}

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

    100% {
        background-position: 400% 50%;
    }
}



/* BADGE */
/*.new-badge {
    position: absolute;
    top: 12px;
    right: 245px;
    background: linear-gradient(135deg,#2196f3,#0d6efd);
    color: white;
    padding: 6px 40px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
    z-index: 5;
}*/

/* hover animation همراه کارت */
/*.product:hover .new-badge {
    transform: rotate(45deg) scale(1.05);
}*/
.badge-base {
    position: absolute;
    top: 20px; /* کمی پایین‌تر بیاد */
    right: 20px; /* از لبه سمت راست فاصله بگیره */
    color: white;
    padding: 4px 20px; /* padding متعادل */
    font-size: 12px;
    font-weight: 700;
    transform: rotate(-45deg);
    transform-origin: 0 0; /* نقطه چرخش رو تنظیم می‌کنه */
    box-shadow: 0 3px 15px rgba(0,0,0,.2);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    width: auto; /* عرض خودکار */
    min-width: 90px; /* حداقل عرض برای متن‌های کوتاه */
    justify-content: center;
    backdrop-filter: blur(5px); /* افکت شیشه‌ای */
    border: 1px solid rgba(255,255,255,0.2);
}

/* تنظیم موقعیت برای هر badge - چون مورب هستن */
.new-badge {
    background: linear-gradient(135deg, #2196f3, #0d6efd);
    top: 45px;
    right: 256px;
}

.bestseller-badge {
    background: linear-gradient(135deg, #f7971e, #ffd200);
    top: 52px;
    right: 245px;
}

.popular-badge {
    background: linear-gradient(135deg, #9d50bb, #6e48aa);
    top: 52px;
    right: 245px;
}

.discount-badge {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    top: 45px;
    right: 252px;
}

/* آیکون‌ها */
.new-badge::before {
    content: "✨";
    font-size: 14px;
    animation: sparkle 2s infinite;
}

.bestseller-badge::before {
    content: "🏆";
    font-size: 14px;
}

.popular-badge::before {
    content: "❤️";
    font-size: 14px;
    animation: heartbeat 1.5s ease infinite;
}

.discount-badge::before {
    content: "🔥";
    font-size: 14px;
    animation: flame 1.2s ease infinite;
}

/* انیمیشن‌ها */
@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

@keyframes flame {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.2) rotate(-5deg);
    }

    50% {
        transform: scale(1.3) rotate(0deg);
    }

    75% {
        transform: scale(1.2) rotate(5deg);
    }
}



/* کارت hover نرم */
.product {
    transition: .3s ease;
}
.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(13, 110, 253, 0.2), 0 0 60px rgba(13, 110, 253, 0.05);
    border:2px solid red;
}
 /*   .product:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(13,110,253,.25);
    }*/

    /*Free Badge*/


.old-price-row,
.final-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.label {
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    justify-content: flex-start !important;
}

    .label.new {
        color: #dc3545;
        font-weight: 600;
    }

.old-price {
    position: relative;
    color: #999;
    margin-right: auto;
}

    .old-price::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
        background: #dc3545;
    }

.final-price {
    font-size: 17px;
    font-weight: 700;
    color: #0d6efd;
    margin-right: auto;
}
/*.price-wrapper {
    margin-top: 6px;
}

.old-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
   
}

.old-price {
    position: relative;
}

    .old-price::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
        background: #dc3545;
    }

.final-price-row {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding-right:2px;
}

.final-price {
    font-size: 17px;
    font-weight: 700;
    color: #0d6efd;
}

.label {
    font-size: 1rem;
}

    .label.new {
        color: #dc3545;
        font-weight: 600;
    }*/