:root {
    --home-ink: #0a0a0a;
    --home-ink-2: #121212;
    --home-panel: #171717;
    --home-panel-2: #202020;
    --home-line: rgba(227, 30, 36, 0.24);
    --home-gold: #E31E24;
    --home-gold-bright: #FF4D4F;
    --home-text: #f5f7fb;
    --home-muted: #a3a3a3;
    --home-green: #65d6a0;
    --home-red: #E31E24;
    --home-radius: 20px;
    --home-shadow: 0 22px 55px rgba(0, 0, 0, 0.3);
}

html,
body {
    background: #050505 !important;
    color: var(--home-text) !important;
}

body {
    background-image: radial-gradient(circle at 15% 0%, rgba(227, 30, 36, 0.14), transparent 34%), radial-gradient(circle at 100% 18%, rgba(227, 30, 36, 0.08), transparent 30%);
}

.mobile-app-shell {
    max-width: 1220px;
    background: linear-gradient(180deg, #111111 0%, var(--home-ink) 38%, #0a0a0a 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.55) !important;
}

.mobile-header {
    padding: 16px 34px !important;
    background: rgba(10, 10, 10, 0.88) !important;
    border-bottom: 1px solid var(--home-line) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22) !important;
}

.header-brand {
    gap: 14px;
}

.brand-logo-img {
    height: 50px !important;
    max-width: 205px !important;
    filter: drop-shadow(0 5px 16px rgba(227, 30, 36, 0.18)) !important;
}

