/*
Theme Name: VitalMan Child
Template: flatsome
Version: 3.1
Description: Flatsome child theme with VitalMan custom style — inspired by Ro.co, BlueChew, and Czech pharma ecommerce UX
*/

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --vm-primary: #1a4a2e;
    --vm-primary-dark: #136633;
    --vm-primary-light: #e8f0e8;
    --vm-dark: #0d1b2a;
    --vm-dark-alt: #1a1a1a;
    --vm-gold: #c9a84c;
    --vm-gold-light: #d4b85a;
    --vm-gold-dark: #b8962e;
    --vm-white: #ffffff;
    --vm-bg-light: #f5f7f5;
    --vm-bg-card: #f9faf9;
    --vm-text: #333333;
    --vm-text-light: #666666;
    --vm-text-muted: #888888;
    --vm-radius: 16px;
    --vm-radius-sm: 8px;
    --vm-shadow: 0 4px 15px rgba(0,0,0,0.05);
    --vm-shadow-hover: 0 8px 25px rgba(0,0,0,0.12);
    --vm-transition: 0.3s ease;
}

/* ========================================
   FLATSOME GLOBAL OVERRIDES
   ======================================== */

/* Inter font on everything */
body, h1, h2, h3, h4, h5, h6, p, a, span, li,
input, textarea, button, select, .nav, .nav-link,
.header, .footer, .product-title, .price,
.widget-title, .section-title, .button,
.heading, .title {
    font-family: var(--font-main, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

body {
    color: var(--vm-text) !important;
    line-height: 1.6 !important;
}

/* --- Buttons global --- */
button, .button, .btn, a.button, input[type=submit] {
    font-weight: 600 !important;
    border-radius: 50px !important;
    transition: all var(--vm-transition) !important;
}

.button.primary, a.button.primary {
    background-color: var(--vm-gold) !important;
    border-color: var(--vm-gold) !important;
    color: var(--vm-dark) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 20px rgba(201,168,76,0.3) !important;
}
.button.primary:hover, a.button.primary:hover {
    background-color: var(--vm-gold-dark) !important;
    border-color: var(--vm-gold-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(201,168,76,0.4) !important;
}

.button.white, a.button.white {
    background: #fff !important;
    color: var(--vm-primary) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    padding: 16px 44px !important;
    box-shadow: 0 4px 20px rgba(255,255,255,0.2) !important;
}
.button.white:hover, a.button.white:hover {
    background: var(--vm-primary-light) !important;
    transform: translateY(-2px) !important;
}

.button.secondary, a.button.secondary,
.button.outline, a.button.outline {
    background: transparent !important;
    color: var(--vm-primary) !important;
    border-color: var(--vm-primary) !important;
}
.button.secondary:hover, a.button.secondary:hover,
.button.outline:hover, a.button.outline:hover {
    background: var(--vm-primary) !important;
    color: #fff !important;
}

/* --- Section titles --- */
.section-title-container .section-title {
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* ========================================
   HEADER — Dark with gold accents
   ======================================== */
.header-main {
    background-color: var(--vm-dark) !important;
    box-shadow: none !important;
}

.header-main .logo a {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    letter-spacing: -0.5px !important;
}

.header-main .nav > li > a {
    color: rgba(255,255,255,0.8) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.header-main .nav > li > a:hover,
.header-main .nav > li > a.active,
.header-main .nav > li.current-menu-item > a {
    color: var(--vm-gold) !important;
}

/* Header icons */
.header-main .nav > li > a .icon-shopping-cart,
.header-main .nav > li > a .icon-user {
    color: var(--vm-gold) !important;
}
.header-main .cart-icon strong {
    color: var(--vm-gold) !important;
}

/* ========================================
   HERO SECTION
   ======================================== */
.vm-hero-overlay.section.dark {
    padding: 100px 0 !important;
    min-height: 550px !important;
}

/* Hero tagline badge */
.vm-tagline {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--vm-gold) !important;
    text-transform: uppercase;
    border: 1px solid rgba(201,168,76,0.3);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}

/* Hero h1 — apply to ALL UX Builder generated h1s in hero */
.vm-hero-overlay .section-content h1,
.vm-hero-overlay .section-content .h1 {
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    line-height: 1.05 !important;
    color: #fff !important;
}

/* Hero subtitle */
.vm-hero-overlay .section-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7) !important;
    max-width: 520px;
    line-height: 1.5;
}

/* Hero USPs (inline badges like ⚡ Účinek už za 60 minut) */
.vm-hero-overlay .section-content .row .col:first-child p strong {
    color: var(--vm-gold) !important;
}

/* ========================================
   TRUST BADGES — Dark row
   ======================================== */
.vm-trust-grid.section.dark {
    background-color: var(--vm-dark-alt) !important;
    padding: 24px 0 !important;
}
.vm-trust-grid .col-inner {
    text-align: center !important;
    padding: 6px 0 !important;
}
.vm-trust-grid .icon-box-img {
    margin-bottom: 4px !important;
}
.vm-trust-grid .icon-box-text .icon-box-title {
    color: rgba(255,255,255,0.9) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}
.vm-trust-grid .icon-box-text p {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.72rem !important;
}

/* ========================================
   PRODUCT SECTION
   ======================================== */

/* Product cards */
.product-small .box {
    border-radius: var(--vm-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--vm-shadow) !important;
    transition: transform var(--vm-transition), box-shadow var(--vm-transition) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    background: #fff !important;
}
.product-small:hover .box {
    transform: translateY(-6px) !important;
    box-shadow: var(--vm-shadow-hover) !important;
}

.product-small .box-image {
    border-radius: var(--vm-radius) var(--vm-radius) 0 0 !important;
    overflow: hidden !important;
}
.product-small .box-image img {
    transition: transform 0.5s ease !important;
}
.product-small:hover .box-image img {
    transform: scale(1.08) !important;
}

.product-small .box-text {
    text-align: center !important;
    padding: 15px 16px 20px !important;
}
.product-small .product-title a {
    color: var(--vm-dark) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}
.product-small .price {
    color: var(--vm-primary) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
}
.product-small .price ins .amount {
    color: #cc3333 !important;
}

/* Add to cart */
.product-small .add-to-cart-button a,
.product-small .button.add_to_cart_button {
    background-color: var(--vm-primary) !important;
    border-color: var(--vm-primary) !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
}
.product-small .add-to-cart-button a:hover,
.product-small .button.add_to_cart_button:hover {
    background-color: #133620 !important;
}

/* Product badge (sale etc) */
.product-small .badge-container .badge-inner {
    background: var(--vm-gold) !important;
    color: var(--vm-dark) !important;
    font-weight: 700 !important;
    font-size: 0.68rem !important;
    border-radius: 50% !important;
}

/* ========================================
   HOW IT WORKS / TIMELINE
   ======================================== */
.vm-timeline-card {
    background: #ffffff !important;
    border-radius: var(--vm-radius) !important;
    padding: 28px 20px !important;
    text-align: center !important;
    box-shadow: var(--vm-shadow) !important;
    border-top: 4px solid var(--vm-primary) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    height: 100% !important;
    position: relative !important;
}
.vm-timeline-card.gold {
    border-top-color: var(--vm-gold) !important;
    box-shadow: 0 4px 20px rgba(201,168,76,0.15) !important;
}
.vm-timeline-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--vm-shadow-hover) !important;
}

