/* =========================================================
   WOOCOMMERCE — стилизация стандартных шаблонов плагина
   через CSS (без форка PHP-шаблонов). Всё на тех же
   custom properties, что и остальная тема — работает
   одинаково в стиле Tech и Warm.
   ========================================================= */

/* ---- Уведомления ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    list-style: none; margin: 0 0 24px; padding: 16px 20px; border-radius: var(--border-radius-md);
    background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--text-main);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.woocommerce-message { border-left: 3px solid #34d399; }
.woocommerce-error { border-left: 3px solid #f87171; }
.woocommerce-info { border-left: 3px solid var(--accent); }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { margin-left: auto; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; }

/* ---- Кнопки ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 100px; font-size: 15px; font-weight: 600;
    background: var(--accent-gradient-solid); color: #fff; border: none; cursor: pointer;
    transition: all 0.2s ease; text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { box-shadow: 0 8px 24px var(--accent-shadow); transform: translateY(-1px); color: #fff; }
.woocommerce a.added_to_cart { margin-left: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }

/* ---- Каталог товаров ---- */
/* display:grid здесь раньше и правда работал — до тех пор, пока в
   каталоге не осталось ровно 2 товара. С реальной карточкой (картинка +
   заголовок + цена + кнопка) авто-расстановка грида необъяснимо
   пропускала первую колонку и упаковывала оба товара во 2-ю и 3-ю,
   оставляя огромный пустой отступ слева — воспроизведено на живом
   сайте, изолировано клонированием узла в чистый контекст, но точную
   причину внутри контента карточки найти не удалось (не картинка, не
   кнопка, не цена по отдельности — похоже на связку с текстом
   заголовка). display:flex с фиксированным flex-basis для той же
   раскладки этой проблемы не воспроизводит вообще — переключились на
   него, не тратя больше времени на диагностику самого грида. */
.woocommerce ul.products { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0 0 40px; padding: 0; }
.woocommerce ul.products li.product {
    /* WooCommerce отдаёт этому же селектору собственные float/width/margin
       (классическая раскладка в колонках) — их нужно сбросить, иначе
       li остаётся в разы уже своей ячейки и текст внутри обрезается
       overflow:hidden ниже. !important — подтверждено через computed
       style на живом сайте, что без него побеждает правило WooCommerce. */
    flex: 0 0 calc((100% - 48px) / 3) !important; width: calc((100% - 48px) / 3) !important;
    float: none !important; margin: 0 !important;
    background: var(--surface-strong); border: 1px solid var(--chip-border); border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-card); overflow: hidden; padding: 0 !important; transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16px; font-weight: 700; color: var(--text-main); margin: 16px 20px 4px; }
.woocommerce ul.products li.product .price { margin: 0 20px 16px; font-size: 15px; color: var(--accent); font-weight: 700; }
.woocommerce ul.products li.product .price del { color: var(--text-secondary); font-weight: 400; opacity: 0.7; margin-right: 6px; }
.woocommerce ul.products li.product .button { margin: 0 20px 20px !important; width: calc(100% - 40px); }
.woocommerce span.onsale {
    position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--accent-solid); color: #fff;
    font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 100px; text-transform: uppercase; min-height: 0;
}

/* ---- Магазин: сортировка и счётчик результатов ---- */
.woocommerce-ordering { margin-bottom: 24px; }
.woocommerce .woocommerce-ordering select {
    padding: 10px 32px 10px 14px; border-radius: var(--border-radius-sm); border: 1px solid var(--chip-border);
    background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-family); font-size: 14px;
}
.woocommerce-result-count { color: var(--text-secondary); font-size: 14px; }

/* ---- Хлебные крошки WooCommerce ---- */
.woocommerce-breadcrumb { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
.woocommerce-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--accent); }

/* ---- Карточка товара ---- */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 60px; }
/* Тот же баг, что и в .eco-app-tile/ul.products выше: WooCommerce отдаёт
   .images/.summary собственные float+width:48% (классическая раскладка
   в колонках), и это применяется поверх наших грид-колонок — фото
   товара получалось вдвое уже, чем должно (48% от уже готовой ширины
   колонки). !important — как и в остальных местах этого файла,
   подтверждено через computed style на живом сайте. */
.woocommerce div.product .woocommerce-product-gallery {
    width: 100% !important; float: none !important; margin: 0 !important;
    border-radius: var(--border-radius-lg); overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--border-radius-lg); }