.brand-title-main {
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

.brand-sub-gold {
    color: var(--home-gold-bright) !important;
    letter-spacing: 1.5px !important;
}

.btn-header-action {
    background: rgba(28, 28, 28, 0.84) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.btn-header-action:hover,
.btn-header-action:active {
    background: var(--home-panel-2) !important;
    border-color: var(--home-gold) !important;
}

.hero-greeting-box {
    padding: 52px 34px 18px !important;
    background: linear-gradient(120deg, rgba(227, 30, 36, 0.16), transparent 70%);
}

.greeting-hello {
    color: var(--home-gold-bright) !important;
    font-size: 12px !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.greeting-headline {
    max-width: 680px;
    font-size: clamp(26px, 4vw, 42px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1.2px !important;
}

.search-section {
    padding: 12px 34px 26px !important;
}

.search-input-wrapper {
    max-width: 760px;
}

.search-input {
    min-height: 58px;
    padding-left: 52px !important;
    background: rgba(24, 24, 24, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 15px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22) !important;
}

.search-input:focus {
    border-color: var(--home-gold) !important;
    background: var(--home-panel-2) !important;
    box-shadow: 0 0 0 4px rgba(227, 30, 36, 0.1), 0 16px 35px rgba(0, 0, 0, 0.24) !important;
}

.search-icon {
    color: var(--home-gold-bright) !important;
    font-size: 19px !important;
}

.banner-section {
    padding: 4px 34px 28px !important;
}

.banner-carousel-container {
    border: 1px solid var(--home-line) !important;
    border-radius: 24px !important;
    box-shadow: var(--home-shadow) !important;
}

.banner-slide {
    min-height: 250px !important;
    padding: 34px 38px !important;
    background: linear-gradient(115deg, #1a1a1a 0%, #121212 54%, #3a0a0c 100%) !important;
}

.banner-slide::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    right: 7%;
    top: -90px;
    border: 1px solid rgba(227, 30, 36, 0.25);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(227, 30, 36, 0.05), 0 0 0 58px rgba(227, 30, 36, 0.03);
    pointer-events: none;
}

.banner-tag {
    position: relative;
    z-index: 1;
    color: var(--home-gold-bright) !important;
    background: rgba(227, 30, 36, 0.13) !important;
    border-color: rgba(227, 30, 36, 0.28) !important;
}

.banner-title,
.banner-subtitle,
.banner-action-btn {
    position: relative;
    z-index: 1;
}

.banner-title {
    max-width: 650px;
    font-size: clamp(25px, 4vw, 39px) !important;
    letter-spacing: -1px !important;
}

.banner-subtitle {
    max-width: 560px !important;
    color: #d4d4d4 !important;
    font-size: 14px !important;
}

.banner-action-btn {
    background: var(--home-gold) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
}

.banner-dot.active {
    background: var(--home-gold-bright) !important;
}

.section-wrapper {
    padding: 22px 34px 26px !important;
}

.section-header {
    margin-bottom: 18px !important;
}

.section-title-wrap > span:first-child {
    filter: saturate(0.8);
}

.section-eyebrow {
    color: var(--home-gold) !important;
    letter-spacing: 1.1px !important;
}

.section-title {
    font-size: 22px !important;
    letter-spacing: -0.5px !important;
}

.section-link,
.products-count {
    color: var(--home-gold-bright) !important;
}

.tag-atacado {
    background: rgba(227, 30, 36, 0.14) !important;
    color: var(--home-gold-bright) !important;
    border: 1px solid var(--home-line);
    border-radius: 999px !important;
    padding: 6px 12px !important;
}

.categories-scroll,
.offers-scroll {
    gap: 16px !important;
}

.category-chip {
    min-height: 62px;
    padding: 12px 18px !important;
    background: rgba(24, 24, 24, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 15px !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16) !important;
}

.category-chip:hover {
    background: var(--home-panel-2) !important;
    border-color: var(--home-gold) !important;
}

.category-chip.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--home-gold-bright), var(--home-gold)) !important;
    border-color: var(--home-gold-bright) !important;
}

.offer-card,
.product-grid-card {
    background: linear-gradient(180deg, #181818 0%, #111111 100%) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--home-radius) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24) !important;
}

.offer-card:hover,
.product-grid-card:hover {
    border-color: rgba(227, 30, 36, 0.48) !important;
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.34), 0 0 22px rgba(227, 30, 36, 0.1) !important;
}

.offer-card {
    flex-basis: 272px !important;
}

.offer-img-box,
.grid-card-img-wrap {
    background: linear-gradient(145deg, #1f1f1f, #121212) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.offer-img-box {
    height: 190px !important;
}

.offer-card-body,
.grid-card-body {
    padding: 16px !important;
}

.grid-card-brand {
    color: var(--home-gold) !important;
}

.offer-title,
.grid-card-title {
    color: var(--home-text) !important;
}

.grid-card-description,
.grid-card-unit,
.price-start-label {
    color: var(--home-muted) !important;
}

.offer-price-box,
.grid-card-price-row {
    border-top-color: rgba(255, 255, 255, 0.14) !important;
}

.grid-price-val,
.grid-price-val.has-promo {
    color: var(--home-gold-bright) !important;
    font-size: 18px !important;
}

.grid-price-old {
    color: #7a7a7a !important;
}

.grid-saving {
    color: var(--home-green) !important;
    background: rgba(101, 214, 160, 0.12) !important;
}

.btn-add-circle {
    background: var(--home-gold) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(227, 30, 36, 0.2) !important;
}

.btn-add-circle:hover,
.btn-add-circle:active {
    background: var(--home-gold-bright) !important;
}

.offer-badge-tag {
    background: var(--home-red) !important;
    box-shadow: none !important;
}

.offer-badge-tag.badge-best-seller {
    color: var(--home-gold-bright) !important;
    background: rgba(10, 10, 10, 0.85) !important;
    border-color: var(--home-line) !important;
}

.offer-badge-tag.badge-featured {
    color: #FFFFFF !important;
    background: var(--home-gold) !important;
}

.cart-drawer-overlay,
.modal-dialog-overlay {
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(8px);
}

.cart-drawer,
.modal-dialog-box {
    background: linear-gradient(180deg, #181818, #0d0d0d) !important;
    border: 1px solid var(--home-line) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5) !important;
}

.drawer-header,
.modal-header {
    background: rgba(10, 10, 10, 0.6) !important;
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

.drawer-title,
.modal-header h3,
.cart-total-row,
.cart-total-gold {
    color: var(--home-gold-bright) !important;
}

.drawer-footer {
    background: rgba(10, 10, 10, 0.55) !important;
    border-top-color: rgba(255, 255, 255, 0.14) !important;
}

.btn-primary-action {
    background: linear-gradient(135deg, var(--home-gold-bright), var(--home-gold)) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 24px rgba(227, 30, 36, 0.16) !important;
}

.btn-secondary-dark {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--home-text) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.form-input-mobile,
.form-textarea-mobile,
.form-select-mobile {
    background: rgba(10, 10, 10, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.mobile-bottom-nav {
    background: rgba(10, 10, 10, 0.94) !important;
    border-top-color: var(--home-line) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3) !important;
}

.nav-item.active,
.nav-item:hover {
    color: var(--home-gold-bright) !important;
}

.floating-whatsapp-btn {
    background: #31bd79 !important;
    box-shadow: 0 12px 28px rgba(49, 189, 121, 0.24) !important;
}

@media (min-width: 768px) {
    .mobile-app-shell {
        margin: 0 auto 40px;
        border-radius: 0 0 24px 24px;
        overflow: hidden;
    }

    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .mobile-bottom-nav {
        max-width: 560px;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid var(--home-line);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
    }
}

@media (max-width: 767px) {
    .mobile-header,
    .hero-greeting-box,
    .search-section,
    .banner-section,
    .section-wrapper {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .mobile-header {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .hero-greeting-box {
        padding-top: 34px !important;
    }

    .brand-text-col {
        display: none;
    }

    .banner-slide {
        min-height: 225px !important;
        padding: 26px 24px !important;
    }

    .banner-slide::after {
        right: -120px;
    }

    .section-wrapper {
        padding-top: 18px !important;
        padding-bottom: 20px !important;
    }

    .section-title {
        font-size: 19px !important;
    }

    .offer-card {
        flex-basis: 238px !important;
    }

    .offer-img-box {
        height: 168px !important;
    }
}