
.lookbook-grid {
    display: flex;
    flex-direction: column;
    width: 89.583333vw; /* 1720/1920 */
    margin: 0 auto;
    margin-top: 4.0625vw; /* 78/1920 */
    gap: 2.083333vw; /* 40/1920 */
}

.lookbook-group {
    position: relative;
    width: 100%;
}

.lookbook-item {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}

.lookbook-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================================== */
/* Точные позиции для 12 карточек (данные из Figma) */
/* ================================================== */

/* Группа 1 */
.lookbook-item.position-1 {
    width: 44.270833vw; /* 850/1920 */
    height: 51.5625vw; /* 990/1920 */
    margin-left: 0;
    margin-top: 0;
}

.lookbook-item.position-2 {
    width: 21.614583vw; /* 415/1920 */
    height: 32.291667vw; /* 620/1920 */
    margin-left: 67.96875vw; /* 1305/1920 */
    margin-top: -51.5625vw; /* -990/1920 */
}

.lookbook-item.position-3 {
    width: 21.614583vw;
    height: 32.291667vw;
    margin-left: 22.65625vw; /* 435/1920 */
    margin-top: 20.3125vw; /* 390/1920 */
}

.lookbook-item.position-4 {
    width: 21.614583vw;
    height: 32.291667vw;
    margin-left: 45.3125vw; /* 870/1920 */
    margin-top: -32.291667vw; /* -620/1920 */
}

.lookbook-item.position-5 {
    width: 89.583333vw; /* 1720/1920 */
    height: 51.5625vw;
    margin-left: 0;
    margin-top: 2.083333vw; /* 40/1920 */
}

.lookbook-item.position-6 {
    width: 21.614583vw;
    height: 32.291667vw;
    margin-left: 0;
    margin-top: 21.354167vw; /* 410/1920 */
}

.lookbook-item.position-7 {
    width: 44.270833vw;
    height: 51.5625vw;
    margin-left: 45.3125vw; /* 870/1920 */
    margin-top: -51.5625vw;
}

.lookbook-item.position-8 {
    width: 21.614583vw;
    height: 32.291667vw;
    margin-left: 22.65625vw; /* 435/1920 */
    margin-top: 1.041667vw; /* 20/1920 */
}

.lookbook-item.position-9 {
    width: 44.270833vw;
    height: 51.5625vw;
    margin-left: 0;
    margin-top: 2.083333vw;
}

.lookbook-item.position-10 {
    width: 21.614583vw;
    height: 32.291667vw;
    margin-left: 67.96875vw; /* 1305/1920 */
    margin-top: -51.5625vw;
}

.lookbook-item.position-11 {
    width: 21.614583vw;
    height: 32.291667vw;
    margin-left: 45.3125vw; /* 870/1920 */
    margin-top: 20.3125vw; /* 390/1920 */
}

.lookbook-item.position-12 {
    width: 89.583333vw;
    height: 51.5625vw;
    margin-left: 0;
    margin-top: 2.083333vw;
}

