/* ============ Global configuration ============ */
:root {
    --primary-blue: #2196F3;
    --primary-blue-90: #2196F3E6;
    --primary-blue-less-opacity: #2196F340;
    --primary-blue-50: #2196f380;
    --primary-dark: #212121;
    --secondary-dark: #272727;
    --secondary-dark-hover-light: #515151;
    --secondary-dark-hover: #000;
    --header-light-grey: #F5F5F5;
    --footer-light-grey: #F1F1F1;
    --gray: #757575;
    --small-gray: #777777;
    --gray-less-opacity: #75757580;
    --blue-gray: #70848F;
    --blue-gray-hover: #434f56;
    --primary-light-gray: #CCCCCC;
    --secondary-light-gray: #D2D2D2;
    --shadow-color: #00000029;
    --green-whatsapp: #00E676;
    --modal-overlay-background: rgba(0, 0, 0, .4);
    --notify-color: #2121211A;
    --notify-hover: #d7d7d7;

    --primary-font: 'PT sans', sans-serif;
    --secondary-font: 'Montserrat', sans-serif;

    --hover-transition: var(--hover-transition-time) ease-in-out;
    --header-transition: var(--header-transition-time) ease-in-out;
    --hover-transition-time: .25s;
    --header-transition-time: .5s;
    --blog-transition: .4s ease-in-out;
    --modal-transition: .25s cubic-bezier(.8, .5, .2, 1.4);

    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'PT sans', sans-serif;
    font-size: 1.6rem;
}

ul,
ul li,
ol,
ol li {
    margin: 0;
    list-style: none;
    ;
}

a,
a:hover,
.alink,
.alink:hover {
    text-decoration: none;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* ============ Utils ============ */
.pt-3 {
    padding-top: 1rem !important
}

.ps-1 {
    padding-left: .25rem !important
}

.primary-blue {
    color: var(--primary-blue) !important;
}

/* ============ Country Field ============ */
div[name="shippingAddress.country_id"],
div.field.country {
    display: none !important;
}

/* ============ Buttons ============ */
button,
button.action.primary,
.button,
button:focus,
button.action.primary:focus,
.button:focus {
    color: white;
    background: var(--primary-blue);
    font-size: 14px;
    height: 46px;
    width: fit-content;
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-transition);
    border-radius: 0;
    border: 1px solid var(--primary-blue);
    padding: 0;
}
.opc-wrapper .form-login,
.opc-wrapper .form-shipping-address {
    margin-top: 28px;
    margin-bottom: 0px;
    padding-bottom: 0 !important;
}
button span,
button.action.primary span,
.button span {
    transition: color var(--hover-transition);
}

button:hover,
button.action.primary:hover,
button:focus {
    color: var(--primary-blue);
    background: white;
    border: 1px solid var(--primary-blue);
    box-shadow: none;
}

button.dark,
.button.dark {
    background: white;
    color: var(--secondary-dark);
    border: 1px solid var(--secondary-dark) !important;
}

button.dark:hover,
.button.dark:hover,
.button.dark:focus,
button.dark:focus {
    background: var(--secondary-dark);
    color: white;
}

button.gray,
button.action.primary.gray {
    background: var(--notify-color);
    border: none;
    color: var(--secondary-dark);
}

button.gray:hover,
button.action.primary.gray:hover {
    background-color: var(--notify-hover);
}

.black-square {
    background: var(--secondary-dark);
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--hover-transition);
    cursor: pointer;
}

.black-square:hover {
    background-color: var(--secondary-dark-hover);
}

.black-square i {
    font-size: 20px;
    line-height: 24px;
}

.custom-link,
.custom-link:focus,
.custom-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
}

.custom-link:hover {
    text-decoration: none;
}

._keyfocus *:focus,
input:not([disabled]):focus,
textarea:not([disabled]):focus,
select:not([disabled]):focus {
    /* box-shadow: none !important; */
    border: 1px solid var(--primary-blue);
    transition: ease-in-out 0.32s;
}

.pix-container:nth-of-type(2) {
    display: none;
}

/* ============ Containers ============ */
.page-wrapper>.breadcrumbs,
.page-header .header.panel,
.page-header .header.content,
.footer.content,
.page-wrapper>.widget,
.page-wrapper>.page-bottom,
.block.category.event,
.top-container,
.page-main {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    width: 85.2vw;
    padding-left: 0;
    padding-right: 0;
}

main#maincontent {
    margin-top: calc(140px + 73px);
}

.hidden {
    display: none;
}

