/* Ryjik variation radios + qty-selector — v1.3.0 (.ryjik-variations--single + .ryjik-cart-control--single для single-product) */

/* List view (.comp-form): legacy .comp-counter-btn темы заменяется .ryjik-cart-control. */
.comp-form > .comp-counter-btn { display: none; }
/* List view с вариациями: .comp-form строкой схлопывает .ryjik-variations + .ryjik-cart-control — переключаем на column. */
.comp-form:has(.ryjik-variations) { flex-direction: column; align-items: stretch; }

/* Каталог: ширина select сортировки. Темовое правило .woocommerce-ordering > select (0,1,2)
   с width:146px — нам нужен тот же селектор, тот же specificity, без !important — побеждаем source-order. */
.woocommerce-ordering > select { width: 200px; }

/* Цена в карточке каталога: темовое .product .price (inline-flex, nowrap) не даёт
   переносить [старая] [новая] на узких карточках. Разрешаем wrap — left-align уже
   через justify-content:flex-start темы. Специфичность (0,2,0) = у темы, source-order побеждает. */
.product .price { flex-wrap: wrap; height: 100%; }

/* Когда внутри карточки есть наш контрол — переключаем wrapp на column flow. */
.price-button-wrapp:has(.ryjik-cart-control) {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}
/* Цена в карточке — единственный источник, JS (updateCardPrice) меняет её при клике
   на кнопку варианта/фасовки. Внутри кнопок цена убрана (.ryjik-variations__price hidden). */
.price-button-wrapp:has(.ryjik-cart-control) > .price { margin-bottom: 8px; }

/* Loop-контекст: карточки товара в каталоге/на главной.
   Горизонтально-скролящаяся лента кнопок (3.5 видимых при 4+ опциях).
   Wrapper .ryjik-variations-scroll даёт non-scrolling контекст под chevron-подсказку. */
.ryjik-variations-scroll {
    position: relative;
    margin: 8px 0 12px;
}
/* Chevron-affordance: JS инжектит .ryjik-chev--left/--right внутрь .ryjik-variations-scroll
   и переключает .is-visible на каждом по состоянию скролла. Fade-градиент и стрелка —
   один pseudo-элемент (::before) на ровном background-градиенте самого chev. */
.ryjik-chev {
    position: absolute;
    top: 0; bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    display: flex;
    align-items: center;
    z-index: 1;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: transparent;
}
.ryjik-chev.is-visible { opacity: 1; pointer-events: auto; }
.ryjik-chev:hover::before,
.ryjik-chev:focus::before { border-color: #08284A; }
/* !important на gradient — тема цепляет button:hover { background: ... } и затирает fade. */
.ryjik-chev--right,
.ryjik-chev--right:hover,
.ryjik-chev--right:focus {
    right: 0;
    justify-content: flex-end;
    padding-right: 10px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 75%) !important;
}
.ryjik-chev--left,
.ryjik-chev--left:hover,
.ryjik-chev--left:focus {
    left: 0;
    justify-content: flex-start;
    padding-left: 10px;
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, #fff 75%) !important;
}
.ryjik-chev:focus { outline: none; }
.ryjik-chev::before {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid #6b7280;
    border-top: 2px solid #6b7280;
}
.ryjik-chev--right::before { transform: rotate(45deg); }
.ryjik-chev--left::before { transform: rotate(-135deg); }

.ryjik-variations {
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px 2px 4px;
    box-sizing: border-box;
}
.ryjik-variations::-webkit-scrollbar { display: none; }

.ryjik-variations__option {
    flex: 0 0 auto;
    /* ~3.5 кнопок в видимой области при 4+ опциях */
    min-width: calc((100% - 24px) / 3.5);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    color: #08284A;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    margin: 0 !important;
}

.ryjik-variations__option input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
/* Цена внутри плашки-кнопки не нужна — она уже есть в .price карточки,
   JS обновляет её при смене варианта. */
.ryjik-variations__price { display: none; }

.ryjik-variations__label { font-weight: 600; }

