/* ============================================================
   Juris Child — Brand CSS v1.3
   Скрывает все e-commerce элементы, стилизует компонент "Где купить"
   с аккордеоном маркетплейсов по дизайн-спеке.
   ============================================================ */

/* --- Скрываем корзину в хедере --- */
.header-action--cart,
.header-action--favorite,
.header-action--compare,
.cart-dropdown,
.cart-dropdown.\32\32,
#wishlist-count,
.ti-wishlist-items-count,
.header-action-count             { display: none !important; }

/* --- Скрываем блок быстрого просмотра с кнопкой "В корзину" --- */
#fast-view-modal,
.wb-quick-view-popup,
.wb-add-to-cart,
.fast-view-wrapper               { display: none !important; }

/* --- Скрываем цены везде --- */
.price,
.woocommerce-Price-amount,
span.amount,
.woocommerce-variation-price,
.summary .price                  { display: none !important; }

/* --- Скрываем бейдж "Скидка"/"Sale" --- */
.onsale,
.woocommerce-badge               { display: none !important; }

/* --- Скрываем стандартные WC кнопки если вдруг остались --- */
.single_add_to_cart_button,
.add_to_cart_button,
.wc-forward,
form.cart,
.quantity,
.woocommerce-variation-add-to-cart { display: none !important; }

/* --- Скрываем кнопки родительской темы на PDP --- */
.product-buttons,
.add-to-cart-ajax,
.open-quickBuy-popup               { display: none !important; }

/* --- Скрываем количество, наличие, доставку, пустой прайс-блок на PDP --- */
.product-count-wrapper,
.product-count,
.product-available,
.product-delivery,
.product-current-price-hidden,
.product-wrapper,
.product-info-mini,
.min_delivery_date_str             { display: none !important; }

/* --- Скрываем sticky-хедер с кнопками корзины (header-second) --- */
.header-second .product-buttons    { display: none !important; }
.header-second .product-current-price-hidden { display: none !important; }

/* --- Скрываем иконки вишлиста, сравнения в карточках --- */
.tinvwl_add_to_wishlist_button,
.yith-wcwl-add-button,
.compare-button,
.product-card--compare             { display: none !important; }

/* --- Скрываем табы "Доставка" и "Отзывы" (кастомные табы родителя) --- */
.custom_delivery_tab,
.custom_reviews_tab                { display: none !important; }

/* --- Скрываем мобильные иконки корзины/вишлиста/сравнения --- */
.header-actions-mobile .header-action--cart,
.header-actions-mobile .header-action--favorite,
.header-actions-mobile .header-action--compare { display: none !important; }

/* ─── Карточки товаров (custom_products shortcode) ───────────── */
.product-card-price,
.product-card-price-current,
.product-card-price-old            { display: none !important; }
.product-card-promo                { display: none !important; }
.product-card-button,
.product-card .cart-qty,
.product-card .popup-cart          { display: none !important; }
.product-card-actions              { display: none !important; }
.product-card .onsale              { display: none !important; }

/* ============================================================
   КОМПОНЕНТ "ГДЕ КУПИТЬ" — Дизайн-токены
   Тёмная панель аккордеона по дизайн-спеке
   ============================================================ */
:root {
    --zs-accent:       #8C95DB;
    --zs-accent-hover: #7B85D2;
    --zs-accent-soft:  rgba(140,149,219,.12);
    --zs-ok:           #4ADE80;
    --zs-warn:         #FBBF24;
    --zs-err:          #F87171;
    --zs-line:         rgba(255,255,255,.08);
    --zs-line-2:       rgba(255,255,255,.14);
    --zs-ink:          #fff;
    --zs-ink-soft:     rgba(255,255,255,.7);
    --zs-ink-faint:    rgba(255,255,255,.45);
    --zs-bg-acc:       #262A38;
    --zs-bg-dark:      #1F2230;
}

