/* =========================================================
   BIG LAR UTILIDADES
   MARKETPLACE UI 2.0
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    --biglar-primary: #8B1843;
    --biglar-primary-dark: #741238;
    --biglar-primary-darker: #5F0E2D;

    --biglar-secondary: #E8E443;
    --biglar-secondary-hover: #DAD630;

    --biglar-success: #138A43;
    --biglar-danger: #C62828;
    --biglar-warning: #F4A100;

    --biglar-text: #262626;
    --biglar-text-secondary: #666666;
    --biglar-text-muted: #8A8A8A;

    --biglar-bg: #F5F5F5;
    --biglar-bg-soft: #F8F8F8;

    --biglar-border: #E7E7E7;
    --biglar-border-dark: #DADADA;

    --biglar-white: #FFFFFF;

    --biglar-radius-xs: 5px;
    --biglar-radius-sm: 8px;
    --biglar-radius-md: 10px;
    --biglar-radius-lg: 14px;

    --biglar-shadow-xs:
    0 1px 2px rgba(0, 0, 0, 0.04);

    --biglar-shadow-sm:
    0 3px 10px rgba(0, 0, 0, 0.06);

    --biglar-shadow-md:
    0 8px 24px rgba(0, 0, 0, 0.08);

    --biglar-shadow-lg:
    0 15px 35px rgba(0, 0, 0, 0.11);

    --biglar-transition:
    0.2s ease;
}


/* =========================================================
   2. BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    color: var(--biglar-text);
    background: var(--biglar-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    transition:
    color var(--biglar-transition),
    background-color var(--biglar-transition),
    border-color var(--biglar-transition);
}

button,
input,
select,
textarea {
    font-family: inherit;
}

::selection {
    background: rgba(139, 24, 67, 0.16);
    color: var(--biglar-primary);
}


/* =========================================================
   3. LOADING
   ========================================================= */

.loading__spinner {
    color: var(--biglar-primary);
}


/* =========================================================
   4. HEADER
   ========================================================= */

