/*
Theme Name: Dala
Theme URI: 
Description: Brand child theme for WooCommerce Storefront.
Author: EQ
Version: 1.0.0
Template: storefront
Text Domain: dala
*/

/* ---------------------------------
   Брендовые переменные
---------------------------------- */
:root {
    /* Основные брендовые цвета */
    --brand-olive: #304D38;
    --brand-paper: #FDFCF9;
    --brand-graphite: #3F4645;

    /* Акцентные цвета */
    --brand-navy: #1E3045;
    --brand-burgundy: #743B45;

    /* Интерфейсные оттенки */
    --color-surface-soft: #F4F1EB;
    --color-border: #D9D9D3;
    --color-text-muted: #747A78;

    --color-olive-hover: #243C2B;
    --color-olive-active: #1C3023;

    --color-olive-soft: #E7EDE7;
    --color-navy-soft: #E8EDF2;
    --color-burgundy-soft: #F1E5E7;

    /* Системные цвета */
    --color-success: #52745B;
    --color-success-soft: #E7EDE7;

    --color-error: #8A3F45;
    --color-error-soft: #F1E5E7;

    --color-warning: #98734A;
    --color-warning-soft: #F3ECE1;

    --color-info: #1E3045;
    --color-info-soft: #E8EDF2;

    /* Семантические переменные */
    --color-body: var(--brand-graphite);
    --color-background: var(--brand-paper);
    --color-surface: #FFFFFF;
    --color-primary: var(--brand-olive);
    --color-primary-hover: var(--color-olive-hover);
    --color-primary-active: var(--color-olive-active);
    --color-link: var(--brand-olive);
    --color-link-hover: var(--color-olive-hover);
    --color-price: var(--brand-olive);

    /* Типографика */
    --font-brand: "Merriweather", Georgia, serif;
    --font-ui: "Source Sans 3", Helvetica, Arial, sans-serif;

    /* Размеры */
    --container-width: 1280px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;

    --shadow-card: 0 8px 24px rgba(63, 70, 69, 0.08);
    --shadow-card-hover: 0 12px 30px rgba(63, 70, 69, 0.14);
    --shadow-dropdown: 0 14px 35px rgba(63, 70, 69, 0.16);
}

/* ---------------------------------
   Базовые стили
---------------------------------- */

body {
    background: var(--color-background);
    color: var(--color-body);
    font-family: var(--font-ui);
}


/* ---------------------------------
   Типографика
---------------------------------- */

h1,
h2,
.site-title,
.hero-title,
.brand-heading {
    color: var(--brand-graphite);
    font-family: var(--font-brand);
    font-weight: 700;
    line-height: 1.15;
}

h3,
h4,
h5,
h6 {
    color: var(--brand-graphite);
    font-family: var(--font-ui);
    font-weight: 600;
    line-height: 1.25;
}

p,
li,
label,
input,
textarea,
select,
button {
    font-family: var(--font-ui);
}

a {
    color: var(--color-link);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--color-link-hover);
}

/* ---------------------------------
   Шапка
---------------------------------- */

.site-header {
    background: var(--brand-paper);
    border-bottom: 1px solid var(--color-border);
}


.site-branding .site-title a {
    color: var(--brand-olive);
    font-family: var(--font-brand);
}


.main-navigation ul li a {
    color: var(--brand-graphite);
    font-weight: 600;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
    color: var(--brand-olive);
}

/* ---------------------------------
   Кнопки
---------------------------------- */
button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border: 1px solid var(--brand-olive);
    border-radius: var(--radius-sm);
    background: var(--brand-olive);
    color: var(--brand-paper);
    font-family: var(--font-ui);
    font-weight: 600;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

button:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    border-color: var(--color-olive-hover);
    background: var(--color-olive-hover);
    color: var(--brand-paper);
    transform: translateY(-1px);
}