/* ─── Обёртка компонента на PDP ──────────────────────────────── */
.zs-wtb-wrap {
    margin: 18px 0 24px;
    max-width: 420px;
}

/* ─── Статус наличия (на светлом фоне страницы) ──────────────── */
.zs-availability {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    color:       #22C55E;
    padding:     8px 0;
    line-height: 1;
}
.zs-avail-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #22C55E;
    flex-shrink:   0;
}

/* ─── Блок кнопка + аккордеон (тёмный контейнер) ─────────────── */
.zs-where-block {
    display:        flex;
    flex-direction: column;
    border-radius:  8px;
    overflow:       hidden;
}

/* ─── CTA Кнопка "Где купить" ────────────────────────────────── */
.zs-where-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    padding:         18px 22px;
    background:      var(--zs-accent);
    color:           #fff;
    border:          none;
    border-radius:   8px;
    font-family:     inherit;
    font-weight:     600;
    font-size:       15px;
    letter-spacing:  .01em;
    cursor:          pointer;
    transition:      background .15s ease;
    line-height:     1;
}
.zs-where-btn:hover {
    background: var(--zs-accent-hover);
}
.zs-where-btn:focus-visible {
    outline: 2px solid var(--zs-accent);
    outline-offset: 2px;
}

/* Иконки в кнопке */
.zs-ic-pin {
    width:      18px;
    height:     18px;
    flex-shrink: 0;
}
.zs-ic-chev {
    margin-left: auto;
    transition:  transform .25s ease;
    flex-shrink: 0;
}

/* Открытое состояние */
.zs-where-block.open .zs-where-btn {
    border-radius: 8px 8px 0 0;
}
.zs-where-block.open .zs-ic-chev {
    transform: rotate(180deg);
}

/* ─── Аккордеон с маркетплейсами ─────────────────────────────── */
.zs-where-accordion {
    display:       none;
    border-top:    1px solid var(--zs-line);
    overflow:      hidden;
    background:    var(--zs-bg-dark);
    animation:     zs-acc-in .25s ease-out;
    color:         var(--zs-ink);
}
.zs-where-block.open .zs-where-accordion {
    display: block;
}

@keyframes zs-acc-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Строка маркетплейса ────────────────────────────────────── */
.zs-acc-row {
    display:               grid;
    grid-template-columns: 36px 1fr auto 22px;
    gap:           14px;
    align-items:   center;
    padding:       11px 14px;
    border-bottom: 1px solid var(--zs-line);
    text-decoration: none;
    color:         inherit;
    cursor:        pointer;
    transition:    background .15s ease;
}
.zs-acc-row:last-of-type {
    border-bottom: none;
}
.zs-acc-row:hover {
    background: rgba(140,149,219,.1);
}

/* Логотип-монограмма */
.zs-acc-logo {
    width:           36px;
    height:          36px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     800;
    font-size:       12px;
    letter-spacing:  -.02em;
    flex-shrink:     0;
    line-height:     1;
}

/* Инфо: название + наличие */
.zs-acc-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.zs-acc-name {
    font-size:   13px;
    font-weight: 600;
    line-height: 1.2;
    color:       var(--zs-ink);
}
.zs-acc-stock {
    font-size:      10px;
    color:          var(--zs-ink-faint);
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    letter-spacing: .02em;
}
.zs-acc-stock i {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--zs-ok);
    display:       inline-block;
    flex-shrink:   0;
}

/* Цена */
.zs-acc-price {
    text-align:     right;
    font-size:      11px;
    font-weight:    500;
    color:          var(--zs-ink-faint);
    letter-spacing: .02em;
    line-height:    1.25;
}

/* Стрелка перехода */
.zs-acc-arr {
    width:           22px;
    height:          22px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--zs-accent);
    font-size:       13px;
    opacity:         .7;
    transition:      transform .15s ease, opacity .15s ease;
}
.zs-acc-row:hover .zs-acc-arr {
    transform: translateX(2px);
    opacity:   1;
}

