/* =============================================================================
   BONO ADDON CSS
   Дополнение к теме Bono: preloader, модалки, фильтры, SEO-текст,
   категории, видео-иконки, таблицы и точечные правки WooCommerce.
   ========================================================================== */


/* =============================================================================
   [01] ПЕРЕМЕННЫЕ И AJAX PRELOADER
   ========================================================================== */

*{
    --gradient_preloader:linear-gradient(132deg, rgba(0,255,255,.3), rgba(255,0,255,.3));
    --preloader_border:#fff;
    --preloader_border_active:#5272dc;
}

/* Контейнер с ajax-загрузкой. */
.ajax_load{
    position:relative;
    z-index:9999;
}

/* Полупрозрачный overlay во время ajax-загрузки. */
.ajax_load::after{
    content:"";
    position:absolute;
    top:-10px;
    left:-10px;
    width:calc(100% + 20px);
    height:calc(100% + 20px);
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient_preloader);
    border-radius:5px;
}

/* Крутилка ajax-загрузки. */
.ajax_load::before{
    content:"";
    position:absolute;
    z-index:2;
    top:calc(50% - 20px);
    left:calc(50% - 20px);
    display:block;
    width:40px;
    height:40px;
    border:4px solid var(--preloader_border);
    border-top:4px solid var(--preloader_border_active);
    border-radius:50%;
    animation:spin .5s linear infinite;
}


/* =============================================================================
   [02] КАРТОЧКА ТОВАРА И PRODUCT INFO
   ========================================================================== */

/* Пустое короткое описание товара скрываем. */
.product-info .woocommerce-product-details__short-description:empty{
    display:none;
}

/* Суффикс цены на странице товара чуть приглушен. */
div.product .product-info .price .woocommerce-price-suffix{
    opacity:.8;
}

/* Sale-цена на странице товара: новая цена впереди. */
div.product.sale .price{
    flex-direction:row-reverse;
}

/* Форма покупки на странице товара в колонку. */
html body .product-info .cart{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-start;
    justify-content:center;
}

/* Блок информации после покупки. */
.product-after-buy-info{
    width:100%;
    margin-top:15px;
    padding:4px;
    border:2px solid #000;
    color:var(--black);
    font-size:90%;
    font-weight:400;
    text-transform:uppercase;
}

/* Картинки товара не должны растягивать контейнер. */
.product-container .product-images{
    height:max-content;
}


/* =============================================================================
   [03] ГРУППЫ АТРИБУТОВ И ВАРИАЦИИ
   ========================================================================== */

/* Заголовок группы атрибутов. */
.woocommerce-group__title-attr{
    display:block;
    padding:.62069em 0;
    font-size:1.06897em;
    font-weight:700;
    letter-spacing:.1em;
}

/* Список атрибутов в группе. */
.woocommerce-group__attrs__list{
    display:flex;
    flex-wrap:wrap;
    gap:5px 15px;
}

/* Штатные variations скрываются после кастомной группы. */
.woocommerce-group ~ .variations{
    display:none;
}

/* Выбранное значение атрибута. */
.js_attr_value{
    color:var(--red);
    font-weight:400;
}


/* =============================================================================
   [04] МОДАЛЬНОЕ ОКНО BONO
   ========================================================================== */

.pointer{
    cursor:pointer;
}

/* Затемнение модалки. */
.model_bono{
    position:fixed;
    left:0;
    top:0;
    z-index:99999999999;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.6);
    cursor:initial !important;
}

/* Контент модалки. */
.model_bono__content{
    position:relative;
    max-width:90vw;
    max-height:90vh;
    padding:40px 20px;
    overflow:auto;
    overflow-x:hidden;
    background-color:#fff;
    border-radius:4px;
}