button:active,
.button:active,
.wp-block-button__link:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
    border-color: var(--color-olive-active);
    background: var(--color-olive-active);
    color: var(--brand-paper);
    transform: translateY(0);
}

/* Вторичная кнопка */
.button.secondary,
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.alt {		
    border-color: var(--brand-olive);
    background: transparent;
    color: var(--brand-olive);
}

.button.secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.woocommerce a.button.alt:hover {
    border-color: var(--brand-olive);
    background: var(--color-olive-soft);
    color: var(--brand-olive);
}

.button.is-burgundy,
.wp-block-button.is-style-burgundy .wp-block-button__link {
    border-color: var(--brand-burgundy);
    background: var(--brand-burgundy);
    color: var(--brand-paper);
}

.button.is-burgundy:hover,
.wp-block-button.is-style-burgundy .wp-block-button__link:hover {
    border-color: #5F3039;
    background: #5F3039;
    color: var(--brand-paper);
}


/* ---------------------------------
   WooCommerce: карточки товаров
---------------------------------- */
.woocommerce ul.products li.product {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
    background: var(--color-surface);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--brand-graphite);
    font-family: var(--font-ui);
    font-weight: 600;
}

.woocommerce ul.products li.product .price {
    color: var(--brand-olive);
    font-family: var(--font-ui);
    font-weight: 700;
}

.woocommerce ul.products li.product .price del {
    color: var(--color-text-muted);
}

.woocommerce span.onsale {
    background: var(--brand-burgundy);
    color: var(--brand-paper);
}

.woocommerce ul.products li.product .product-category,
.woocommerce ul.products li.product .product-meta {
    color: var(--color-text-muted);
}

/* Бейджи */
.dala-badge,
.product-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.dala-badge--new {
    background: var(--brand-navy);
    color: var(--brand-paper);
}

.dala-badge--sale {
    background: var(--brand-burgundy);
    color: var(--brand-paper);
}

.dala-badge--recommended {
    background: var(--color-olive-soft);
    color: var(--brand-olive);
}


/* ---------------------------------
   WooCommerce: формы
---------------------------------- */
input,
textarea,
select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--brand-graphite);
    font-family: var(--font-ui);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-olive);
    outline: 2px solid rgba(48, 77, 56, 0.16);
}


/* ---------------------------------
   Мини-корзина
---------------------------------- */

.site-header-cart .cart-contents {
    border-radius: var(--radius-sm);
    background: var(--brand-olive);
    color: var(--brand-paper);
}

.site-header-cart .cart-contents:hover {
    background: var(--color-olive-hover);
    color: var(--brand-paper);
}

.site-header-cart .count {
    background: var(--brand-burgundy);
    color: var(--brand-paper);
}

.site-header-cart .widget_shopping_cart {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-dropdown);
}

/* ---------------------------------
   Уведомления WooCommerce
---------------------------------- */
.woocommerce-message {
    border-top-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--brand-graphite);
}

.woocommerce-info {
    border-top-color: var(--brand-navy);
    background: var(--color-navy-soft);
    color: var(--brand-graphite);
}

.woocommerce-error {
    border-top-color: var(--color-error);
    background: var(--color-error-soft);
    color: var(--brand-graphite);
}

.woocommerce .woocommerce-error li,
.woocommerce .woocommerce-info li,
.woocommerce .woocommerce-message li {
    color: var(--brand-graphite);
}

/* ---------------------------------
   Подвал
---------------------------------- */

.site-footer {
    background: var(--brand-olive);
    color: var(--brand-paper);
}

.site-footer a {
    color: var(--brand-paper);
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--color-olive-soft);
}

/* ---------------------------------
   Адаптивность
---------------------------------- */

@media (max-width: 768px) {
    body {
        font-size: 17px;
    }

    h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    h2 {
        font-size: clamp(1.6rem, 6vw, 2.3rem);
    }

    .site-header {
        padding: 12px 0;
    }
}