/* Number — large, transparent, top-left aligned style */
.vm-timeline-card .vm-timeline-num,
.vm-timeline-card strong:first-child {
    display: block;
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: var(--vm-primary) !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    opacity: 0.15;
}
.vm-timeline-card.gold .vm-timeline-num,
.vm-timeline-card.gold strong:first-child {
    color: var(--vm-gold) !important;
}

/* Labels */
.vm-timeline-card .vm-timeline-label,
.vm-timeline-card strong:not(:first-child) {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vm-dark);
    margin-bottom: 8px;
}
.vm-timeline-card p,
.vm-timeline-card br + span:not(.vm-timeline-num) {
    font-size: 0.9rem;
    color: var(--vm-text-light);
    line-height: 1.5;
}

/* ========================================
   INGREDIENT CARDS
   ======================================== */
.row .vm-ingredient-card {
    background: var(--vm-bg-card) !important;
    border: 1px solid #e8ece8 !important;
    border-radius: var(--vm-radius) !important;
    padding: 30px 24px !important;
    text-align: center !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    height: 100% !important;
}
.row .vm-ingredient-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--vm-shadow) !important;
    border-color: var(--vm-primary) !important;
}
.vm-ingredient-card h4,
.vm-ingredient-card .h4 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--vm-primary) !important;
    margin-bottom: 4px !important;
}
.vm-ingredient-card p {
    font-size: 0.9rem;
    color: var(--vm-text-light);
    line-height: 1.6;
}
.vm-ingredient-card img {
    max-height: 60px;
    width: auto;
    margin: 0 auto 12px;
}

/* ========================================
   TESTIMONIALS — Dark glass-style
   ======================================== */
.vm-testimonial-card {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--vm-radius) !important;
    padding: 28px 24px !important;
    transition: background 0.3s ease, transform 0.25s ease !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}
