:root {
    --ee-primary: #0d7377;
    --ee-primary-dark: #095456;
    --ee-dark: #102a2d;
    --ee-accent: #14a3a8;
    --ee-soft: #e8f6f6;
    --ee-surface: #ffffff;
}

body, .ee-body {
    font-family: 'Source Sans 3', 'Outfit', sans-serif;
    color: #243236;
    background:
        radial-gradient(circle at top left, rgba(20, 163, 168, 0.08), transparent 28%),
        linear-gradient(180deg, #f7fbfb 0%, #eef5f5 100%);
}

.brand-wordmark {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ee-dark);
}

.top-bar {
    background: linear-gradient(90deg, var(--ee-dark), #16454a);
    color: #fff;
    font-size: 0.85rem;
    padding: 8px 0;
}
.top-bar a { color: #fff; text-decoration: none; }
.top-bar a:hover { color: var(--ee-accent); }

.navbar-shop {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(16,42,45,.08);
    padding: 14px 0;
    border-bottom: 1px solid rgba(13,115,119,.08);
}
.navbar-brand-shop {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ee-dark) !important;
    display: inline-flex;
    align-items: center;
}
.nav-link-shop {
    font-weight: 600;
    color: #395055 !important;
    padding: 8px 16px !important;
    border-radius: 999px;
    transition: all .2s;
}
.nav-link-shop:hover, .nav-link-shop.active {
    color: var(--ee-primary) !important;
    background: var(--ee-soft);
}
.btn-shop-primary {
    background: linear-gradient(135deg, var(--ee-primary), var(--ee-accent));
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(13,115,119,.25);
}
.btn-shop-primary:hover {
    background: linear-gradient(135deg, var(--ee-primary-dark), var(--ee-primary));
    color: #fff;
}
.btn-shop-outline {
    border: 2px solid var(--ee-primary);
    color: var(--ee-primary);
    font-weight: 700;
    border-radius: 999px;
}
.btn-shop-outline:hover { background: var(--ee-primary); color: #fff; }
.cart-badge {
    position: absolute; top: -5px; right: -8px;
    background: var(--ee-primary); color: #fff;
    font-size: 0.7rem; width: 20px; height: 20px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

.hero-carousel .carousel-item { height: 560px; }
.hero-carousel .carousel-item img { object-fit: cover; height: 100%; width: 100%; }
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(16,42,45,.88) 0%, rgba(13,115,119,.35) 100%);
    display: flex; align-items: center;
}
.hero-content h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 3.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
}
.hero-content p { font-size: 1.15rem; color: rgba(255,255,255,.9); }

.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--ee-dark);
    letter-spacing: -0.02em;
}
.section-title h2::after {
    content: '';
    display: block;
    width: 72px;
    height: 4px;
    background: linear-gradient(90deg, var(--ee-primary), var(--ee-accent));
    margin: 14px auto 0;
    border-radius: 2px;
}
.section-title p { color: #678086; margin-top: 12px; }

.product-card, .ee-surface, .filter-card, .testimonial-card {
    border: 1px solid rgba(13,115,119,.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(16,42,45,.06);
    background: var(--ee-surface);
    transition: transform .3s, box-shadow .3s;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(13,115,119,.14);
}
.product-card .card-img-top { height: 220px; object-fit: cover; }
.product-card .price, .price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ee-primary);
}
.product-card .card-body { display: flex; flex-direction: column; }
.product-card .card-footer-actions { margin-top: auto; padding-top: 1rem; }

.testimonial-card { padding: 1.5rem; height: 100%; }
.testimonial-card .stars { color: #f0b429; }
.testimonial-avatar {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--ee-primary);
}

.stats-section {
    background: linear-gradient(135deg, var(--ee-dark) 0%, #0d7377 100%);
    color: #fff;
    padding: 4rem 0;
}
.stat-box {
    background: rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
}
.stat-box .number {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #9ee7ea;
}

.footer-shop {
    background: linear-gradient(180deg, #0f2c30 0%, #0a1f22 100%);
    color: rgba(255,255,255,.8);
    padding: 3.5rem 0 1rem;
}
.footer-shop h5 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
}
.footer-shop a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer-shop a:hover { color: #9ee7ea; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.page-header {
    background: linear-gradient(120deg, var(--ee-dark), #0d7377 70%, #14919b);
    color: #fff;
    padding: 3.2rem 0;
    margin-bottom: 2rem;
}
.page-header h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.filter-card .card-header {
    background: var(--ee-dark);
    color: #fff;
    font-weight: 700;
    border-radius: 18px 18px 0 0 !important;
}

.order-summary { position: sticky; top: 100px; }
.product-gallery-main img { border-radius: 18px; }
.product-gallery-thumb {
    width: 72px; height: 72px; object-fit: cover; border-radius: 12px;
    cursor: pointer; opacity: .65; border: 2px solid transparent; transition: .2s;
}
.product-gallery-thumb.active, .product-gallery-thumb:hover {
    opacity: 1; border-color: var(--ee-primary);
}

@keyframes ee-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-content, .section-title, .product-card {
    animation: ee-fade-up .7s ease both;
}