.site-header {
    background: var(--biglar-white);
    border-bottom: 1px solid var(--biglar-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
    z-index: 1000;
}

.site-header__logo img {
    height: 70px;
    max-width: 100%;
    object-fit: contain;
}

.site-header__phone-title {
    color: var(--biglar-primary);
    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   5. CARRINHO / INDICADORES
   ========================================================= */

.site-header__cart i {
    color: var(--biglar-primary);
    transition:
    color var(--biglar-transition),
    transform var(--biglar-transition);
}

.site-header__cart:hover i {
    color: var(--biglar-primary-dark);
    transform: translateY(-1px);
}

.site-header__cart .indicator__value,
.indicator__value {
    background: var(--biglar-primary);
    color: var(--biglar-white);
    font-weight: 700;
}


/* =========================================================
   6. BUSCA
   ========================================================= */

.search {
    width: 100%;
}

.search__body {
    background: #F7F7F7;
    border: 1px solid #DEDEDE;
    border-radius: var(--biglar-radius-md);
    min-height: 46px;
    overflow: hidden;

    transition:
    background var(--biglar-transition),
    border-color var(--biglar-transition),
    box-shadow var(--biglar-transition);
}

.search__body:hover {
    border-color: #CECECE;
}

.search__body:focus-within {
    background: var(--biglar-white);
    border-color: var(--biglar-primary);
    box-shadow: 0 0 0 3px rgba(139, 24, 67, 0.08);
}

.search__input {
    color: #2A2A2A;
    font-size: 14px;
}

.search__input::placeholder {
    color: #929292;
}

.search__button {
    background: var(--biglar-primary);
    color: var(--biglar-white);
    border: 0;

    transition:
    background var(--biglar-transition),
    color var(--biglar-transition);
}

.search__button:hover,
.search__button:focus {
    background: var(--biglar-primary-dark);
    color: var(--biglar-white);
}


/* =========================================================
   7. TOPBAR
   ========================================================= */

.topbar-message {
    background: #3F3F41;
    color: var(--biglar-white);

    min-height: 38px;

    padding: 9px 10px;

    font-size: 13px;
    font-weight: 500;

    z-index: 1100;
}

.topbar-message .fa-shipping-fast {
    font-size: 18px;
    margin-right: 5px;
}


/* =========================================================
   8. BANNER PIX
   ========================================================= */

.pix-top-banner {
    width: 100%;
    background: var(--biglar-secondary);
}

.pix-top-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 0 10px;
}

.pix-top-banner span {
    display: block;

    color: var(--biglar-primary-darker);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.2;
    text-align: center;

    letter-spacing: 0.1px;
}

.pix-top-banner--mobile {
    display: none;
}


/* =========================================================
   9. MENU PRINCIPAL
   ========================================================= */

.nav-panel {
    background: var(--biglar-primary);
    color: var(--biglar-white);

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
}

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

.nav-links__list {
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    position: absolute;
}

.nav-links__item {
    margin-left: 1px;
    margin-right: 1px;
}

.nav-links__item-body {
    padding: 0 10px;
}

.nav-links__item-link {
    border-radius: 5px;

    transition:
    background var(--biglar-transition),
    color var(--biglar-transition);
}

.nav-links__item-link:hover {
    background: rgba(255, 255, 255, 0.13);
    color: var(--biglar-white);
}

.nav-links__item--has-submenu .nav-links__item-body {
    padding-right: 6px !important;
}

.nav-links__item-body .fa-chevron-down {
    display: none;
}


/* =========================================================
   10. MEGAMENU
   ========================================================= */

.megamenu {
    border: 1px solid var(--biglar-border);
    box-shadow: var(--biglar-shadow-lg);
    border-radius: 0 0 var(--biglar-radius-md) var(--biglar-radius-md);
}

.megamenu__links--level--1 .megamenu__item a,
.megamenu__links--level--1 > .megamenu__item > a {
    font-size: 12px;
    font-weight: 500;

    color: #444;

    white-space: nowrap;

    margin-right: 15px;
    padding-right: 20px;

    transition: color var(--biglar-transition);
}

.megamenu__links--level--1 > .megamenu__item > a:hover,
.megamenu__links--level--1 > .megamenu__item > a:active,
.megamenu__links--level--1 > .megamenu__item > a:focus {
    color: var(--biglar-primary);
}


/* =========================================================
   11. SLIDESHOW / BANNERS
   ========================================================= */

.block-slideshow .owl-carousel .owl-dot {
    background: #D6D6D6;
}

.block-slideshow .owl-carousel .owl-dot.active {
    background: var(--biglar-primary);
}


/* =========================================================
   12. TÍTULOS
   ========================================================= */

.block-header__title,
.page-header__title {
    color: #262626;
    font-weight: 700;
    letter-spacing: -0.25px;
}

.block-header__title {
    font-size: 22px;
}

.page-header__title {
    font-size: 26px;
}


/* =========================================================
   13. SETAS DE CARROSSEL
   ========================================================= */

.block-brands__slider .owl-nav i,
.block-products-carousel__slider .owl-nav i {
    color: var(--biglar-primary);
}

.block-header__arrow {
    background: var(--biglar-white);
    color: var(--biglar-primary);

    border: 1px solid var(--biglar-border);
    border-radius: 50%;

    box-shadow: var(--biglar-shadow-xs);

    transition:
    background var(--biglar-transition),
    color var(--biglar-transition),
    border-color var(--biglar-transition),
    box-shadow var(--biglar-transition);
}

.block-header__arrow:hover {
    background: var(--biglar-primary);
    color: var(--biglar-white);
    border-color: var(--biglar-primary);

    box-shadow: var(--biglar-shadow-sm);
}

.block-header__arrow:active,
.block-header__arrow:focus {
    color: var(--biglar-white);
    background: var(--biglar-primary-dark);
}


/* =========================================================
   14. GRID DE PRODUTOS
   ========================================================= */

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

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


/* =========================================================
   15. CARD DE PRODUTO
   ========================================================= */

.product-card {
    position: relative;

    background: var(--biglar-white);

    border: 1px solid var(--biglar-border);
    border-radius: var(--biglar-radius-md);

    margin: 6px;

    overflow: hidden;

    cursor: pointer;

    box-shadow: none;

    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.product-card:hover {
    transform: translateY(-3px);

    border-color: #D9D9D9;

    box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.09);
}


/* =========================================================
   16. FOTO DO PRODUTO
   ========================================================= */

.product-card__image {
    background: var(--biglar-white);
}

.product-card__image img,
.product-image img {
    transition: transform 0.3s ease;
}

.product-card:hover .product-card__image img,
.product-card:hover .product-image img {
    transform: scale(1.025);
}


/* =========================================================
   17. NOME DO PRODUTO
   ========================================================= */

.block-products-carousel__column .product-card__name,
.product-card__name {
    min-height: 48px;
}

.product-card__name a {
    display: inline-block;

    color: #3B3B3B;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;

    transition: color var(--biglar-transition);
}

.product-card:hover .product-card__name a {
    color: var(--biglar-primary);
    transform: none;
}


/* =========================================================
   18. PREÇOS DO CARD
   ========================================================= */

.block-products-carousel__column .product-card__prices {
    min-height: 58px;
    margin-bottom: 8px;
}

.product-card__prices {
    min-height: 58px;
    margin-bottom: 8px;
}

.product-card__price {
    color: var(--biglar-text-muted);

    font-size: 13px;
    font-weight: 400;
}

.product-card__new-price {
    display: block;

    color: #222222;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -0.4px;
}

.product-card__prices-condition {
    color: var(--biglar-success);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.3;
}

.product-card__promotion-legend {
    order: 2;

    color: #777777;

    font-size: 12px;
    line-height: 1.35;
}


/* =========================================================
   19. AÇÕES DO CARD
   ========================================================= */

.product-card .product-card__actions {
    display: flex;
    flex-direction: column;
}

.product-card__buttons {
    order: 3;
    margin-top: 0;
}

.block-products-carousel__column .product-card__buttons {
    margin-top: 0;
}


/* =========================================================
   20. BOTÕES DO CARD
   ========================================================= */

.product-card__buttons .btn,
.product-card__buttons button,
.product-card__actions .btn,
.product-card__actions button {
    min-height: 40px;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 600;

    transition:
    background-color var(--biglar-transition),
    color var(--biglar-transition),
    border-color var(--biglar-transition),
    box-shadow var(--biglar-transition),
    transform var(--biglar-transition);
}

.product-card__buttons .btn:hover,
.product-card__buttons button:hover,
.product-card__actions .btn:hover,
.product-card__actions button:hover {
    transform: translateY(-1px);

    box-shadow:
    0 5px 13px rgba(139, 24, 67, 0.16);
}


/* BOTÕES PRIMÁRIOS */

.product-card__actions .btn-primary,
.product-card__buttons .btn-primary {
    background: var(--biglar-primary);
    border-color: var(--biglar-primary);
    color: var(--biglar-white);
}

.product-card__actions .btn-primary:hover,
.product-card__buttons .btn-primary:hover {
    background: var(--biglar-primary-dark);
    border-color: var(--biglar-primary-dark);
}


/* =========================================================
   21. PÁGINA DO PRODUTO
   ========================================================= */

.product__name {
    color: #262626;

    font-weight: 700;
    line-height: 1.25;
}

.product__price {
    color: #777777;
}

.product__new-price {
    color: #222222;

    font-weight: 700;

    letter-spacing: -0.4px;
}


/* =========================================================
   22. TABS
   ========================================================= */

.product-tabs__item {
    color: #555555;

    font-weight: 500;

    transition: color var(--biglar-transition);
}

.product-tabs__item:hover {
    color: var(--biglar-primary);
}

.product-tabs__item--active {
    color: var(--biglar-primary);

    border-bottom-color: var(--biglar-primary);

    font-weight: 700;
}


/* =========================================================
   23. FILTROS
   ========================================================= */

.filter__arrow {
    color: var(--biglar-primary);
}

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


/* =========================================================
   24. VOLTAR AO TOPO
   ========================================================= */

.top-button {
    color: var(--biglar-primary);

    transition:
    background var(--biglar-transition),
    color var(--biglar-transition),
    box-shadow var(--biglar-transition);
}

.top-button:hover {
    background: var(--biglar-primary);
    color: var(--biglar-white);

    box-shadow: var(--biglar-shadow-sm);
}


/* =========================================================
   25. PAGE HEADER
   ========================================================= */

.page-header__back i {
    color: var(--biglar-primary);
}


/* =========================================================
   26. SERVICE BAR
   ========================================================= */

.service-bar {
    background: var(--biglar-primary);
    margin-bottom: 0;
}

.service-bar__title {
    color: var(--biglar-white);

    font-weight: 500;
}

.service-bar__title:hover {
    color: var(--biglar-secondary);
}


/* =========================================================
   27. NEWSLETTER
   ========================================================= */

.site-newsletter {
    background: var(--biglar-primary);

    border: 0;
}

.site-newsletter__title {
    color: var(--biglar-white);

    font-weight: 700;
}


/* =========================================================
   28. FOOTER
   ========================================================= */

.site-footer {
    margin: 0;

    background: var(--biglar-white);

    border-top: 1px solid var(--biglar-border);
}

.footer-links__title,
.footer-contacts__title,
.footer-newsletter__title,
.footer-payment__title,
.footer-seals__title,
.footer-apps__title {
    color: #292929;

    font-weight: 700;
}

.footer-contacts__text img {
    height: 80px;
}

.footer-apps__text img {
    width: 120px;
}

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


/* =========================================================
   29. APP BAR
   ========================================================= */

.topbar-app {
    background: #F3F3F3;

    color: #333333;

    min-height: 40px;

    padding:
    14px 0;

    border-top: 1px solid #ECECEC;
    border-bottom: 1px solid #ECECEC;
}

.topbar-app img {
    background: var(--biglar-white);

    padding: 7px;

    border: 1px solid var(--biglar-border);
    border-radius: var(--biglar-radius-sm);

    box-shadow: var(--biglar-shadow-xs);

    height: 48px;
}

.topbar-app .btn {
    font-weight: 600;

    border-radius: 7px;

    box-shadow: none;

    transition:
    transform var(--biglar-transition),
    box-shadow var(--biglar-transition);
}

.topbar-app .btn:hover {
    transform: translateY(-1px);

    box-shadow: var(--biglar-shadow-sm);
}


/* =========================================================
   30. COUNTDOWN
   ========================================================= */

.countdown {
    background: #B30F20;

    padding: 4px;

    margin-bottom: 6px;

    border-radius: 6px;
}

.is-countdown {
    display: flex;

    border: 0;

    background: transparent;

    color: var(--biglar-white);

    font-size: 10px;
}

.countdown__title {
    color: #A70E1E;

    background: var(--biglar-white);

    font-size: 13px;
    font-weight: 700;

    text-align: center;

    border-radius: 4px;

    padding: 3px 5px;
}

.countdown-amount {
    font-size: 155%;
    font-weight: 700;
}

.countdown-row {
    clear: both;

    width: 100%;
    height: 100%;

    margin-top: 4px;
}


/* =========================================================
   31. FRETE
   ========================================================= */

.freight-methods__item-header strong {
    color: var(--biglar-primary);

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   32. FORMULÁRIOS
   ========================================================= */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
    border-color: #DDDDDD;

    border-radius: 7px;

    transition:
    border-color var(--biglar-transition),
    box-shadow var(--biglar-transition);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--biglar-primary);

    box-shadow:
    0 0 0 3px rgba(139, 24, 67, 0.07);

    outline: none;
}


