/* ==========================================================================
   PRODUCT DETAIL — BASE
   ========================================================================== */

.product-detail,
.product-detail *,
.product-detail *::before,
.product-detail *::after{
    box-sizing:border-box;
}

.product-detail{
    width:100%;
    margin:0;
    padding:0;

    background:transparent;
    color:#171717;
}

.product-detail button,
.product-detail a{
    -webkit-tap-highlight-color:transparent;
}

.product-detail button{
    margin:0;
    border:0;
    border-radius:0;
    padding:0;

    appearance:none;
    -webkit-appearance:none;

    font:inherit;
}

/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.product-detail__container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:start;
    justify-content:center;
    column-gap:48px;
}

.product-detail__container.container{
    padding-top:24px;
    padding-bottom:48px;
}

/* ==========================================================================
   STICKY BAR — закреплённая мини-панель под хедером
   ========================================================================== */

.product-detail__sticky-bar{
    position:fixed;
    left:0;
    right:0;

    /* top выставляется в JS под реальную высоту хедера */
    top:0;

    z-index:900;

    background:#FFFFFF;
    box-shadow:0 1px 25px rgba(0,0,0,.08);
    border-top: 1px solid rgba(0,0,0,.16);

    transform:translateY(-100%);
    opacity:0;

    pointer-events:none;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

.product-detail__sticky-bar.is-visible{
    transform:translateY(0);
    opacity:1;

    pointer-events:auto;
}

.product-detail__sticky-bar-container{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;

    padding-top:12px;
    padding-bottom:12px;
}

.product-detail__sticky-bar-info{
    min-width:0;

    display:flex;
    align-items:center;

    gap:12px;
}

.product-detail__sticky-bar-image{
    flex:0 0 56px;

    width:56px;
    height:56px;

    overflow:hidden;

    background:#F5F5F5;
}

.product-detail__sticky-bar-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}

.product-detail__sticky-bar-main{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:8px;
}

.product-detail__sticky-bar-name{
    max-width:100%;

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;

    color:#171717;
}

.product-detail__sticky-bar-purchase{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:24px;
}

.product-detail__sticky-bar-price{
    white-space:nowrap;

    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:24px;
    line-height:28px;
    letter-spacing:-.8px;
    color:#171717;
}

.product-detail__sticky-bar .product-detail__actions{
    width:auto;
    height:48px;

    display:flex;

    gap:8px;
}

.product-detail__sticky-bar .product-detail__cart,
.product-detail__sticky-bar .product-detail__buy{
    width:auto;
    height:48px;

    padding:0 25px;

    font-size:14px;
    line-height:18px;
}

@media(max-width:1024px){

    .product-detail__sticky-bar{
        top:auto;
        bottom:0;
        box-shadow:none;
        transform:translateY(100%);
        border-top: 1px solid rgba(82,82,82,.16);
    }

    .product-detail__sticky-bar.is-visible{
        transform:translateY(0);
    }

    .product-detail__sticky-bar-info,
    .product-detail__sticky-bar-price{
        display:none;
    }

    .product-detail__sticky-bar-container{
        justify-content:center;
        padding: 16px;
        gap: 12px;
    }

    .product-detail__sticky-bar-purchase{
        width:100%;
    }

    .product-detail__sticky-bar .product-detail__actions{
        width:100%;
        height:56px;

        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:12px;
    }

    .product-detail__sticky-bar .product-detail__cart,
    .product-detail__sticky-bar .product-detail__buy{
        width:100%;
        height:56px;

        padding:0 16px;

        font-size:16px;
        line-height:22px;
    }

}

/* ==========================================================================
   LEFT COLUMN — GALLERY
   ========================================================================== */

.product-gallery{
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    min-width:0;
}

/* Main image */

.product-gallery__main{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio: 846 / 822.34;
    overflow:hidden;
    background:#F5F5F5;
    isolation:isolate;
    border: 1px solid rgba(82, 82, 82, .16);
}

.product-gallery__main::after{

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.30) 6.26%,
            rgba(0,0,0,0) 46.93%
        );
}

.product-gallery__main-image{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    cursor:zoom-in;
}

.product-gallery__empty{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-family:Inter,sans-serif;
    font-size:16px;
    line-height:22px;
    font-weight:400;

    color:#A3A3A3;
}

/* Badges */

.product-gallery__badges{
    position:absolute;
    top:24px;
    left:24px;

    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    flex-wrap:wrap;

    gap:8px;
}

.product-gallery__badge{
    min-width:0;
    padding:2px 7px;
    min-height: 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(82,82,82,.16);
    background:#f5f5f5;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;
    color:#171717;
    white-space:nowrap;
}

/* Gallery navigation */

