@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cairo:wght@400;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,500;0,700;1,400;1,600&family=Montserrat:wght@400;600;700;800;900&display=swap');

/* ==========================================================================
   Simply Verona Specialty Coffee - Luxury Design System & Color Palette
   Brand Style: Minimal, timeless, Scandinavian-inspired, warm specialty coffee
   ========================================================================== */

:root {
    /* Main Background & Surface Colors */
    --main-bg: #EEE6DB;             /* Warm Light Beige Canvas */
    --card-bg: #FFFFFF;             /* Crisp Warm White Cards */
    --card-bg-subtle: #FDFBF7;      /* Warm Cream Container Fill */
    --surface-light: #FAF6F0;
    
    /* Typography & Dark Accents */
    --primary-text: #202020;        /* Matte Espresso Charcoal Black */
    --secondary-text: #6E5D4F;      /* Warm Taupe Coffee Tone */
    --muted-text: #968677;          /* Soft Greige Text */
    
    /* Brand Accent Colors */
    --accent-color: #606C38;        /* Warm Coffee Oak / Primary Accent */
    --accent-hover: #485437;        /* Deep Coffee Accent Hover */
    --accent-sand: #D8C3A5;         /* Warm Sand Beige */
    --accent-sage: #606C38;         /* Sage Green for price tags & badges */
    --accent-stone: #BEB7AC;        /* Light Stone Accent */
    
    /* UI Structure & Borders */
    --border-color: #E5DFD5;        /* Soft Natural Stone Border */
    --border-hover: #D8C3A5;
    --shadow-sm: 0 4px 12px rgba(31, 26, 23, 0.04);
    --shadow: 0 8px 25px rgba(31, 26, 23, 0.06);
    --shadow-hover: 0 14px 35px rgba(31, 26, 23, 0.12);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 50px;
    
    /* Dark Contrast Areas (Sidebar / Header accents) */
    --dark-bg: #202020;
    --dark-surface: #2A2420;
    --dark-text: #EEE6DB;
    --dark-border: #3A322C;
}

/* Base Body Styles */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box;
}

body {
    background-color: var(--main-bg) !important;
    color: var(--primary-text) !important;
    font-family: 'Cairo', sans-serif;
    line-height: 1.6;
}

/* Button & Link Global Utilities */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:hover {
    color: var(--accent-hover);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--main-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--accent-sand);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* ==========================================================================
   ☕ Brand Logo Typography Component
   Matches exact "simply VERONA SPECIALTY COFFEE" brand identity
   ========================================================================== */
.brand-logo-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    user-select: none;
}

.brand-logo-script {
    font-family: 'Alex Brush', 'Great Vibes', cursive;
    font-size: 2.2em;
    color: var(--primary-text);
    line-height: 0.9;
    margin-bottom: -4px;
    font-weight: 400;
}

.brand-logo-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    color: var(--primary-text);
    letter-spacing: 7px;
    text-transform: uppercase;
    line-height: 1.1;
    margin-top: 2px;
}

.brand-logo-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 3px 0 2px 0;
    gap: 8px;
}

.brand-logo-divider span {
    height: 1px;
    flex: 1;
    background: var(--primary-text);
}

.brand-logo-divider i, .brand-logo-divider svg {
    font-size: 0.7em;
    color: var(--primary-text);
}

.brand-logo-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.52em;
    font-weight: 600;
    color: var(--primary-text);
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* ==========================================================================
   📜 Slogan Badges & Banner Styling
   Displays official brand slogans:
   1. "Coffee made with care. Served from the heart. ♡"
   2. "COFFEE worth COMING BACK FOR."
   ========================================================================== */
.slogan-card-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px 30px;
    text-align: center;
    max-width: 650px;
    margin: 25px auto;
    box-shadow: 0 10px 30px rgba(31, 26, 23, 0.05);
    position: relative;
    overflow: hidden;
}

.slogan-card-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-sand), var(--accent-color), var(--accent-sand), transparent);
}

.slogan-text-care {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6em;
    color: var(--primary-text);
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.3;
}

.slogan-text-care em {
    font-family: 'Alex Brush', cursive;
    font-style: normal;
    color: var(--accent-color);
    font-size: 1.35em;
    font-weight: 400;
    margin: 0 4px;
}

.slogan-divider-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 10px 0;
    color: var(--accent-color);
}

.slogan-divider-icon span {
    width: 50px;
    height: 1px;
    background: var(--accent-sand);
}

.slogan-heart {
    color: var(--accent-color);
    font-size: 1.3em;
    margin-top: 6px;
    display: inline-block;
}

.slogan-text-worth {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary-text);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 12px;
}

.slogan-text-worth span.script-worth {
    font-family: 'Alex Brush', cursive;
    text-transform: none;
    font-size: 2.1em;
    font-weight: 400;
    color: var(--accent-color);
    letter-spacing: 0;
    margin: 0 6px;
}