@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables Start */
:root {
    /* Cor principal Marca */
    --orange-700: #CC2D00;
    --orange-600: #EB3400;
    --orange-500: #FF4F1D;
    --orange-400: #FF683D;
    --orange-300: #FFDFC2;

    /* Cor secundaria Marca */
    --yellow-200: #FE9213;
    --yellow-100: #F4C320;

    --green-400: #004D00;
    --green-300: #006200;
    --green-200: #5C762F;
    --green-100: #7A8908;

    /* gray */
    --gray-900: #1A1A1A;
    --gray-800: #333333;
    --gray-700: #4D4D4D;
    --gray-600: #666666;
    --gray-500: #808080;
    --gray-400: #999999;
    --gray-300: #B3B3B3;
    --gray-200: #CCCCCC;
    --gray-100: #E6E6E6;
    --gray-50: #F2F2F2;
    --white: #FFFFFF;

    /* Font-Weight */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Tipografia */
    --h1-font-size-px: 44px;
    --h1-font-size-rem: calc(var(--h1-font-size-px) * 0.0625);
    --h1-line-height: 54px;
    --h1-font-weight: var(--fw-semibold);

    --h2-font-size-px: 32px;
    --h2-font-size-rem: calc(var(--h2-font-size-px) * 0.0625);
    --h2-line-height: 39px;
    --h2-font-weight: var(--fw-semibold);

    --h3-font-size-px: 24px;
    --h3-font-size-rem: calc(var(--h3-font-size-px) * 0.0625);
    --h3-line-height: 29px;
    --h3-font-weight: var(--fw-semibold);

    --subtitle1-font-size-px: 20px;
    --subtitle1-font-size-rem: calc(var(--subtitle1-font-size-px) * 0.0625);
    --subtitle1-line-height: 24px;
    --subtitle1-font-weight: var(--fw-medium);

    --subtitle2-font-size-px: 18px;
    --subtitle2-font-size-rem: calc(var(--subtitle2-font-size-px) * 0.0625);
    --subtitle2-line-height: 22px;
    --subtitle2-font-weight: var(--fw-medium);

    --text1-font-size-px: 16px;
    --text1-font-size-rem: calc(var(--text1-font-size-px) * 0.0625);
    --text1-line-height: 20px;
    --text1-font-weight: var(--fw-regular);

    --text2-font-size-px: 14px;
    --text2-font-size-rem: calc(var(--text2-font-size-px) * 0.0625);
    --text2-line-height: 20px;
    --text2-font-weight: var(--fw-regular);

    --legend-font-size-px: 12px;
    --legend-font-size-rem: calc(var(--legend-font-size-px) * 0.0625);
    --legend-line-height: 14px;
    --legend-font-weight: var(--fw-regular);

    /* Produtc Box */
    --product-box-width: 343px;
    --product-box-height: 80px;
    --product-box-border: 1px solid var(--gray-100);
    --product-box-border-radius: 8px;
    --product-box-button-width: 32px;
    --product-box-button-height: 32px;
    --product-box-button-border-radius: 4px;
    --product-box-button-color: var(--gray-800);
    --product-box-button-background: var(--gray-50);
    --product-box-img-border-radius: 6px;
    --product-box-img-background: var(--gray-50);
    --product-box-name-size: var(--text1-font-size-px);
    --product-box-name-color: var(--gray-800);
    --product-box-name-font-weight: var(--fw-regular);
    --product-box-price-size: var(--text2-font-size-px);
    --product-box-price-color: var(--gray-600);
    --product-box-price-font-weight: var(--fw-medium);
    --product-box-unit-size: var(--text2-font-size-px);
    --product-box-unit-color: var(--green-400);
    --product-box-unit-font-weight: var(--fw-medium);

    /* Lineares */
    --button-linear: linear-gradient(85.17deg, #FF4F1D 6.18%, #FEA813 196.56%);

    /* Buttons */
    --button-first-width: 343px;
    --button-first-height: 52px;
    --button-first-padding: 16px, 32px, 16px, 32px;
    --button-first-radius: 8px;
    --button-first-gap: 8px;
    --button-first-color: var(--white);
    --button-first-background: var(--button-linear);
    --button-first-font-size: 16px;
    --button-first-font-weight: var(--fw-medium);
    --button-first-line-height: 20px;

    --button-secondary-width: 232px;
    --button-secondary-height: 48px;
    --button-secondary-padding: 14px, 32px, 14px, 32px;
    --button-secondary-radius: 8px;
    --button-secondary-gap: 8px;
    --button-secondary-font-size: 16px;
    --button-secondary-font-weight: var(--fw-medium);
    --button-secondary-border-width: 1.5px;
    --button-secondary-color: var(--orange-600);
    --button-secondary-line-height: 20px;
    --button-secondary-background: var(--white);

    /* Menu Buttons */
    --button-menu-width: 64px;
    --button-menu-height: 64px;
    --button-menu-icon-width: 42px;
    --button-menu-icon-height: 42px;
    --button-menu-icon-radius: 12px;
    --button-menu-icon-color: var(--orange-500);
    --button-menu-icon-color-active: var(--white);
    --button-menu-icon-background: var(--gray-50);
    --button-menu-icon-background-active: var(--orange-500);
    --button-menu-margin-bottom: 13px;
    --button-menu-text-font-size: 14px;
    --button-menu-text-color: var(--gray-800);
    --button-menu-text-line-height: 17px;
    --button-menu-text-font-weight: var(--fw-regular);
}

.app {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    background-color: var(--white);
}

.button-first {
    width: var(--button-first-width);
    height: var(--button-first-height);
    padding: var(--button-first-padding);
    color: var(--button-first-color);
    background: var(--button-first-background);
    border: 0;
    border-radius: var(--button-first-radius);
    font-size: var(--button-first-font-size);
    font-weight: var(--button-first-font-weight);
}

.button-secondary {
    width: var(--button-secondary-width);
    height: var(--button-secondary-height);
    padding: var(--button-secondary-padding);
    color: var(--button-secondary-color);
    border-radius: var(--button-secondary-radius);
    font-size: var(--button-secondary-font-size);
    border: var(--button-secondary-border-width) solid var(--button-secondary-color);
    background-color: var(--button-secondary-background);
    font-weight: var(--button-first-font-weight);
}

.card-wrapper {
    position: sticky !important;
    top: 10px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    padding: 15px;
    background-color: var(--white);
}

.card-alert {
    padding: 16px;
    background-color: var(--gray-50);
    border-radius: 4px;
    margin-bottom: 40px;
}

.card-alert a {
    text-decoration: none;
}

.card-alert .card-alert-header span {
    color: var(--yellow-200);
    font-size: var(--text1-font-size-px);
    font-weight: var(--fw-medium);
}

.card-alert .collapse-text {
    margin-bottom: 0 !important;
    padding-top: 10px;
    color: var(--gray-700);
    font-size: var(--legend-font-size-px);
    font-weight: var(--fw-medium);
    line-height: var(--legend-line-height);
}

.card-price {
    margin-top: 40px;
}

.card-price span {
    color: var(--gray-700);
    font-size: var(--text1-font-size-px);
    font-weight: var(--text1-font-weight);
}

.card-price-infor {
    margin-bottom: 10px;
}

.product-section {
    padding: 30px 0;
}

.products-wrapper {
    row-gap: 30px;
    column-gap: 30px;
}

.product-box {
    padding: 8px !important;
    width: var(--product-box-width);
    height: var(--product-box-height);
    border: var(--product-box-border);
    border-radius: var(--product-box-border-radius);
}

.product-box .product-box-infor {
    gap: 8px;
}

.product-box .product-box-infor .product-img {
    width: var(--button-menu-width);
    height: var(--button-menu-height);
    border-radius: var(--product-box-img-border-radius);
    background-color: var(--product-box-img-background);
}

.product-box .product-box-infor .product-img img {
    width: 54px;
    height: 54px;
}

.product-box .product-box-infor .product-info {
    gap: 5px;
}

.product-info-group {
    line-height: 1.3;
}

.product-box .product-box-infor .product-info .product-name {
    color: var(--product-box-name-color);
    font-size: var(--product-box-name-size);
    font-weight: var(--product-box-name-font-weight);
}

.product-box .product-box-infor .product-info .product-price {
    color: var(--product-box-price-color);
    font-size: var(--product-box-price-size);
    font-weight: var(--product-box-price-font-weight);
}

.product-box .product-box-infor .product-info .product-unit {
    color: var(--product-box-unit-color);
    font-size: var(--product-box-unit-size);
    font-weight: var(--product-box-unit-font-weight);
}

.product-box .product-box-infor .product-info .product-name {
    color: var(--product-box-name-color);
    font-size: var(--product-box-name-size);
    font-weight: var(--product-box-name-font-weight);
}

.product-quantity .product-quantity_button {
    width: var(--product-box-button-width);
    height: var(--product-box-button-height);
    color: var(--product-box-button-color);
    border-radius: var(--product-box-button-border-radius);
    background-color: var(--product-box-button-background);
    border: none;
}

.product-current-quantity {
    min-width: var(--product-box-button-width);
    height: var(--product-box-button-height);
    color: var(--gray-700);
    font-size: var(--text2-font-size-px);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.categories-scroll {
    position: relative;
}

.category {
    position: relative;
    width: var(--button-menu-width);
}

.categories-scroll .indicador {
    position: absolute;
    width: var(--button-menu-width);
    height: 5px;
    left: 0;
    bottom: 0;
    border-radius: 8.95px 8.95px 0 0;
    background-color: var(--button-menu-icon-background-active);
    transition: transform .3s ease-in-out;
}

.category a {
    text-decoration: none;
}

.category .category-img {
    width: var(--button-menu-width);
    height: var(--button-menu-height);
    border-radius: var(--button-menu-icon-radius);
    margin-bottom: var(--button-menu-margin-bottom);
    background-color: var(--button-menu-icon-background);
}

.category .category-img svg {
    width: var(--button-menu-icon-width);
    height: var(--button-menu-icon-height);
    object-fit: cover;
    stroke: var(--button-menu-icon-color);
}


.category.active .category-img {
    background-color: var(--button-menu-icon-background-active);
}

.category.active .category-img svg path {
    stroke: #FFFFFF !important;
}

.category .category-name {
    color: var(--button-menu-text-color);
    font-size: var(--button-menu-text-font-size);
    line-height: var(--button-menu-text-line-height);
    font-weight: var(--button-menu-text-font-weight);
    margin-bottom: 14px;
    pointer-events: none;
    text-align: center !important;
}

/* Variabled End */
header {
    padding-bottom: 40px;
    /* background: red; */
    z-index: 1;
}

header .container {
    position: relative;
    height: 100%;
}

a {
    text-decoration: none !important;
}

.bg-header {
    background: #005C00 url(../img/bg-default.svg);
    width: 100%;
    height: 88px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    z-index: -1;
}

.navbar-logo {
    position: absolute;
    left: 0;
    top: 5px;
}

.navbar-logo img {
    width: 115px;
    height: 115px;
    object-fit: cover;
}

.navbar {
    height: 100%;
}

.navbar .navbar-cart img {
    width: 30px;
    height: 30px;
}

.navbar-cart a,
.navbar-text-mobile {
    color: var(--white);
    text-decoration: none;
}

.navbar-cart span,
.navbar-text-mobile {
    font-weight: var(--fw-medium);
}

.navbar-text-mobile {
    font-size: var(--subtitle2-font-size-px);
}

.categories-wrapper {
    padding-top: 10px;
    border-bottom: 1px solid var(--gray-100);
}

.categories-scroll {
    gap: 21px;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.categories-scroll::-webkit-scrollbar {
    height: 8px;
}

.categories-scroll:hover::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: var(--gray-100);
}

.footer {
    padding: 10px 0;
    background-color: var(--gray-50);
}

.footer .footer-text {
    font-size: var(--legend-font-size-px);
    font-weight: var(--fw-medium);
    color: var(--gray-700);
}

.footer .footer-logo img {
    width: 137px;
    height: 52px;
    object-fit: cover;
}

.link-cart-return {
    text-decoration: none;
}

.link-cart-return span {
    color: var(--gray-800);
    font-size: var(--subtitle1-font-size-px);
    font-weight: var(--fw-medium);
}


/* Checkout Start */

.form-group .form-control,
.form-group .form-select,
.ts-control {
    padding: 15px 9px !important;
    border: 1px solid var(--gray-500) !important;
    background-color: transparent !important;
    border-radius: 4px !important;
}

.ts-control {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--bs-body-color) !important;
}


.form-group textarea.form-control {
    resize: none;
}


.form-group .form-label {
    margin: 0;
    font-size: var(--text2-font-size-px) !important;
    color: var(--gray-700) !important;
    font-weight: var(--fw-medium);
}

.form-checkout {
    font-size: var(--text1-font-size-px);
    color: var(--gray-900);
    margin-bottom: 24px;
}

.payments-wrapper {
    row-gap: 20px;
}

.payments-wrapper .payment-check .payment-check-label {
    font-size: var(--legend-font-size-px);
    font-weight: var(--fw-medium);
    padding: 16px;
    background-color: var(--gray-50);
    width: 100%;
    border-radius: 8px;
    user-select: none;
    cursor: pointer;
}

.save-option-label {
    font-size: var(--text2-font-size-px);
    user-select: none;
    cursor: pointer;
}

.save-option-input,
.payments-wrapper .payment-check-input {
    display: none;
}

.save-option-label::before,
.payment-check-label::before {
    content: '';
    display: block;
    min-width: 15px;
    min-height: 15px;
    border-radius: 3px;
    border: 2px solid var(--orange-500);
}

.save-option-label::before {
    width: 15px;
    height: 15px;
    border-width: 1.5px;
    border-color: var(--gray-500);
}

.payment-check-input:checked+.payment-check-label:before {
    background-color: var(--orange-500);
}

.save-option-input:checked+.save-option-label:before {
    background-color: var(--gray-500);
}

.coupon-wrapper .form-group {
    width: 100% !important;
}

.coupon-wrapper .form-group .form-control {
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
}

.coupon-wrapper #coupon-result {
    font-weight: var(--fw-medium);
}