/* Кнопка закрытия модалки. */
.model_bono__closed{
    position:absolute;
    right:20px;
    top:20px;
    width:15px;
    height:15px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    cursor:pointer;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAADsQAAA7EB9YPtSQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQdSURBVHic7Zw5bhRBFIY/HDniAJgLgQANEjixuAwSGRYnYQkwMpwDsUbOQBgHdgAI0BA0I2wYD9Pd1VVv+T9pEmuq9S+vy9M9C/zhArANPAeOgK/AO2AX2EJ44zLwAHgPfAM+A/vALbquz3AReAbMz3mcALMaqkURbtJ1dl6fe3SdA7DB6vIXjx/ATi0HYjA7dF39r889fu8E22s8WUPgg3XLXzxuA7zosWAxBHcqGRLrsw18p1+X+9C94OuzSDuBPfqe+YvHIXSv9vsu1BDYYWj5c+ALwNuBizUE7RlT/hx4Dd11/tADaAjaMbb8OV33bLH6mlFDYI8S5R8DlxYHnBU4oIagDiXK/8GSG3tDLiOWHViXiNMxeUcaArtU60ZDYI/qnWgI7NCsCw1Be5p30FxAYsxkb0ZIIsxlbk5QYMxmbVZYIMxnbF6gY9xk60aoI9xl6k6wYdxm6Va4Idxn6N5AQ8JkF8ZIRcJlFs7QhITNKqyxgoTPKLzBEaTJJo3RHqTLJJ3hFaTNIq3xU6TPIHMAmb2fIWMQGT2vJFMgmbz2IkMwGTyOInJAkb0VJWJQET1NSqTAInmpSoTgInhoiucAPWs3hccgPWo2jadAPWl1hYdgPWh0jeWALWsLhcWgLWoKjaXALWlJhYXgLWhITcsCVL4RWhSh8o1RsxCVb5Qaxah840xZkMp3whRFqXxnlCxM5TulRHE/KfPDyyq/ESWGQOU7p9UQqHxD1B4ClW+QWkOg8g0z9RCofAdMNQQq3xGlh0DlO2Sb8df4c7p7BWHL32gtQIgp0L+AxOhFYGJ0GZgY3QhKjG4FJ0ZvBiVGbwcnRh8ISYw+EpYYfSg0MfpYeGL0xZDE6KthidGXQxOjr4cnxkIBFjSkxFLwlrSkwGLgFjWFxHLQlrWFwEPAHjS6xFOwnrS6wGOgHjWbxHOQnrWbIEKAETw0IVJwkbxUIWJgET1NQuSgInsrQoaAMngcRKZgMnldi4yBZPS8lMxBZPYOKABInEFa40tIl0U6w2uQJpM0RgcQPpvwBgsQNqOwxiYgXFbhDFUgTGZhjDTAfXbuDRjAbYZuhRvEXZbuBDvATaZuhDrEfLbmBQbAbMZmhQXEXNbmBCXATOZmhCSkefbNBYh2Hah8O1TvQuXbo1onKt8uk3ej8u0zWUfXKPOjyTulHYt/2KFMV9cWB7wMHBY4oMqvR4khOAS2AO6NPJC2/TaU+HdwF+DViAPozG/L2J3gJcDRwMU6820wZif4BPBxwEKd+bYYuhN8AHjUc5HOfJsM2QkeAtzosUBnvm367gTXFwufrPFkle+DdYfg8elFm7//cN6Tj4FZFfmiBDPghNVb/+bfiy4AV4GnwAHwBXgN3Acu1VAtirIF7AJv6Lo8oOv2Cl3XAPwC+xEoLsYFnwcAAAAASUVORK5CYII=');
}

/* Заголовок модалки. */
.model_bono__content__title{
    font-size:28px;
    font-weight:700;
    text-align:center;
}

/* Верхняя часть модалки. */
.model_bono__content__top{
    margin-bottom:20px;
}


/* =============================================================================
   [05] ТАБЫ И КАСТОМНЫЕ RADIO
   ========================================================================== */

.list-tab{
    display:flex;
    flex-wrap:wrap;
    gap:10px 15px;
    margin-bottom:20px;
}

.tab_bono{
    padding:3px 10px;
    border:1px solid var(--red);
    cursor:pointer;
    transition:.2s;
}

.tab_bono.active{
    color:#fff;
    background-color:#d7271d;
}

/* Кастомный radio input скрыт. */
.custom_radiobox_monolit input[type="radio"]{
    display:none;
}

/* Обертка кастомного radio. */
.custom_radiobox_monolit{
    position:relative;
    display:inline-block;
    padding-left:30px;
    font-size:16px;
    cursor:pointer;
    transition:.1s;
}