.ryjik-variations__option:hover,
.ryjik-variations__option:focus-within { border-color: #fdba74; }
.ryjik-variations__option.is-active {
    border-color: #f97316;
    background: #fff;
    box-shadow: 0 0 0 1px #f97316;
}

.ryjik-variations__option.is-out-of-stock { opacity: .45; cursor: not-allowed; }
.ryjik-variations__option.is-out-of-stock .ryjik-variations__label { text-decoration: line-through; }

/* Solo-чипа: одиночный информационный бейдж у simple-товаров без сиблингов/вариаций.
   Некликабельный — убираем pointer-эффекты и оранжевую рамку активного состояния,
   чтобы не провоцировать клик. */
.ryjik-variations--solo .ryjik-variations__option.is-solo {
    cursor: default;
    border-color: #e5e7eb;
    box-shadow: none;
    background: #f9fafb;
    color: #334155;
}
.ryjik-variations--solo .ryjik-variations__option.is-solo:hover,
.ryjik-variations--solo .ryjik-variations__option.is-solo:focus-within { border-color: #e5e7eb; }

/* Pill-структура для .ryjik-add-to-cart — Meow в catalog grid делает .product .button
   узкой 40x40 иконкой с background:transparent + text-indent:-9000em (style.css:6781-6792).
   Нам нужна плоская flex-кнопка 38px в высоту (матчится с .ryjik-qty-box, чтобы свап
   кнопка↔qty не прыгал). Specificity 0,4,2 выигрывает у темы 0,3,2 без !important.
   Цвета берутся из CSS-переменных (см. mu-plugin ryjik-theme-vars), синкается с Customizer. */
.grid ul.products .product a.ryjik-add-to-cart,
.comp ul.products .product a.ryjik-add-to-cart,
.price-button-wrapp .ryjik-add-to-cart,
.product .ryjik-add-to-cart,
a.ryjik-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px;
    text-align: center;
    text-indent: 0;
    position: static;
    background-color: var(--ryjik-main, #f97316);
}
.grid ul.products .product a.ryjik-add-to-cart:hover,
.comp ul.products .product a.ryjik-add-to-cart:hover,
.price-button-wrapp .ryjik-add-to-cart:hover,
.product .ryjik-add-to-cart:hover,
a.ryjik-add-to-cart:hover {
    background-color: var(--ryjik-main-hover, #ea580c);
}
/* Прячем Meow-овскую иконку-плюс, которую тема добавляет через ::before к .product .button */
.ryjik-add-to-cart::before { display: none; content: none; }
/* Контрол корзины: обёртка для кнопки + селектора. min-height резервирует
   высоту одного из детей (38px), чтобы свап кнопки↔qty-селектора не прыгал. */
.ryjik-cart-control { margin-top: 8px; min-height: 38px; }
/* Перебиваем .grid ul.products .product a.ryjik-add-to-cart (0,4,2) — нужна матч-специфичность */
.grid ul.products .product a.ryjik-add-to-cart[hidden],
.comp ul.products .product a.ryjik-add-to-cart[hidden],
.price-button-wrapp a.ryjik-add-to-cart[hidden],
.product a.ryjik-add-to-cart[hidden],
a.ryjik-add-to-cart[hidden],
.ryjik-cart-control [hidden] { display: none !important; }

/* Quantity selector: [− input +]  [🗑] — стили синхронизированы с /cart/ */
.ryjik-qty-selector {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.ryjik-qty-box {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}
.ryjik-qty-btn {
    flex: 0 0 auto;
    min-width: 40px;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #08284A;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s, color .15s;
    box-shadow: none;
}
.ryjik-qty-btn:hover:not([disabled]) { background: #f5f5f5; }
.ryjik-qty-minus { border-right: 1px solid #ddd; }
.ryjik-qty-plus { border-left: 1px solid #ddd; }
.ryjik-qty-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* input.ryjik-qty-input (0,1,1) — матч по специфичности с темовым input[type="number"] (0,1,1),
   выигрываем source-order'ом, без !important-спама. */
input.ryjik-qty-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 4px;
    margin: 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: 15px;
    line-height: 38px;
    font-weight: 600;
    color: #08284A;
    -moz-appearance: textfield;
    box-shadow: none;
}
input.ryjik-qty-input:focus { outline: none; background: #fafafa; }
input.ryjik-qty-input::-webkit-inner-spin-button,
input.ryjik-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }


/* Компактные радио внутри карусели на мобилке */
@media (max-width: 767px) {
    .ryjik-carousel .ryjik-variations { margin: 4px 0 6px; }
    .ryjik-carousel .ryjik-variations__option {
        padding: 5px 2px;
        font-size: 13px;
        gap: 8px;
    }
    .ryjik-carousel .ryjik-variations__option::before {
        width: 14px; height: 14px; border-width: 1.5px;
    }
    .ryjik-carousel .ryjik-variations__option.is-active::before {
        box-shadow: inset 0 0 0 2px #fff;
    }
    .ryjik-carousel .ryjik-add-to-cart {
        padding: 6px 12px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }
    .ryjik-carousel .ryjik-cart-control { margin-top: 4px; }
    .ryjik-carousel .ryjik-qty-selector { gap: 6px; }
    .ryjik-carousel .ryjik-qty-box { height: 32px; border-radius: 6px; }
    .ryjik-carousel .ryjik-qty-btn { min-width: 32px; font-size: 16px; }
    .ryjik-carousel .ryjik-qty-input { font-size: 14px; }
}


/* =========================================================
   Single-product page — кнопки-варианты вместо списка с radio-кружком.
   Модификатор --single делает из вариаций grid кликабельных кнопок,
   а .ryjik-cart-control--single — крупную кнопку «В корзину» с квалити
   под стать single-page. Base-стили (.ryjik-variations, .ryjik-variations__option)
   перекрываем явно, чтобы модификатор выиграл по specificity без !important
   там, где это возможно.
   ========================================================= */
.ryjik-single-cart { margin: 16px 0; max-width: 420px; }

.ryjik-variations--single {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
.ryjik-variations--single .ryjik-variations__option {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 4px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    text-align: center;
    margin: 0;
}
.ryjik-variations--single .ryjik-variations__option,
.ryjik-variations--single .ryjik-variations__option:last-child { border-bottom-width: 2px; }

.ryjik-variations--single .ryjik-variations__option::before { display: none; }

.ryjik-variations--single .ryjik-variations__label {
    font-weight: 600;
    font-size: 15px;
    color: #08284A;
    flex: 0 0 auto;
}
.ryjik-variations--single .ryjik-variations__price {
    font-weight: 500;
    font-size: 14px;
    color: #4b5563;
}

.ryjik-variations--single .ryjik-variations__option:hover,
.ryjik-variations--single .ryjik-variations__option:focus-within {
    border-color: #fdba74;
    background: #fff7ed;
}
.ryjik-variations--single .ryjik-variations__option.is-active {
    border-color: #f97316;
    background: #fff7ed;
    box-shadow: 0 0 0 1px #f97316;
}
.ryjik-variations--single .ryjik-variations__option.is-active .ryjik-variations__label { color: #c2410c; }

.ryjik-variations--single .ryjik-variations__option.is-out-of-stock,
.ryjik-variations--single .ryjik-variations__option.is-out-of-stock:hover,
.ryjik-variations--single .ryjik-variations__option.is-out-of-stock:focus-within {
    border-color: #e5e7eb;
    background: #f9fafb;
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .ryjik-variations--single { grid-template-columns: repeat(2, 1fr); }
}

/* Solo variant (single option only) — don't stretch the lone pill across the
 * grid row. With repeat(auto-fit, 1fr) one item fills the full 420px wrapper,
 * which reads as a full-width button. Cap it to content width instead.
 * Specificity (2 classes) wins over the base --single rule and the @media. */
.ryjik-variations--single.ryjik-variations--solo {
    grid-template-columns: minmax(110px, max-content);
}

/* Cart control на single: крупнее кнопка и qty-селектор */
.ryjik-cart-control--single { margin-top: 0; max-width: 200px; }

.ryjik-cart-control--single .ryjik-add-to-cart,
.single-product .product .ryjik-cart-control--single a.ryjik-add-to-cart {
    padding: 14px 24px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
}
.ryjik-cart-control--single .ryjik-qty-box { height: 48px; border-radius: 10px; }
.ryjik-cart-control--single .ryjik-qty-btn { min-width: 48px; font-size: 20px; }
.ryjik-cart-control--single .ryjik-qty-input { font-size: 16px; height: 48px !important; }


/* Скрываем темовый loader/tick возле кнопок — у нас свой state .is-added */
.loop-products .ajax-add-to-cart-loading,
.grid ul.products .ajax-add-to-cart-loading,
ul.products .ajax-add-to-cart-loading {
    display: none !important;
}

/* Скрываем WC-линк "Просмотр корзины", который WC добавляет после .add_to_cart_button.
   У нас свой state .is-added + обновление мини-корзины в шапке. */
.price-button-wrapp .added_to_cart,
.loop-products .added_to_cart,
ul.products .added_to_cart {
    display: none !important;
}

/* =========================================================
   Desktop sticky header v3 — position:fixed for top section
   Added 2026-04-14 — sticky can't work here because its parent
   (.elementor.elementor-4258) is only 185px tall = containing block.
   So we use fixed + padding compensation.
   ========================================================= */
@media (min-width: 1024px) {
  header.et-desktop > .elementor > .elementor-element.elementor-element-e800a9e {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    background-color: var(--e-global-color-secondary, #0C2D48);
  }

  /* Компенсируем 88px "выпавшей" секции, чтобы остальной хедер
     (меню + баннер) не съехал вверх на 88px. */
  header.et-desktop {
    padding-top: 88px !important;
  }
}

/* =========================================================
   Tablet (768–1279px): панель .dashboard-tabs всегда развёрнута.
   Тоггл скрыт, все табы видны — чтобы корзина была в один тап
   после add-to-cart. Мобила и десктоп не затронуты.
   Added 2026-04-14.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1279px) {
    /* Принудительно показываем все табы (тема прячет их без .open) */
    .dashboard-tabs .dashboard-tab-item {
        display: flex !important;
    }
    /* Скрываем бургер-тоггл (селектор a.* даёт специфичность выше, чем правило показа табов) */
    .dashboard-tabs a.dashboard-tab-item.dashboard-toggle {
        display: none !important;
    }
    /* Разрешаем панели растягиваться по контенту + убираем overflow,
       чтобы бейдж .cart-contents (top:-10px) не обрезался сверху */
    .dashboard-tabs {
        width: auto !important;
        max-width: 500px !important;
        overflow: visible !important;
    }
}

/* =========================================================
   Product card image centering (2026-04-18)
   Тема рендерит .lazy-inline-image с inline max-width:200px как
   display:block, из-за чего миниатюра 200x200 прижимается к левому
   краю колонки карточки. Центрируем через auto-маргины.
   ========================================================= */
ul.products > li.product .post-media .image-container .lazy-inline-image {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Product card image framing (2026-04-23)
   После перехода на woocommerce_thumbnail_cropping=uncropped
   миниатюры вертикальные (напр. 200x379). Фиксируем квадрат
   200x200 и вписываем изображение целиком (object-fit:contain),
   чтобы карточки сохраняли одинаковую высоту.
   ========================================================= */
ul.products > li.product .post-media .image-container .lazy-inline-image {
    width: 200px;
    height: 200px;
    max-height: 200px;
}
ul.products > li.product .post-media .image-container .lazy-inline-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
}


/* =========================================================
   Hide quick-view только на главной (2026-05-04)
   На /catalog/ и категориях quick-view виден и работает (theme controller.js
   тянет ajax-variations и инициирует tawcvs_variation_swatches_form).
   На главной tawcvs/wc-add-to-cart-variation dequeued (ryjik-perf-dequeue.php
   Phase 8 — для PSI mobile 90/desktop 98). Клик там бы дал TypeError.
   ========================================================= */
body.home ul.products .en-quick-view {
    display: none !important;
}

/* =========================================================
   Home loop рендерит wishlist/compare в .post-content-wrap (вместо темового .post-body
   из catalog template). Темовые правила style.css:15608 (inline-block <1280) и :15986
   (display:none >=1280) НЕ применяются — кнопки остаются абсолютно позиционированы
   поверх текста. Зеркалим темовое поведение для .post-content-wrap.
   ========================================================= */
@media only screen and (max-width: 1279px) {
    .ryjik-home-section ul.products .post-content-wrap .wishlist-toggle,
    .ryjik-home-section ul.products .post-content-wrap .compare-toggle,
    .ryjik-home-section ul.products .post-content-wrap .en-quick-view,
    .grid ul.products .post-content-wrap .wishlist-toggle,
    .grid ul.products .post-content-wrap .compare-toggle,
    .grid ul.products .post-content-wrap .en-quick-view {
        opacity: 1;
        display: inline-block;
        vertical-align: top;
        transition: opacity 0.2s;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 8px;
        margin-right: 8px;
    }
}
@media only screen and (min-width: 1280px) {
    .post-content-wrap .en-quick-view,
    .post-content-wrap .wishlist-title,
    .post-content-wrap .wishlist-toggle,
    .post-content-wrap .compare-title,
    .post-content-wrap .compare-toggle {
        display: none;
    }
}


/* =========================================================
   Hide "compare" tab on very narrow phones (<375px)
   На узких экранах четыре круглых таба не помещаются и налезают
   друг на друга. Компарилка — наименее важная функция в этом ряду.
   ========================================================= */
@media (max-width: 374px) {
    .dashboard-tabs .dashboard-tab-item.compare {
        display: none !important;
    }
}