/* =========================================================
   33. BOTÕES GERAIS
   ========================================================= */

.btn {
    border-radius: 7px;

    font-weight: 600;

    transition:
    background var(--biglar-transition),
    border-color var(--biglar-transition),
    color var(--biglar-transition),
    box-shadow var(--biglar-transition),
    transform var(--biglar-transition);
}

.btn-primary {
    background: var(--biglar-primary);
    border-color: var(--biglar-primary);

    color: var(--biglar-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--biglar-primary-dark);
    border-color: var(--biglar-primary-dark);

    color: var(--biglar-white);
}

.btn-primary:hover {
    box-shadow:
    0 5px 14px rgba(139, 24, 67, 0.18);
}


/* =========================================================
   34. CARDS / BLOCOS GENÉRICOS
   ========================================================= */

.card {
    border-color: var(--biglar-border);

    border-radius: var(--biglar-radius-md);

    box-shadow: var(--biglar-shadow-xs);
}


/* =========================================================
   35. BREADCRUMB
   ========================================================= */

.breadcrumb {
    color: #777777;
}

.breadcrumb a {
    color: #666666;
}

.breadcrumb a:hover {
    color: var(--biglar-primary);
}


/* =========================================================
   36. HEADER FIXO DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .site__body {
        margin-top: 186px;
    }

    .topbar-message {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;

        z-index: 1100;
    }

    .site-header {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;

        z-index: 1000;
    }

}


/* =========================================================
   37. MENU DESKTOP MÉDIO
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .nav-links__item-link {
        font-size: 12px;

        font-weight: 500;

        white-space: nowrap;
    }

    .nav-links__item-body {
        padding-left: 7px;
        padding-right: 7px;
    }

}


/* =========================================================
   38. DESKTOP GRANDE
   ========================================================= */

