/* Бренд-стили по ТЗ */
:root {
    /* Основные цвета из брендбука */
    --cream: #F7EDE2;
    --cream-light: #FCF9F5;
    --terracotta: #D94848;
    --terracotta-dark: #C03939;
    --coffee: #3A68D8;
    --mint: #A5D6A7;
    --mustard: #FFD54F;
    
    /* Сезонные акценты */
    --spring: #A5D6A7; /* мята */
    --summer: #4FC3F7; /* голубой */
    --autumn: #FFB74D; /* осенний оранжевый */
    --winter: #B39DDB; /* зимний фиолетовый */
    
    /* Текст */
    --text-dark: #2D2D2D;
    --text-light: #5A5A5A;
    --text-white: #FFFFFF;
    
    /* Фоны */
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-cream: #F7EDE2;
    
    /* Границы */
    --border: #E8E8E8;
    --border-dark: #D1D1D1;
    
    /* Состояния */
    --success: #4CAF50;
    --warning: #FF9800;
    --error: #F44336;
    --info: #2196F3;
}

/* Тон-оф-войс стили */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Заголовки в рукописном стиле */
h1, h2, h3, .section-title, .hero-title {
    font-family: Kudryashev Display Sans;
    font-weight: 600;
    color: #585E92;
}

/* Стили для открыток и теплых элементов */
.warm-bg {
    background-color: var(--cream);
    background-image: linear-gradient(to bottom right, var(--cream), #FFFFFF);
}

.handwritten {
    font-family: Kudryashev Display Sans;
    font-weight: 600;
}

/* Акценты в зависимости от сезона */
.spring-accent {
    color: var(--spring);
}

.summer-accent {
    color: var(--summer);
}

.autumn-accent {
    color: var(--autumn);
}

.winter-accent {
    color: var(--winter);
}

/* Стили для кнопок с акцентами */
.btn-spring {
    background-color: var(--spring);
    color: var(--text-dark);
}

.btn-summer {
    background-color: var(--summer);
    color: white;
}

.btn-autumn {
    background-color: var(--autumn);
    color: var(--text-dark);
}

.btn-winter {
    background-color: var(--winter);
    color: white;
}

/* Бейджи */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-spring {
    background-color: var(--spring);
    color: var(--text-dark);
}

.badge-summer {
    background-color: var(--summer);
    color: white;
}

.badge-autumn {
    background-color: var(--autumn);
    color: var(--text-dark);
}

.badge-winter {
    background-color: var(--winter);
    color: white;
}

/* Карточки товаров в брендовых цветах */
.product-card {
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.product-card:hover {
    border-color: var(--terracotta);
    box-shadow: 0 8px 25px rgba(217, 72, 72, 0.1);
}

/* Цены в фирменном цвете */
.price {
    color: var(--terracotta);
    font-weight: 600;
}

/* Ховер-эффекты для ссылок */
a:hover {
    color: var(--terracotta);
}

/* Иконки */
.icon {
    fill: currentColor;
}

.icon-terracotta {
    color: var(--terracotta);
}

.icon-coffee {
    color: var(--coffee);
}

/* Формы в брендовом стиле */
input, select, textarea {
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--terracotta);
}

/* Кастомные чекбоксы и радио */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--terracotta);
}

/* Стили для уведомлений */
.notification {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.notification-success {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--success);
    border-left: 4px solid var(--success);
}

.notification-error {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--error);
    border-left: 4px solid var(--error);
}

.notification-warning {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--warning);
    border-left: 4px solid var(--warning);
}