.product-gallery__navigation{
    width:fit-content;
    max-width: min(625px, 100%);
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.product-gallery__arrow{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(82,82,82,.08);
    color:#171717;

    cursor:pointer;

    transition:background-color .2s ease;
}

.product-gallery__arrow:hover{
    background:rgba(82,82,82,.14);
}

.product-gallery__arrow:disabled{
    opacity:.4;
    cursor:default;
    pointer-events:none;
}

.product-gallery__arrow svg{
    display:block;

    width:24px;
    height:24px;
}

/* Thumbnail viewport */

.product-gallery__viewport{
    min-width:0;
    height:64px;

    flex:1;

    overflow:hidden;
}

.product-gallery__thumbs{
    min-width:max-content;
    height:64px;

    display:flex;
    align-items:center;

    gap:8px;

    /*
     * У .product-gallery__viewport overflow-x:auto (нативный скролл) —
     * без этого запаса декоративная рамка (::after, -4px) у ПЕРВОЙ и
     * ПОСЛЕДНЕЙ миниатюры упирается в границу скролл-окна и обрезается,
     * поскольку там больше некуда прокручивать, чтобы её открыть.
     * Паддинг добавляет эти 4px прямо в скроллящийся контент, так что
     * рамка всегда помещается, а сама лента миниатюр не сдвигается.
     */
    padding:0 4px;

    transition:transform .25s ease;
}

.product-gallery__thumb{
    position:relative;
    width:56px;
    height:56px;
    flex:0 0 56px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFFFFF;
    cursor:pointer;
}

.product-gallery__thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-detail button.product-gallery__thumb {
    border: 1px solid rgba(82,82,82,.16);
}

.product-detail button.product-gallery__thumb.is-active {
    border-color: transparent;
}


.product-gallery__thumb::after{
    content:"";

    position:absolute;
    inset:-4px;

    border:1px solid transparent;

    pointer-events:none;

    transition:border-color .2s ease;
}

.product-gallery__thumb.is-active::after{
    border-color:#171717;
}
/* Video thumbnail */

.product-gallery__thumb--video{
    position:relative;
}

.product-gallery__play{
    position:absolute;
    top:50%;
    left:50%;

    width:36px;
    height:36px;

    transform:translate(-50%,-50%);

    display:flex;
    align-items:center;
    justify-content:center;
}

.product-gallery__play svg{
    width:36px;
    height:36px;
}

/* ==========================================================================
   RIGHT COLUMN
   ========================================================================== */

.product-detail__content{
    max-width:100%;
    height:fit-content;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    height: 100%;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.product-detail__breadcrumbs{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    gap:8px;
    overflow:hidden;
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;
}

.product-detail__breadcrumbs a,
.product-detail__breadcrumb-current{    
    min-width:0;
    text-decoration:none;
    font-weight: 500;
}

.product-detail__breadcrumbs a{
    flex:0 0 auto;

    color:#A3A3A3;

    transition:color .2s ease;
}

.product-detail__breadcrumbs a:hover{
    color:#171717;
}

.product-detail__breadcrumb-current{
    min-width:0;

    color:#171717;
}

.product-detail__breadcrumb-arrow{
    position:relative;

    width:16px;
    height:16px;

    flex:0 0 16px;
}

.product-detail__breadcrumb-arrow::before{
    content:"";

    position:absolute;
    top:50%;
    left:50%;

    width:6px;
    height:6px;

    border-top:1.5px solid #A3A3A3;
    border-right:1.5px solid #A3A3A3;

    transform:translate(-65%,-50%) rotate(45deg);
}

/* ==========================================================================
   MAIN INFO
   ========================================================================== */

.product-detail__main-info{
    width:100%;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
}

/* Availability and brand */

.product-detail__heading-top{
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.product-detail__availability{
    min-width:0;
    height:24px;
    padding:3px 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    background:#F5F5F5;
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;
    color:#171717;
    white-space:nowrap;
}

.product-detail__availability.is-stock{
    padding:0 8px;
    background:#C2EB00;
}

.product-detail__availability svg{
    width:24px;
    height:24px;

    flex:0 0 24px;
}

.product-detail__brand{
    display:block;
    width:124px;
    max-width:124px;
    height:24px;
    max-height:24px;
    object-fit:cover;
    object-position:right center;
}

.product-detail__brand-name{
    min-width:0;
    height:24px;

    padding:4px 16px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:4px;

    background:#F5F5F5;

    font-family:Inter,sans-serif;
    font-size:14px;
    line-height:16px;
    font-weight:600;

    color:#171717;

    white-space:nowrap;
}

/* Title and description */

.product-detail__title-group{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
}

.product-detail__title{
    max-width:100%;
    margin:0;
    padding:0;
    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:72px;
    line-height:63px;
    letter-spacing: 0;
    text-transform:uppercase;
    color:#171717;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    transform-origin:left top;
}
.product-detail__description{
    width:100%;
    max-width:846px;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#171717;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Количество отображаемых строк */
    overflow: hidden;
}

.product-detail__description p{
    margin:0;
}

.product-detail__description p + p{
    margin-top:10px;
}

/* ==========================================================================
   SPECIFICATIONS
   ========================================================================== */

.product-detail__specification-block{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.product-detail__specs{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.product-detail-spec{
    width:100%;
    min-width:0;
    padding:11px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;

    border:1px solid transparent;

    background-image:
        repeating-linear-gradient(
            to right,
            rgba(82,82,82,.16) 0,
            rgba(82,82,82,.16) 4px,
            transparent 4px,
            transparent 8px
        ),
        repeating-linear-gradient(
            to right,
            rgba(82,82,82,.16) 0,
            rgba(82,82,82,.16) 4px,
            transparent 4px,
            transparent 8px
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(82,82,82,.16) 0,
            rgba(82,82,82,.16) 4px,
            transparent 4px,
            transparent 8px
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(82,82,82,.16) 0,
            rgba(82,82,82,.16) 4px,
            transparent 4px,
            transparent 8px
        );

    background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
    background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px;
    background-position:top left, bottom left, left top, right top;
}

.product-detail-spec__name{
    width:100%;
    overflow:hidden;
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;
    color:#171717;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.product-detail-spec__text{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
}

.product-detail-spec__value{

    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:40px;
    line-height:38px;
    letter-spacing:-1.2px;
    color:#171717;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.product-detail-spec__caption{
    width:100%;
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;
    color:#A3A3A3;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.product-detail__all-specs{
    height:28px;

    display:inline-flex;
    align-items:center;

    color:#3B82F6;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    text-decoration:none;

    transition:opacity .2s ease;
}

.product-detail__all-specs:hover{
    opacity:.72;
}

/* ==========================================================================
   OPTIONS (COLOR + CONFIGURATION CONTAINER)
   ========================================================================== */

.product-detail__options{
    width:100%;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
}

/* ==========================================================================
   COLORS
   ========================================================================== */

.product-detail__colors{
    width:100%;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.product-detail__color-title{
    width:100%;
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;
    color:#171717;
}

.product-detail__color-list{
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:8px;
}

.product-detail__color{
    position:relative;
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:999px !important;
    cursor:pointer;
    box-sizing: content-box;
}

.product-detail button.product-detail__color{
    border:1px solid #f5f5f5 !important;
}

.product-detail__color::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:1px solid transparent;
    border-radius:999px;
    pointer-events:none;
}

.product-detail__color.is-active::after{
    border-color:#0A0A0A;
}

/* ==========================================================================
   CONFIGURATIONS
   ========================================================================== */

.product-detail__configurations{
    width:100%;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.product-detail__configuration-title{
    width:100%;
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;
    color:#171717;
}

.product-detail__configuration-list{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.product-detail .product-detail__configuration{
    margin:0;
    padding:4px 11px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(82,82,82,.16);
    border-radius:999px;
    background:#FFFFFF;
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;
    color:#171717;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .2s ease,border-color .2s ease;
}

.product-detail a.product-detail__configuration:hover{
    border-color:rgba(210, 255, 0, .48);
}

.product-detail .product-detail__configuration.is-active{
    border-color:#D2FF00;
    background:#D2FF00;
    color:#171717;
    cursor:default;
}

/* ==========================================================================
   PURCHASE
   ========================================================================== */

.product-detail__purchase{
    width:100%;
    margin-top:auto;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:24px;
}

.product-detail__price{
    min-height:38px;
    display:flex;
    align-items:center;
    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:40px;
    line-height:38px;
    letter-spacing:-1.5px;
    color:#171717;
    transform-origin:left center;
}
.product-detail__actions{
    width:100%;
    height:56px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;
}

.product-detail__actions button{
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.4px;
    font-weight: 700;
    font-variation-settings:"wght" 700;
    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.product-detail__cart,
.product-detail__buy{
    width:100%;
    height:56px;

    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-family:"Roboto Flex",sans-serif;
    font-style:italic;
    font-weight:700;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;
    text-transform:uppercase;

    color:#171717;

    cursor:pointer;

    transition:background-color .2s ease;

    font-stretch:30%;
    font-variation-settings:
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 490,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712,
        "slnt" -8,
        "opsz" 84;
}

.product-detail__cart{
    background:#D2FF00;
}

.product-detail__cart:hover{
    background:#C2EB00;
}

.product-detail__buy{
    background:rgba(82,82,82,.08);
}

.product-detail__buy:hover{
    background:rgba(82,82,82,.14);
}
/* ==========================================================
   PRODUCT DETAIL — INTERACTIVE STATES
   ========================================================== */

.product-gallery__arrow,
.product-gallery__thumb,
.product-detail__color,
.product-detail__cart,
.product-detail__buy{
    position:relative;
    z-index:3;

    pointer-events:auto;
    touch-action:manipulation;
}

.product-gallery__viewport{
    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;

    scroll-behavior:smooth;
}

.product-gallery__viewport::-webkit-scrollbar{
    display:none;
}

/* Плавное переключение основного изображения */

.product-gallery__main-image{
    opacity:1;

    transition:
        opacity .22s ease,
        transform .35s ease;
}

.product-gallery__main-image.is-changing{
    opacity:.35;
}

/* Активная миниатюра */

.product-gallery__thumb{
    border:1px solid transparent;
}

.product-gallery__thumb.is-active{
    border-color:#171717;
}

/* Цвета */

.product-detail__color{
    transition:
        opacity .2s ease,
        box-shadow .2s ease;
}

.product-detail__color:hover{
    opacity:.82;
}

.product-detail__color.is-active{
    box-shadow:
        0 0 0 4px #FFFFFF,
        0 0 0 5px #171717;
}

/* Состояния корзины */

.product-detail__cart{
    background:#D2FF00;
    color:#171717;
}

.product-detail__cart:hover{
    background:#C2EB00;
}

.product-detail__cart.is-loading{
    background:#C2EB00;
    color:#171717;

    opacity:.65;

    cursor:wait;
}

.product-detail__cart.is-added{
    background:#171717;
    color:#FFFFFF;
}

.product-detail__cart.is-added:hover{
    background:#262626;
}

.product-detail__cart.is-error{
    background:#EF4444;
    color:#FFFFFF;
}

.product-detail__cart:disabled{
    pointer-events:none;
}
/* ==========================================================================
   PRODUCT CHARACTERISTICS
   ========================================================================== */

.product-characteristics,
.product-characteristics *,
.product-characteristics *::before,
.product-characteristics *::after{
    box-sizing:border-box;
}

.product-characteristics{
    width:100%;

    background:transparent;
    color:#171717;
}

.product-characteristics__container{
    display:grid;
    grid-template-columns:auto minmax(0,1485px);
    align-items:start;
    justify-content:space-between;
    gap:128px;
    row-gap: 32px;
}

.product-characteristics__container.container{
    padding-top:72px;
    padding-bottom:72px;
}

/* ==========================================================================
   TAG
   ========================================================================== */

.product-characteristics__tag{
    width:max-content;
    min-width:127px;
    height:24px;

    padding:4px 8px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#D2FF00;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;

    color:#171717;

    white-space:nowrap;
}

/* ==========================================================================
   GROUPS
   ========================================================================== */

.product-characteristics__groups{
    width:100%;
    max-width: 100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
}

.product-characteristics__group{
    width:100%;

    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:20px;
}

.product-characteristics__group-title{
    width:100%;

    margin:0;
    padding:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;

    color:#171717;
}

.product-characteristics__grid{
    width:100%;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:48px;
}

.product-characteristics__column{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:24px;
}

/* ==========================================================================
   ROW
   ========================================================================== */

.product-characteristics__row{
    width:100%;
    min-width:0;

    display:grid;
    grid-template-columns:auto minmax(32px,1fr) minmax(0,336px);
    align-items:start;

    gap:4px;
}

.product-characteristics__name{
    min-width:0;
    max-width:220px;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#A3A3A3;

    overflow-wrap:anywhere;
}

.product-characteristics__divider{
    width:100%;
    min-width:32px;
    height:17px;

    position:relative;
}

.product-characteristics__divider::after{
    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:6px;

    height:1px;

    background:rgba(82,82,82,.16);
}

.product-characteristics__value{
    width:100%;
    min-width:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#171717;

    overflow-wrap:anywhere;
}

/* ==========================================================================
   DOWNLOAD
   ========================================================================== */

.product-characteristics__download{
    grid-column:2;
    width:100%;
    max-width:1440px;
    height:56px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(82,82,82,.08);
    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;
    text-transform:uppercase;
    color:#171717;
    text-decoration:none;
    transition:background-color .2s ease;
}

.product-characteristics__download:hover{
    background:rgba(82,82,82,.14);
}

/* ==========================================================================
   DELIVERY AND PAYMENT
   ========================================================================== */

.product-delivery-payment,
.product-delivery-payment *,
.product-delivery-payment *::before,
.product-delivery-payment *::after{
    box-sizing:border-box;
}

.product-delivery-payment{
    width:100%;

    background:transparent;
    color:#171717;
}

.product-delivery-payment__container{
    display:grid;
    grid-template-columns:auto minmax(0,1485px);
    align-items:start;
    justify-content:space-between;
    gap:128px;
}

.product-delivery-payment__container.container{
    padding-top:72px;
    padding-bottom:72px;
}

/* ==========================================================================
   TAG
   ========================================================================== */

.product-delivery-payment__tag{
    width:max-content;
    min-width:141px;
    height:24px;

    padding:4px 8px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#D2FF00;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;

    color:#171717;

    white-space:nowrap;
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.product-delivery-payment__content{
    width:100%;
    max-width:1440px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:48px;
}

.product-delivery-payment__section{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:32px;
}

/* ==========================================================================
   SECTION HEADING
   ========================================================================== */

.product-delivery-payment__heading{
    width:100%;
    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.product-delivery-payment__title{
    margin:0;
    padding:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:700;
    font-size:32px;
    line-height:38px;
    letter-spacing:-1px;

    color:#171717;
}

.product-delivery-payment__more{
    min-height:28px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#3B82F6;

    text-decoration:none;

    transition:opacity .2s ease;
}

.product-delivery-payment__more:hover{
    opacity:.72;
}

/* ==========================================================================
   DELIVERY CARDS
   ========================================================================== */

.product-delivery-payment__cards{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.product-delivery-card{
    width:100%;
    min-width:0;
    padding:23px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    border:1px solid rgba(82,82,82,.16);
    background:transparent;
}

.product-delivery-card__icon{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px;

    border-radius:999px;

    background:#F5F5F5;
    color:#3B82F6;
}

.product-delivery-card__icon svg{
    display:block;

    width:24px;
    height:24px;
}

.product-delivery-card__icon--logo{
    padding:0;
}

.product-delivery-card__icon--logo img{
    display:block;

    width:43px;
    max-width:43px;
    height:24px;

    object-fit:contain;
}

.product-delivery-card__cdek-text{
    font-family:Inter,sans-serif;
    font-size:13px;
    line-height:16px;
    font-weight:700;
    font-style:italic;

    color:#00A651;
}

.product-delivery-card__text{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:16px;
}

.product-delivery-card__title{
    width:100%;

    margin:0;
    padding:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;

    text-align:center;

    color:#171717;
}

.product-delivery-card__description{
    width:100%;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#737373;
}

/* ==========================================================================
   PAYMENT TEXT
   ========================================================================== */

.product-delivery-payment__payment-text{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:16px;
}

.product-delivery-payment__lead{
    width:100%;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:18px;
    line-height:24px;
    letter-spacing:-.4px;

    color:#171717;
}

.product-delivery-payment__list{
    width:100%;

    margin:0;
    padding-left:24px;

    display:flex;
    flex-direction:column;

    gap:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#737373;
}

.product-delivery-payment__list li{
    margin:0;
    padding:0;
}

.product-delivery-payment__note{
    width:100%;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#737373;
}

html{
    scroll-behavior:smooth;
}
#product-characteristics{
    scroll-margin-top:120px;
}
/* ==========================================================================
   VIEWED PRODUCTS
   ========================================================================== */

.product-viewed,
.product-viewed *,
.product-viewed *::before,
.product-viewed *::after{
    box-sizing:border-box;
}

.product-viewed{
    width:100%;

    background:transparent;
    color:#171717;
}

.product-viewed__container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:48px;
}

.product-viewed__container.container{
    padding-top:72px;
    padding-bottom:72px;
}

/* ==========================================================================
   HEADING
   ========================================================================== */

.product-viewed__heading{
    width:100%;
    min-height:50px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.product-viewed__title{
    width:max-content;

    margin:0;
    padding:0;

    font-family:"Roboto Flex",sans-serif;
    font-style:italic;
    font-weight:900;
    font-size:56px;
    line-height:50px;
    letter-spacing:-2px;

    color:#171717;

    transform:scaleX(.82);
    transform-origin:left center;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}
.product-viewed__controls{
    display:flex;
    align-items:center;

    gap:8px;
}

.product-viewed__arrow{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;

    border:0;
    border-radius:0;

    background:rgba(82,82,82,.08);
    color:#171717;

    cursor:pointer;

    transition:
        background-color .2s ease,
        opacity .2s ease;
}

.product-viewed__arrow:hover{
    background:rgba(82,82,82,.14);
}

.product-viewed__arrow:disabled{
    opacity:.35;
    cursor:default;
    pointer-events:none;
}

.product-viewed__arrow svg{
    display:block;

    width:24px;
    height:24px;
}

/* ==========================================================================
   SLIDER
   ========================================================================== */

.product-viewed__viewport{
    width:100%;

    overflow:hidden;
}

.product-viewed__track{
    width:100%;

    display:flex;
    align-items:flex-start;

    gap:12px;

    transition:transform .35s ease;
    will-change:transform;
}

/* ==========================================================================
   CARD — .catalog-product-card, та же карточка что и в каталоге
   (стили самой карточки — в style.css компонента каталога, тут только
   размер ячейки слайдера)
   ========================================================================== */

.product-viewed__item{
    flex:0 0 calc((100% - 24px) / 3);

    min-width:0;
}

/* ==========================================================================
   "ПОКУПАЮТ ВМЕСТЕ" — карточки тоже .catalog-product-card (см. выше),
   тут только то, чего там не было: табы категорий, кнопка-корзина
   поверх фото карточки, кнопка "Перейти в категорию".
   ========================================================================== */

.product-bought-together,
.product-bought-together *,
.product-bought-together *::before,
.product-bought-together *::after{
    box-sizing:border-box;
}

.product-bought-together{
    width:100%;

    background:transparent;
    color:#171717;
}

.product-bought-together__container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:48px;
}

.product-bought-together__container.container{
    padding-top:72px;
    padding-bottom:72px;
}

.product-bought-together__top{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:32px;
}

.product-bought-together__heading{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.product-bought-together__title{
    width:max-content;

    margin:0;
    padding:0;

    font-family:"Roboto Flex",sans-serif;
    font-style:italic;
    font-weight:900;
    font-size:56px;
    line-height:50px;
    letter-spacing:-2px;

    color:#171717;

    transform:scaleX(.82);
    transform-origin:left center;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

.product-bought-together__controls{
    display:flex;
    align-items:center;

    gap:8px;
}

.product-bought-together__arrow{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;

    border:0;
    border-radius:0;

    background:rgba(82,82,82,.08);
    color:#171717;

    cursor:pointer;

    transition:background-color .2s ease;
}

.product-bought-together__arrow:disabled{
    opacity: .4;
    cursor: not-allowed;
}

.product-bought-together__arrow:not(:disabled):hover{
    background:rgba(82,82,82,.12);
}

.product-bought-together__arrow svg{
    display:block;

    width:24px;
    height:24px;
}

/* Табы категорий */

.product-bought-together__tabs{
    width:fit-content;
    display:flex;
    align-items:center;
    gap:4px;
    padding:2px;
    background:rgba(82,82,82,.08);
}

.product-bought-together__tab{
    margin:0;
    padding:11px 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0;
    background:transparent;
    cursor:pointer;
    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-size:16px;
    font-weight:700;
    line-height:22px;
    letter-spacing:-.4px;
    text-transform:uppercase;
    color:#A3A3A3;
    transition:all .2s ease;
}

.product-bought-together__tab:hover{
    background:rgba(82,82,82,.08);
}

.product-bought-together__tab.is-active{
    background:#FFFFFF;

    color:#171717;
}

/*
 * Слайдер — translateX по треку (та же механика, что и у остальных
 * слайдеров сайта), по одной карточке за клик стрелки. Так надёжнее,
 * чем нативный scrollLeft: страница отдаётся без <!DOCTYPE>, браузер
 * рендерит её в quirks-mode, где scrollLeft на вложенных элементах
 * ведёт себя нестабильно — transform от режима рендеринга не зависит.
 */

.product-bought-together__viewport{
    width:100%;

    display:none;

    overflow:hidden;
}

.product-bought-together__viewport.is-active{
    display:block;
}

.product-bought-together__track{
    width:100%;
    display:flex;
    align-items:stretch;
    gap:12px;
    transition:transform .35s ease;
    will-change:transform;
}

.product-bought-together__item{
    flex:0 0 calc((100% - 3 * 12px) / 4);
    min-width:0;
}

.product-bought-together-card__cart{
    position:absolute;

    right:16px;
    bottom:16px;

    z-index:2;

    width:44px;
    height:44px;

    margin:0;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:999px;

    background:#D2FF00;
    color:#171717;

    cursor:pointer;

    transition:background-color .2s ease;
}

.product-bought-together-card__cart:hover{
    background:#C6F300;
}

.product-bought-together-card__cart svg{
    display:block;

    width:20px;
    height:20px;
}

.product-bought-together__all{
    width:100%;
    height:56px;

    margin:0;
    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;

    background:rgba(82,82,82,.08);

    cursor:pointer;

    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;
    text-transform:uppercase;

    color:#171717;
    text-decoration:none;

    transition:background-color .2s ease;
}

.product-bought-together__all:hover{
    background:rgba(82,82,82,.14);
}

/* ==========================================================================
   "СТАТЬИ"
   ========================================================================== */

.product-articles,
.product-articles *,
.product-articles *::before,
.product-articles *::after{
    box-sizing:border-box;
}

.product-articles{
    width:100%;

    background:transparent;
    color:#171717;
}

.product-articles__container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:48px;
}

.product-articles__container.container{
    padding-top:72px;
    padding-bottom:72px;
}

.product-articles__heading{
    width:100%;
    min-height:50px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.product-articles__title{
    width:max-content;

    margin:0;
    padding:0;

    font-family:"Roboto Flex",sans-serif;
    font-style:italic;
    font-weight:900;
    font-size:56px;
    line-height:50px;
    letter-spacing:-2px;

    color:#171717;

    transform:scaleX(.82);
    transform-origin:left center;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

.product-articles__controls{
    display:flex;
    align-items:center;

    gap:8px;
}

.product-articles__arrow{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;

    border:0;
    border-radius:0;

    background:rgba(82,82,82,.08);
    color:#171717;

    cursor:pointer;

    transition:background-color .2s ease;
}

.product-articles__arrow:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.product-articles__arrow:not(:disabled):hover{
    background:rgba(82,82,82,.14);
}

.product-articles__arrow svg{
    display:block;

    width:24px;
    height:24px;
}

/*
 * Слайдер — та же механика (translateX по треку), что и у
 * .product-bought-together__viewport/__track: по одной карточке
 * за клик стрелки.
 */

.product-articles__viewport{
    width:100%;

    overflow:hidden;
}

.product-articles__track{
    width:100%;

    display:flex;
    align-items:stretch;

    gap:12px;

    transition:transform .35s ease;
    will-change:transform;
}

.product-articles__item{
    flex: 0 0 calc((100% - 1 * 12px) / 2);

    min-width: 0;
}

.product-article-card{
    width:100%;
    height:100%;

    display:flex;
    align-items:stretch;

    gap:24px;
}

.product-article-card__image{
    position:relative;

    flex:0 0 calc(50% - 12px);

    aspect-ratio:420 / 408;

    display:block;

    overflow:hidden;

    background:#F5F5F5;

    text-decoration:none;
}

.product-article-card__image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:transform .35s ease;
}

.product-article-card:hover .product-article-card__image img{
    transform:scale(1.02);
}

.product-article-card__info{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
}

.product-article-card__tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:3px 8px;

    background:#F5F5F5;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;

    color:#171717;
}

.product-article-card__title{
    margin:0;

    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:24px;
    line-height:30px;
    letter-spacing:-.4px;

    color:#171717;

    text-decoration:none;

    transition:opacity .2s ease;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-article-card__title:hover{
    opacity:.72;
}

.product-article-card__description{
    margin:0;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#171717;

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-article-card__meta{
    margin-top:auto;

    display:flex;
    align-items:center;

    gap:8px;
}

.product-article-card__date,
.product-article-card__views{
    font-family:Inter,sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:22px;
    letter-spacing:-.4px;
    color:#A3A3A3;
}

.product-article-card__meta-divider{
    width:1px;
    height:14px;

    background:rgba(82,82,82,.24);
}

/* ==========================================================================
   STORY (описание)
   ========================================================================== */

.product-story,
.product-story *,
.product-story *::before,
.product-story *::after{
    box-sizing:border-box;
}

.product-story{
    width:100%;

    background:transparent;
    color:#171717;
}

.product-story button{
    margin:0;
    border:0;
    padding:0;

    appearance:none;
    -webkit-appearance:none;

    background:none;

    font:inherit;
    color:inherit;
    text-align:left;

    cursor:pointer;
}

.product-story__container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:40px;
}

.product-story__container.container{
    padding-top:72px;
    padding-bottom:72px;
}

.product-story__heading{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:128px;
    justify-content: space-between;
}

.product-story__badge{
    flex:0 0 auto;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 10px;

    background:#C2EB00;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;
    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;

    color:#171717;
}

.product-story__title{
    flex:1 1 auto;
    margin:0;
    padding:0;
    font-family:"Roboto Flex Custom", sans-serif !important;
    font-style: italic !important;
    font-variation-settings:"wght" 700 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-weight:700;
    font-size:56px;
    line-height:50px;
    letter-spacing:-0.6px;
    color:#171717;
    transform-origin:left top;
}

.product-story__body{
    width:100%;
    display:grid;
    grid-template-columns:854fr 411fr 411fr;
    align-items:stretch;
    gap:32px;
}

.product-story__text{
    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size:16px;
    line-height:22px;
    letter-spacing:-.2px;
    color:#171717;
    height: fit-content;
}

.product-story__image{
    position:relative;
    display:block;
    width:100%;
    overflow:hidden;
    background:#F5F5F5;
    height: fit-content;
}

.product-story__image--main{
    aspect-ratio:854/608;
}

.product-story__image--side{
    aspect-ratio:1/1;
}

.product-story__image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}

.product-story__play{
    position:absolute;
    top:50%;
    left:50%;
    width:56px;
    height:56px;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(82,82,82,.16);
    border-radius:999px;
    background: #fff;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#171717;
    transition: .3s ease;
}


.product-story__play:hover {
    background: rgba(255, 255, 255, .88);
}

/* ==========================================================================
   VIDEO MODAL
   ========================================================================== */

.video-modal,
.video-modal *,
.video-modal *::before,
.video-modal *::after,
.photo-modal,
.photo-modal *,
.photo-modal *::before,
.photo-modal *::after,
.buy-modal,
.buy-modal *,
.buy-modal *::before,
.buy-modal *::after{
    box-sizing:border-box;
}

.video-modal,
.photo-modal,
.buy-modal{
    position:fixed;
    inset:0;
    z-index:10200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:32px;
}

.video-modal.is-open,
.photo-modal.is-open,
.buy-modal.is-open{
    display:flex;
}

.photo-modal{
    display:flex;

    visibility:hidden;
    opacity:0;
    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility 0s linear .25s;
}

.photo-modal.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;

    transition:
        opacity .25s ease,
        visibility 0s linear 0s;
}

.photo-modal__box{
    transform:scale(.96);

    transition:transform .25s ease;
}

.photo-modal.is-open .photo-modal__box{
    transform:scale(1);
}

.video-modal__backdrop{
    position:absolute;
    inset:0;

    background:rgba(23,23,23,.72);

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    cursor:pointer;
}

.video-modal__box{
    position:relative;

    width:100%;
    max-width:1280px;
    max-height:100%;
}

.video-modal__close{
    position:absolute;
    top: 0;
    right: -12px;
    transform: translateX(100%);
    z-index:1;
    width:40px;
    height:40px;
    margin:0;
    padding:0;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFFFFF;
    color:#171717;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    transition:opacity .2s ease;
}

.video-modal__close:hover{
    opacity:.88;
}

.video-modal__player{
    display:block;

    width:100%;
    max-height:calc(100vh - 128px);

    background:#000000;
}

.video-modal__iframe{
    display:block;

    width:100%;
    aspect-ratio:16/9;
    max-height:calc(100vh - 128px);

    border:0;
    background:#000000;
}

/* ==========================================================================
   PHOTO MODAL
   ========================================================================== */

.photo-modal__box{
    position:relative;

    width:100%;
    max-width:1280px;
    max-height:100%;

    display:flex;
    flex-direction:column;

    gap:12px;

    background:transparent;
}

.photo-modal__title{
    display:none;
}

.photo-modal__main{
    position:relative;

    width:100%;
    aspect-ratio:1280/700;
        background: rgba(0, 0, 0, 0.7);

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.photo-modal__image{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;
}

.photo-modal__arrow{
    position:absolute;
    top:50%;

    transform:translateY(-50%);

    z-index:1;

    width:48px;
    height:48px;

    margin:0;
    padding:0;

    border:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.80);
    color:#171717;

    cursor:pointer;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    transition:background-color .2s ease;
}

.photo-modal__arrow:hover{
    background:rgba(255,255,255,.92);
}

.photo-modal__arrow--prev{
    left:16px;
}

.photo-modal__arrow--next{
    right:16px;
}

.photo-modal__arrow svg{
    display:block;

    width:24px;
    height:24px;
}

.photo-modal__navigation{
    width:100%;

    padding:8px 16px;

    display:flex;
    align-items:center;
    justify-content: center;

    gap:12px;

    background:#FFFFFF;
}

.photo-modal__thumb-arrow{
    flex:0 0 auto;

    width:32px;
    height:32px;

    margin:0;
    padding:0;

    border:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent;
    color:#171717;

    cursor:pointer;

    transition:opacity .2s ease;
}

.photo-modal__thumb-arrow:hover{
    opacity:.6;
}

.photo-modal__thumb-arrow svg{
    display:block;

    width:20px;
    height:20px;
}

.photo-modal__thumbs-viewport{
    min-width:0;
    height:64px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.photo-modal__thumbs-viewport::-webkit-scrollbar{
    display:none;
}

.photo-modal__thumbs{
    min-width:max-content;
    height:64px;

    display:flex;
    align-items:center;

    gap:8px;

    padding:0 4px;
}

.photo-modal__thumb{
    position:relative;

    width:56px;
    height:56px;

    flex:0 0 56px;

    margin:0;
    padding:0;

    border:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#F5F5F5;

    cursor:pointer;
}

.photo-modal__thumb img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.photo-modal__thumb::after{
    content:"";

    position:absolute;
    inset:-4px;

    border:1px solid transparent;

    pointer-events:none;

    transition:border-color .2s ease;
}

.photo-modal__thumb.is-active::after{
    border-color:#171717;
}

/*
 * Стили модалки "Заказать звонок" (.buy-modal и т.п.) переехали в
 * отдельный общий файл css/buy-modal.css - модалка теперь есть и на
 * главной (кнопка "Получить цену"), держать её стили только тут
 * означало бы либо дублировать их в home.css, либо тянуть сюда весь
 * этот файл на страницу, которой нужен только этот один блок.
 * element.php подключает buy-modal.css отдельно (см. компонент).
 */

.product-bought-together__title, .product-articles__title, .product-viewed__title {
        font-family:"Roboto Flex Custom", sans-serif !important;
        font-style: italic !important;
        font-variation-settings:"wght" 700 !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        transform: none;
        letter-spacing: -1.2px;
        font-weight: 700;
}

@media(max-width: 1560px) {
    .product-story__body {
        grid-template-columns: 614fr 291fr 291fr;
    }

    .product-characteristics__grid {
        grid-template-columns: 1fr;
    }

    .product-bought-together__item {
        flex: 0 0 calc((100% - 3 * 12px) / 3);
    }

    .photo-modal .video-modal__close {
        right: 0;
        top: -12px;
        transform: translateY(-100%);
    }
}

@media(max-width: 1280px) {
    .product-detail__title {
        font-size: 56px;
        line-height: 50px;
    }

    .product-detail__specs {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 1024px) {
    .product-detail__container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .product-gallery,
    .product-detail__content,
    .product-detail__main-info,
    .product-detail__title-group {
        display: contents;
    }

    .product-detail__breadcrumbs {
        order: -3;
    }

    .product-detail__heading-top {
        order: -2;
    }

    .product-detail__title {
        order: -1;
    }

    .product-detail__description {
        order: 1;
    }

    .product-detail__specification-block,
    .product-detail__options,
    .product-detail__purchase {
        order: 2;
    }

    .product-detail__container.container {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .product-detail__title {
        font-size: 32px;
        line-height: 30px;
    }

    .product-gallery__navigation{
        align-self: center;
    }

    .product-detail-spec {
        flex-direction: row;
        justify-content: space-between;
    }

    .product-detail-spec__value{
        font-size: 32px;
        line-height: 30px;
    }

    .product-detail-spec__name {
        width: fit-content;
    }

    .product-detail-spec__text {
        width: fit-content;
        min-width: 220px;
    }

    .product-detail__price,
    .product-story__title {
        font-size: 32px;
        line-height: 30px;
        min-height: unset;
    }

    .product-story__heading{
        flex-direction: column;
        gap: 32px;
    }

    .product-story__body{
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .product-story__container.container,
    .product-characteristics__container.container,
    .product-delivery-payment__container.container,
    .product-bought-together__container.container,
    .product-articles__container.container,
    .product-viewed__container.container  {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .product-characteristics__container {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .product-characteristics__row {
        flex-direction: column;
        display: flex;
    }

    .product-characteristics__divider {
        display: none;
    }

    .product-characteristics__group--sizes .product-characteristics__row {
        display: grid;
        grid-template-columns: auto minmax(32px, 1fr) minmax(0, 336px);
    }

    .product-characteristics__group--sizes .product-characteristics__divider {
        display: block;
    }

    .product-characteristics__column {
        gap: 16px;
    }

    .product-characteristics__grid {
        gap: 16px;
    }

    .product-delivery-payment__container{
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .product-delivery-payment__title {
        font-size: 28px;
        line-height: 34px;
    }

    .product-delivery-payment__cards {
        display: flex;
        flex-direction: column;
    }

    .product-delivery-card__title,
    .product-delivery-payment__lead {
        font-size: 16px;
        line-height: 20px;
    }

    .product-bought-together__controls,
    .product-articles__controls,
    .product-viewed__controls  {
        display: none;
    }

    .product-bought-together__title,
    .product-articles__title,
    .product-viewed__title {
        font-size: 40px;
        line-height: 38px;
    }

    .product-bought-together__container,
    .product-articles__container,
    .product-viewed__container {
        gap: 32px;
    }

    .product-bought-together__item,
    .product-articles__item,
    .product-viewed__item  {
        flex: 0 0 296px;
    }

    .product-bought-together__viewport,
    .product-articles__viewport,
    .product-viewed__viewport {
        width: calc(100% + 64px);

        margin: 0 -32px;
        padding: 0 32px;

        box-sizing: border-box;
    }

    .product-bought-together__viewport,
    .product-articles__viewport,
    .product-viewed__viewport {
        width: calc(100% + 64px);

        margin: 0 -32px;
        padding: 0 32px;
    }

    .product-article-card {
        flex-direction: column;
        height: auto;
    }

    .product-article-card__image{
        aspect-ratio: 1/1;
    }

    .product-article-card__description{
        -webkit-line-clamp: 3;
    }

    .product-article-card__title{
        font-size: 20px;
        line-height: 24px;
    }

    .product-detail-spec__name {
        white-space: unset;
        text-overflow: unset;
    }
}

@media(max-width: 991px) {
    .product-bought-together__viewport,
    .product-articles__viewport,
    .product-viewed__viewport {
        width: calc(100% + 32px);

        margin: 0 -16px;
        padding: 0 16px;
    }

    .product-bought-together__tabs-scroll {
        width: calc(100% + 32px);

        display: flex;
        align-items: center;

        margin: 0 -16px;
        padding-left: 16px;

        box-sizing: border-box;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .product-bought-together__tabs-scroll::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .product-bought-together__tabs-spacer {
        flex: 0 0 16px;
        width: 16px;
    }

    .product-bought-together__tabs {
        flex: 0 0 auto;
        width: max-content;
    }

    .product-bought-together__tab {
        flex: 0 0 auto;
    }


    .video-modal{
        padding:16px;
    }

    .photo-modal{
        padding:0;
    }

    .photo-modal__box{
        width:100%;
        height:100%;
        height:100dvh;
        max-width:none;
        max-height:none;

        padding-top:72px;

        gap:0;

        background:#FFFFFF;
    }

    .photo-modal__title{
        display:block;

        position:absolute;
        top:16px;
        left:16px;
        right:56px;

        font-family:"Roboto Flex Custom", sans-serif !important;
        font-style: italic !important;
        font-variation-settings:"wght" 700 !important;
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        font-weight:700;
        font-size:16px;
        line-height:20px;

        color:#171717;

        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .photo-modal__close{
        position:absolute;
        top:16px;
        right:16px;
        transform:none;

        background:rgba(23,23,23,.06);
    }

    .photo-modal__main{
        flex:1 1 auto;

        width:100%;
        height:auto;
        aspect-ratio:auto;

        background:transparent;
    }

    .photo-modal__image{
        object-fit:cover;
        height: auto;
        max-height: 100%;
    }

    .photo-modal__navigation{
        flex:0 0 auto;

        padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .photo-modal .video-modal__close {
        right: 16px;
        top: -16px;
        transform: none;
    }
}

@media(max-width: 440px) {
    .product-detail-spec__text {
        min-width: 140px;
    }
}