/* Внешний круг radio. */
.custom_radiobox_monolit::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    display:inline-block;
    width:22px;
    height:22px;
    border:1px solid #ddd;
    border-radius:50%;
    background:#eaeaea;
    background-repeat:no-repeat;
    background-position:center;
    background-size:0;
    transition:all .1s ease;
    background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzAgMzAiIHdpZHRoPSI2MHB4IiBoZWlnaHQ9IjYwcHgiPjxwYXRoIGQ9Ik0gMjYuOTgwNDY5IDUuOTkwMjM0NCBBIDEuMDAwMSAxLjAwMDEgMCAwIDAgMjYuMjkyOTY5IDYuMjkyOTY4OCBMIDExIDIxLjU4NTkzOCBMIDQuNzA3MDMxMiAxNS4yOTI5NjkgQSAxLjAwMDEgMS4wMDAxIDAgMSAwIDMuMjkyOTY4OCAxNi43MDcwMzEgTCAxMC4yOTI5NjkgMjMuNzA3MDMxIEEgMS4wMDAxIDEuMDAwMSAwIDAgMCAxMS43MDcwMzEgMjMuNzA3MDMxIEwgMjcuNzA3MDMxIDcuNzA3MDMxMiBBIDEuMDAwMSAxLjAwMDEgMCAwIDAgMjYuOTgwNDY5IDUuOTkwMjM0NCB6Ii8+PC9zdmc+');
}

/* Активный radio через :has(). */
.custom_radiobox_monolit:has(input[type="radio"]:checked)::before{
    border-color:#999;
    box-shadow:2px 2px 5px -2px #888;
    background-size:15px;
}

/* Текст активного radio. */
.custom_radiobox_monolit:has(input[type="radio"]:checked){
    color:var(--red_hover);
}


/* =============================================================================
   [06] КНОПКИ И ССЫЛКИ
   ========================================================================== */

.btn-small{
    cursor:pointer;
    transition:.1s;
}

.btn-small:hover{
    opacity:.8;
}

.btn-open-modal-table{
    display:block;
    margin-top:10px;
    color:#3960ff;
    font-weight:700;
    text-decoration:underline;
    cursor:pointer;
    transition:.1s;
}

.btn-open-modal-table:hover{
    color:var(--red);
}

.btn-red{
    color:var(--red);
}

.filter-selection__link_type_reset{
    cursor:pointer;
}


/* =============================================================================
   [07] ТАБЛИЦЫ
   ========================================================================== */

html table tr:nth-of-type(2n) td{
    background-color:#f1f1f1;
}

html table thead td{
    padding:15px 0;
    color:#fff;
    background-color:#d7271d;
    font-size:15px;
    font-weight:800;
    letter-spacing:2px;
    text-align:center;
}

html table th{
    text-align:center;
}

html table td{
    padding:20px 5px;
    color:#333;
    font-size:14px;
    font-weight:400;
    text-align:center;
    vertical-align:middle;
}

/* Размерная таблица в табах. */
.tab_content_bono .nasa-info-size-guide{
    width:auto !important;
    height:auto !important;
}


/* =============================================================================
   [08] МОБИЛЬНЫЙ SIDEBAR И ФИЛЬТРЫ
   ========================================================================== */

html #secondary.widget-area{
    max-width:98%;
    transition:0s;
}

/* Крестик закрытия фильтров. */
.closed-filters{
    position:fixed;
    right:12px;
    top:10px;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
}

.closed-filters.active{
    display:flex;
}

#secondary.widget-area--mobile + .widget-area,
#secondary.widget-area.widget-area--mobile{
    bottom:auto !important;
}

/* Заголовок фильтра. */
.widget-area .filter__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

/* Стрелка раскрытия одного фильтра. */
.filter__item__arrow{
    margin-top:5px;
    cursor:pointer;
}

.filter__item__arrow.active svg{
    transform:rotate(180deg);
}

/* Стрелка общего заголовка фильтров. */
.filter__header__arrow{
    border:1px solid #c7c7c7;
    cursor:pointer;
}

.filter__header__arrow svg{
    transform:rotate(180deg);
}

.filter__header__arrow.active svg{
    transform:rotate(0deg);
}

@media (max-width:991px){
    aside#secondary.widget-area{
        position:fixed;
    }

    #secondary.widget-area--mobile + .widget-area{
        max-height:100vh;
        overflow-y:auto;
    }

    .site-header-inner .header-search-full{
        padding:0 20px;
    }
}


/* =============================================================================
   [09] СВЕРНУТЫЙ SEO-ТЕКСТ
   ========================================================================== */

.term-description{
    position:relative;
    overflow:hidden;
}

.seo_arrow{
    margin-top:5px;
    cursor:pointer;
}

.seo_arrow.active svg{
    transform:rotate(180deg);
}

