/* Color Variables */
:root {
    --primary-bg: #f2e9e0;
    --accent: #DEAD6F;
    --white: #FFFFFF;
    --secondary-bg: #FEF3E6;
    --dark-text: #2d2d2d;
    --muted-green: #6d8c7c;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #555;
    background-color: var(--white);
    overflow-x: hidden;
}

h1, h2, h3, h4, .section-heading {
    font-family: 'Playfair Display', serif;
    color: var(--dark-text);
}

/* HERO SECTION */
.hero-breadcrumb {
    background-color: var(--primary-bg);
    padding: 120px 0;
    position: relative;
}
.hero-img-abs {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 450px;
    opacity: 0.9;
}
.breadcrumb-item a { color: #888; text-decoration: none; font-weight: bold; font-size: 0.85rem; }
.breadcrumb-item.active { color: var(--accent); font-weight: bold; }

/* WHO WE ARE SECTION */
.text-accent { color: var(--accent); }
.tracking-widest { letter-spacing: 2.5px; }

.img-frame { position: relative; padding-bottom: 20px; padding-left: 20px; }
.img-frame::before {
    content: ''; position: absolute; left: 0; bottom: 0; width: 90%; height: 90%;
    background-color: #b8c7bc; z-index: -1; border-radius: 20px;
}
.quote-box {
    position: absolute; right: -15px; top: 40px; background: white;
    padding: 35px; width: 280px; box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border-left: 4px solid var(--muted-green);
}
.quote-box p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 10px; color: #333; }
.quote-box span { font-size: 0.75rem; letter-spacing: 1px; color: #888; }

.btn-custom {
    background-color: var(--muted-green); color: white; border-radius: 0;
    padding: 12px 35px; font-weight: bold; transition: 0.4s;
}
.btn-custom:hover { background-color: var(--accent); color: white; transform: translateY(-3px); }

/* STATS SECTION */
.stats-section h2 { color: var(--muted-green); font-weight: bold; display: inline-block; }
.stats-section p { color: #999; text-transform: uppercase; font-size: 0.85rem; margin-top: 5px; }
.border-end-custom { border-right: 1px dashed #ddd; }

/* WHOLESALE INTERACTIVE CARDS */
.bg-light-theme { background-color: var(--secondary-bg); }
.interactive-card {
    background: var(--white); padding: 50px 30px; border-radius: 4px;
    text-align: center; position: relative; overflow: hidden; transition: 0.5s; z-index: 1;
}
.interactive-card.active, .interactive-card:hover {
    transform: translateY(-10px); box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}
.card-icon { font-size: 3rem; color: var(--accent); margin-bottom: 20px; transition: 0.6s; }
.interactive-card:hover .card-icon { transform: rotateY(180deg) scale(1.1); }
.hover-overlay {
    position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, var(--primary-bg), transparent);
    z-index: -1; transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.interactive-card:hover .hover-overlay { bottom: 0; }

/* RETAIL SECTION */
.retail-box { background: var(--secondary-bg); padding: 20px; border-left: 3px solid var(--accent); }
.retail-icon { width: 45px; height: 45px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.marketplace-logos img { height: 28px; filter: grayscale(1); transition: 0.3s; cursor: pointer; }
.marketplace-logos img:hover { filter: grayscale(0); transform: scale(1.1); }
.website-tag { font-weight: bold; color: var(--accent); border-bottom: 2px solid var(--accent); }

.image-stack { position: relative; min-height: 450px; }
.stack-top { width: 70%; position: absolute; top: 0; right: 0; z-index: 2; border: 8px solid white; }
.stack-bottom { width: 70%; position: absolute; bottom: 0; left: 0; z-index: 1; }

/* FAQ SECTION */
.custom-faq .accordion-item { border: none; background: transparent; }
.custom-faq .accordion-button {
    background: var(--white); border-radius: 5px !important; color: var(--dark-text); font-weight: bold;
    padding: 18px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); margin-bottom: 10px;
}
.custom-faq .accordion-button:not(.collapsed) { background: var(--accent); color: white; }
.custom-faq .accordion-button::after { display: none; }

/* ANIMATION CLASSES */
.reveal, .reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: all 1.2s cubic-bezier(0.2, 1, 0.3, 1); }
.reveal { transform: translateY(40px); }
.reveal-up { transform: scale(0.95); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }

.reveal.active, .reveal-up.active, .reveal-left.active, .reveal-right.active {
    opacity: 1; transform: translate(0) scale(1);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .hero-breadcrumb { padding: 80px 0; }
    .quote-box { position: static; width: 100%; margin-top: 20px; box-shadow: none; border: 1px solid #eee; }
    .border-end-custom { border-right: none; border-bottom: 1px dashed #ddd; padding-bottom: 20px; }
    .image-stack { min-height: auto; margin-top: 30px; }
    .stack-top, .stack-bottom { position: static; width: 100%; margin-bottom: 20px; }
}