@media (max-width: 1024px) {
    .lookbook-grid {
        width: 96.09375vw;      /* 984/1024 */
        margin-top: 2.9296875vw;  /* 30/1024 */
        gap: 2.9296875vw;        /* 30/1024 */
    }
    
    /* Группа 1 */
    .lookbook-item.position-1 {
        width: 63.57421875vw;   /* 651/1024 */
        height: 74.21875vw;     /* 760/1024 */
        margin-left: 0;
        margin-top: 0;
    }
    
    .lookbook-item.position-2 {
        width: 31.0546875vw;    /* 318/1024 */
        height: 46.38671875vw;  /* 475/1024 */
        margin-left: 65.0390625vw; /* 666/1024 */
        margin-top: -74.21875vw;   /* -760/1024 */
    }
    
    .lookbook-item.position-3 {
        width: 31.0546875vw;
        height: 46.38671875vw;
        margin-left: 16.30859375vw; /* 167/1024 */
        margin-top: 29.296875vw;    /* 300/1024 */
    }
    
    .lookbook-item.position-4 {
        width: 31.0546875vw;
        height: 46.38671875vw;
        margin-left: 48.828125vw;   /* 500/1024 */
        margin-top: -46.38671875vw; /* -475/1024 */
    }
    
    .lookbook-item.position-5 {
        width: 96.09375vw;        /* 984/1024 */
        height: 55.2734375vw;     /* 566/1024 */
        margin-left: 0;
        margin-top: 2.9296875vw;  /* 30/1024 */
    }
    
    .lookbook-item.position-6 {
        width: 31.0546875vw;
        height: 46.38671875vw;
        margin-left: 0;
        margin-top: 2.9296875vw;
    }
    
    .lookbook-item.position-7 {
        width: 63.57421875vw;    /* 651/1024 */
        height: 74.21875vw;
        margin-left: 32.51953125vw; /* 333/1024 */
        margin-top: -46.38671875vw;
    }
    
    .lookbook-item.position-8 {
        width: 31.0546875vw;
        height: 46.38671875vw;
        margin-left: 32.51953125vw; /* 333/1024 */
        margin-top: 1.46484375vw;   /* 15/1024 */
    }
    
    .lookbook-item.position-9 {
        width: 63.57421875vw;
        height: 74.21875vw;
        margin-left: 0;
        margin-top: 2.9296875vw;
    }
    
    .lookbook-item.position-10 {
        width: 31.0546875vw;
        height: 46.38671875vw;
        margin-left: 64.453125vw;   /* 660/1024 */
        margin-top: -74.21875vw;
    }
    
    .lookbook-item.position-11 {
        width: 31.73828125vw;     /* 325/1024 */
        height: 46.38671875vw;
        margin-left: 32.6171875vw;  /* 334/1024 */
        margin-top: 29.296875vw;
    }
    
    .lookbook-item.position-12 {
        width: 96.09375vw;
        height: 55.2734375vw;
        margin-left: 0;
        margin-top: 2.9296875vw;
    }
    }

    @media (max-width: 375px) {
        .lookbook-grid {
            width: 94.666667vw;       /* 355/375 */
            margin-top: 5.333333vw;   /* 20/375 */
            gap: 8vw;                 /* 30/375 */
        }
        
        /* Группа 1 */
        .lookbook-item.position-1 {
            width: 94.666667vw;       /* 355/375 */
            height: 110.666667vw;     /* 415/375 */
            margin-left: 0;
            margin-top: 0;
        }
        
        .lookbook-item.position-2 {
            width: 46.133333vw;       /* 173/375 */
            height: 68vw;             /* 255/375 */
            margin-left: 0;
            margin-top: 2.666667vw;   /* 10/375 */
        }
        
        .lookbook-item.position-3 {
            width: 46.133333vw;
            height: 68vw;
            margin-left: 48.6vw;      /* 183/375 */
            margin-top: -68vw;        /* -255/375 */
        }
        
        .lookbook-item.position-4 {
            width: 46.133333vw;
            height: 68vw;
            margin-left: 24.266667vw; /* 91/375 */
            margin-top: 2.666667vw;
        }
        
        .lookbook-item.position-5 {
            width: 94.666667vw;
            height: 54.666667vw;      /* 205/375 */
            margin-left: 0;
            margin-top: 5.333333vw;
        }
        
        .lookbook-item.position-6 {
            width: 94.666667vw;
            height: 110.666667vw;
            margin-left: 0;
            margin-top: 5.333333vw;
        }
        
        .lookbook-item.position-7 {
            width: 46.133333vw;
            height: 68vw;
            margin-left: 0;
            margin-top: 2.666667vw;
        }
        
        .lookbook-item.position-8 {
            width: 46.133333vw;
            height: 68vw;
            margin-left: 48.6vw;      /* 183/375 */
            margin-top: -68vw;
        }
        
        .lookbook-item.position-9 {
            width: 94.666667vw;
            height: 110.666667vw;
            margin-left: 0;
            margin-top: 5.333333vw;
        }
        
        .lookbook-item.position-10 {
            width: 46.133333vw;
            height: 68vw;
            margin-left: 0;
            margin-top: 2.666667vw;
        }
        
        .lookbook-item.position-11 {
            width: 46.133333vw;
            height: 68vw;
            margin-left: 48.6vw;      /* 183/375 */
            margin-top: -68vw;
        }
        
        .lookbook-item.position-12 {
            width: 94.666667vw;
            height: 54.666667vw;
            margin-left: 0;
            margin-top: 5.333333vw;
        }
    }
.lookbook-cart-image {
    display: flex;
    border-radius: 2.08333vw;
    height: 2.5vw;
    width: 2.5vw;
    content: '';
    position: absolute;
    background: url('../images/card-products-full.svg') center/contain no-repeat;
    z-index: 10;
    bottom: 2.08333vw;
    left: 2.08333vw;
    border: none;
    cursor: pointer;
}

.lookbook-cart-groub {
    bottom: 5.625vw;
    left: 2.08333vw;
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 0.52083vw;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Отключаем стандартные переходы */
    pointer-events: none;
}

