/* =============================================================
   VARIÁVEIS / TOKENS
   ============================================================= */
:root {
    --color-primary: #810b0f;
    --color-primary-dark: #490002;
    --color-accent: #FFBF00;
    --color-accent-alt: #ffc23b;
    --color-white: #ffffff;
    --color-whatsapp: #00ff00;
}


/* =============================================================
   BASE
   ============================================================= */
body {
    font-family: "Roboto", sans-serif;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 0px solid rgba(0, 0, 0, 0.1);
}

.mb-1, .my-1 {
    margin-bottom: 0 !important;
}
.mt-1, .my-1 {
    margin-top: 0 !important;
}


/* =============================================================
   ÍCONES ESPECIAIS
   ============================================================= */
.fa-whatsapp {
    color: var(--color-whatsapp);
}


/* =============================================================
   LOADING
   ============================================================= */
.loading__spinner {
    color: var(--color-primary);
}


/* =============================================================
   TOPO GERAL  (topbar · site-header · nav-panel · mobile-header)
   ============================================================= */
.topbar,
.site-header,
.nav-panel,
.mobile-header,
.mobile-header__panel {
    background: var(--color-primary) !important;
    border-bottom: none !important;
    color: var(--color-white) !important;
}

/* Links e textos sobre fundo primário */
.topbar a,
.site-header a,
.nav-panel a,
.mobile-header__panel a,
.topbar-dropdown__btn,
.nav-links__item-link {
    color: var(--color-white) !important;
}

/* SVG / ícones sobre fundo primário */
.topbar svg,
.topbar i {
    fill: var(--color-white) !important;
    color: var(--color-white) !important;
}


/* =============================================================
   TOPBAR — BARRA DE MENSAGEM, APP E LINKS
   ============================================================= */
.topbar-message {
    background: var(--color-primary);
    color: var(--color-white);
    min-height: 40px;
    padding: 10px;
}

.topbar-message .fa-shipping-fast {
    font-size: 20px;
}