.only-mb {
    display: none;
}

.grid-shrinked {
    width: 90%;
    margin: 0 auto;
    max-width: 1366px;
}

@media screen and (max-width: 1440px) {

    .page-wrapper>.breadcrumbs,
    .page-header .header.panel,
    .page-header .header.content,
    .footer.content,
    .page-wrapper>.widget,
    .page-wrapper>.page-bottom,
    .block.category.event,
    .top-container,
    .page-main {
        width: 90vw;
    }
}

@media screen and (max-width: 1200px) {

    .breadcrumbs,
    .page-header .header.panel,
    .page-header .header.content,
    .footer.content,
    .page-wrapper>.widget,
    .page-wrapper>.page-bottom,
    .block.category.event,
    .top-container,
    .page-main {
        width: 96vw;
    }
}

@media screen and (max-width: 768px) {

    .page-wrapper .breadcrumbs,
    .page-header .header.panel,
    .page-header .header.content,
    .footer.content,
    .page-wrapper>.widget,
    .page-wrapper>.page-bottom,
    .block.category.event,
    .top-container,
    .page-main {
        width: 92vw;
    }

    .only-desk {
        display: none;
    }

    .only-mb {
        display: block;
    }
}

/* ============ Breadcrumbs ============ */
.breadcrumbs {
    position: absolute;
    margin-top: 18px;
    top: 140px;
    right: 0;
    left: 0;
}

.breadcrumbs ul.items li.item:not(:last-child)::after {
    content: '/';
    font-family: 'PT Sans';
    font-size: 14px;
    margin: 0;
    line-height: 22px;
}

.breadcrumbs ul.items li a,
.breadcrumbs ul.items li strong {
    color: var(--small-gray);
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    transition: var(--hover-transition);
}

.breadcrumbs ul.items li a:hover {
    color: #333;
}

/* ============ Titles ============ */
.page-title-wrapper,
.page-title,
.page-title span {
    font-size: 24px;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
    line-height: 32px;
    color: var(--secondary-dark);
}

.page-title-wrapper {
    margin-bottom: 40px;
}

.page-subtitle,
.block .block-title strong {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    color: var(--secondary-dark);
}

.big-title {
    line-height: 1;
    font-size: 35px;
    font-weight: bold;
}

.bold {
    font-weight: bold;
}

.montserrat-title,
.montserrat-title b {
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
    font-weight: bold;
    position: relative;
    color: var(--secondary-dark);
}

.montserrat-title b::before {
    content: '';
    width: 100%;
    height: 12px;
    background-color: var(--primary-blue);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: .6;
    z-index: -1;
}

/* ============ Product Card ============ */
.product-card-container {
    height: max-content;
}

.product-card {
    max-width: 246px;
    transition: var(--hover-transition);
    border: .5px solid transparent;
    padding: 16px 16px;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.product-card a {
    color: var(--primary-dark);
    text-align: center;
}

.product-card:hover {
    border-color: var(--secondary-dark);
}

.product-card .product-image {
    margin-bottom: 6px;
    padding: 0 8px;
}

.product-card .info {
    padding: 16px;
}

.product-card .name {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    margin-bottom: 20px;
}

.product-card .price-info {
    margin-bottom: 4px;
}

.product-card .price {
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
}

.product-card .spe-price {
    font-weight: normal;
    text-decoration: line-through;
}

.product-card small,
.product-card small b {
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
}

.product-card .buttons-container {
    overflow: hidden;
    position: relative;
    height: 46px;
}

.product-card .product-buttons {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
    bottom: -60px;
    transition: bottom var(--hover-transition);
}

.product-card:hover .product-buttons {
    bottom: 0;
}

.product-card .product-buttons form {
    width: 100%;
}

.product-card .product-buttons button.action.primary {
    width: 100%;
}

/* ============ Product Slider ============ */
.product-slider-container {
    position: relative;
}

.product-slider-container .slider-outer-container {
    position: relative;
}

.product-slider-container .slider-container {
    width: 90%;
    /* max-width: 1366px; */
    margin: 0 auto;
}

.product-slider-container .product-slider {
    display: flex;
    flex-wrap: wrap;
}

.slider-controls i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    cursor: pointer;
}

.slider-controls i.icon-arrow-left {
    left: 0;
}

.slider-controls i.icon-arrow-right {
    right: 0;
}

.icon-arrow-right,
.icon-arrow-left {
    font-weight: bold !important;
}

/* ============ Modals ============ */
.modal-overlay {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}

