/*
Theme Name: Wonderbaby
Template: storefront
Version: 1.0.0
Description: Дочерняя тема Wonderbaby поверх Storefront. Палитра и шрифт сняты с wonderbabyshop.ru.
Author: Wonderbaby
Text Domain: wonderbaby
*/

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/Onest-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/Onest-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    --wb-text-primary: #191919;
    --wb-text-secondary: #6c6c6c;
    --wb-bg: #ffffff;
    --wb-bg-neutral: #f7f7f7;
    --wb-border: #e3e3e4;
    --wb-accent: #000000;
    --wb-accent-contrast: #ffffff;
    --wb-discount: #f8604a;
    --wb-link: #366eff;
    /* Тёплый акцент — снят с реального логотипа (доминирующий цвет),
     * используется только в НЕ-CTA и НЕ-скидочных местах (плитки категорий,
     * блок лояльности, подчёркивания заголовков, рейтинг), чтобы не путать
     * с чёрными CTA-кнопками и коралловым цветом скидки. */
    --wb-accent-warm: #e2a330;
    --wb-accent-warm-soft: #fcefd9;
    --wb-accent-warm-contrast: #191919;
    --wb-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body {
    font-family: var(--wb-font);
    color: var(--wb-text-primary);
    background: var(--wb-bg);
}

a {
    color: var(--wb-link);
}

/* Шапка */
.site-header {
    background: var(--wb-bg);
    border-bottom: 1px solid var(--wb-border);
}

.site-branding .site-title,
.site-branding .site-title a {
    font-weight: 700;
    color: var(--wb-text-primary);
}

/* Кнопки — чёрные с белым текстом, как в оригинале */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button.alt,
.storefront-primary-navigation .site-search .search-toggle {
    background-color: var(--wb-accent);
    color: var(--wb-accent-contrast);
    border-radius: 4px;
    font-weight: 600;
    transition: opacity .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
a.button.alt:hover {
    background-color: var(--wb-accent);
    opacity: .85;
    color: var(--wb-accent-contrast);
}

/* Старая/акционная цена */
.woocommerce del .woocommerce-Price-amount {
    color: var(--wb-text-secondary);
    opacity: .7;
}
.woocommerce ins {
    text-decoration: none;
}
.woocommerce ins .woocommerce-Price-amount {
    color: var(--wb-discount);
    font-weight: 700;
}
.onsale {
    background-color: var(--wb-discount) !important;
    font-family: var(--wb-font);
}

/* Карточки товаров в каталоге */
ul.products li.product {
    background: var(--wb-bg);
    border: 1px solid var(--wb-border);
    border-radius: 8px;
    padding: 12px;
    transition: box-shadow .15s ease;
}
ul.products li.product:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
ul.products li.product .price {
    color: var(--wb-text-primary);
    font-weight: 600;
}

/* Единый формат фото в каталоге — сейчас вперемешку предметная съёмка и
 * лайфстайл-фото разных пропорций, из-за чего сетка выглядит неаккуратно. */
ul.products li.product a img,
.related.products ul.products li.product a img,
.upsells.products ul.products li.product a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
}

/* Цвет звёзд рейтинга — по умолчанию у WooCommerce они неокрашенные */
.woocommerce .star-rating span:before,
.woocommerce .comment-form-rating .stars a {
    color: var(--wb-accent-warm);
}

/* Подвал */
#colophon,
.site-footer {
    background: var(--wb-bg-neutral);
    color: var(--wb-text-secondary);
}
.site-footer a {
    color: var(--wb-text-primary);
}

/* Плашка тестового сайта */
.wb-test-banner {
    background: var(--wb-discount);
    color: #fff;
    text-align: center;
    font-weight: 600;
    padding: 8px 12px;
    font-family: var(--wb-font);
    font-size: 14px;
}