/* Подвал аккордеона */
.zs-acc-foot {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px;
    background:      rgba(0,0,0,.18);
    font-size:       10px;
    color:           var(--zs-ink-faint);
    letter-spacing:  .02em;
}

/* ─── Справочная цена «от X ₽» ──────────────────────────────── */
.zs-ref-price {
    font-size:    20px;
    font-weight:  700;
    color:        #1a1a1a;
    margin-top:   12px;
    line-height:  1;
    letter-spacing: -.01em;
}

/* ─── Подпись под кнопкой (на светлом фоне страницы!) ─────────── */
.zs-where-sub {
    font-size:   12px;
    color:       #888;
    text-align:  center;
    margin-top:  10px;
    line-height: 1.3;
}
.zs-where-sub b {
    color:       #444;
    font-weight: 600;
}
.zs-where-sub a {
    color:           var(--zs-accent);
    text-decoration: none;
}
.zs-where-sub a:hover {
    text-decoration: underline;
}

/* ─── Превью-чипы маркетплейсов ──────────────────────────────── */
.zs-mp-preview {
    display:         flex;
    gap:             8px;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    padding:         6px 0 0;
}
.zs-mp-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 10px;
    border:        1px solid #ddd;
    border-radius: 6px;
    font-size:     11px;
    color:         #555;
}
.zs-mp-dot {
    width:           14px;
    height:          14px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       8px;
    font-weight:     800;
    line-height:     1;
    flex-shrink:     0;
}

/* ─── Кнопка "Где купить" в Loop / карточках ─────────────────── */
.zs-wtb-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         12px 24px;
    background:      var(--zs-accent);
    color:           #fff !important;
    border:          none;
    border-radius:   6px;
    font-size:       15px;
    font-weight:     600;
    text-decoration: none;
    transition:      background 0.2s ease;
    cursor:          pointer;
    white-space:     nowrap;
}
.zs-wtb-btn:hover {
    background: var(--zs-accent-hover);
    color:      #fff !important;
}

/* В карточках custom_products */
.product-card-bottom .zs-wtb-btn,
.product-card-info .zs-wtb-btn {
    display:    block;
    margin-top: 12px;
    width:      100%;
    text-align: center;
    padding:    9px 14px;
    font-size:  12px;
}

/* ─── Фичер-чипы в карточках каталога ────────────────────────── */
.zs-features-mini {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
    margin:    6px 0 4px;
}
.zs-features-mini span {
    font-size:      10px;
    padding:        3px 8px;
    background:     var(--zs-accent-soft);
    color:          var(--zs-accent);
    border-radius:  4px;
    letter-spacing: .02em;
    line-height:    1.4;
}

/* ─── Кнопка "Где купить" в хедере ──────────────────────────── */
.header-wtb-cta {
    display:         inline-flex;
    align-items:     center;
    padding:         9px 20px;
    background:      #fff;
    color:           #1a1a1a !important;
    border:          2px solid #fff;
    border-radius:   6px;
    font-size:       14px;
    font-weight:     700;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 0.2s, color 0.2s;
    margin-left:     12px;
    flex-shrink:     0;
}
.header-wtb-cta:hover {
    background: transparent;
    color:      #fff !important;
}

/* ─── Мобильная кнопка "Где купить" ──────────────────────────── */
.header-mobile-wtb {
    display:         inline-flex;
    align-items:     center;
    padding:         7px 14px;
    background:      #fff;
    color:           #1a1a1a !important;
    border:          1px solid #ddd;
    border-radius:   5px;
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    white-space:     nowrap;
}

/* ─── Адаптив ─────────────────────────────────────────────────── */

/* Планшет */
@media (max-width: 991px) {
    .zs-wtb-wrap {
        max-width: 100%;
    }
    .zs-where-btn {
        padding: 16px 18px;
        font-size: 14px;
    }
    .zs-acc-row {
        grid-template-columns: 32px 1fr auto 20px;
        gap: 10px;
        padding: 10px 12px;
    }
    .zs-acc-logo {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }
}

