/********************* Shopping Фоны body для разделов магазина **********************/
.shop-main {
    background: #0f0c1b;
}

.shop-mehome {
    background: linear-gradient(302deg, #042926, #000000, #06211f);
}

.shop-megadgets {
    background: linear-gradient(302deg, #091a2e, #000000, #0a1528);
}

.shop-style {
    background: #000;
}

/********************* Shopping Фоны body для разделов магазина **********************/

/********************* Shopping Отображение карточек товара**********************/

/* ═══════════ Базовая карточка ═══════════ */
.product-grid8 {
    font-family: 'Inter', 'Poppins', sans-serif;
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.85), rgba(15, 15, 30, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.product-grid8:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(120, 80, 200, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ═══════════ Область изображения ═══════════ */
.product-grid8 .product-image8 {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 18px;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.product-grid8:hover .product-image8 {
    box-shadow: none;
}

.product-grid8 .product-image8 a {
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

/* Изображения — фиксированная высота, объект вписывается */
.product-grid8 .product-image8 img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 12px;
}

/* ═══════════ Эффект смены картинки (сохранён) ═══════════ */
.product-grid8 .pic-1 {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.product-grid8:hover .pic-1 {
    opacity: 0;
}

.product-grid8 .pic-2 {
    opacity: 0;
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    transition: opacity 0.5s ease-out;
}

.product-grid8:hover .pic-2 {
    opacity: 1;
}

/* ═══════════ Кнопки (корзина, просмотр, купить) ═══════════ */
.product-grid8 .social {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-grid8 .social li {
    opacity: 0;
    transform: translateY(12px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-grid8:hover .social li {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.product-grid8:hover .social li:nth-child(1) {
    transition-delay: 0.08s;
}

.product-grid8:hover .social li:nth-child(2) {
    transition-delay: 0.16s;
}

.product-grid8:hover .social li:nth-child(3) {
    transition-delay: 0.24s;
}

.product-grid8 .social li a {
    color: #fff;
    font-size: 15px;
    line-height: 42px;
    text-align: center;
    height: 42px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, rgba(120, 80, 200, 0.8), rgba(80, 50, 160, 0.9));
    box-shadow: 0 4px 15px rgba(120, 80, 200, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}

.product-grid8 .social li a:hover {
    color: #fff;
    background: linear-gradient(135deg, #9b59f0, #6c3ce0);
    box-shadow: 0 6px 25px rgba(120, 80, 200, 0.55);
    transform: scale(1.15);
}

/* Иконка поиск — акцентная */
.product-grid8 .social li a.fa-search {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.8), rgba(0, 100, 200, 0.9));
    box-shadow: 0 4px 15px rgba(0, 130, 220, 0.3);
}
.product-grid8 .social li a.fa-search:hover {
    background: linear-gradient(135deg, #2196f3, #1565c0);
    box-shadow: 0 6px 25px rgba(33, 150, 243, 0.55);
}

/* Иконка купить — зелёная */
.product-grid8 .social li a.fa-shopping-cart {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.8), rgba(39, 174, 96, 0.9));
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}
.product-grid8 .social li a.fa-shopping-cart:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 6px 25px rgba(46, 204, 113, 0.55);
}

/* ═══════════ Скидка ═══════════ */
.product-grid8 .product-discount-label {
    display: block;
    padding: 5px 16px 5px 28px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    position: absolute;
    top: 14px;
    right: 0;
    border-radius: 4px 0 0 4px;
    box-shadow: 0 3px 12px rgba(231, 76, 60, 0.4);
    -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

/* ═══════════ Контент карточки ═══════════ */
.product-grid8 .product-content {
    padding: 18px 20px 20px;
}

.product-grid8 .price {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: left;
    transition: all 0.3s;
    letter-spacing: 0.3px;
}

.product-grid8 .price span {
    color: rgba(255, 255, 255, 0.35);
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    margin-left: 8px;
    display: inline-block;
}

.product-grid8 .product-shipping {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    padding-left: 30px;
    margin: 0 0 12px;
    display: block;
    position: relative;
    letter-spacing: 0.3px;
}

.product-grid8 .product-shipping:before {
    content: '';
    height: 1px;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0;
}

.product-grid8 .title {
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    margin: 0 0 16px;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.product-grid8 .title a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-grid8 .title a:hover {
    color: #a78bfa;
}

/* ═══════════ Кнопка «Показать детали» ═══════════ */
.product-grid8 .all-deals {
    display: block;
    color: #fff;
    background: linear-gradient(135deg, rgba(120, 80, 200, 0.6), rgba(80, 50, 160, 0.7));
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 5px;
    border-radius: 12px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.product-grid8 .all-deals::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.product-grid8 .all-deals:hover::before {
    left: 100%;
}

.product-grid8 .all-deals .icon {
    margin-left: 7px;
    transition: transform 0.3s ease;
}

.product-grid8 .all-deals:hover {
    background: linear-gradient(135deg, #9b59f0, #6c3ce0);
    box-shadow: 0 6px 25px rgba(120, 80, 200, 0.4);
}

.product-grid8 .all-deals:hover .icon {
    transform: translateX(4px);
}

/* ═══════════ Фикс высоты по категориям ═══════════ */

/* MeGadgets — стандартная высота для гаджетов */
.product-cat-megadgets .product-image8 img {
    height: 260px;
    object-fit: contain;
}

/* MeStyle — вытянутые карточки для одежды */
.product-cat-style .product-image8 img {
    height: 380px;
    object-fit: cover;
}

/* MeHome — стандартная высота для дома */
.product-cat-mehome .product-image8 img {
    height: 260px;
    object-fit: contain;
}

/* ═══════════ Акценты по категориям ═══════════ */

/* MeGadgets — сине-электрический акцент */
.product-cat-megadgets {
    background: linear-gradient(145deg, rgba(10, 25, 60, 0.9), rgba(5, 12, 35, 0.95));
    border-color: rgba(41, 121, 255, 0.12);
}
.product-cat-megadgets:hover {
    border-color: rgba(41, 121, 255, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(41, 121, 255, 0.12);
}
.product-cat-megadgets .product-image8 {
    border-bottom-color: rgba(41, 121, 255, 0.1);
}
.product-cat-megadgets .title a:hover {
    color: #64b5f6;
}
.product-cat-megadgets .all-deals {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.6), rgba(13, 71, 161, 0.7));
}
.product-cat-megadgets .all-deals:hover {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    box-shadow: 0 6px 25px rgba(25, 118, 210, 0.4);
}

/* MeStyle — тёплый фиолетово-розовый акцент */
.product-cat-style {
    background: linear-gradient(145deg, rgba(40, 20, 50, 0.9), rgba(20, 10, 30, 0.95));
    border-color: rgba(186, 104, 200, 0.12);
}
.product-cat-style:hover {
    border-color: rgba(186, 104, 200, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(186, 104, 200, 0.12);
}
.product-cat-style .product-image8 {
    border-bottom-color: rgba(186, 104, 200, 0.1);
}
.product-cat-style .title a:hover {
    color: #ce93d8;
}
.product-cat-style .all-deals {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.6), rgba(123, 31, 162, 0.7));
}
.product-cat-style .all-deals:hover {
    background: linear-gradient(135deg, #ab47bc, #8e24aa);
    box-shadow: 0 6px 25px rgba(156, 39, 176, 0.4);
}

/* MeHome — бирюзово-зелёный акцент */
.product-cat-mehome {
    background: linear-gradient(145deg, rgba(10, 40, 35, 0.9), rgba(5, 20, 18, 0.95));
    border-color: rgba(0, 150, 136, 0.12);
}
.product-cat-mehome:hover {
    border-color: rgba(0, 150, 136, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(0, 150, 136, 0.12);
}
.product-cat-mehome .product-image8 {
    border-bottom-color: rgba(0, 150, 136, 0.1);
}
.product-cat-mehome .title a:hover {
    color: #80cbc4;
}
.product-cat-mehome .all-deals {
    background: linear-gradient(135deg, rgba(0, 121, 107, 0.6), rgba(0, 77, 64, 0.7));
}
.product-cat-mehome .all-deals:hover {
    background: linear-gradient(135deg, #00897b, #00695c);
    box-shadow: 0 6px 25px rgba(0, 150, 136, 0.4);
}

/* ═══════════ Адаптив ═══════════ */
@media only screen and (max-width: 990px) {
    .product-grid8 {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .product-grid8 .product-image8 img,
    .product-cat-megadgets .product-image8 img,
    .product-cat-style .product-image8 img,
    .product-cat-mehome .product-image8 img {
        height: 240px;
    }
}

/********************* Shopping Отображение карточек товара**********************/


/********************* Shopping Отображение топового слайдера **********************/
#myCarousel .carousel-item .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-attachment: fixed;
}

#myCarousel h4 {
    font-size: 50px;
    margin-bottom: 15px;
    color: #FFF;
    line-height: 100%;
    letter-spacing: 0.5px;
    font-weight: 600;
}

#myCarousel p {
    font-size: 18px;
    margin-bottom: 15px;
    color: #d5d5d5;
}

#myCarousel .carousel-item a {
    background: #F47735;
    font-size: 14px;
    color: #FFF;
    padding: 13px 32px;
    display: inline-block;
    border-radius: 10px;
}

#myCarousel .carousel-item a:hover {
    background: #394fa2;
    text-decoration: none;
}

#myCarousel .carousel-item h4 {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

#myCarousel .carousel-item p {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

#myCarousel .carousel-item a {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

#myCarousel .carousel-item .mask img {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    display: block;
    height: auto;
    max-width: 100%;
}

#myCarousel h4,
#myCarousel p,
#myCarousel a,
#myCarousel .carousel-item .mask img {
    -webkit-animation-duration: 1s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#myCarousel {
    width: 100%;
}

#myCarousel .container {
    max-width: 1080px;
}

#myCarousel .carousel-item {
    height: 100%;
    min-height: 550px;
}

#myCarousel {
    position: relative;
    z-index: 1;
    background-size: cover;
}

/* bg1: Главный раздел (темно-фиолетовый с засветами) */
.myCarousel_bg1 {
    background-color: #0f0c1b;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(170, 83, 172, 0.4) 0%, rgba(170, 83, 172, 0) 50%),
        radial-gradient(circle at 85% 20%, rgba(110, 41, 111, 0.35) 0%, rgba(110, 41, 111, 0) 45%),
        radial-gradient(circle at 50% 80%, rgba(74, 19, 91, 0.5) 0%, rgba(74, 19, 91, 0) 55%),
        radial-gradient(circle at 80% 85%, rgba(170, 83, 172, 0.3) 0%, rgba(170, 83, 172, 0) 40%);

}

/* bg2: Раздел MeHome (светло-бирюзовый с глубокими внутренними тенями) */
.myCarousel_bg2 {
    background: radial-gradient(circle at 26% -14%, #00968869, #021c1adb, #12554c69);
}

.myCarousel_bg2 h4 {
    color: #9dbdb7 !important;
}

.myCarousel_bg2 p {
    color: #65a69e !important;
}

.myCarousel_bg2 .carousel-item a {
    background: #00796b !important;
}

.myCarousel_bg2 .carousel-item a:hover {
    background: #004d40 !important;
}

/* bg3: Раздел MeGadgets (сине-черный) */
.myCarousel_bg3 {
    background-color: #05070f;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(13, 71, 161, 0.55) 0%, rgba(13, 71, 161, 0) 50%),
        radial-gradient(circle at 85% 20%, rgba(25, 118, 210, 0.4) 0%, rgba(25, 118, 210, 0) 45%),
        radial-gradient(circle at 50% 80%, rgba(10, 25, 47, 0.8) 0%, rgba(10, 25, 47, 0) 55%),
        radial-gradient(circle at 80% 85%, rgba(41, 121, 255, 0.3) 0%, rgba(41, 121, 255, 0) 40%);
    border: 5px solid #0d47a161;
}

.carousel-control-next,
.carousel-control-prev {
    height: 40px;
    width: 40px;
    padding: 12px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background-color: #f47735;
    border-radius: 10px;
    margin: 0 5px;
}


.carousel-item {
    position: relative;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.carousel-fade .carousel-item {
    opacity: 0;
    -webkit-transition-duration: .6s;
    transition-duration: .6s;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
    opacity: 1
}

.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-right.active {
    opacity: 0
}

.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

@supports (transform-style:preserve-3d) {

    .carousel-fade .carousel-item-left.active,
    .carousel-fade .carousel-item-next,
    .carousel-fade .carousel-item-prev,
    .carousel-fade .carousel-item-prev.active,
    .carousel-fade .carousel-item.active {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

/********************* Shopping Отображение топового слайдера **********************/