.button-coupon {
    width: 160px !important;
    height: 56px;
    border-radius: 0 5px 5px 0;
}

.input-coupon {
    border-right: 0 !important;
}

/* Checkout End */


.view-product .product-infor h3 {
    font-size: var(--h3-font-size-px);
    font-weight: var(--fw-medium);
    line-height: var(--h3-line-height);
    color: var(--gray-800);
}

.view-product .product-infor p {
    color: var(--gray-700);
    font-size: var(--text1-font-size-px);
    margin-bottom: 10px;
}

.product-view .product-box {
    height: 56px !important;
    margin-top: 50px;
}

.product-view .card-price-infor .subtotal {
    font-size: var(--text1-font-size-px);
}

.product-view .product-price {
    font-size: var(--text1-font-size-px) !important;
    color: var(--gray-800) !important;
}

.product-view .product-unit {
    font-size: var(--text2-font-size-px) !important;
}

.product-view .subtotal {
    font-size: var(--text1-font-size-px) !important;
    color: var(--gray-800) !important;
    font-weight: var(--fw-medium);
}

.product-view .price {
    font-size: var(--text1-font-size-px) !important;
    font-size: var(--text1-font-size-px);
    color: var(--gray-700) !important;
    font-weight: var(--fw-medium);
}

.button-cart-mobile {
    position: fixed;
    bottom: 15px;
    width: 100%;
    left: 0;
}


@media (max-width: 575px) {
    .footer {
        margin-bottom: 80px;
    }
}

@media (max-width: 500px) {
    .products-wrapper.d-flex {
        justify-content: center !important;
    }

    .product-box {
        width: 100% !important;
    }
}