/* Мобильный */
@media (max-width: 575px) {
    .zs-where-btn {
        padding: 14px 16px;
        font-size: 14px;
        gap: 8px;
    }
    .zs-acc-row {
        grid-template-columns: 28px 1fr 18px;
        gap: 8px;
        padding: 10px 10px;
    }
    /* На мобильном скрываем цену в аккордеоне — всё равно «цена на сайте» */
    .zs-acc-price {
        display: none;
    }
    .zs-acc-logo {
        width: 28px;
        height: 28px;
        font-size: 10px;
        border-radius: 6px;
    }
    .zs-mp-preview {
        gap: 6px;
    }
    .zs-mp-pill {
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* ============================================================
   КАТАЛОГ — Иконки категорий на главной (под слайдером)
   ============================================================ */
.zs-cat-icons {
    padding:    40px 20px 32px;
    max-width:  1200px;
    margin:     0 auto;
}
.zs-cat-icons__grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   24px 16px;
    justify-items:         center;
}
.zs-cat-icon {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    color:           #333;
    transition:      transform .2s ease;
    cursor:          pointer;
    max-width:       120px;
}
.zs-cat-icon:hover {
    transform: translateY(-3px);
}
.zs-cat-icon:hover .zs-cat-icon__label {
    color: var(--zs-accent);
}
.zs-cat-icon__circle {
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      var(--zs-accent-soft);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .2s ease, box-shadow .2s ease;
}
.zs-cat-icon__circle svg {
    color: var(--zs-accent);
}
.zs-cat-icon:hover .zs-cat-icon__circle {
    background: rgba(140,149,219,.22);
    box-shadow: 0 4px 16px rgba(140,149,219,.25);
}
.zs-cat-icon__label {
    font-size:      12px;
    font-weight:    600;
    text-align:     center;
    line-height:    1.3;
    color:          #444;
    transition:     color .2s ease;
    letter-spacing: .01em;
}

/* Адаптив: планшет — 4 колонки */
@media (max-width: 991px) {
    .zs-cat-icons__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 12px;
    }
    .zs-cat-icons {
        padding: 28px 16px 24px;
    }
}

/* Адаптив: мобильный — скролл-лента */
@media (max-width: 575px) {
    .zs-cat-icons {
        padding: 20px 0 16px;
        overflow: hidden;
    }
    .zs-cat-icons__grid {
        display:               flex;
        overflow-x:            auto;
        scroll-snap-type:      x mandatory;
        -webkit-overflow-scrolling: touch;
        gap:                   0;
        padding:               0 16px;
        scrollbar-width:       none;
    }
    .zs-cat-icons__grid::-webkit-scrollbar {
        display: none;
    }
    .zs-cat-icon {
        flex:             0 0 80px;
        scroll-snap-align: start;
        max-width:        80px;
        gap:              8px;
    }
    .zs-cat-icon__circle {
        width:  46px;
        height: 46px;
    }
    .zs-cat-icon__circle svg {
        width:  20px;
        height: 20px;
    }
    .zs-cat-icon__label {
        font-size: 10px;
    }
}

/* ─── Отступы после убранных элементов --- */
.woocommerce ul.products li.product .button + .zs-wtb-btn,
.woocommerce ul.products li.product .price  + .zs-wtb-btn {
    margin-top: 8px;
}

/* ──────────────────────────────────────────────────────────────
   Отключаем sticky-блок «второй info» товара (юрис-фича): при скролле
   показывал название модели + цену + В корзину поверх контента.
   Дизайн без e-commerce, корзина не нужна, sticky-name мешает.
   ────────────────────────────────────────────────────────────── */
.custom-product-header-wrapper,
.product-second-info,
.product-second-info-mob,
.product-second-info-hidden {
    display: none !important;
}
