/* Каталог: UX-правки (inc/catalog-ux.php). Прежняя версия карточек: css/catalog-ux.v1.css.bak */

/* ---------- Сетка товаров ----------
   Действует для любого списка товаров WooCommerce (каталог, главная, «Інші сорти»): карточки сами задают
   внутренний отступ, поэтому промежутки между ними даёт сетка, а не отступы темы.
   Телефон — 2 колонки, планшет — 3, десктоп — по числу колонок блока; в каталоге на десктопе всегда 3. */
.woocommerce ul.products, ul.products[class*="columns-"] {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 !important; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products[class*="columns-"]::before, ul.products[class*="columns-"]::after { display: none !important; }
.woocommerce ul.products > li, ul.products[class*="columns-"] > li {
    width: auto !important; margin: 0 !important; float: none !important; clear: none !important; min-width: 0;
}
@media (min-width: 640px) { .woocommerce ul.products, ul.products[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1200px) {
    .woocommerce ul.products, ul.products[class*="columns-"] { gap: 16px; }
    ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    /* каталог: три крупные карточки в ряд */
    .tax-product_cat ul.products, .tax-product_brand ul.products, .post-type-archive-product ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Карточка товара ---------- */
.woocommerce ul.products li.product {
    /* --eb-pad: внутренний отступ карточки. Промежуток между карточками в сетке равен ему же (на десктопе чуть больше),
       радиус фото = радиус карточки минус отступ, чтобы скругления были концентрическими. */
    --eb-pad: 12px; --eb-radius: 20px;
    position: relative; display: flex !important; flex-direction: column; box-sizing: border-box;
    padding: var(--eb-pad) !important; background: #fff; border-radius: var(--eb-radius); text-align: left !important;
    box-shadow: 0 1px 2px rgba(16, 24, 16, .06); transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) {
    .woocommerce ul.products li.product:hover { box-shadow: 0 14px 34px rgba(16, 24, 16, .12); transform: translateY(-3px); }
}
.woocommerce ul.products li.product > .woocommerce-LoopProduct-link {
    display: flex !important; flex-direction: column; flex: 1 1 auto; color: inherit; text-decoration: none !important; text-align: left;
}
.woocommerce ul.products li.product br { display: none; }

/* фото */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail:not(.eb-hover-img) {
    order: 0; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 var(--eb-pad) !important; border-radius: calc(var(--eb-radius) - var(--eb-pad)) !important;
}
/* второе фото ложится точно поверх первого: оба отсчитываются от ссылки-обёртки, а не от карточки */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; }
.eb-hover-img { display: none; }
@media (hover: hover) {
    .woocommerce ul.products li.product:hover .eb-hover-img {
        display: block; position: absolute; top: 0; left: 0; width: 100% !important; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
        border-radius: calc(var(--eb-radius) - var(--eb-pad)); margin: 0 !important; animation: eb-fade .25s ease;
    }
}
@keyframes eb-fade { from { opacity: 0; } to { opacity: 1; } }

/* бейджи на фото: скидка и тип цветения в одном ряду */
.eb-badges { position: absolute; top: calc(var(--eb-pad) + 8px); left: calc(var(--eb-pad) + 8px); z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.woocommerce ul.products li.product .eb-badges .onsale, .eb-badges .eb-type {
    position: static !important; display: inline-flex !important; align-items: center; height: 24px !important; box-sizing: border-box; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; padding: 0 10px !important; border-radius: 999px !important;
    font-family: Roboto, Arial, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.woocommerce ul.products li.product .eb-badges .onsale { background: #e5372b !important; color: #fff !important; }
.eb-badges .eb-type { background: rgba(255, 255, 255, .94); color: #141414; }
/* бейдж скидки вне каталога (фото в карточке товара) */
.onsale.eb-onsale { border-radius: 999px !important; background: #e5372b !important; color: #fff !important; font-weight: 700 !important; letter-spacing: 0 !important; }

/* производитель — надпись над названием */
.woocommerce ul.products li.product .virob {
    order: 1; margin: 0 0 2px !important; font-family: Roboto, Arial, sans-serif; font-size: 12px !important; font-weight: 500; line-height: 1.4;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; color: #7b8273 !important; text-align: left !important;
}
.woocommerce ul.products li.product .virob * { text-decoration: none !important; color: inherit !important; }

/* название */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    order: 2; margin: 0 0 8px !important; padding: 0 !important; font-family: Roboto, Arial, sans-serif !important; font-size: 17px !important; font-weight: 600 !important;
    line-height: 1.25 !important; letter-spacing: -.01em; text-transform: none !important; color: #141414 !important; text-align: left !important;
}

/* ТГК и генотип: каждая характеристика своей строкой, крупно */
.eb-tags { order: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0 0 10px; }
.eb-tag { display: block; color: #2f3a25; font-size: 16px; line-height: 1.35; font-weight: 400; white-space: nowrap; }

/* наличие */
.woocommerce ul.products li.product .stock-status {
    order: 4; display: flex; align-items: center; gap: 6px; margin: 0 0 10px !important; font-size: 12px !important; line-height: 1.4; text-align: left;
}
.woocommerce ul.products li.product .stock-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.woocommerce ul.products li.product .stock-status.no-stock { color: #9a9a9a !important; }
.woocommerce ul.products li.product.outofstock img.attachment-woocommerce_thumbnail { filter: grayscale(.7); opacity: .6; }

/* цена: одна строка слева внизу — «від 490 ₴», следом зачёркнутая старая; справа место под круглую кнопку */
.woocommerce ul.products li.product .price {
    order: 5; display: flex !important; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: auto 0 0 !important; padding: 0 52px 0 0; min-height: 44px;
    font-size: 22px !important; line-height: 1.2 !important; color: #141414 !important; text-align: left !important;
}
.woocommerce ul.products li.product .price > * { display: inline-block !important; flex: none; margin: 0 !important; padding: 0 !important; float: none !important; }
/* в стилях сайта у цены задана фиксированная ширина 180 px и центрирование — в карточке сбрасываем */
.woocommerce ul.products li.product .price .woocommerce-Price-amount.amount {
    display: inline !important; width: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important;
    font-size: 22px !important; line-height: 1.2 !important; text-align: left !important; color: inherit;
}
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol { padding: 0 !important; }
.woocommerce ul.products li.product .price .eb-from { order: 0; }
.woocommerce ul.products li.product .price > .amount, .woocommerce ul.products li.product .price ins { order: 1; text-decoration: none; }
/* старую цену в карточке не показываем: скидку показывает бейдж на фото */
/* у товаров, где все фасовки стоят одинаково, старая цена обёрнута в <span> без класса — скрываем и её */
.woocommerce ul.products li.product .price .baseprise, .woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price > span:not([class]) { display: none !important; }
.woocommerce ul.products li.product .price .baseprise, .woocommerce ul.products li.product .price del { color: #9a9a9a !important; font-size: 13px !important; }
.woocommerce ul.products li.product .price .baseprise .woocommerce-Price-amount.amount, .woocommerce ul.products li.product .price del .woocommerce-Price-amount.amount {
    font-family: Roboto, Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #9a9a9a !important; text-decoration: line-through;
}
.eb-from { font-family: Roboto, Arial, sans-serif !important; font-size: 13px; font-weight: 400; color: #7a7a7a; text-transform: none !important; letter-spacing: 0; margin: 0; }

/* кнопка: круглая, в правом нижнем углу карточки */
.woocommerce ul.products li.product > .button {
    position: absolute; right: var(--eb-pad); bottom: var(--eb-pad); width: 44px; height: 44px; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 50% !important;
    background: #ffd633 !important; color: #141414 !important; font-size: 0 !important; line-height: 0 !important; box-shadow: none; transition: background .2s ease, transform .2s ease;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.woocommerce ul.products li.product > .button::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.woocommerce ul.products li.product > .button.eb-ajax-add::after,
.woocommerce ul.products li.product > .button.product_type_simple.add_to_cart_button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.woocommerce ul.products li.product > .button.added::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.woocommerce ul.products li.product > .button.loading { opacity: .6; }
@media (hover: hover) { .woocommerce ul.products li.product > .button:hover { background: #ffe066 !important; transform: scale(1.08); } }
.woocommerce ul.products li.product > .added_to_cart { display: none !important; }
.woocommerce ul.products li.product > .screen-reader-text { position: absolute; }

/* фасовки в карточке: ряд под ценой, слева от круглой кнопки; цена в такой карточке место под кнопку не резервирует */
.woocommerce ul.products li.product.eb-has-packs .price { padding-right: 0; min-height: 0; margin-bottom: 8px !important; }
.eb-packs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding-right: 52px; }
.eb-pack {
    height: 34px; padding: 0 12px; border: 1px solid #d5d9cf; border-radius: 999px; background: #fff; color: #141414; cursor: pointer;
    font-family: Roboto, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.eb-pack.is-on { background: #141414; border-color: #141414; color: #fff; }
.eb-pack:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }
@media (hover: hover) { .eb-pack:not(.is-on):hover { border-color: #141414; } }
@media (max-width: 767px) { .eb-packs { gap: 4px; padding-right: 48px; } .eb-pack { height: 32px; padding: 0 9px; font-size: 13px; } }

/* ---------- Десктоп: крупная карточка (правило стоит после базовых, иначе базовые его перекрывают) ---------- */
@media (min-width: 1200px) {
    .woocommerce ul.products li.product { --eb-pad: 16px; --eb-radius: 24px; }
    .tax-product_cat ul.products li.product .woocommerce-loop-product__title, .tax-product_brand ul.products li.product .woocommerce-loop-product__title { font-size: 19px !important; }
    .tax-product_cat ul.products li.product .eb-tag, .tax-product_brand ul.products li.product .eb-tag { font-size: 17px; }
    .tax-product_cat ul.products li.product .price, .tax-product_cat ul.products li.product .price .woocommerce-Price-amount.amount { font-size: 24px !important; }
}

/* ---------- Узкий экран ---------- */
@media (max-width: 767px) {
    .woocommerce ul.products li.product { --eb-pad: 8px; --eb-radius: 16px; }
    .eb-badges { top: calc(var(--eb-pad) + 6px); left: calc(var(--eb-pad) + 6px); gap: 4px; }
    .woocommerce ul.products li.product .eb-badges .onsale, .eb-badges .eb-type { height: 22px !important; padding: 0 8px !important; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; margin-bottom: 6px !important; }
    .eb-tags { margin-bottom: 8px; }
    .eb-tag { font-size: 14px; }
    .woocommerce ul.products li.product .stock-status { margin-bottom: 8px !important; }
    .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price > .woocommerce-Price-amount.amount { font-size: 19px !important; }
    .woocommerce ul.products li.product .price { padding-right: 48px; }
}

/* ---------- Телефон: одна колонка, карточка вертикальная — фото на всю ширину, внизу один ряд: фасовки, цена, кнопка ---------- */
@media (max-width: 639px) {
    .woocommerce ul.products, ul.products[class*="columns-"] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .woocommerce ul.products li.product { --eb-pad: 12px; --eb-radius: 20px; }
    .woocommerce ul.products li.product .eb-hover-img { display: none !important; }
    .eb-badges { top: calc(var(--eb-pad) + 10px); left: calc(var(--eb-pad) + 10px); gap: 6px; }
    .woocommerce ul.products li.product .eb-badges .onsale, .eb-badges .eb-type { height: 28px !important; padding: 0 12px !important; font-size: 14px !important; }
    .woocommerce ul.products li.product .virob { font-size: 13px !important; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 20px !important; margin-bottom: 8px !important; }
    .eb-tag { font-size: 16px; }
    .woocommerce ul.products li.product .stock-status { font-size: 13px !important; margin-bottom: 12px !important; }
    .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price > .woocommerce-Price-amount.amount { font-size: 22px !important; }
    .woocommerce ul.products li.product .price { padding-right: 56px; }
    /* карточка с фасовками: цена уходит вправо к кнопке, ряд фасовок поднимается в ту же строку слева */
    .woocommerce ul.products li.product.eb-has-packs .price { justify-content: flex-end; min-height: 44px; padding-right: 56px; margin-bottom: 0 !important; }
    .eb-packs { align-self: flex-start; margin-top: -44px; padding-right: 0; gap: 6px; flex-wrap: nowrap; position: relative; z-index: 1; }
    .eb-pack { height: 40px; padding: 0 16px; font-size: 15px; }
}
@media (max-width: 359px) {
    .eb-pack { padding: 0 11px; font-size: 14px; }
    .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price > .woocommerce-Price-amount.amount { font-size: 20px !important; }
}

/* ---------- Фильтры под кнопкой (мобильный и планшет) ---------- */
.eb-filters-toggle { display: none; }
@media (max-width: 959px) {
    .eb-filters-toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; margin: 0 0 8px;
        border: 1px solid #d9d9d9; border-radius: 12px; background: #fff; color: #111; font-size: 16px; font-weight: 600; cursor: pointer;
    }
    .eb-filters-icon { width: 10px; height: 10px; border-right: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); transition: transform .2s; margin-top: -4px; }
    .eb-filters-open .eb-filters-icon { transform: rotate(-135deg); margin-top: 4px; }
    .js-sticky .widget { display: none; }
    .js-sticky.eb-filters-open .widget { display: block; }
    /* баннер с промокодом на узком экране не показываем */
    .js-sticky .uk-card { display: none !important; }
    .woocommerce-result-count { text-align: left !important; font-size: 13px !important; color: #666; margin: 0 0 8px !important; }
}

/* ---------- Текст архива бренда под списком товаров ---------- */
.term-description { margin-top: 40px; max-width: 820px; }
.term-description a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Короткий ответ над списком товаров (inc/answers.php) ---------- */
.eb-answer { max-width: 72ch; margin: 0 0 24px; padding: 16px 20px; border-left: 3px solid #141414; background: #fff; border-radius: 0 16px 16px 0; text-align: left; }
.eb-answer p { margin: 0; font-size: 16px; line-height: 1.55; color: #141414; }
.eb-answer .eb-answer-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.eb-answer-links a { color: #141414; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#eb-guide { display: block; scroll-margin-top: 90px; }