.vm-testimonial-card:hover {
    background: rgba(255,255,255,0.1) !important;
    transform: translateY(-3px) !important;
}
.vm-stars {
    color: var(--vm-gold) !important;
    font-size: 1.1rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 12px !important;
    white-space: nowrap;
}
.vm-testimonial-card blockquote,
.vm-testimonial-card p {
    font-size: 0.92rem;
    opacity: 0.85;
    line-height: 1.55;
    margin-bottom: 20px;
    flex: 1;
}
.vm-testimonial-card .vm-avatar,
.vm-testimonial-card img.avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--vm-primary) !important;
    color: var(--vm-white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}
.vm-testimonial-card .vm-verified {
    display: block !important;
    font-size: 0.7rem !important;
    color: var(--vm-gold) !important;
    margin-top: 2px !important;
    font-weight: 500 !important;
}

/* ========================================
   CTA SECTION
   ======================================== */
.vm-cta-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--vm-gold);
    text-transform: uppercase;
    border: 1px solid rgba(201,168,76,0.3);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}

/* ========================================
   FOOTER
   ======================================== */
.footer-wrapper {
    background-color: var(--vm-dark) !important;
    border: none !important;
}
.footer-1,
.footer-2 {
    background-color: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.footer-wrapper .widget-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.footer-wrapper a {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.85rem !important;
}
.footer-wrapper a:hover {
    color: var(--vm-gold) !important;
    opacity: 1 !important;
}
.footer-wrapper .footer-2 .copyright-footer {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.8rem !important;
}

/* ========================================
   BLOG
   ======================================== */
.blog-wrapper .post-item .box {
    border-radius: var(--vm-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--vm-shadow) !important;
    transition: transform var(--vm-transition), box-shadow var(--vm-transition) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
}
.blog-wrapper .post-item:hover .box {
    transform: translateY(-4px) !important;
    box-shadow: var(--vm-shadow-hover) !important;
}
.blog-wrapper .post-item .from_the_blog_excerpt {
    color: var(--vm-text-light) !important;
}
.blog-wrapper .post-item .post-title a {
    color: var(--vm-dark) !important;
    font-weight: 700 !important;
}

/* ========================================
   WOOCOMMERCE — Product page
   ======================================== */
.product-main .product-info .product-title {
    font-weight: 800 !important;
    color: var(--vm-dark) !important;
}
.product-main .price {
    color: var(--vm-primary) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
}
.single_add_to_cart_button {
    background-color: var(--vm-primary) !important;
    border-color: var(--vm-primary) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    font-size: 1rem !important;
    text-transform: none !important;
}
.single_add_to_cart_button:hover {
    background-color: #133620 !important;
}

/* WooCommerce tabs */
.product-tabs .tab-panels {
    border: none !important;
    padding: 20px 0 !important;
}
.product-tabs .tab-panels h2 {
    font-weight: 700 !important;
    color: var(--vm-dark) !important;
}

/* Related products */
.related-products-wrapper h3 {
    font-weight: 800 !important;
    color: var(--vm-dark) !important;
    letter-spacing: -0.3px !important;
}

/* ========================================
   WOOCOMMERCE — Cart & Checkout
   ======================================== */
.cart-container .cart_totals {
    background: var(--vm-bg-light) !important;
    border-radius: var(--vm-radius) !important;
    padding: 24px !important;
    border: 1px solid #e8ece8 !important;
}
.checkout-breadcrumb .is-active a {
    color: var(--vm-primary) !important;
}
.woocommerce-checkout h3 {
    font-weight: 700 !important;
    color: var(--vm-dark) !important;
}

/* ========================================
   MISCELLANEOUS FLATSOME FIXES
   ======================================== */
/* Remove Flatsome header shadow/border */
.header-wrapper {
    box-shadow: none !important;
}

/* Fix gap under hero */
.vm-hero-overlay + .section {
    margin-top: 0 !important;
}

/* Section padding consistency */
.section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}
.vm-hero-overlay.section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
.vm-trust-grid.section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Image max-width override */
img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 849px) {
    .header-main .logo a {
        font-size: 1.3rem !important;
    }
    .section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .vm-hero-overlay.section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        min-height: auto !important;
    }
    .vm-timeline-card,
    .vm-ingredient-card,
    .vm-testimonial-card {
        margin-bottom: 16px !important;
    }
}

@media (max-width: 549px) {
    .header-main .nav > li > a {
        font-size: 0.8rem !important;
    }
    .product-small .box-text {
        padding: 10px 12px 16px !important;
    }
}