.woocommerce div.product .summary {
    width: 100% !important; float: none !important; margin: 0 !important;
    display: flex; flex-direction: column; gap: 16px;
}
.woocommerce div.product .summary h1.product_title { font-size: 28px; margin: 0; }
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price { font-size: 24px; font-weight: 700; color: var(--accent); }
.woocommerce div.product .summary p.price del { font-size: 17px; color: var(--text-secondary); font-weight: 400; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-secondary); line-height: 1.6; }
.woocommerce div.product form.cart { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.woocommerce div.product .quantity input.qty {
    width: 70px; padding: 12px; text-align: center; border-radius: var(--border-radius-sm);
    border: 1px solid var(--chip-border); background: var(--bg-color); color: var(--text-main);
}
table.variations { width: 100%; margin-bottom: 8px; }
table.variations td { padding: 8px 0; }
/* .woocommerce нужен в начале каждого селектора ниже — у собственного
   woocommerce.css плагина (в частности .woocommerce form .form-row .input-text)
   ровно на один класс больше веса, чем было у прежних версий этих правил,
   и плагин отдельные свойства перетягивал на себя, несмотря на то что
   наш файл подключается позже. Подтверждено на живом сайте: сверял через
   document.styleSheets, какое правило реально применяется к #username
   на /my-account/ и к table.variations select на странице товара.

   Здесь же намеренно НЕ трогаем background: у плагина для этого select
   отдельное, ещё более специфичное правило
   (.woocommerce div.product form.cart .variations select), которое через
   background рисует SVG-шеврон выпадающего списка поверх appearance:none.
   Перебить фон цветом — значит стереть и шеврон; перебивать весь блок
   ради одного лишь фона (который на кремовом фоне почти не заметен и так)
   не стоит того риска. */
.woocommerce table.variations select {
    width: 100%; padding: 10px 14px; border-radius: var(--border-radius-sm);
    border: 1px solid var(--chip-border); color: var(--text-main);
}
.woocommerce-variation-price .price { font-size: 22px !important; }

.woocommerce-tabs { margin-top: 48px; grid-column: 1 / -1; }
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--divider); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: 12px 4px; text-decoration: none; color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--text-main); border-color: var(--accent); }
.woocommerce-tabs .panel { max-width: 720px; line-height: 1.7; }

.related.products, .upsells.products { grid-column: 1 / -1; margin-top: 40px; }
.related.products > h2, .upsells.products > h2 { font-size: 22px; margin-bottom: 24px; }

/* ---- Корзина ---- */
.woocommerce table.cart, .shop_table {
    width: 100%; border-collapse: collapse; margin-bottom: 32px;
}
.woocommerce table.cart th, .woocommerce table.cart td,
.shop_table th, .shop_table td { padding: 16px 12px; border-bottom: 1px solid var(--divider); text-align: left; }
.woocommerce table.cart img { width: 64px; border-radius: var(--border-radius-sm); }
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions input[type="submit"] { background: var(--chip-bg); color: var(--text-main); box-shadow: none; }
.cart-collaterals .cart_totals {
    background: var(--surface-strong); border: 1px solid var(--chip-border); border-radius: var(--border-radius-md);
    padding: 24px; box-shadow: var(--shadow-card);
}
.cart_totals table { width: 100%; }
.cart_totals table th, .cart_totals table td { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.cart_totals .order-total td { font-size: 18px; font-weight: 700; color: var(--text-main); }

/* ---- Оформление заказа ---- */
.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.woocommerce-checkout .required { color: var(--accent); text-decoration: none; }
.woocommerce .woocommerce-checkout input.input-text,
.woocommerce .woocommerce-checkout select,
.woocommerce .woocommerce-checkout textarea {
    width: 100%; padding: 12px 16px; border-radius: var(--border-radius-sm); border: 1px solid var(--chip-border);
    background: var(--bg-color); color: var(--text-main); font-family: var(--font-family);
}
.woocommerce .woocommerce-checkout input.input-text:focus,
.woocommerce .woocommerce-checkout select:focus,
.woocommerce .woocommerce-checkout textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#order_review {
    background: var(--surface-strong); border: 1px solid var(--chip-border); border-radius: var(--border-radius-md); padding: 24px;
}
.woocommerce-checkout-payment ul.payment_methods { list-style: none; padding: 0; }
.woocommerce-checkout-payment .payment_box {
    background: var(--chip-bg); border-radius: var(--border-radius-sm); padding: 16px; margin-top: 8px; font-size: 14px; color: var(--text-secondary);
}

/* ---- Личный кабинет ---- */
.woocommerce-MyAccount-navigation { margin-bottom: 32px; }
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
    display: inline-block; padding: 10px 18px; border-radius: 100px; background: var(--chip-bg);
    color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 14px;
}
.woocommerce-MyAccount-navigation li.is-active a { background: var(--accent-solid); color: #fff; }
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
table.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
table.woocommerce-orders-table th, table.woocommerce-orders-table td { padding: 14px 10px; border-bottom: 1px solid var(--divider); text-align: left; font-size: 14px; }
.woocommerce .woocommerce-form-row input.input-text,
.woocommerce .woocommerce-EditAccountForm input.input-text {
    width: 100%; padding: 12px 16px; border-radius: var(--border-radius-sm); border: 1px solid var(--chip-border);
    background: var(--bg-color); color: var(--text-main);
}

/* ---- Звёзды рейтинга ---- */
.star-rating { color: var(--accent); }
.star-rating span::before { color: var(--accent); }

@media (max-width: 900px) {
    .woocommerce ul.products li.product { flex-basis: calc((100% - 24px) / 2) !important; width: calc((100% - 24px) / 2) !important; }
    .woocommerce div.product { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .woocommerce ul.products li.product { flex-basis: 100% !important; width: 100% !important; }
    .woocommerce table.cart, .shop_table { display: block; overflow-x: auto; }
}