/* ═══════════════════════════════════════════════════════════════
   VESARA Elementor Addon — Global CSS
   CSS Variables, resets, shared utilities
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Lato:wght@300;400;600&display=swap');

:root {
    --vesara-brown:      #3D2817;
    --vesara-gold:       #C9A961;
    --vesara-cream:      #F5F1E8;
    --vesara-burgundy:   #7B3F3F;
    --vesara-green:      #2D5A4A;
    --vesara-dark-brown: #2A1B0E;
    --vesara-light-gold: rgba(201,169,97,0.15);

    --vesara-transition: 0.3s ease;
    --vesara-shadow:     0 2px 8px rgba(0,0,0,0.1);
    --vesara-shadow-hover: 0 8px 24px rgba(201,169,97,0.2);
    --vesara-border-gold: 1px solid rgba(201,169,97,0.4);
}

/* ── Box-sizing reset ── */
.elementor-widget-vesara_banner *,
.elementor-widget-vesara_shop_category *,
.elementor-widget-vesara_new_arrivals *,
.elementor-widget-vesara_feature_highlights *,
.elementor-widget-vesara_testimonials *,
.elementor-widget-vesara_footer * {
    box-sizing: border-box;
}

/* ── Shared button styles ── */
.vesara-btn {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 36px;
    border: 2px solid var(--vesara-gold);
    color: var(--vesara-gold);
    background: transparent;
    cursor: pointer;
    transition: all var(--vesara-transition);
    border-radius: 2px;
}
.vesara-btn:hover {
    background: var(--vesara-gold);
    color: var(--vesara-brown);
    transform: translateY(-2px);
    box-shadow: var(--vesara-shadow-hover);
}
.vesara-btn--solid {
    background: var(--vesara-gold);
    color: var(--vesara-brown);
}
.vesara-btn--solid:hover {
    background: transparent;
    color: var(--vesara-gold);
}

/* ── Gold ornamental divider ── */
.vesara-ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 24px;
}
.vesara-ornament-divider span {
    display: block;
    height: 1px;
    width: 60px;
    background: var(--vesara-gold);
    opacity: 0.5;
}
.vesara-ornament-divider i {
    color: var(--vesara-gold);
    font-size: 10px;
}

/* ── Section heading pattern ── */
.vesara-section-eyebrow {
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--vesara-gold);
    display: block;
    margin-bottom: 12px;
}
.vesara-section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    color: var(--vesara-brown);
    line-height: 1.2;
    margin: 0 0 16px;
}