.modal {
    max-height: 90vh;
    overflow-y: auto;
    max-width: 80vw;
    width: 35%;
    min-width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    background: white;
    height: fit-content;
    margin: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--modal-transition);
}

.modal .icon-close {
    position: absolute;
    right: 40px;
    top: 40px;
    cursor: pointer;
    transition: transform var(--hover-transition);
}

.modal .icon-close:hover {
    transform: rotate(90deg);
}

/* ============ Forms ============ */
input[type="text"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type*="date"],
input[type="email"] {
    height: 46px;
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #D2D2D2;
    font-family: var(--primary-font);
    font-size: 16px;
    padding: 0 15px;
}

textarea {
    min-height: 138px;
    font-family: var(--primary-font);
}

.fieldset>.field.required>.label:after,
.fieldset>.fields>.field.required>.label:after,
.fieldset>.field._required>.label:after,
.fieldset>.fields>.field._required>.label:after {
    color: var(--primary-dark);
}

#maincontent .toolbar .limiter-options,
#maincontent .toolbar .limiter-options:focus,
#maincontent .toolbar .limiter-options:active {
    background: white;
    border: none;
    box-shadow: none;
}

/* ============ Messages and Cookies ============ */
@keyframes messageAnimation {
    10% {
        transform: translateX(-50%) scale(1);
        visibility: visible;
        opacity: 1
    }

    95% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    99% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
        visibility: visible;
    }

    100% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
        visibility: hidden;
    }
}

.message.global.cookie {
    bottom: 20px;
    width: 80%;
    border-radius: 10px;
    border: 1px solid var(--primary-blue);
    background-color: white;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.message.global.cookie .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.message.global.cookie .content p,
.message.global.cookie .content a,
.message.info.empty span {
    color: var(--secondary-dark)
}

.message.global.cookie .content .action.allow.primary {
    width: 140px;
}

.message.info {
    padding: 0;
    margin: 0;
}

.message.info.empty {
    background: white;
}

.message.info.empty>*:first-child:before,
.message.success>*:first-child:before {
    color: var(--primary-blue);
}

.message.info.empty div {
    color: var(--secondary-dark);
    display: flex;
    align-items: center;
}

.page.messages .messages {
    width: clamp(60%, 90%, 1000px);
    max-width: unset;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    z-index: 99;
    animation: messageAnimation 21s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 0;
    visibility: hidden;
    max-width: fit-content;
}

.messages .message {
    padding: 24px 20px 24px 20px;
    width: 100%;
    color: var(--secondary-dark);
    background: white !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.message.success {
    background: white;
    color: var(--secondary-dark);
    ;
}

.message.info>*:first-child:before,
.message.error>*:first-child:before,
.message.success>*:first-child:before {
    margin: 0;
    position: static;
}

@media screen and (max-width: 1200px) {
    .grid-shrinked {
        width: 100%;
    }

    .modal {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    .message.global.cookie .content {
        flex-direction: column;
    }

    .black-square i {
        font-size: 17px;
    }

    .breadcrumbs {
        top: 60px;
        margin-top: 12px;
        display: block;
    }

    main#maincontent {
        margin-top: calc(120px);
    }

    .page-title-wrapper {
        margin-bottom: 32px;
    }

    .page-title-wrapper,
    .page-title,
    .page-title span {
        font-size: 18px;
        line-height: 28px;
    }

    .big-title {
        font-size: 24px;
        line-height: 32px;
    }

    .montserrat-title,
    .montserrat-title b {
        display: inline-block;
        font-size: 24px;
        line-height: 32px;
    }

    .messages .message {
        font-size: 14px;
        line-height: 24px;
    }

    /* ============ Product Card ============ */
    .product-card {
        padding: 0;
        border: none;
    }

    .product-card .product-image {
        padding: 0;
    }

    .product-card .info {
        padding: 16px 0;
    }

    .product-card .name {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 10px;
        letter-spacing: normal;
    }

    .product-card .price-info {
        margin: 0;
    }

    .product-card .price {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 5px;
    }

    /* ============ Product Slider ============ */
    .product-slider-container .slider-container {
        width: 100%;
    }

    .product-card .product-buttons {
        bottom: 0;
        gap: 8px;
    }

    .slider-controls i {
        font-size: 18px;
    }

    .page-subtitle,
    .block .block-title strong {
        font-size: 16px;
        line-height: 20px;
    }

    /* ============ Modal ============ */
    .modal {
        width: 85%;
    }

    .modal .icon-close {
        top: 24px;
        right: 24px;
    }
}