/* Градиент внизу свернутого SEO-текста. */
.term-description.term-description--small::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100px;
    background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.term-description.term-description--small.active{
    max-height:100% !important;
}

.term-description.term-description--small.active::after{
    height:0;
}

/* Premmerce filter ставим выше SEO-текста и пагинации. */
.filter.filter--style-premmerce{
    display:flex;
    flex-direction:column;
}

.filter.filter--style-premmerce > *:first-child{
    order:9999;
}

.woocommerce-pagination{
    order:998;
}

.term-description-after{
    order:999;
}

.pagination-active + .term-description-after{
    display:none !important;
}

.tax-product_cat .content-area > .site-main{
    display:flex;
    flex-direction:column;
}


/* =============================================================================
   [10] КАТЕГОРИИ И MEGA MENU
   ========================================================================== */

html .product-category a img{
    width:100%;
    max-width:380px;
    overflow:hidden;
    border:1px solid #efefef;
    border-radius:10px;
    object-fit:contain;
}

html .product-category.product-category--h-auto a img{
    height:auto;
}

html .product-category a{
    border:0 solid #ff90;
    box-shadow:none;
}

html .product-category .woocommerce-loop-category__title{
    margin-top:10px;
    padding:0;
    font-size:100%;
    text-align:center;
}

html .product-category .woocommerce-loop-category__title .count{
    display:none;
}

@media (max-width:767px){
    html .product-category a img{
        height:auto;
    }

    html .section-categories{
        padding:0;
    }

    html .product-category{
        padding-left:5px;
        padding-right:5px;
    }
}

/* Описание в mega menu скрыто. */
.mega-menu-description{
    display:none !important;
}

#mega-menu-wrap-mega_menu #mega-menu-mega_menu > li.mega-menu-megamenu > ul.mega-sub-menu{
    overflow:hidden;
}

#mega-menu-wrap-mega_menu #mega-menu-mega_menu li#mega-menu-item-93753 > a.mega-menu-link:before{
    overflow:hidden;
    border:1px solid #efefef;
    border-radius:5px;
}

/* Дубли H1 скрываем. */
h1 ~ h1{
    display:none;
}


/* =============================================================================
   [11] PREMMERCE CHECKBOXES
   ========================================================================== */

.filter__checkgroup-control[type="checkbox"]:checked + .filter__checkgroup-check:before{
    top:auto;
    left:auto;
    z-index:10;
    transform:none;
}

.filter__checkgroup-control:checked + .filter__checkgroup-check,
.filter__checkgroup-link.filter__checkgroup-link--active .filter__checkgroup-check,
.filter__checkgroup-link:active .filter__checkgroup-check,
.filter__checkgroup-link:hover .filter__checkgroup-check,
.filter__checkgroup-link:focus .filter__checkgroup-check{
    display:flex !important;
    align-items:center;
    justify-content:center;
}

.filter__checkgroup-link.filter__checkgroup-link--active .filter__checkgroup-check:before,
.filter__checkgroup-link:active .filter__checkgroup-check:before,
.filter__checkgroup-link:hover .filter__checkgroup-check:before,
.filter__checkgroup-link:focus .filter__checkgroup-check:before{
    content:"";
    position:absolute;
    top:auto;
    left:auto;
    z-index:10;
    width:10px;
    height:10px;
    opacity:1;
    transform:none;
    transition:0;
}

.toggle-sidebar:hover{
    background:#fff0 !important;
}

.filter--style-premmerce .filter__checkgroup-title,
.filter--style-custom .filter__checkgroup-title{
    font-size:17px !important;
}

.filter__checkgroup-count{
    display:none !important;
}


/* =============================================================================
   [12] ВИДЕО-ИКОНКА НА КАРТОЧКЕ ТОВАРА
   ========================================================================== */

.shop-item-inner{
    overflow:hidden;
}

.shop-item__icons-favorite{
    box-shadow:0 0 5px rgba(0,0,0,.08);
}

/* Базовая youtube-иконка. */
.shop-item__icons-youtube{
    position:absolute;
    left:25px;
    top:65px;
    z-index:6;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    width:32px;
    min-width:32px;
    height:32px;
    overflow:hidden;
    color:#000;
    background-color:#fff;
    border-radius:42px;
    box-shadow:0 0 5px rgba(0,0,0,.08);
    cursor:pointer;
}

