/*
Theme Name: GeneratePress Child - Supplements
Theme URI: https://example.com
Description: Child theme за каталог с хранителни добавки
Author: Твоето име
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: generatepress-child-supplements
*/
/* Чисти бели supplement карти */.supplement-card {    background: white;    border-radius: 12px;    overflow: hidden;    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);    transition: all 0.3s ease;    display: flex;    flex-direction: column;    height: 100%;}.supplement-card:hover {    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);    transform: translateY(-4px);}/* Image area - чист бял фон */.supplement-card-image {    background: white; /* БЯЛ вместо градиент */    padding: 20px;    display: flex;    align-items: center;    justify-content: center;    min-height: 250px;    border-bottom: 1px solid #f0f0f0;}.supplement-card-image img {    width: 100%;    height: auto;    object-fit: cover;    border-radius: 8px;}.supplement-card-image .card-emoji {    font-size: 80px;    display: block;}/* Content area */.supplement-card-content {    padding: 20px;    display: flex;    flex-direction: column;    flex-grow: 1;}.supplement-card-title {    font-size: 18px;    margin: 0 0 10px;    line-height: 1.4;}.supplement-card-title a {    color: #2c3e50;    text-decoration: none;    transition: color 0.2s;}.supplement-card-title a:hover {    color: #007bff;}.supplement-card-meta {    display: flex;    gap: 10px;    align-items: center;    margin-bottom: 12px;    flex-wrap: wrap;}.card-type {    background: #e3f2fd;    color: #1976d2;    padding: 4px 10px;    border-radius: 12px;    font-size: 12px;    font-weight: 500;}.card-rating {    color: #ffa500;    font-size: 14px;    font-weight: 600;}.card-excerpt {    color: #666;    font-size: 14px;    line-height: 1.6;    margin: 0 0 15px;    flex-grow: 1;}.card-functions {    display: flex;    gap: 6px;    flex-wrap: wrap;    margin-bottom: 15px;}.card-function-tag {    background: #f1f3f5;    color: #495057;    padding: 4px 10px;    border-radius: 12px;    font-size: 11px;}.card-button {    display: block;    width: 100%;    padding: 12px;    background: #007bff;    color: white;    text-align: center;    text-decoration: none;    border-radius: 6px;    font-weight: 500;    transition: all 0.2s;}.card-button:hover {    background: #0056b3;    transform: translateY(-1px);}/* ==================== DOBAVKATA LOGO STYLES ==================== */.dobavkata-logo {    display: inline-block;    padding: 10px 0;}.dobavkata-logo .logo-link {    display: flex;    align-items: center;    gap: 12px;    text-decoration: none;    transition: all 0.3s ease;}.dobavkata-logo .logo-link:hover {    transform: translateY(-2px);    opacity: 0.9;}/* Logo Icons */.logo-icons {    display: flex;    gap: 4px;    font-size: 32px;    line-height: 1;    flex-shrink: 0;}.logo-leaf,.logo-pill {    display: inline-block;    transition: transform 0.3s ease;}.logo-link:hover .logo-leaf {    transform: rotate(-10deg);}.logo-link:hover .logo-pill {    transform: rotate(10deg);}/* Text Wrapper */.logo-text-wrapper {    display: flex;    flex-direction: column;    gap: 2px;}.logo-name-line {    display: flex;    align-items: baseline;    gap: 2px;    line-height: 1;}/* Main Logo Text */.logo-name {    font-family: 'Poppins', sans-serif;    font-size: 32px;    font-weight: 700;    color: #2c3e50;    letter-spacing: -0.5px;}.logo-domain {    font-family: 'Poppins', sans-serif;    font-size: 18px;    font-weight: 600;    color: #28a745;}/* Slogan */.logo-slogan {    font-family: 'Inter', sans-serif;    font-size: 13px;    font-weight: 400;    color: #666;    letter-spacing: 0.3px;    line-height: 1.2;}/* ==================== RESPONSIVE ==================== */@media (max-width: 768px) {    .logo-icons {        font-size: 26px;    }        .logo-name {        font-size: 26px;    }        .logo-domain {        font-size: 15px;    }        .logo-slogan {        font-size: 11px;    }        .dobavkata-logo .logo-link {        gap: 10px;    }}@media (max-width: 480px) {    .logo-icons {        font-size: 24px;    }        .logo-name {        font-size: 22px;    }        .logo-domain {        font-size: 13px;    }        .logo-slogan {        font-size: 10px;    }}/* ==================== STICKY HEADER ==================== *//* When header becomes sticky, make logo smaller */.sticky-header .logo-icons {    font-size: 26px;}.sticky-header .logo-name {    font-size: 26px;}.sticky-header .logo-domain {    font-size: 15px;}.sticky-header .logo-slogan {    font-size: 11px;}/* Optional: Hide slogan in sticky header for more space */.sticky-header .logo-slogan {    display: none;}/* ==================== DARK MODE (Optional) ==================== */@media (prefers-color-scheme: dark) {    .logo-name {        color: #ffffff;    }        .logo-slogan {        color: #aaa;    }}/* ==================== ALTERNATIVE: CENTERED LOGO ==================== */.dobavkata-logo.centered {    text-align: center;}.dobavkata-logo.centered .logo-link {    flex-direction: column;    align-items: center;    gap: 8px;}.dobavkata-logo.centered .logo-icons {    font-size: 40px;}/* ==================== ALTERNATIVE: STACKED LOGO ==================== */.dobavkata-logo.stacked .logo-link {    flex-direction: column;    align-items: flex-start;    gap: 8px;}.dobavkata-logo.stacked .logo-text-wrapper {    align-items: flex-start;}/* ========== STEP 3: REPLACE GENERATEPRESS LOGO ========== *//* Option A: Use WordPress Customizer *//*1. Go to Appearance → Customize → Site Identity2. Upload a logo image OR3. Use the custom HTML function above*//* Option B: Override in child theme header *//*1. Copy header.php to child theme2. Find the logo section3. Replace with dobavkata_custom_logo() function call*//* Option C: Use hook (cleanest method) */<?php/** * Replace default logo with custom */function dobavkata_replace_logo() {    remove_action('generate_logo', 'generate_construct_logo');    add_action('generate_logo', 'dobavkata_custom_logo');}add_action('after_setup_theme', 'dobavkata_replace_logo');?>/* ========== FAVICON CODE ========== *//* Create 512x512 image with 🌿💊 or just 🌿   Then upload via:   WordPress Admin → Appearance → Customize → Site Identity → Site Icon*//* ========== BONUS: ANIMATED GRADIENT SLOGAN ========== */.logo-slogan.gradient {    background: linear-gradient(90deg, #28a745, #007bff, #28a745);    background-size: 200% auto;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text;    animation: gradientSlide 3s ease infinite;}@keyframes gradientSlide {    0% {        background-position: 0% center;    }    50% {        background-position: 100% center;    }    100% {        background-position: 0% center;    }}/* To use: Add class "gradient" to logo-slogan div *//* ========== BONUS: HOVER EFFECTS ========== *//* Glow effect on hover */.logo-link:hover .logo-name {    text-shadow: 0 0 20px rgba(40, 167, 69, 0.3);}/* Scale icons on hover */.logo-link:hover .logo-icons {    transform: scale(1.1);}/* Color transition on slogan */.logo-slogan {    transition: color 0.3s ease;}.logo-link:hover .logo-slogan {    color: #28a745;}/* ========== SOCIAL MEDIA SIZES ========== *//* For Open Graph / Social Media previews *//*Facebook: 1200x630pxTwitter: 1200x675pxInstagram: 1080x1080pxUse the centered logo variant for social media*//* Grid layout */.supplement-grid {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));    gap: 30px;    margin-top: 30px;}@media (max-width: 768px) {    .supplement-grid {        grid-template-columns: 1fr;        gap: 20px;    }        .supplement-card-image {        min-height: 200px;    }}