@media (min-width: 1200px) {

    .nav-links__item-link {
        font-size: 13px;

        font-weight: 500;

        white-space: nowrap;
    }

}


/* =========================================================
   39. TABLET / MOBILE
   ========================================================= */

@media (max-width: 991px) {

    body {
        background: #F7F7F7;
    }

    .indicator__value {
        background: var(--biglar-primary);
        color: var(--biglar-white);
    }

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

    .pix-top-banner--desktop {
        display: none;
    }

    .pix-top-banner--mobile {
        display: block;
    }

    .pix-top-banner--mobile .container {
        min-height: 26px;

        padding: 0 8px;
    }

    .pix-top-banner--mobile span {
        font-size: 11px;
        line-height: 1.25;
    }

    .product-card {
        margin: 4px;

        border-radius: 8px;
    }

    .product-card:hover {
        transform: none;

        box-shadow: none;
    }

    .product-card:hover .product-card__image img,
    .product-card:hover .product-image img {
        transform: none;
    }

    .product-card__new-price {
        font-size: 21px;
    }

    .product-card__name a {
        font-size: 13px;
        line-height: 1.35;
    }

    .product-card__prices-condition {
        font-size: 12px;
    }

    .block-header__title {
        font-size: 19px;
    }

    .page-header__title {
        font-size: 22px;
    }

}


/* =========================================================
   40. MOBILE PEQUENO
   ========================================================= */

@media (max-width: 575px) {

    .product-card {
        margin: 3px;
    }

    .product-card__new-price {
        font-size: 20px;
    }

    .product-card__promotion-legend {
        font-size: 11px;
    }

    .product-card__buttons .btn,
    .product-card__buttons button,
    .product-card__actions .btn,
    .product-card__actions button {
        min-height: 38px;

        font-size: 12px;
    }

    .countdown__title {
        font-size: 11px;
    }

    .countdown-amount {
        font-size: 140%;
    }

}


/* =========================================================
   41. ACESSIBILIDADE / INTERAÇÃO
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(139, 24, 67, 0.35);
    outline-offset: 2px;
}


/* =========================================================
   42. REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}