.topbar-app {
    background: #e1e1e1;
    color: #333;
    min-height: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.topbar-app img {
    background: #fff;
    padding: 7px;
    box-shadow: 1px 1px 3px #606061;
    border-radius: 10px;
    height: 48px;
}

.topbar-link {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10px;
}

.topbar-link:hover {
    background: var(--color-accent-alt);
    color: var(--color-white);
}

.topbar__item--divider {
    display: none;
}


/* =============================================================
   TOPBAR — DROPDOWN
   ============================================================= */
.topbar-dropdown__btn {
    color: var(--color-white) !important;
    fill: var(--color-white) !important;
}

.topbar-dropdown__btn:hover {
    background: var(--color-accent-alt);
    color: var(--color-white) !important;
    fill: var(--color-white) !important;
}

.topbar-dropdown__btn:focus,
.topbar-dropdown--opened .topbar-dropdown__btn {
    background: #8f0016;
    color: var(--color-white) !important;
    fill: var(--color-white) !important;
}


/* =============================================================
   TOPBAR — LOGIN / CADASTRO
   ============================================================= */
.topbar a {
    background: var(--color-primary);
    padding: 8px 12px;
}

.topbar a:hover {
    background: var(--color-accent-alt);
}


/* =============================================================
   SITE HEADER
   ============================================================= */
.site-header__logo img {
    height: 50px;
}

.site-header__phone-title {
    font-size: 14px;
    color: var(--color-white);
    margin-top: 5px;
    margin-bottom: 6px;
    font-weight: 700;
}

.site-header__cart i {
    color: var(--color-white);
}
.site-header__cart i:hover {
    color: var(--color-accent-alt);
}

.site-header__cart .indicator__value {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

.site-header__middle {
    height: 56px !important;
}


/* =============================================================
   INDICADOR (CARRINHO / BADGE)
   ============================================================= */
.indicator__value {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
}

@media (max-width: 991px) {
    .indicator__value {
        background: var(--color-primary);
        color: var(--color-white);
    }
}


/* =============================================================
   CAMPO DE BUSCA
   ============================================================= */
.search {
    background: var(--color-white) !important;
}

.search__input {
    color: #000 !important;
}

.search__input::placeholder {
    color: #000 !important;
    opacity: 0.7;
}

.search__button {
    color: #6c757d !important;
    fill: var(--color-white) !important;
}


/* =============================================================
   HEADER MOBILE
   ============================================================= */
.mobile-header__logo,
.header-mobile .mobile-header__logo {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mobile-header__logo img {
    max-height: 100px;
    max-width: 100px;
}

.mobile-header__indicator {
    color: var(--color-white) !important;
}
.mobile-header__indicator:hover {
    color: var(--color-accent-alt) !important;
}


/* =============================================================
   NAV PANEL
   ============================================================= */
.nav-panel {
    height: 36px;
}

[dir=ltr] .nav-panel__nav-links {
    margin-right: 0;
    height: 36px;
}


/* =============================================================
   NAV LINKS
   ============================================================= */
.nav-links__list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav-links__item {
    margin: 0 !important;
    padding: 0 !important;
}

.nav-links__item-link {
    display: flex;
    align-items: center;
    padding: 6px 2px !important;
    height: 34px;
    margin: 0 !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav-links__item-link {
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .nav-links__item-link {
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }
}

.nav-links__item-link:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}

/* Último item do menu */
.nav-links__item:last-child .nav-links__item-link {
    background-color: var(--color-accent);
}

/* Ícone de seta no item com submenu */
.nav-links__item--has-submenu .nav-links__item-body {
    padding-right: 15px !important;
}
.nav-links__item-body .fa-chevron-down {
    display: none;
}


/* =============================================================
   MEGAMENU
   ============================================================= */
.megamenu__body {
    background: var(--color-primary);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.megamenu__links--level--1 > .megamenu__item > a {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding-right: 20px;
}

.megamenu__links--level--1 .megamenu__item a {
    font-size: 14px;
    white-space: nowrap;
    margin-right: 15px;
    padding: 6px 15px !important;
}


/* =============================================================
   SLIDESHOW
   ============================================================= */
.block-slideshow .owl-carousel .owl-dot {
    background: #999;
}
.block-slideshow .owl-carousel .owl-dot.active {
    background: var(--color-primary);
}


/* =============================================================
   BLOCK HEADER
   ============================================================= */
.block-header__title {
    color: var(--color-primary);
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 30px;
}

.block-header__divider {
    background: white;
}

.block-header__arrow {
    background: transparent;
    color: var(--color-primary);
}

.block-header__arrow:hover {
    background: #f7f7f7;
    color: #999;
}
.block-header__arrow:active {
    background: transparent;
    color: var(--color-primary);
}
.block-header__arrow:focus {
    background: #f7f7f7;
    color: var(--color-primary);
}


/* =============================================================
   BRANDS & PRODUCTS CAROUSEL
   ============================================================= */
.block-brands__slider .owl-nav i,
.block-products-carousel__slider .owl-nav i {
    color: var(--color-primary);
}

.container__products-carousel-grid {
    margin-top: 30px;
}

.block-products-carousel__column .product-card__name {
    min-height: 55px;
}
.block-products-carousel__column .product-card__prices {
    min-height: 35px;
    margin-bottom: 10px;
}
.block-products-carousel__column .product-card__buttons {
    margin-top: 0;
}

.block-products-carousel[data-layout=grid-5] .product-card .product-card__actions {
    padding: 15px;
}


/* =============================================================
   PRODUCT CARD
   ============================================================= */
.product-card__image img {
    max-height: 180px;
}

.product-card__prices {
    min-height: 15px;
    height: 50px;
}

.product-card__actions {
    padding-top: 0 !important;
    margin-top: 30px;
    height: 225px;
}

.product-card__badge {
    order: -1;
}

.product-card__price,
.product-card__new-price {
    color: var(--color-primary);
}

.product-card__login,
.product__actions-item--addtocart a {
    background: var(--color-primary);
    color: var(--color-white);
}


/* =============================================================
   PRODUCT (PÁGINA DE PRODUTO)
   ============================================================= */
.product__name {
    color: var(--color-primary);
}

.product__price,
.product__new-price {
    color: var(--color-primary);
}

.product-tabs__item {
    color: var(--color-primary);
}
.product-tabs__item:hover {
    color: var(--color-primary);
}
.product-tabs__item--active {
    border-bottom-color: var(--color-primary);
}


/* =============================================================
   PAGE HEADER
   ============================================================= */
.page-header__title {
    color: var(--color-primary);
    padding-top: 30px;
}
.page-header__back i {
    color: var(--color-primary);
}


/* =============================================================
   FILTROS
   ============================================================= */
.filter__arrow {
    color: var(--color-primary);
}

.input-check__input:checked ~ .input-check__box {
    background: var(--color-primary);
}


/* =============================================================
   NEWSLETTER
   ============================================================= */
.site-newsletter {
    background: var(--color-primary);
    color: var(--color-white);
}


/* =============================================================
   RODAPÉ
   ============================================================= */
.footer-contacts__text img {
    height: 80px;
}
.footer-contacts__title {
    color: var(--color-primary);
}

.footer-links__title {
    color: var(--color-primary);
}

.footer-newsletter__title,
.footer-payment__title,
.footer-seals__title,
.footer-apps__title {
    color: var(--color-primary);
}

.footer-apps__text img {
    width: 120px;
}
.footer-seals__text img {
    width: 50% !important;
}


/* =============================================================
   CHECKOUT
   ============================================================= */
.title-checkout {
    color: var(--color-primary);
}


/* =============================================================
   SERVICE BAR
   ============================================================= */
.service-bar__title:hover {
    color: var(--color-primary);
}


/* =============================================================
   BOTÃO "VOLTAR AO TOPO"
   ============================================================= */
.top-button {
    color: var(--color-primary);
}


/* =============================================================
   DOCUMENTO / CONTEÚDO INTERNO
   ============================================================= */
.document {
    padding: 0;
    border: 0px solid #f0f0f0;
}


/* =============================================================
   MENU DE TOPO (TOPBAR LAYOUT)
   ============================================================= */
.menu--layout--topbar .menu__list {
    padding: 0 !important;
}