/* Общие стили для видимого состояния */
.lookbook-cart-groub.active,
.lookbook-cart-groub.hover {
    display: flex;
    pointer-events: auto;
    animation: slide-up 0.3s ease-out forwards;
}

/* Специфичные стили для активного состояния (по клику) */
.lookbook-cart-groub.active {
    z-index: 11; /* Выше чем hover */
}

/* Специфичные стили для hover состояния */
.lookbook-cart-groub.hover:not(.active) {
    z-index: 10;
}

/* Анимации */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Правила для скрытия */
.lookbook-cart-groub:not(.active):not(.hover) {
    animation: slide-down 10.5s ease-out forwards;
}

/* После анимации скрытия */
.lookbook-cart-groub:not(.active):not(.hover) {
    display: none;
}
.lookbook-product-card {
    background: #fff;
    border-radius: 1.04167vw;
    padding: 0.52083vw;
    gap: 0.26042vw;
    display: flex;
}

.lookbook-product-image {
    width: 2.91667vw;
    height: 2.91667vw;
    border-radius: 0.78125vw;
    background-image: 
        linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%),
        var(--bg-url);
    background-color: lightgray;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.lookbook-product-info {
    display: flex;
    gap: 0.26042vw;
    flex-direction: column;
}

.lookbook-product-title {
    width: 12.5vw;
    color: var(--Black-Black-Basic, #0A0A0A);
    font-family: "Inter";
    font-size: 0.83333vw;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.01667vw;
    text-transform: uppercase;
    align-self: flex-end;
}

.lookbook-product-brand {
    color: var(--Gray-Gray-Dark, #999);
    font-family: "Inter";
    font-size: 0.72917vw;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.01458vw;
}

.lookbook-product-title:hover,
.lookbook-product-card:hover {
    color: var(--Black-Black-Basic, #0A0A0A);
    text-decoration: none;
}

.lookbook-product-brand:hover {
    color: var(--Gray-Gray-Dark, #999);
}

.lookbook-product-header {
    display: flex;
    gap: 0.78125vw;
}

.arrow-icon {
    width: 1.45833vw;
    height: 1.45833vw;
    background-image: url('../images/arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    filter: invert(100%);
}

  @media (max-width: 1024px) {
.lookbook-cart-image{
    border-radius: 4.88281vw;
    height: 4.6875vw;
    width: 4.6875vw;
    bottom: 1.95312vw;
    left: 1.95312vw;
}

.lookbook-cart-groub{
    bottom: 5.17578vw;
    left: 1.95312vw;
    gap: 0.97656vw;
}

.lookbook-product-card{
    border-radius:  1.95312vw;
    padding: 0.97656vw;
    gap: 0.48828vw;
}
.lookbook-product-image{
width: 5.07812vw;
height: 5.07812vw;
border-radius: 1.46484vw;
background-image: 
  linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%),
  var(--bg-url);
background-color: lightgray;
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
}
.lookbook-product-info{
    gap: 0.48828vw;
}
.lookbook-product-title{
    width: 21.48438vw;
font-size: 1.36719vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 1.50391vw */
letter-spacing: -0.02734vw;
text-transform: uppercase;
}
.lookbook-product-brand{
font-size: 1.36719vw;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 1.64062vw */
letter-spacing: -0.02734vw;
}
.lookbook-product-header{
    gap: 1.46484vw;
}
.arrow-icon{
  width: 2.34375vw;
  height: 2.34375vw; 
  }

  }

    @media (max-width: 375px) {
.lookbook-cart-image{
    border-radius: 13.33333vw;
    height: 12.8vw;
    width: 12.8vw;
    bottom: 4vw;
    left: 4vw;
}

.lookbook-cart-groub{
    bottom: 19.46667vw;
    left: 4vw;
    gap: 2.66667vw;
}

.lookbook-product-card{
    border-radius:  5.33333vw;
    padding: 2.66667vw;
    gap: 1.33333vw;
}
.lookbook-product-image{
width: 13.86667vw;
height: 13.86667vw;
border-radius: 4vw;
background-image: 
  linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%),
  var(--bg-url);
background-color: lightgray;
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
}
.lookbook-product-info{
    gap: 1.33333vw;
}
.lookbook-product-title{
    width: 55.73333vw;
font-size: 3.73333vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 4.10667vw */
letter-spacing: -0.07467vw;
text-transform: uppercase;
}
.lookbook-product-brand{
font-size: 3.73333vw;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 4.48vw */
letter-spacing: -0.07467vw;
}
.lookbook-product-header{
    gap: 4vw;
}
.arrow-icon{
  width: 6.4vw;
  height: 6.4vw; 
  }

  }