.product {
    @apply overflow-hidden lg:col-span-3 sm:col-span-4 col-span-6 flex flex-col bg-white relative rounded-lg shadow-[0px_0px_8px_0px_#0000001A] border border-[#D9D9D9];
}

.product .product__image {
    position: relative;
    height: 130px;
    overflow: hidden;
}

@media screen and (min-width: 640px) {
    .product .product__image { height: 160px; }
}
@media screen and (min-width: 768px) {
    .product .product__image { height: 180px; }
}
@media screen and (min-width: 1024px) {
    .product .product__image { height: 150px; }
}

.product .product__image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    position: relative !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.product .product__inner {
    @apply py-[8px] px-[10px] flex flex-col flex-1 relative;
}

.product .product__inner__top {
    @apply flex flex-col justify-center;
}

.product .product__title {
    @apply text-[14px] leading-[16px] line-clamp-2 max-[425px]:text-[12px];
}

.product-action {
    @apply flex flex-col lg:p-6 p-[12px] rounded-lg lg:col-span-3 sm:col-span-4 col-span-6;
}

.product-action.product-action--full {
    @apply !w-full;
}

.product-section {
    @apply grid grid-cols-12 gap-3;
    @apply lg:gap-5 lg:gap-4;
}

.product-section.product-section--vertical {
    @apply flex overflow-x-auto pb-5;
}

.product-section.product-section--vertical .product,
.product-section.product-section--vertical .product-action {
    @apply w-[200px] shrink-0;
    @apply landscape:w-[25%];
}

.product-view {
    @apply flex flex-col gap-x-[3rem] py-7 min-h-screen;
    @apply lg:flex-row;
}

.product-view .product-view-section {
    @apply lg:w-[calc(100%_-_(400px_+_3rem))];
}

.product-view .product-view-section .product-view-photo .big-image .swiper-slide {
    @apply lg:h-[400px];
}

.product-view .product-view-section .product-view-photo .swiper-wrapper {
    @apply rounded-xl mb-4;
}

.product-view .product-view-section .product-view-photo .swiper-wrapper .swiper-slide {
    @apply overflow-hidden rounded-lg;
}

.product-view .product-view-section .product-view-photo .swiper-slide figure {
    overflow: hidden !important;
    height: 100% !important;
}

.product-view .product-view-section .product-view-photo .swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    position: relative !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.product-view .product-view-aside {
    @apply lg:w-[400px] shrink-0;
    @apply relative;
}