/* Компактная youtube-кнопка в карточке. */
.shop-item__icons-youtube.shop-item__icons-youtube--btn{
    position:absolute;
    left:10px;
    top:10px;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.9em;
    min-width:1.9em;
    height:1.9em;
    overflow:hidden;
    color:#000;
    background-color:#fff;
    border-radius:42px;
    cursor:pointer;
    transition:.3s;
}

@media (max-width:768px){
    .shop-item__icons-youtube.shop-item__icons-youtube--btn{
        left:5px;
        top:40px;
    }
}

.shop-item__icons-youtube.shop-item__icons-youtube--btn:hover{
    width:32px;
}

.shop-item__icons-youtube.shop-item__icons-youtube--btn:before{
    background-image:url('./play.svg');
    background-size:50%;
}

.shop-item:hover .shop-item__icons-youtube.shop-item__icons-youtube--btn{
    top:3em;
}

/* Текст youtube-кнопки раскрывается при hover. */
.shop-item__icons-youtube span{
    max-width:0;
    overflow:hidden;
    padding-right:10px;
    font-size:14px;
    font-weight:400;
    white-space:nowrap;
    transition:padding .4s cubic-bezier(.175,.885,.32,1.15), max-width .4s cubic-bezier(.175,.885,.32,1.15);
}

/* Иконка play. */
.shop-item__icons-youtube:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.9em;
    height:1.9em;
    background-color:#fff;
    background-image:url('./play-1001.svg');
    background-position:center;
    background-size:16px;
    background-repeat:no-repeat;
}

.shop-item__icons-youtube:hover{
    width:auto;
}

.shop-item__icons-youtube:hover > span{
    max-width:280px;
    padding-left:32px;
}

/* Большая youtube-кнопка на странице товара. */
.shop-item__icons-youtube.shop-item__icons-youtube--full{
    left:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:60px;
    height:60px;
    background-color:#dd7c7c;
    border:0 solid #000;
    border-radius:0 !important;
    animation:pulse 2s infinite;
    transition:all .25s ease;
    -webkit-box-shadow:0 0 0 0 rgba(255,0,0,.4);
}

.shop-item__icons-youtube.shop-item__icons-youtube--full:before{
    width:60px;
    height:60px;
    background-color:#fff0;
    background-position:13px 12px;
    background-size:36px;
    filter:invert(100%);
}

.shop-item__icons-youtube.shop-item__icons-youtube--full:hover{
    width:auto;
    animation-play-state:paused;
}

.shop-item__icons-youtube.shop-item__icons-youtube--full span{
    max-width:0;
    padding-left:60px;
    padding-right:15px;
    color:#fff;
    font-size:15px;
    opacity:0;
    transition:padding .4s cubic-bezier(.175,.885,.32,1.15), max-width .4s cubic-bezier(.175,.885,.32,1.15);
}

.shop-item__icons-youtube.shop-item__icons-youtube--full:hover span{
    max-width:280px;
    opacity:1;
}

@media (max-width:500px){
    .shop-item__icons-youtube.shop-item__icons-youtube--full{
        left:5px;
    }
}

/* Fancybox выше всех кастомных overlay. */
.fancybox-container{
    z-index:9999999999999999999 !important;
}

/* Пульсация большой youtube-кнопки. */
@-webkit-keyframes pulse{
    0%{
        background:rgba(255,0,0,1);
        border-color:rgba(255,0,0);
        -webkit-box-shadow:0 0 0 0 rgba(255,0,0,.4);
    }

    70%{
        background:#dd7c7c;
        border-color:rgba(0,0,0);
        -webkit-box-shadow:0 0 0 16px rgba(255,0,0,0);
    }

    100%{
        background:#dd7c7c;
        border-color:rgba(0,0,0);
        -webkit-box-shadow:0 0 0 0 rgba(255,0,0,0);
    }
}


/* =============================================================================
   [13] СЕТКА КАТЕГОРИЙ И КАРТОЧЕК ИЗ ДОПОЛНЕНИЯ
   ========================================================================== */

/* Кнопку add_to_cart в карточке скрываем. */
.shop-item .shop-item__buttons-cart.add_to_cart_button{
    display:none;
}

@media (min-width:992px){
    .shop-grid--columns-4 .product-category,
    .shop-grid--columns-4 .shop-item{
        width:16.3%;
    }
}

@media (max-width:767px){
    .shop-grid--columns-4 .product-category,
    .shop-grid--columns-4 .shop-item{
        width:33.3%;
    }
}

/* Убираем preloader PhotoSwipe. */
.pswp__top-bar .pswp__preloader{
    display:none;
}