/* Градиенты в брендовых цветах */
.gradient-terracotta {
    background: linear-gradient(135deg, var(--terracotta) 0%, #FF6B6B 100%);
}

.gradient-coffee {
    background: linear-gradient(135deg, var(--coffee) 0%, #8D6E63 100%);
}

.gradient-cream {
    background: linear-gradient(135deg, var(--cream) 0%, #FFFFFF 100%);
}

/* Тени в брендовых цветах */
.shadow-terracotta {
    box-shadow: 0 4px 20px rgba(217, 72, 72, 0.15);
}

.shadow-coffee {
    box-shadow: 0 4px 20px rgba(58, 104, 216, 0.15);
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}

.slide-up {
    animation: slideUp 0.5s ease;
}

.pulse {
    animation: pulse 2s infinite;
}

/* Сезонные украшения */
.seasonal-decoration {
    position: relative;
}

.seasonal-decoration::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: inherit;
    z-index: -1;
}

.spring-decoration::before {
    background: linear-gradient(45deg, var(--spring), transparent 30%);
}

.autumn-decoration::before {
    background: linear-gradient(45deg, var(--autumn), transparent 30%);
}

/* Стили для текста "от руки" */
.handwritten-text {
    font-family: Kudryashev Display Sans;
    font-size: 1.2em;
    line-height: 1.4;
}

/* Стили для иконки логотипа (цветочек вместо точки) */
.logo-emoji {
    position: relative;
}

.logo-emoji::after {
    content: "🌸";
    position: absolute;
    top: -0.5em;
    right: -0.3em;
    font-size: 0.7em;
}

/* Акцентные линии */
.accent-line {
    height: 4px;
    width: 60px;
    background: linear-gradient(to right, var(--terracotta), var(--coffee));
    margin: 1rem auto;
    border-radius: 2px;
}

/* Стили для меток "новинка", "хит" и т.д. */
.product-label {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 1;
}

.label-new {
    background-color: var(--spring);
    color: var(--text-dark);
}

.label-hit {
    background-color: var(--terracotta);
    color: white;
}

.label-sale {
    background-color: var(--autumn);
    color: var(--text-dark);
}

/*
 * Печать текста: при class="js" на <html> блоки скрыты, пока не идёт печать / не завершено.
 * Без JS класс no-js — текст виден сразу (прогрессивное улучшение).
 */
html.js .seo-context-line:not(.typewriter-printing):not(.typewriter-done),
html.js .footer-seo-nudge:not(.typewriter-printing):not(.typewriter-done),
html.js .page-intro-typewriter:not(.typewriter-printing):not(.typewriter-done) {
    opacity: 0;
}

html.js .seo-context-line:not(.typewriter-done) {
    min-height: 2.85em;
}

html.js .footer-seo-nudge:not(.typewriter-done) {
    min-height: 4.25em;
}

html.js .page-intro-typewriter:not(.typewriter-done) {
    min-height: 2.75em;
}

html.js .seo-context-line.typewriter-printing,
html.js .seo-context-line.typewriter-done,
html.js .footer-seo-nudge.typewriter-printing,
html.js .footer-seo-nudge.typewriter-done,
html.js .page-intro-typewriter.typewriter-printing,
html.js .page-intro-typewriter.typewriter-done {
    opacity: 1;
}

/* После печати убираем запас по высоте — высота от реального текста */
html.js .seo-context-line.typewriter-done,
html.js .footer-seo-nudge.typewriter-done,
html.js .page-intro-typewriter.typewriter-done {
    min-height: 0;
}

/* Дополнительный SEO-текст: спокойная типографика, без визуального перегруза */
.seo-context-line {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0.85rem 0 0;
    max-width: 38rem;
    font-style: italic;
}

/* Печать текста: мигающий курсор */
.typewriter-caret {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    margin-left: 2px;
    background: currentColor;
    opacity: 0.85;
    vertical-align: -0.08em;
    animation: typewriterCaretBlink 0.85s step-end infinite;
}

@keyframes typewriterCaretBlink {
    50% {
        opacity: 0;
    }
}

.home-page .hero-main-content .seo-context-line {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    max-width: 36rem;
}

.footer-seo-nudge {
    font-size: 0.8rem;
    line-height: 1.45;
    color: #8a8a8a;
    margin: 10px 0 0;
    max-width: 26rem;
    font-style: italic;
}

.catalog-page .catalog-header .seo-context-line {
    margin-top: 0.35rem;
}

/* Подзаголовок с печатью (напр. контакты) */
.page-intro-typewriter {
    font-style: italic;
}