@import url('https://fonts.googleapis.com/css?family=Montserrat');

html {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

#sidebar {
    display: none;
}

a {
    text-decoration: none;
    color: #FFF;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0px;
    padding: 0px;
    background: var(--Neutral-Gray-50, #F8F8F8);
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}




.Home {
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.SectionCenter {
    display: flex;
    max-width: 1440px;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: var(--Neutral-Gray-50, #F8F8F8);
    position: relative;
}

#TopPageButton {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    /* Shadow-MD */
    text-decoration: none;
    z-index: 1000;
    position: fixed;
    bottom: 50%;
    right: 3%;
    display: none;
    cursor: pointer;
}

.TopPageButtonStyle {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #00568C;
    border-radius: 100px;
    border: px solid var(--Britnia-Secondary-Main, #00568C);
    background: var(--Neutral-Default-White, #FFF);
    cursor: pointer;
}

    .TopPageButtonStyle:hover {
        color: #FFF;
        background-color: #00568C
    }

    .TopPageButtonStyle i {
    }

header {
    width: 100%;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-direction: row;
}

.Header-Navigation {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0;
    background-color: #fff;
    position: sticky;
    top: 0; /* This is essential for the sticky position to work */
    z-index: 10000; /* Ensures the header stays on top of other content */
}

.HeaderContainer {
    max-width: 1440px;
    justify-content: center;
    align-items: center;
    height: 40px;
    display: flex;
    margin: auto;
}

img.Britania {
    width: 100%;
    height: 100%;
}

img.Brand {
    width: 100%;
    height: 100%;
}

.Brands {
    width: 15%;
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.HeaderContent {
    width: 100%;
    height: 40px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1vw;
    flex-direction: row;
}

.ButtonLoginBanner {
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.Button-Base {
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}



.Header-Button {
    flex-grow: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #152942;
    border: 1px solid white;
    border-radius: 12px;
    padding: 12px 10px;
    cursor: pointer;
}

    .Header-Button:hover {
        background-color: #CFDAD4;
    }

.button-search {
    width: 40px;
    height: 40px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    object-fit: contain;
}

img.Icon {
    width: 20px;
    height: 20px;
    flex-grow: 0;
    object-fit: contain;
}

.Navigation {
    height: 40px;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 48px;
}

.Header-Button-Login {
    max-width: 51px;
    height: 24px;
    flex-grow: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #cd9a33;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    cursor: pointer;
}

    .Header-Button-Login:hover {
        color: #85571B;
        background-color: #FFDA80;
    }

.Actions {
    width: 15%;
    height: 40px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 0;
}

img.Rectangle-333 {
    width: 100%;
    max-height: 520px;
    background-color: rgba(0, 0, 0, 0.24);
}

.Banner {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0;
}

/* -------------- Search Banner                   */
.Search {
    max-width: 1000px;
    width: 65%;
    height: 64px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 2px;
    border-radius: 300px;
    border: solid 1px transparent;
    background-color: #fff;
    position: absolute;
    top: 50%;
    z-index: 999;
    opacity: 0.6;
    outline: none;
}

    .Search:hover {
        border: solid 1px #cecece;
        opacity: 1;
    }

.title-search-banner {
    margin: 20px;
}

#resultSearchBannerProducts {
    margin: 20px;
}

#resultSearchBanner {
    max-width: 1000px;
    width: 65%;
    margin: 2px;
    height: auto;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 2px;
    top: 50%;
    padding-top: 85px;
    border-radius: 10px;
    border: solid 1px #cecece;
    background-color: #f8f8f8;
    position: absolute;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    z-index: 400;
    display: none;
}

.Search input {
    padding-right: 40px; /* Add padding to prevent text from overlapping the icon */
    padding-left: 15px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 50px;
    border: none;
    font-size: 16px;
    z-index: 1000;
}

    .Search input:focus-visible {
        outline-color: transparent;
        border: none;
    }

/* Basic styling for the icon */
.cancel-icon-input-banner {
    font-size: 22px !important; /* Set the size */
    color: black; /* Default color (Google's gray) */
    cursor: pointer; /* Change cursor to a hand pointer on hover */
    transition: color 0.3s ease; /* Smooth transition for color change */
    padding: 10px; /* Add padding to increase the hover area */
    border-radius: 50%; /* Optional: Make the hover area a circle for a Material Design 'icon button' look */
    background-color: transparent;
    height: 98%;
}

/* Hover effect: change the color when the mouse is over the icon */


.icon-search-banner {
    width: 138px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 300px;
    background-color: #00568c;
    flex-grow: 0;
    font-family: 'Montserrat',sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    position: absolute; /* Icon position is absolute relative to its parent container */
    right: 5px; /* Adjust as needed for position */
    top: 50%;
    transform: translateY(-50%); /* Centers the icon vertically */
    cursor: pointer;
    height: 93%;
    border: none;
    z-index: 1001;
}

#clearButtonBanner {
    position: absolute; /* Button is absolutely positioned within the container */
    right: 135px;
    top: 50%;
    transform: translateY(-50%); /* Centers the button vertically */
    background: none;
    border: none;
    cursor: pointer;
    display: none; /* Hidden by default */
    z-index: 1001;
}




img.Icon-Search {
    width: 24px;
    height: 24px;
    flex-grow: 0;
    object-fit: contain;
}

#MemorialSection {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 64px 0px;
    background-color: #fff;
    padding-left: max(32px, 2vw);
    padding-right: max(32px, 2vw);
}

.Content-memorial {
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.Conhea-nossa-Histria {
    align-self: stretch;
    flex-grow: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.8px;
    text-align: center;
    color: #152942;
    margin-bottom: 48px;
}

.Actions-memorial {
    height: 48px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 0;
}

.button-memorial {
    flex-grow: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #152942;
    width: 113px;
    height: 48px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background-color: #cfdad4;
    cursor: pointer;
}

    .button-memorial:hover {
        border-radius: 8px;
        background: var(--Britnia-Yankees-Blue-50, #aFbAb4);
    }

.memorial {
    align-self: stretch;
    flex-grow: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: justify;
    color: #111;
}

.Description-memorial {
    width: 100%;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    padding: 0;
}

.Tabs-memorial {
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 24px;
    padding: 0;
}

.Row-memorial {
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 48px;
    padding: 0;
}



.Conhea {
    height: 24px;
    align-self: stretch;
    flex-grow: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #8c898c;
}

.britaniacombr {
    height: 24px;
    align-self: stretch;
    flex-grow: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #8c898c;
}

.label-Download {
    height: 24px;
    align-self: stretch;
    flex-grow: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #8c898c;
}

/* --------------- Search css--------------------- */

#ButtonSearchBanner {
    display: none;
}

.button-container {
    position: relative; /* Crucial for positioning the absolute overlay relative to the button's location */
    display: inline-block; /* Keeps the container size to its content */
}

.overlay {
    position: absolute;
    top: 0;
    right: 0; /* Initially positions the overlay to the left of the button container, outside of view */
    width: 0px; /* Desired width of the search input */
    height: 110%; /* Same height as the button container */
    overflow: hidden;
    transition: right 0.3s ease-out; /* Smooth transition for the 'right' property */
    display: flex;
    align-items: center;
    white-space: nowrap;
}

    .overlay.is-active {
        width: 71vw;
        max-width: 980px;
        right: 0; /* Slides the overlay in to cover the button area and extend left */
    }

.search-box {
    position: relative; /* Container must be relative for absolute positioning of the icon */
    display: inline-block;
    width: 71vw;
    max-width: 980px;
}

    .search-box input {
        padding-right: 40px; /* Add padding to prevent text from overlapping the icon */
        padding-left: 15px;
        width: 100%;
        box-sizing: border-box;
        /* Other styling for the input */
        border: 1px solid rgba(0, 0, 0, 0.24);
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 50px;
    }

        .search-box input:focus-visible {
            outline-color: transparent;
            border: 3px solid #00568c;
        }

.search-icon-input {
    position: absolute; /* Icon position is absolute relative to its parent container */
    right: 5px; /* Adjust as needed for position */
    top: 50%;
    transform: translateY(-50%); /* Centers the icon vertically */
    color: #aaa; /* Styles the icon color */
    cursor: pointer;
}

.input-search {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}

/* Basic styling for the icon */
.search-icon {
    padding: 12px;
    color: #00568C; /* Default color (Google's gray) */
    cursor: pointer; /* Change cursor to a hand pointer on hover */
    transition: color 0.3s ease; /* Smooth transition for color change */
    border-radius: 80%; /* Optional: Make the hover area a circle for a Material Design 'icon button' look */
}

    /* Hover effect: change the color when the mouse is over the icon */
    .search-icon:hover {
        color: #00126D; /* Change to Google's blue color on hover */
        background-color: rgba(26, 115, 232, 0.1); /* Add a light background overlay as per Material Design guidelines */
    }

/* Basic styling for the icon */
.search-icon-input {
    color: white !important; /* Default color (Google's gray) */
    cursor: pointer; /* Change cursor to a hand pointer on hover */
    transition: color 0.3s ease; /* Smooth transition for color change */
    padding: 10px; /* Add padding to increase the hover area */
    border-radius: 50%; /* Optional: Make the hover area a circle for a Material Design 'icon button' look */
    background-color: #00568c; /* Add a light background overlay as per Material Design guidelines */
}

    /* Hover effect: change the color when the mouse is over the icon */
    .search-icon-input:hover {
        color: white; /* Change to Google's blue color on hover */
        background-color: #00126D; /* Add a light background overlay as per Material Design guidelines */
    }

/* Basic styling for the icon */
.cancel-icon-input {
    font-size: 20px; /* Set the size */
    color: black; /* Default color (Google's gray) */
    cursor: pointer; /* Change cursor to a hand pointer on hover */
    transition: color 0.3s ease; /* Smooth transition for color change */
    padding: 10px; /* Add padding to increase the hover area */
    border-radius: 50%; /* Optional: Make the hover area a circle for a Material Design 'icon button' look */
    background-color: transparent;
}

    /* Hover effect: change the color when the mouse is over the icon */
    .cancel-icon-input:hover {
        color: black; /* Change to Google's blue color on hover */
        background-color: lightgray; /* Add a light background overlay as per Material Design guidelines */
    }





#clearButton {
    position: absolute; /* Button is absolutely positioned within the container */
    right: 35px;
    top: 50%;
    transform: translateY(-50%); /* Centers the button vertically */
    background: none;
    border: none;
    cursor: pointer;
    display: none; /* Hidden by default */
}

    #clearButton:hover {
        color: #333;
    }

/* ------------ Produto Search  -----------------*/

.resultCategorie {
    height: 30px;
    font-size: 13px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    gap: 10px;
}

    .resultCategorie:hover {
        color: #fff;
        background-color: #00568C;
    }

.resultCategorieTotalBanner {
    font-size: 16px;
    margin: auto;
    flex-grow: 0;
    display: flex;
    justify-content: flex-start;
    color: #152942;
    align-items: flex-start;
    font-weight: 600;
    padding: 15px;
    width: 200px;
    border-radius: 8px;
    cursor: pointer;
}

    .resultCategorieTotalBanner:hover {
        background-color: #CFDAD4;
    }

.resultCategorieTotal {
    height: 30px;
    font-size: 16px;
    margin: auto;
    flex-grow: 0;
    display: flex;
    justify-content: flex-start;
    color: #152942;
    align-items: flex-start;
    font-weight: 600;
    width: 100%;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
}

    .resultCategorieTotal:hover {
        background-color: #CFDAD4;
    }

.Carousel-Search-Banner {
    height: 100%;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to a new line */
    flex-direction: column;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.CardProduct {
    max-width: 260px;
    height: 296px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px;
    border-radius: 16px;
    background-color: #fff;
    border: 3px solid #fff;
}

    .CardProduct:hover {
        border: 3px solid #152942;
        transition: border 0.5s ease;
    }

        .CardProduct:hover .Image-Product-Banner {
            transform: scale(1.2);
            transition: transform 0.5s ease;
        }



img.Selo-Britania-Product {
    width: 32px;
    height: 32px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 3px;
    object-fit: contain;
    border-radius: 100px;
    background-image: radial-gradient(circle at 50% 50%, #00568c 23%, #152942 65%);
    position: absolute;
    z-index: 1;
}

.Rectangle-334 {
    width: 22px;
    height: 18px;
    flex-grow: 0;
    padding: 15px 15px;
    background-color: #000;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

img.Selo-Philco-Product {
    width: 26px;
}

.CarItemBanner {
    height: 300px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.product-description {
    height: 28px;
    align-self: stretch;
    flex-grow: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.26;
    letter-spacing: normal;
    text-align: left;
    color: #152942;
    padding: 1px;
    z-index: 1;
}

.product-second-description {
    height: 32px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.product-code-description {
    height: 20px;
    flex-grow: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #111;
}

.icon-product-detail {
    width: 28px;
    height: 28px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 100px;
    border: solid 1px #00568c;
    background-color: #fff;
    color: #00568c;
}

    .icon-product-detail:hover {
        background-color: #00568c;
        color: #fff;
    }

.CardProductContentBanner {
    height: 96px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    background-color: #fff;
}

.Image-Product-Banner {
    justify-content: center;
    align-items: center;
    height: 160px;
    flex-grow: 0;
    object-fit: contain;
}

.product-image {
    position: absolute;
    z-index: 0;
}

.resultSearchProducts {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to a new line */
    gap: 24px;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 25px 112px;
}

.title-search-products {
    font-size: 24px;
    margin: 80px;
    height: 80px;
}

.CardProductList {
    width: 286px;
    height: 296px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    border-radius: 16px;
    background-color: #fff;
    border: 3px solid #fff;
}

    .CardProductList:hover {
        border: 3px solid #152942;
        transition: border 0.5s ease;
    }

        .CardProductList:hover .Image-Product-Banner {
            transform: scale(1.2);
            transition: transform 0.5s ease;
        }

/* Categoria */

img.IconCategory {
    width: 90px;
    height: 56px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0;
    object-fit: contain;
    filter: invert(10%) sepia(35%) saturate(3025%) hue-rotate(185deg) brightness(93%) contrast(93%);
}


.CardCategoryItem {
    height: 156px;
    max-width: 286px;
    width: 30%;
    flex-grow: 0;
    justify-content: center;
    gap: 16px;
    padding: 0;
    border-radius: 16px;
    background-color: #cecece;
    cursor: pointer;
    position: relative;
}

.CategoryItem {
    height: 88px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 32px 16px 0;
}

.CardCategory {
    height: 156px;
    max-width: 286px;
    width: 30%;
    flex-grow: 0;
    justify-content: center;
    gap: 16px;
    padding: 0;
    border-radius: 16px;
    background-color: #cecece;
    cursor: pointer;
    position: relative;
}

    .CardCategory:hover {
        background-color: white;
    }

.CardsCategory {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to a new line */
    gap: 24px;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 25px 0px;
    margin-bottom: 30px;
}

.ContentCategory {
    height: 36px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    padding: 0 8px 16px;
}

.CategoryDescription {
    height: 20px;
    align-self: stretch;
    flex-grow: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: center;
    color: #152942;
}

#CategorySection {
    height: 100%;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 48px;
    padding: 64px 0px;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
    background-color: #ededed;
}

.SubCategoryListHome {
    width: 85%;
    max-width: 1200px;
    background-color: white;
    border-radius: 30px;
    position: fixed;
    z-index: 2000;
}

.SubCategoriaList {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to a new line */
    gap: 12px;
    margin: auto;
    justify-content: left;
    align-items: center;
    width: 100%;
    padding: 15px 10px;
}

.SubCategoriaDescription {
    width: 28%;
    color: #152942;
    border-radius: 10px;
    padding: 17px;
    height: 20px;
    font-weight: 600;
    font-size: 16px;
    font-style: normal;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    margin: auto;
}

    .SubCategoriaDescription:hover {
        background-color: #CFDAD4;
        cursor: pointer;
    }

.CategoriaTitle {
    margin: 20px;
    margin-bottom: 0px;
    padding: 5px 10px;
    font-size: 24px;
    font-weight: 600;
    width: 100%;
    display: inline-block;
    color: #152942;
}

.icon-close-subCategoria {
    position: absolute; /* Icon position is absolute relative to its parent container */
    right: 35px; /* Adjust as needed for position */
    cursor: pointer;
}

.icon-home-breadcrumb {
    padding-top: 4px;
}

.breadcrumb {
    width: 50%;
    height: 56px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 17px;
    position: absolute;
    top: 20px;
    left: 6%;
    z-index: 2000;
    flex-grow: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    color: #cecece;
}

/* Lançamentos */

#ReleaseSection {
    height: 100%;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding: 64px 0px;
    padding-left: 0px;
    padding-right: max(2px, 2vw);
    position: relative;
    width: 100%;
}

.Elements-Release {
    position: absolute;
    top: -40px;
    left: 2px;
}

.Release-Content {
    height: 44px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 1440px;
}

.Release-Title {
    height: 44px;
    flex-grow: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.8px;
    text-align: center;
    color: #152942;
}

.ReleaseCarouselControl {
    position: absolute;
    height: 20px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 60px;
    right: 0px;
    gap: 12px;
}

.ReleaseCarouselControlPaging {
    width: 100%;
    height: 24px;
    flex-grow: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    margin-top: 8px;
    letter-spacing: normal;
    text-align: left;
    color: #404040;
}

.ReleaseCarouselControlIcon {
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 24px;
    border-radius: 300px;
    color: #cd9a33;
    border: 1px solid #cd9a33;
    font-size: 18px;
    font-weight: normal;
    background-color: white;
    width: 24px;
    height: 24px;
}

    .ReleaseCarouselControlIcon:hover {
        background-color: #cd9a33;
        color: white;
    }

.ReleaseContent {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
}

.ReleaseContentImage {
    display: flex;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    background: url(../img/release_1.png) no-repeat;
    background-size: cover;
    border-radius: 0 300px 300px 0;
}

.CardBannerRelease {
    display: flex;
    width: 398px;
    height: 402px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 0 300px 300px 0;
    background: #FFF;
}



.FrameRelease {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.ReleaseCarrouselItems {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    align-self: stretch;
    width: 100%;
    max-width: 1000px;
}

.CardProductRelease {
    display: flex;
    width: 286px;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    background: #FFF;
    border: 3px solid #fff;
    height: 396px;
}

    .CardProductRelease:hover {
        border: 3px solid #152942;
        transition: border 0.5s ease;
    }

        .CardProductRelease:hover .Image-Product-Release {
            transform: scale(1.2);
            transition: transform 0.5s ease;
        }

.CarItemRelease {
    height: 300px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.product-image-release {
    position: absolute;
    z-index: 0;
}

.Image-Product-Release {
    justify-content: center;
    align-items: center;
    height: 204px;
    flex-grow: 0;
    object-fit: contain;
}

.CarItemReleaseContent {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.CarItemReleaseDescription {
    align-self: stretch;
    color: #152942;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
}

.CarItemReleaseCodes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.CarItemReleaseCodesText {
    flex: 1 0 0;
    color: #111;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.CarItemReleaseSelo {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 100;
}

.CarItemReleaseTag {
    display: flex;
    align-items: flex-start;
}

.CarItemReleaseBadge {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: #152942;
}

.CarItemReleaseBadgeText {
    color: var(--Default-White, #FFF);
    /* Britânia/Montserrat/Text 2XS/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 160% */
}

.ButtonRelease {
    display: flex;
    padding-left: 0px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    cursor: pointer;
    margin-left: max(1px, 1vw);
}

.MoreRelease {
    color: #FFF;
    /* Britânia/Montserrat/Text MD/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    border-radius: 8px;
    background: #00568C;
    padding: 12px 20px;
    cursor: pointer;
}

    .MoreRelease:hover {
        background: #00126D;
    }

/* Most Viewed */

.Elements-MostViewed {
    position: absolute;
    padding: 0;
    margin-top: -88px;
    height: 100%;
}

#MostViewedMobile {
    display: none;
}

#MostViewed {
    display: flex;
    padding: 64px 0px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    align-self: center;
    padding-left: max(12px, 2vw);
    padding-right: max(12px, 2vw);
    position: relative;
}

.ContentMostViewed {
    height: 44px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.ContentMostViewedTitle {
    height: 44px;
    flex-grow: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.8px;
    text-align: center;
    color: #152942;
}

.MostViewedProducts {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    align-self: stretch;
}

.MostViewedProductsRow {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.CardProductMostViewed {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.CardMostViewedBritania {
    display: flex;
    height: 300px;
    width: 286px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    background: radial-gradient(54.67% 54.67% at 50% 47.06%, rgba(14, 67, 110, 0.50) 41.83%, rgba(14, 67, 110, 0.00) 100%), #152942;
    background-blend-mode: color-dodge, normal;
    z-index: 0;
}

.CardBackGroundMostViewedBritania {
    display: flex;
    width: 286px;
    height: 300px;
    position: absolute;
    background: url(../img/background-britania.png) no-repeat;
    background-size: cover;
    z-index: 10;
}

.CardMostViewedPhilco {
    display: flex;
    height: 300px;
    width: 286px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    background: radial-gradient(59.5% 59.5% at 50% 49.89%, var(--Neutral-Gray-100, rgba(237, 237, 237, 0.50)) 0%, rgba(237, 237, 237, 0.00) 100%), #057074;
    background-blend-mode: color-dodge, normal;
    z-index: 0;
}

.CardBackGroundMostViewedPhilco {
    width: 286px;
    height: 300px;
    position: absolute;
    background: url(../img/background-philco.png) no-repeat;
    background-size: cover;
    z-index: 10;
}

.ContentCardProductMostViewed {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    height: 40px;
}

.ContentTitleCardProductMostViewed {
    align-self: stretch;
    color: #152942;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    width: 275px;
}

.ContentCodesCardProductMostViewed {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.ContentCodesTextCardProductMostViewed {
    flex: 1 0 0;
    color: #111;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.CardProductMostViewedSelo {
    display: flex;
    width: 48px;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding: 3px;
    z-index: 1200;
}

    .CardProductMostViewedSelo img {
        width: 48px;
    }

.CarItemMostViewed {
    height: 300px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.CarItemMostViewedImage {
    display: grid;
    place-items: center;
    position: relative;
    width: 280px;
}

.product-image-mostviewed {
    position: absolute;
    z-index: 100;
    top: 57px;
}

.Image-Product-MostViewed {
    justify-content: center;
    align-items: center;
    height: 204px;
    flex-grow: 0;
    object-fit: contain;
}

.CardProductMostViewed:hover .Image-Product-MostViewed {
    transform: scale(1.2);
    transition: transform 0.5s ease;
}

/* Promotional Area */
#PromotionalSectionMobile {
    display: none;
}

#PromotionalSection {
    max-width: 1440px;
    width: 100%;
    display: flex;
    padding: 64px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    position: relative;
}

.Promotional-Content {
    height: 44px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.Promotional-Title {
    flex-grow: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.8px;
    text-align: center;
}

.PromotionalCarouselControl {
    position: absolute;
    height: 20px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 60px;
    right: 0px;
    gap: 12px;
}

.PromotionalCarouselControlPaging {
    width: 100%;
    height: 24px;
    flex-grow: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    margin-top: 8px;
    letter-spacing: normal;
    text-align: left;
}

.PromotionalCarouselControlIcon {
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 24px;
    border-radius: 300px;
    color: #000;
    border: 1px solid #152942;
    font-size: 18px;
    font-weight: normal;
    background-color: #FFF;
    width: 24px;
    height: 24px;
    border-radius: 100px;
}

    .PromotionalCarouselControlIcon:hover {
        background-color: #152942;
        color: white;
    }

.PromotionalCarousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 16px;
    align-self: stretch;
}

.CardProductPromotional {
    display: flex;
    width: 286px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
    background: #FFF;
    border: 3px solid #FFF;
    height: 396px;
}

    .CardProductPromotional:hover {
        border: 3px solid #152942;
    }

        .CardProductPromotional:hover .Image-Product-Promotional {
            height: 230px;
            transition: height 0.5s ease;
        }

.CarItemPromotional {
    height: 300px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.product-image-Promotional {
    position: absolute;
    z-index: 0;
}

.Image-Product-Promotional {
    justify-content: center;
    align-items: center;
    height: 204px;
    flex-grow: 0;
    object-fit: contain;
}

.CarItemPromotionalContent {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.CarItemPromotionalDescription {
    align-self: stretch;
    color: #152942;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
}

.CarItemPromotionalCodes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.CarItemPromotionalCodesText {
    flex: 1 0 0;
    color: #111;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.CarItemPromotionalSelo {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 1000;
}

.CarItemPromotionalTag {
    display: flex;
    align-items: flex-start;
}

.CarItemPromotionalBadge {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: #152942;
}

.CarItemPromotionalBadgeText {
    color: var(--Default-White, #FFF);
    /* Britânia/Montserrat/Text 2XS/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 160% */
}

.ButtonPromotional {
    display: flex;
    padding-left: 0px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    cursor: pointer;
}

.MorePromotional {
    color: #FFF;
    /* Britânia/Montserrat/Text MD/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    border-radius: 8px;
    background: #00568C;
    padding: 12px 20px;
}

    .MorePromotional:hover {
        background: #00126D;
    }

.SeloBritaniar {
    width: 140px;
    height: 140px;
    margin-top: -150px;
    position: absolute;
    right: 0px;
    z-index: 10;
}
/* Mosaic Section */
#MosaicSection {
    width: 100%;
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    background: linear-gradient(180deg, #152942 0.51%, #000 119.59%);
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
    position: relative;
}

#MosaicSectionMobile {
    display: none;
}

.MosaicContent {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.MosaicHeading {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}

.MosaicHeadingText {
    color: #FFF;
    text-align: center;
    /* Britânia/Montserrat/Display MD/Bold */
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px; /* 110% */
    letter-spacing: -0.8px;
}

.MosaicCard {
    display: grid;
    height: 635.2px;
    row-gap: 24px;
    column-gap: 24px;
    align-self: stretch;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

    .MosaicCard iframe {
        width: 100%;
        height: 100%;
        border-radius: 16px;
    }

.MosaicFrame1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    grid-row: 1 / span 2;
    grid-column: 1 / span 2;
    justify-self: stretch;
}

.MosaicFrame1Image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    width: 100%;
    height: 100%;
}

    .MosaicFrame1Image img {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
        max-width: 100%;
        height: 100%;
    }

.MosaicFrame2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    grid-row: 2 / span 3;
    grid-column: 4 / span 1;
}

.MosaicFrame2Image {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    border-radius: 16px;
    width: 100%;
    height: 100%;
}

    .MosaicFrame2Image img {
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.MosaicFrame3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    grid-row: 1 / span 1;
    grid-column: 4 / span 1;
}

.MosaicFrame3Image {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    width: 100%;
    height: 100%;
}

    .MosaicFrame3Image img {
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.MosaicFrame4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    grid-row: 1 / span 2;
    grid-column: 3 / span 1;
}

.MosaicFrame4Image {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    width: 100%;
    height: 100%;
}

    .MosaicFrame4Image img {
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.MosaicFrame5 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    grid-row: 3 / span 2;
    grid-column: 2 / span 2;
    justify-self: stretch;
}

.MosaicFrame5Image {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    width: 100%;
    height: 100%;
}

    .MosaicFrame5Image img {
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.MosaicFrame6 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-row: 3 / span 2;
    grid-column: 1 / span 1;
}

.MosaicFrame6Image {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    width: 100%;
    height: 100%;
}

    .MosaicFrame6Image img {
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.MemorialElements {
    position: absolute;
    top: -24px;
}

/*   Footer */
footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    max-width: 1440px;
}

.ContainerFooter1 {
    max-width: 1440px;
    display: flex;
    padding: 48px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    background: #152942;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}


.FooterBrands {
    display: flex;
    align-items: center;
    gap: 24px;
}

.FooterBrandBritania {
    display: flex;
    width: 117px;
    height: 24px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 39/8;
}


.FooterBrandPhilco {
    width: 81px;
    height: 24px;
    aspect-ratio: 27/8;
}

.RowFooter {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.Col1Footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

    .Col1Footer span {
        align-self: stretch;
        color: #8C898C;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
    }

.ActionCol1Footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Britnia-Text-Primary, #152942);
    cursor: pointer;
}

    .ActionCol1Footer:hover {
        background: #051932;
    }

    .ActionCol1Footer span {
        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
    }

.Col2Footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
}

    .Col2Footer span {
        align-self: stretch;
        color: #8C898C;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
    }

.ActionCol2Footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Britnia-Text-Primary, #152942);
    cursor: pointer;
}

.ActionCol2FooterLogin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Britnia-Text-Primary, #152942);
    cursor: pointer;
}

.ActionCol2Footer:hover {
    background: #051932;
}

.ActionCol2Footer span {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.ActionCol2FooterLogin button {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #CD9A33;
    color: #FFF;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    cursor: pointer;
}

    .ActionCol2FooterLogin button:hover {
        background: #85571B;
    }

.Col3Footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
}

    .Col3Footer span {
        align-self: stretch;
        color: #8C898C;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
    }

.ActionCol3Footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.ActionCol3FooterRow {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex
}

.ActionCol3FooterRowItem {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    background: var(--Britnia-Primary-Main, #152942);
}

    .ActionCol3FooterRowItem:hover {
        background: #051932;
    }

    .ActionCol3FooterRowItem img {
        width: 24px;
        height: 24px;
    }

.ContainerFooter2 {
    display: flex;
    padding-bottom: 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: #F8F8F8;
}

    .ContainerFooter2 span {
        display: flex;
        padding-top: 24px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        color: var(--Neutral-Gray-700, #404040);
        text-align: center;
        /* Britânia/Montserrat/Text XS/Regular */
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 150% */
    }

/*Menu*/
.Menu-Categoria {
    width: 138px !important;
    text-align: center;
    position: relative;
    cursor: pointer;
}

#MenuSuperior {
    position: absolute;
    top: 49px;
    left: 0;
    z-index: 1001;
    flex-direction: row;
    justify-content: flex-start;
    display: flex;
    align-items: flex-start;
    gap: 1px;
    flex: 1 0 0;
}

#sidebarFilter {
    display: none;
}

.MenuItem {
    width: 90%;
    position: relative;
    width: 80px;
    font-size: 12px;
    font-weight: 600;
    padding-right: 8px;
}

.iconMenu {
    position: absolute;
    font-size: 11px;
    padding: 3px;
    text-align: right;
    right: 5px;
    top: 30%;
}

#MenuSuperiorCategorias {
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    height: 100%;
    max-height: 600px;
}

    #MenuSuperiorCategorias div:first-child {
        border-radius: 8px 8px 0px 0px;
    }

    #MenuSuperiorCategorias div:last-child {
        border-radius: 0px 0px 8px 8px;
    }

.MenuSuperiorCategoria a {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: #666;
    width: 100%;
}

    .MenuSuperiorCategoria a:hover {
        font-family: 'Montserrat', sans-serif;
        text-decoration: none;
        Menu-Categoria
    }

#MenuSuperiorSubCategorias a {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: #666;
}

    #MenuSuperiorSubCategorias a:hover {
        font-family: 'Montserrat', sans-serif;
        text-decoration: none;
        color: #fff;
    }

#MenuSuperiorCategorias div {
    width: 138px;
    padding: 7px 12px;
    position: relative;
    cursor: pointer;
    text-align: left;
    flex-direction: column;
    align-items: start;
    font-family: 'Montserrat', sans-serif;
    color: #666;
}

    #MenuSuperiorCategorias div:hover {
        color: #fff;
        background-color: #00568C;
    }

#MenuSuperiorSubCategorias {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: auto;
    max-height: 400px;
}

    #MenuSuperiorSubCategorias div:first-child {
        border-radius: 8px 8px 0px 0px;
    }

    #MenuSuperiorSubCategorias div:last-child {
        border-radius: 0px 0px 8px 8px;
    }

    #MenuSuperiorSubCategorias div {
        width: 198px;
        padding: 7px 12px;
        cursor: pointer;
        text-align: left;
    }

        #MenuSuperiorSubCategorias div:hover {
            color: #fff;
            background-color: #00568C;
        }

/* Categoria Page */
.ElementosCategoria {
    position: absolute;
    bottom: -25px;
}

#ResultCategoria {
    display: flex;
    padding: 80px 0px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    align-self: stretch;
    width: 100%;
}

#ResultCategoriaMobile {
    display: none;
}

.produtosPageCategoria {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    max-width: 1440px;
    padding: 20px;
    width: 100%;
}

#FilterPageCategoria {
    display: flex;
    width: 270px;
    padding: 24px 16px 0px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border-radius: 16px;
    background: #FFF;
}

.TitleFilterPageCategoria {
    display: flex;
    padding: 16px 0;
    justify-content: left;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    flex: 1 0 0;
    color: #152942;
    /* Britânia/Montserrat/Display XS/Bold */
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
    border-bottom: 1px solid #ccc;
}

.ListSubCategoriesPageCategoria {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
    padding-bottom: 14px;
    width: 100%;
}

.ListSubCategoriesPageCategoriaTitle {
    display: flex;
    height: 40px;
    padding: 8px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 4px;
    background: var(--Neutral-Gray-100, #EDEDED);
    position: relative;
    color: #152942;
    font-weight: bold;
}

    .ListSubCategoriesPageCategoriaTitle i {
        position: absolute;
        right: 6px;
    }

.ListContentCheckboxSubCategoriesPageCategoria {
    max-height: 800px;
    width: 100%;
    overflow: auto;
}

.ListCheckboxSubCategoriesPageCategoria {
    display: flex;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 4px;
}

.CheckboxSubCategoriesPageCategoria {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 8px;
    color: var(--Britnia-Text-Secondary, #111);
    /* Britânia/Montserrat/Text MD/Regular */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    width: 100%;
}

    .CheckboxSubCategoriesPageCategoria input {
        margin-right: 18px;
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

.ResultadoSubCategoriesPageCategoria {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 0;
    width: 100%;
    padding-left: max(20px, 1vw);
    padding-right: max(20px, 1vw);
}

#resultSearchProductsPageCategoria {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to a new line */
    gap: 12px;
    margin: auto;
    justify-content: center;
    align-items: center;
    padding: 15px 0px;
    flex-grow: 6;
}

.ToolbarPageCategoria {
    display: flex;
    padding-bottom: 24px;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-grow: 1;
}

    .ToolbarPageCategoria input {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        align-self: stretch;
        color: var(--Britnia-Text-Secondary, #111);
        /* Britânia/Montserrat/Text MD/Regular */
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
        width: 100%;
        padding: 0px 12px;
        border: 1px solid #ccc !important;
    }

    .ToolbarPageCategoria button {
        display: flex;
        justify-content: center;
        align-items: center;
        display: flex;
        padding: 12px 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        background: #152942;
        color: var(--Default-White, #FFF);
        border: none;
        /* Britânia/Montserrat/Text MD/Semibold */
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
        width: 138px;
        cursor: pointer;
    }

        .ToolbarPageCategoria button:hover {
            background: #00126D;
        }

.ButtonFilterPageCategoria {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0px 0px 12px 0px;
    color: var(--Britnia-Text-Secondary, #111);
    /* Britânia/Montserrat/Text MD/Regular */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    width: 100%;
}

    .ButtonFilterPageCategoria button {
        display: flex;
        justify-content: center;
        align-items: center;
        display: flex;
        padding: 12px 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        background: #152942;
        color: var(--Default-White, #FFF);
        border: none;
        /* Britânia/Montserrat/Text MD/Semibold */
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        margin-left: 30px;
        width: 198px;
        cursor: pointer;
    }

        .ButtonFilterPageCategoria button:hover {
            background: #00126D;
        }


/* Component CardItem */

.CardProductComponent {
    width: 283px;
    height: 396px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px 0px;
    border-radius: 16px;
    background-color: #fff;
    border: 3px solid #fff;
    position: relative;
    cursor: pointer;
}

    .CardProductComponent:hover {
        border: 3px solid #152942;
        transition: border 1.5s ease;
    }

        .CardProductComponent:hover .CarItemImageProductComponent {
            transform: scale(1.4);
            transition: transform 0.5s ease;
        }

.CarItemComponent {
    display: flex;
    height: 300px;
    padding: 48px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    /* Hint to the browser for performance optimization */
    will-change: transform;
}

.CardProductDescriptionComponent {
    align-self: stretch;
    flex-grow: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.26;
    letter-spacing: normal;
    text-align: left;
    color: #152942;
    padding: 1px;
    z-index: 1;
}

.CardProductSecondDescriptionComponent {
    height: 32px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.CardProductCodeDescriptionComponent {
    height: 20px;
    flex-grow: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #111;
}

.CardProductIconDetailComponent {
    width: 28px;
    height: 28px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 100px;
    border: solid 1px #00568c;
    background-color: #fff;
    color: #00568c;
    cursor: pointer;
}

    .CardProductIconDetailComponent:hover {
        background-color: #00568c;
        color: #fff;
    }

.CardProductContentComponent {
    height: 96px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    background-color: #fff;
    position: relative;
}

.CarItemImageProductComponent {
    justify-content: center;
    align-items: center;
    height: 190px;
    flex-grow: 0;
    object-fit: contain;
    max-width: 2450px;
}

.CarItemImageComponent {
    position: absolute;
    z-index: 0;
}

.CardProductTagComponent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: -12px;
    z-index: 100;
}

.CardProductBadgeExclusivoComponent {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--Britnia-Accent-Main, #CD9A33);
}

.CardProductBadgeReleaseComponent {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--Britnia-Primary-Main, #152942);
}

.CardProductBadgeReleaseComponentPhilco {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--Britnia-Primary-Main, #000);
}

.CardProductTagComponent span {
    color: var(--Default-White, #FFF);
    /* Britânia/Montserrat/Text 2XS/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 160% */
}

.CardProductBadgeReleaseComponentPhilco span {
    color: var(--Default-White, #FFF);
    /* Britânia/Montserrat/Text 2XS/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 160% */
}

img.CardProductSeloBritaniaComponent {
    width: 44px;
    height: 46px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    border-radius: 100px;
    background-image: radial-gradient(circle at 50% 50%, #00568c 23%, #152942 65%);
    position: absolute;
    left: 3px;
    z-index: 1;
}

img.CardProductSeloBritaniaComponentMobile {
    width: 24px;
    height: 24px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    border-radius: 100px;
    background-image: radial-gradient(circle at 50% 50%, #00568c 23%, #152942 65%);
    position: absolute;
    left: 3px;
    z-index: 1;
}

img.CardProductSeloPhilcoComponent {
    display: flex;
    width: 48px;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 8px;
    top: 8.334px;
    z-index: 1;
}

img.CardProductSeloPhilcoComponentMobile {
    display: flex;
    width: 24px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 8px;
    top: 8.334px;
    z-index: 1;
}

/* Page Produto */


.ProdutoPage {
    max-width: 1440px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
    height: 100%;
}

#ProdutoMain {
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}

#ProdutoMainMobile {
    display: none;
}

.ProdutoMainDetail {
    display: flex;
    max-width: 1440px;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 48px;
    padding: 0;
}

.ProdutoMainGalery {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 461px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 16px;
    background: var(--Neutral-Default-White, #FFF);
    border: 3px solid transparent;
}

    .ProdutoMainGalery:hover {
        border-radius: 16px;
        transition: border 0.5s ease;
        border: 3px solid var(--Britnia-Secondary-Main, #00568C);
        background: var(--Neutral-Default-White, #FFF);
    }

        .ProdutoMainGalery:hover .ProdutoMainGaleryImage img {
            transform: scale(1.1);
            transition: transform 0.5s ease;
        }

.ProdutoMainGaleryImage {
    display: flex;
    padding: 64px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 461px;
    width: 100%;
    align-self: stretch;
    border: 3px solid transparent;
}



    .ProdutoMainGaleryImage img {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        max-width: 461px;
        width: 100%;
        align-self: stretch;
        transition: transform 0.3s ease;
        will-change: transform;
    }

.ProdutoMainContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 680px;
    padding: 0;
}

.ProdutoMainContainerContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.ProdutoMainContainerContentTitle {
    align-self: stretch;
    color: var(--Britnia-Text-Primary, #152942);
    /* Britânia/Montserrat/Display MD/Bold */
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 44px; /* 110% */
    letter-spacing: -0.8px;
}

.ProdutoMainContainerContentDescription {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

    .ProdutoMainContainerContentDescription span {
        align-self: stretch;
        color: var(--Britnia-Text-Secondary, #111);
        font-family: "Montserrat", sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px; /* 150% */
    }

.ProdutoMainContainerGallery {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
}

.ProdutoMainContainerGalleryItem {
    display: flex;
    width: 128px;
    height: 128px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: 3px solid var(--Britnia-Text-Disabled, #CECECE);
    background: var(--Neutral-Gray-100, #EDEDED);
    padding: 0;
    cursor: pointer;
}

.ProdutoMainContainerGalleryItemCard {
    display: flex;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
}

    .ProdutoMainContainerGalleryItemCard img {
        flex: 1 0 0;
        max-height: 120px;
        max-width: 120px;
    }

.ProdutoMainContainerGalleryItemMais {
    display: flex;
    max-width: 128px;
    max-height: 128px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    gap: 8px;
    background: var(--Britnia-Accent-Main, #CD9A33);
    cursor: pointer;
    padding: 40px;
}

.ImgAtivo {
    border: 3px solid transparent;
}

    .ImgAtivo:hover {
        border-radius: 16px;
        transition: border 0.5s ease;
        border: 3px solid var(--Britnia-Secondary-Main, #00568C);
    }

        .ImgAtivo:hover .ProdutoMainContainerGalleryItemCard img {
            transform: scale(1.1);
            transition: transform 0.5s ease;
        }

.ProdutoMainContainerGalleryItemMais:hover {
    background: #85571B;
}

.ProdutoMainContainerGalleryItemMais i {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #FFF;
}

.ProdutoMainContainerGalleryItemMais span {
    width: 100%;
    color: #FFF;
    text-align: center;
    /* Britânia/Montserrat/Text SM/Semibold */
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

#ProdutoDiferenciais {
    display: flex;
    padding: 0 0px 80px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}

.ProdutoDiferenciaisContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.ProdutoDiferenciaisContainerTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

    .ProdutoDiferenciaisContainerTitle span {
        flex: 1 0 0;
        color: var(--Britnia-Text-Primary, #152942);
        /* Britânia/Montserrat/Display MD/Bold */
        font-family: 'Montserrat', sans-serif;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
    }

.ProdutoDiferenciaisContainerDescription {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.ProdutoDiferenciaisContainerDescriptionItem {
    display: flex;
    padding: 16px 0;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-bottom: 1px solid var(--Britnia-Text-Disabled, #CECECE);
}

.ProdutoDiferenciaisContainerDescription span {
    flex: 1 0 0;
    color: var(--Britnia-Text-Secondary, #111);
    text-align: justify;
    /* Britânia/Montserrat/Text XL/Regular */
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
}

#ProdutoDetails {
    display: flex;
    padding: 32px 0px 80px 0px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    background: var(--Britnia-Accent-Main, #CD9A33);
    position: relative;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}

.ProdutoDetailsElementos {
    position: absolute;
    top: -24px;
}

.ProdutoDetailsHeader {
    display: flex;
    padding: 32px 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.ProdutoDetailsHeaderContent {
    display: flex;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

    .ProdutoDetailsHeaderContent span {
        flex: 1 0 0;
        color: var(--Neutral-Default-White, #FFF);
        /* Britânia/Montserrat/Display MD/Bold */
        font-family: 'Montserrat', sans-serif;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
    }

.ProdutoDetailsHeaderContentButton {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Britnia-Primary-Main, #152942);
    color: var(--Default-White, #FFF);
    /* Britânia/Montserrat/Text MD/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    cursor: pointer;
    border: none;
}

    .ProdutoDetailsHeaderContentButton:hover {
        background-color: #00126D;
    }

.ProdutoDetailsHeaderContentButtonMobile {
    display: none;
}

.ProdutoDetailsHeaderTabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.ProdutoDetailsHeaderTabsAction {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: max(1vw, 16px);
    align-self: stretch;
    flex-wrap: wrap; /* Allows items to wrap to a new line */
}

.ProdutoDetailsHeaderTabsCard {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 12px;
    background: var(--Neutral-Default-White, #FFF);
}

.ProdutoDetailsHeaderTabsActionButton {
    color: var(--Britnia-Primary-Main, #152942);
    /* Britânia/Montserrat/Text MD/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    display: flex;
    padding: 12px 2%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    border: none;
}

.ProdutoDetailsHeaderTabsActionButtonIsActive {
    background: var(--Britnia-Yankees-Blue-50, #CFDAD4);
}

.ProdutoDetailsHeaderTabsActionButton:hover {
    background: var(--Britnia-Yankees-Blue-50, #CFDAD4);
}

.ProdutoDetailsHeaderTabsCardContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    display: none;
}

.ProdutoDetailsHeaderTabsCardContentIsActive {
    display: block !important;
    color: #111;
}

.ProdutoDetailsHeaderTabsCardContentRow {
    display: flex;
    padding: 24px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.ProdutoDetailsHeaderTabsCardContent div:nth-child(odd) {
    background: var(--Neutral-Gray-50, #F8F8F8);
}

.ProdutoDetailsHeaderTabsCardContent div:nth-child(even) {
    background: var(--Neutral-Gray-50, #FFF);
}

.ProdutoDetailsHeaderTabsCardContentTitle {
    flex: 1 0 0;
    color: var(--Britnia-Text-Secondary, #111);
    /* Britânia/Montserrat/Text XL/Semibold */
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 150% */
}

.ProdutoDetailsHeaderTabsCardContentValue {
    flex: 1 0 0;
    color: var(--Britnia-Text-Secondary, #111);
    /* Britânia/Montserrat/Text XL/Regular */
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
}

#ProdutoDescription {
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}

.ProdutoDescriptionContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
}

.ProdutoDescriptionContainerTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

    .ProdutoDescriptionContainerTitle span {
        flex: 1 0 0;
        color: var(--Britnia-Text-Primary, #152942);
        /* Britânia/Montserrat/Display MD/Bold */
        font-family: 'Montserrat', sans-serif;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
    }

.ProdutoDescriptionContainerTitleButton {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--Britnia-Accent-Main, #CD9A33);
    color: var(--Neutral-Default-White, #FFF);
    padding: 12px 24px;
    gap: 8px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    border: none;
}

.ProdutoDescriptionContainerTitleButtonMobile {
    display: none;
}

.ProdutoDescriptionContainerTitleButton:hover {
    background: #85571B;
}

.ProdutoDescriptionContainerText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.ProdutoDescriptionContainerTabs {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.ProdutoDescriptionContainerActions {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.ProdutoDescriptionContainerDescription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

    .ProdutoDescriptionContainerDescription span {
        color: var(--Britnia-Text-Secondary, #111);
        text-align: justify;
        /* Britânia/Montserrat/Text XL/Regular */
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px; /* 150% */
        white-space: pre-wrap;
    }

.ProdutoDescriptionContainerActions input[type="radio"] {
    accent-color: #152942;
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
    border-radius: 16px;
    background: var(--Britnia-Primary-Main, #152942);
    fill: var(--Neutral-Default-White, #FFF);
}


.ProdutoDescriptionContainerActions label {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--Britnia-Text-Primary, #152942);
    border-radius: 8px;
    /* Britânia/Montserrat/Text MD/Semibold */
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    cursor: pointer;
}

    .ProdutoDescriptionContainerActions label:hover {
        background-color: #eee;
    }

        .ProdutoDescriptionContainerActions label:hover input[type="radio"] {
            background-color: #eee;
            accent-color: #152942;
        }

    /* Style the label when its associated radio input is checked */
    .ProdutoDescriptionContainerActions label:has(input:checked) {
        background-color: #eee; /* Green background when selected */
    }

#ProdutoDescriptionTitulo {
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    background: var(--Britnia-Primary-Main, #152942);
    position: relative;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}

.ElementosProdutoDescriptionTitulo {
    position: absolute;
    top: -24px;
}

.ProdutoDescriptionTituloContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.ProdutoDescriptionTituloContainerContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}

    .ProdutoDescriptionTituloContainerContent span {
        align-self: stretch;
        color: var(--Neutral-Default-White, #FFF);
        /* Britânia/Montserrat/Display MD/Bold */
        font-family: Montserrat;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
    }

.ProdutoDescriptionTituloContainerSubtitle {
    display: flex;
    padding: 32px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-bottom: 1px solid var(--Neutral-Gray-300, #B6B6B6);
}

    .ProdutoDescriptionTituloContainerSubtitle span {
        flex: 1 0 0;
        color: var(--Britnia-Text-Disabled, #CECECE);
        /* Britânia/Montserrat/Display XS/Semibold */
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px; /* 133.333% */
    }

.ProdutoDescriptionTituloContainerOptions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.ProdutoDescriptionTituloContainerOption {
    display: flex;
    padding: 16px 0;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-bottom: 1px solid var(--Britnia-Yankees-Blue-400, #526F76);
}

    .ProdutoDescriptionTituloContainerOption span {
        flex: 1 0 0;
        color: var(--Neutral-Default-White, #FFF);
        /* Britânia/Montserrat/Text XL/Regular */
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px; /* 150% */
    }

    .ProdutoDescriptionTituloContainerOption button {
        display: flex;
        justify-content: center;
        align-items: center;
        display: flex;
        padding: 12px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 100px;
        background: var(--Britnia-Accent-Main, #CD9A33);
        border: none;
        color: #FFF;
        cursor: pointer;
        width: 48px;
        height: 48px;
    }

        .ProdutoDescriptionTituloContainerOption button:hover {
            background: #85571B;
        }

#ProdutoMateriaisApoio {
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}

#MateriaisApoio {
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
    max-width: 1440px;
    width: 100%;
}

.ProdutoMateriaisApoioTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

    .ProdutoMateriaisApoioTitle span {
        flex: 1 0 0;
        color: var(--Britnia-Text-Primary, #152942);
        /* Britânia/Montserrat/Display MD/Bold */
        font-family: Montserrat;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
    }

.ProdutoMateriaisApoioCarrousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
}

.ProdutoMateriaisApoioCarrouselCards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1 0 0;
}

.ProdutoMateriaisApoioCarrouselCard {
    max-width: 220px;
    flex-grow: 1;
    display: flex;
    height: 183px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    background: var(--Neutral-Gray-200, #CECECE);
    cursor: pointer;
    border: 2px solid var(--Britnia-Primary-Light, #CECECE);
}

.ProdutoMateriaisApoioButton {
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Britnia-Accent-Main, #CD9A33);
    color: var(--Neutral-Default-White, #FFF);
    /* Britânia/Montserrat/Text MD/Semibold */
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    border: none;
    cursor: pointer;
}

    .ProdutoMateriaisApoioButton:hover {
        background: #85571B;
    }

.ProdutoMateriaisApoioCarrouselCardIcone {
    display: flex;
    padding: 32px 16px 0 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.ProdutoMateriaisApoioCarrouselCardTitle {
    display: flex;
    padding: 0 8px 16px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

    .ProdutoMateriaisApoioCarrouselCardTitle span {
        align-self: stretch;
        color: var(--Britnia-Primary-Main, #152942);
        text-align: center;
        /* Britânia/Montserrat/Text SM/Semibold */
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 142.857% */
    }

.ProdutoMateriaisApoioCarrouselCardTitle2 {
    display: flex;
    padding: 0 8px 16px 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

    .ProdutoMateriaisApoioCarrouselCardTitle2 span {
        color: var(--Britnia-Primary-Main, #152942);
        text-align: center;
        /* Britânia/Montserrat/Text MD/Semibold */
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
    }

.ProdutoMateriaisApoioCarrouselCardIcone i {
    align-self: stretch;
    color: var(--Britnia-Primary-Main, #152942);
    text-align: center;
    /* Britânia/Montserrat/Text MD/Semibold */

    font-size: 46px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.ProdutoMateriaisApoioCarrouselCardIcone img {
    width: 78px;
    height: 80px;
    aspect-ratio: 39/40;
}

.ProdutoMateriaisApoioCarrouselCard:hover {
    display: flex;
    height: 183px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    border: 2px solid var(--Britnia-Primary-Light, #90A8A4);
    background: var(--Neutral-Gray-50, #F8F8F8);
}

.ProdutoMateriaisApoioCarrouselCardChild:first-child {
    gap: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 100%;
}

.ProdutoMateriaisApoioCarrouselCard:hover .ProdutoMateriaisApoioCarrouselCardChild:last-child {
    display: block;
}

.ProdutoMateriaisApoioCarrouselCard:hover .ProdutoMateriaisApoioCarrouselCardChild:first-child {
    display: none;
}

.ProdutoMateriaisApoioCarrouselCardChild:last-child {
    gap: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 220px;
    display: none;
}

    .ProdutoMateriaisApoioCarrouselCardChild:last-child .ProdutoMateriaisApoioCarrouselCardIcone {
        margin-bottom: 16px;
    }

#ProdutoGallery {
    display: flex;
    padding: 80px 0px;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    background: var(--Britnia-Secondary-Main, #00568C);
    position: relative;
    padding-left: max(12px, 5vw);
    padding-right: max(12px, 5vw);
}

#ProdutoGalleryMobile {
    display: none;
}

.ElementosProdutoGallery {
    position: absolute;
    top: -24px;
}

.ProdutoGalleryContent {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.ProdutoGalleryContentButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    align-self: stretch;
}

.ProdutoGalleryContentTitle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
}

    .ProdutoGalleryContentTitle span {
        color: var(--Neutral-Default-White, #FFF);
        text-align: center;
        /* Britânia/Montserrat/Display MD/Bold */
        font-family: Montserrat;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 110% */
        letter-spacing: -0.8px;
    }

.ProdutoGalleryGrid {
    display: grid;
    height: 800px;
    row-gap: 24px;
    column-gap: 24px;
    align-self: stretch;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ProdutoGalleryGridItem1 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    grid-row: 1 / span 2;
    grid-column: 4 / span 1;
    border-radius: 16px;
    border-radius: 16px;
    background: #FFF;
}

    .ProdutoGalleryGridItem1 img {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.ProdutoGalleryGridItem2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-row: 4 / span 2;
    grid-column: 3 / span 2;
    border-radius: 16px;
    background: #FFF;
    border-radius: 16px;
    background: #FFF;
}

    .ProdutoGalleryGridItem2 img {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.ProdutoGalleryGridItemImage {
    border: 3px solid transparent;
}

    .ProdutoGalleryGridItemImage:hover {
        border: 3px solid #152942;
        transition: border 0.5s ease;
    }

        .ProdutoGalleryGridItemImage:hover img {
            transform: scale(1.1);
            transition: transform 0.5s ease;
        }

.ProdutoGalleryGridItem3 {
    display: flex;
    padding: 32px 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-row: 1 / span 3;
    grid-column: 1 / span 2;
    border-radius: 16px;
    background: #FFF;
}

    .ProdutoGalleryGridItem3 img {
        display: flex;
        padding: 10px 10px;
        flex-direction: row;
        width: auto;
        height: 100%;
        align-items: center;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
    }

.ProdutoGalleryGridItem4 {
    display: flex;
    padding: 24px 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-row: 1 / span 2;
    grid-column: 3 / span 1;
    border-radius: 16px;
    background: #FFF;
}

    .ProdutoGalleryGridItem4 img {
        display: flex;
        padding: 10px 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
        width: 100%;
        height: 100%;
    }

.ProdutoGalleryGridItem5 {
    display: flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-row: 3 / span 1;
    grid-column: 4 / span 1;
    border-radius: 16px;
    background-color: #FFF;
}

    .ProdutoGalleryGridItem5 img {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
        height: 100%;
    }

.ProdutoGalleryGridItem6 {
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-row: 3 / span 1;
    grid-column: 3 / span 1;
    border-radius: 16px;
    background-color: #FFF;
}

    .ProdutoGalleryGridItem6 img {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
        height: 100%;
    }

.ProdutoGalleryGridItem7 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    grid-row: 4 / span 2;
    grid-column: 2 / span 1;
    border-radius: 16px;
    background: #FFF;
}

    .ProdutoGalleryGridItem7 img {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
        width: 100%;
        height: 100%;
    }

    .ProdutoGalleryGridItem7 iframe {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
        width: 100%;
        height: 100%;
        border-radius: 16px;
    }


.ProdutoGalleryGridItem8 {
    display: flex;
    padding: 24px 24px;
    justify-content: space-between;
    align-items: flex-start;
    grid-row: 4 / span 2;
    grid-column: 1 / span 1;
    border-radius: 16px;
    background: #FFF;
}

    .ProdutoGalleryGridItem8 img {
        display: flex;
        padding: 10px 0;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Radius-radius-3, 12px);
        width: 100%;
        height: 100%;
    }


/* Screen */

@media screen and (max-width: 768px) {
    .CardBannerRelease {
        display: none;
    }

    .ButtonLoginBanner {
        display: none;
    }

    .Actions {
        width: 5%;
        padding-right: 5px;
    }

    .Navigation {
        width: 80%;
    }

    .MosaicCard {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .RowFooter {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .Col2Footer {
        display: none;
    }

    .Col3Footer {
        width: 100%;
    }

    .ActionCol3FooterRow {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: auto;
    }

    .ActionCol3Footer {
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .FooterBrands {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .ProdutoDetailsHeaderContentButtonMobile {
        display: none;
    }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 15000;
    top: 0;
    max-width: 1440px;
    width: 100%;
    height: 100%;
    margin: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.modalContent {
    max-width: 1440px;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
}

/* Modal Content */
.modal-content {
    position: absolute;
    top: 50%; /* Moves the top edge to the vertical center */
    transform: translateY(-50%);
    background-color: black;
    opacity: 0.98;
    margin: auto;
    width: 100%;
    max-height: 800px;
}

.mySlides {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: var(--Radius-radius-3, 12px);
    width: 100%;
    height: 100%;
}

.mySlidesImg {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--Radius-radius-3, 12px);
    width: 100%;
    height: 480px;
    max-width: 1440px;
    max-height: 480px;
}

    .mySlidesImg img {
        max-height: 100%; /* Image won't exceed container's height */
        max-width: 100%; /* Image won't exceed container's width */
        height: auto; /* Maintains aspect ratio based on width or height */
        width: auto;
    }

.row {
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Shows scrollbar only when content overflows */
    overflow-y: hidden; /* Hides vertical scrollbar */
    padding: 0px 10px;
    gap: 1rem;
}



/* Create four equal columns that floats next to eachother */
.column {
    max-width: 120px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    scroll-snap-type: x mandatory;
    flex-shrink: 0;
    margin: 2px;
    width: 100%;
}

/* The Close Button */
.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.download {
    color: white;
    position: absolute;
    top: 21px;
    right: 65px;
    font-size: 18px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

.download:hover,
.download:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 8px 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 300px;
    user-select: none;
    -webkit-user-select: none;
    color: white;
    border: 1px solid white;
}

.prev {
    left: 10px;
}
/* Position the "next button" to the right */
.next {
    right: 10px;
    color: white;
    border: 1px solid white;
    padding: 8px 16px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: white;
        color: black;
    }

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Caption text */
.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

img.demo {
    opacity: 0.6;
    margin: 5px;
    border-radius: 16px;
    width: 100%;
}

.active {
    border: 2px solid white;
    border-radius: 16px;
}


.demo:hover {
    opacity: 1;
    transform: scale(1.1);
    transition: transform 0.5s ease;
    cursor: pointer;
    border: 2px solid #cd9a33;
    border-radius: 16px;
}

img.hover-shadow {
    transition: 0.3s;
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.HeaderNavigationMobile {
    display: none;
}

#CategoryMobileSection {
    display: none;
}

#ReleaseSectionMobile {
    display: none;
}

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

    .Header-Navigation {
        display: none;
    }

    #search-content-banner {
        display: none;
    }

    .HeaderNavigationMobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        position: sticky;
        z-index: 99999999999999999;
        top: 0;
        background-color: #FFF;
        padding: 0;
    }

    .HeaderNavigationMobileInactive {
        display: none;
    }

    #sidebar nav {
        width: 100%;
        padding: 0;
    }

    .HeaderNavigationContentMobile {
        display: flex;
        max-width: 375px;
        width: 100%;
        height: 64px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .HeaderNavigationContentContainerMobile {
        display: flex;
        height: 24px;
        padding: 0 16px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        align-self: stretch;
    }

    .HeaderNavigationContentContainerButtonMobile {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 16px;
        top: 30px;
    }

    .HeaderNavigationContentContainerBrandsMobile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-left: 16px;
        margin-top: 15px;
        gap: 16px;
    }

    #sidebar {
        position: fixed;
        width: 100%;
        background-color: white;
        top: 0;
        left: -100%; /* Hide off-screen */
        transition: left 0.3s ease; /* Smooth transition */
        z-index: 999999;
        display: flex;
        padding: 0;
        height: 100%;
        overflow: scroll;
    }

        #sidebar i {
            display: flex;
            padding: 8px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 100px;
            background: #FFF;
        }

            #sidebar i:hover {
                background: #CFDAD4;
            }

        #sidebar.active {
            left: 0; /* Slide in when active class is added by JS */
            border-radius: 0px;
        }

    #sidebarFilter {
        position: fixed;
        width: 80%;
        background-color: white;
        top: 0;
        right: -100%; /* Hide off-screen */
        transition: left 0.3s ease; /* Smooth transition */
        z-index: 999999999999999999999999999999999999999999999;
        display: flex;
        height: 100%;
        overflow: scroll;
        padding: 10px 0px 0px 20px;
    }

        #sidebarFilter.active {
            right: 0; /* Slide in when active class is added by JS */
            border-radius: 0px;
        }


    .Banner {
        display: flex;
        width: 100%;
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .HeaderNavigationMenuListMobile {
        display: flex;
        padding: 16px 16px 48px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
        background: var(--Neutral-Default-White, #FFF);
    }

    .HeaderNavigationSearchMobile {
        display: flex;
        height: 48px;
        padding: 2px;
        align-items: flex-start;
        align-self: stretch;
        position: relative;
    }

    .HeaderNavigationSearchInputMobile {
        width: 100%;
        display: flex;
        height: 48px;
        padding: 2px;
        padding-left: 18px;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 300px;
        border: 1px solid var(--Neutral-Gray-200, #CECECE);
        background: var(--Neutral-Default-White, #FFF);
        color: var(--Britnia-Text-Secondary, #111);
        /* Britânia/Montserrat/Text SM/Regular */
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
    }

        .HeaderNavigationSearchInputMobile:focus-visible {
            outline-color: transparent;
            border: 3px solid #00568c;
        }

    .SearchIconMenuMobile {
        position: absolute; /* Icon position is absolute relative to its parent container */
        right: 8px; /* Adjust as needed for position */
        top: 30px;
        transform: translateY(-50%); /* Centers the icon vertically */
        color: #fff; /* Styles the icon color */
        cursor: pointer;
        z-index: 9999999999999;
        border-radius: 100px;
        background: var(--Britnia-Secondary-Main, #00568C);
        padding: 13px;
    }

    #CloseIconMenuMobile {
        position: absolute; /* Icon position is absolute relative to its parent container */
        right: 54px; /* Adjust as needed for position */
        top: 28px;
        transform: translateY(-50%); /* Centers the icon vertically */
        color: #000; /* Styles the icon color */
        cursor: pointer;
        z-index: 9999999999999;
        border-radius: 100px;
        background: transparent !important;
        display: none;
    }

    .MenuCategoryMobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        align-self: stretch;
        width: 100%;
    }

        .MenuCategoryMobile button:hover {
            background-color: #CFDAD4;
        }

    .MenuCategoryMobileActive {
        background-color: #CFDAD4 !important;
    }

    .MenuCategoryMobile button {
        background-color: white;
        border: 1px solid white;
        width: 100%;
        display: flex;
        padding: 8px 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        color: var(--Britnia-Primary-Main, #152942);
        text-align: center;
        /* Britânia/Montserrat/Text MD/Semibold */
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
    }

    .MenuCategoryMobile i {
        background-color: transparent !important;
    }

    #MenuCategoryListMobile {
        display: none;
        width: 100%;
        padding: 0;
        position: relative;
    }

    .MenuSubCategoryListMobile {
        display: none;
        width: 100%;
        padding: 0;
        position: relative;
    }

    .MenuSuperiorCategoriaMobile {
        background-color: white;
        display: flex;
        padding: 12px;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }

        .MenuSuperiorCategoriaMobile:hover {
            background-color: #152942;
            color: white;
        }

    .MenuSuperiorCategoriaMobileActive {
        background-color: #cecece;
    }

    .MenuSuperiorCategoriaMobile i {
        position: absolute;
        top: 2px;
        right: 0;
        background-color: transparent !important;
    }

    #CategorySection {
        display: none;
    }

    #CategoryMobileSection {
        display: flex;
        padding: 0px;
        flex-direction: column;
        align-items: center;
        position: relative;
        align-self: stretch;
        background: var(--Neutral-Gray-100, #EDEDED);
    }

    #CategoryMobile {
        display: flex;
        padding: 24px 24px;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        align-self: stretch;
        background: var(--Neutral-Gray-100, #EDEDED);
        max-width: 370px;
    }


    .CategoriaContainerMobile {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Shows scrollbar only when content overflows */
        overflow-y: hidden; /* Hides vertical scrollbar */
        -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
        /* 3. Implement scroll snapping for a carousel effect */
        scroll-snap-type: x mandatory; /* Ensures items snap into place */
        /* Optional: Hide the scrollbar visually for a cleaner look */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        width: 93vw;
        gap: 1rem;
    }

        .CategoriaContainerMobile::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

    .CardsCategoryMobile {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-shrink: 0; /* Prevents items from shrinking to fit the container */
        width: 80vw;
        width: 100%;
        padding: 0;
        scroll-snap-align: start; /* Snaps the start edge of the item to the start edge of the container */
    }

    .CardsCategoryMobileActive {
        display: flex;
    }

    .CardCategoryMobile {
        display: flex;
        width: 164px;
        height: 106px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        background: var(--Neutral-Gray-200, #CECECE);
        cursor: pointer;
    }

    .CategoryItemMobile {
        display: flex;
        padding: 32px 16px 0 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        width: 132px;
    }

        .CategoryItemMobile img {
            display: flex;
            width: 51px;
            height: 32px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            filter: invert(10%) sepia(35%) saturate(3025%) hue-rotate(185deg) brightness(93%) contrast(93%);
        }

    .ContentCategoryMobile {
        display: flex;
        padding-bottom: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

        .ContentCategoryMobile span {
            align-self: stretch;
            color: var(--Britnia-Primary-Main, #152942);
            text-align: center;
            /* Britânia/Montserrat/Text XS/Semibold */
            font-family: Montserrat;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px; /* 150% */
        }

    .CategoryPaginationMobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0px 0px 12px 0px;
        gap: 6px;
        align-self: stretch;
    }

        .CategoryPaginationMobile span {
            color: var(--Neutral-Gray-700, #404040);
            /* Britânia/Montserrat/Text SM/Regular */
            font-family: Montserrat;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
        }

        .CategoryPaginationMobile i {
            flex-grow: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 12px;
            border-radius: 300px;
            color: #cd9a33;
            border: 1px solid #cd9a33;
            font-size: 10px;
            font-weight: normal;
            background-color: white;
            width: 12px;
            height: 12px;
        }



        .CategoryPaginationMobile:hover i {
            background-color: #cd9a33;
            color: white;
        }


    .SubCategoryListHomeMobile {
        width: 95%;
        background-color: white;
        border-radius: 30px;
        left: 2.5%;
        top: 70px;
        position: fixed;
        z-index: 9999999999999999999999999999999999999;
        height: 80%;
    }

    .SubCategoryListHomeMobileInactive {
        display: none;
    }
    /* -------------- Search Banner                   */
    .SearchContainerMobile {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Shows scrollbar only when content overflows */
        overflow-y: hidden; /* Hides vertical scrollbar */
        -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
        /* 3. Implement scroll snapping for a carousel effect */
        scroll-snap-type: x mandatory; /* Ensures items snap into place */
        /* Optional: Hide the scrollbar visually for a cleaner look */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        width: 100vw;
        gap: 1rem;
    }

        .SearchContainerMobile::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

    .SearchMobile {
        width: 350px;
        margin-top: 20px;
        height: 45px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        border-radius: 300px;
        border: solid 3px transparent;
        background-color: #fff;
        position: relative;
        z-index: 500;
    }

        .SearchMobile:hover {
            border: solid 1px #cecece;
            opacity: 1;
        }


    #resultSearchBannerMobile {
        width: 355px;
        height: auto;
        flex-grow: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 85px;
        border-radius: 10px;
        border: solid 1px #cecece;
        background-color: #f8f8f8;
        top: 25px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        position: absolute;
        display: none;
        z-index: 499;
    }


    .SearchMobile input {
        padding-right: 40px; /* Add padding to prevent text from overlapping the icon */
        padding-left: 15px;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 50px;
        border: none;
        font-size: 16px;
        font-family: 'Montserrat',sans-serif;
        font-size: 16px;
        color: #000;
        margin: 3px;
    }

        .SearchMobile input:focus-visible {
            outline-color: transparent;
            border: none;
        }

    /* Basic styling for the icon */
    .cancel-icon-input-banner-mobile {
        font-size: 22px !important; /* Set the size */
        color: black; /* Default color (Google's gray) */
        cursor: pointer; /* Change cursor to a hand pointer on hover */
        transition: color 0.3s ease; /* Smooth transition for color change */
        padding: 10px; /* Add padding to increase the hover area */
        border-radius: 50%; /* Optional: Make the hover area a circle for a Material Design 'icon button' look */
        background-color: transparent;
        height: 98%;
    }

    /* Hover effect: change the color when the mouse is over the icon */


    .icon-search-banner-mobile {
        align-self: stretch;
        padding: 12px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 300px;
        background-color: #00568c;
        font-family: 'Montserrat',sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        position: absolute; /* Icon position is absolute relative to its parent container */
        right: 4px; /* Adjust as needed for position */
        top: 2px;
        cursor: pointer;
        border: none;
    }

    #clearButtonBannerMobile {
        position: absolute; /* Button is absolutely positioned within the container */
        right: 35px;
        top: 50%;
        transform: translateY(-50%); /* Centers the button vertically */
        background: none;
        border: none;
        cursor: pointer;
        display: none; /* Hidden by default */
        z-index: 1001;
    }

    #ReleaseSection {
        display: none;
    }

    #ReleaseSectionMobile {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px 10px;
        position: relative;
        width: 100%;
    }

    .ReleaseTitleMobile {
        flex-grow: 1;
        font-family: 'Montserrat', sans-serif;
        font-size: 22px;
        font-weight: 800;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.1;
        letter-spacing: -0.8px;
        text-align: center;
        color: #152942;
    }

    #ReleaseSectionMobile .CardsCategoryMobile {
        gap: 0px;
    }

    #ReleaseSectionMobile .CarItemImageProductComponent {
        height: 130px;
    }

    #MostViewed {
        display: none;
    }

    #PromotionalSection {
        display: none;
    }

    .CardProductComponentMobile {
        margin: 12px;
        max-width: 283px;
        height: 306px;
        flex-grow: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 10px 0px;
        border-radius: 16px;
        background-color: #fff;
        border: 3px solid #fff;
        position: relative;
        cursor: pointer;
    }

    .CardProductIconDetailComponentMobile {
        flex-grow: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px;
        border-radius: 100px;
        border: solid 1px #00568c;
        background-color: #fff;
        color: #00568c;
        cursor: pointer;
    }

    #MostViewedMobile {
        display: flex;
        padding: 20px 10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 22px;
        align-self: center;
        position: relative;
    }

    .Elements-MostViewed-Mobile {
        padding: 0;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    #MostViewedMobile .MostViewedProductsRow {
        gap: 28px;
    }

    #MostViewedMobile .CardMostViewedPhilco {
        width: 100%;
        padding: 0;
        height: 200px;
    }

    #MostViewedMobile .CardMostViewedBritania {
        width: 100%;
        padding: 0;
        height: 200px;
    }

    #MostViewedMobile .ContentTitleCardProductMostViewed {
        width: 100%;
        padding: 0;
    }

    .ContentTitleCardProductMostViewed {
        font-size: 14px;
    }

    .ContentCodesTextCardProductMostViewed {
        font-size: 10px;
    }

    .product-image-mostviewed {
        top: 30px;
    }

    .Image-Product-MostViewed {
        height: 150px;
    }

    .CardBackGroundMostViewedBritania {
        height: 200px;
    }

    .CardBackGroundMostViewedPhilco {
        height: 200px;
    }

    #MostViewedMobile .CardProductMostViewed {
        width: 100%;
        padding: 0;
        margin: 0px 8px;
    }

    .CarItemMostViewedImage {
        width: 100%;
    }

    .CardProductMostViewedSelo img {
        width: 24px;
    }

    .ContentCardProductMostViewed {
        height: 100%;
    }

    #PromotionalSectionMobile {
        width: 100%;
        display: flex;
        padding: 64px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        position: relative;
    }

        #PromotionalSectionMobile .CardsCategoryMobile {
            gap: 0px;
        }

        #PromotionalSectionMobile .CarItemImageProductComponent {
            height: 130px;
            max-width: 120px;
        }

        #PromotionalSectionMobile .CardProductDescriptionComponent {
            font-size: 12px;
            display: flex;
            max-width: 120px;
        }


    .ContentMostViewedTitle {
        font-size: 24px;
        margin-top: 20px;
    }

    .CardProductDescriptionComponent {
        width: 100px;
        font-size: 12px;
        height: 100%;
        font-weight: 800;
    }

    .CardProductCodeDescriptionComponent {
        font-size: 12px;
    }

    #TopPageButton {
        display: none !important;
    }

    #MosaicSection {
        display: none;
    }

    #MosaicSectionMobile {
        width: 100%;
        display: flex;
        padding: 40px 10px 60px 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #FFF;
        gap: 24px;
        align-self: stretch;
        background: linear-gradient(180deg, #152942 0.51%, #000 119.59%);
        position: relative;
    }

        #MosaicSectionMobile .MosaicHeadingText {
            font-size: 24px;
        }

        #MosaicSectionMobile span {
            color: #FFF;
        }

        #MosaicSectionMobile .CardsCategoryMobile {
            height: 200px;
            padding: 0;
        }

        #MosaicSectionMobile iframe {
            width: 100%;
            height: 100%;
            border-radius: 12px;
        }

    .SubCategoriaList {
        height: 80%;
        overflow: scroll;
    }

    .SubCategoriaDescription {
        width: 100%;
        padding: 10px;
        height: 20px;
        font-size: 14px;
        font-weight: 600;
    }

    .breadcrumb {
        display: none;
    }

    .ElementosCategoria {
        display: none;
    }

    #ResultCategoria {
        display: none;
    }

    #ResultCategoriaMobile {
        display: flex;
        padding: 20px 0px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        align-self: stretch;
        width: 100%;
    }

        #ResultCategoriaMobile .Header-Button {
            width: 90%;
            text-align: center;
        }

    .breadcrumbMobile {
        width: 90%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px 17px;
        gap: 3px;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 800;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #aaaaaa;
    }

    .icon-home-breadcrumb {
        color: #152942;
    }

    #resultSearchProductsPageCategoriaMobile {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap to a new line */
        gap: 12px;
        margin: auto;
        justify-content: center;
        align-items: center;
        padding: 25px 0px;
        flex-grow: 6;
        width: 100%;
    }

        #resultSearchProductsPageCategoriaMobile .CardProductComponentMobile {
            max-width: 95%;
            width: 100%;
        }

        #resultSearchProductsPageCategoriaMobile .CardProductDescriptionComponent {
            width: 85%;
        }

    .sidebarFilterTitle {
        font-size: 20px;
        padding: 8px 2px;
        border-bottom: 1px solid #cecece;
        width: 100%;
        margin-bottom: 12px;
        color: #152942;
        font-weight: 600;
        position: relative;
    }

    nav {
        width: 95%;
    }

    .btnCloseFilter {
        position: absolute;
        right: 5px;
    }

    #ProdutoMainMobile {
        display: flex;
        padding: 40px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        align-self: flex-start;
    }

    #ProdutoMain {
        display: none;
    }

    .ProdutoMainContainerContentTitle {
        font-size: 20px;
    }

    .ProdutoMainContainerContentDescription span {
        font-size: 16px;
    }

    .ProdutoMainContainerGalleryMobile {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Shows scrollbar only when content overflows */
        overflow-y: hidden; /* Hides vertical scrollbar */
        -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
        /* 3. Implement scroll snapping for a carousel effect */
        scroll-snap-type: x mandatory; /* Ensures items snap into place */
        /* Optional: Hide the scrollbar visually for a cleaner look */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        width: 93vw;
        gap: 1rem;
    }

    .ProdutoMainContainerGallery::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .ProdutoMainContainerGalleryItem {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-shrink: 0; /* Prevents items from shrinking to fit the container */
        padding: 0;
        scroll-snap-align: start; /* Snaps the start edge of the item to the start edge of the container */
    }

    .ProdutoMainContainerGalleryItemMais {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-shrink: 0; /* Prevents items from shrinking to fit the container */
        padding: 0;
        scroll-snap-align: start; /* Snaps the start edge of the item to the start edge of the container */
        height: 100%;
        width: 120px;
    }

    .ProdutoMainGaleryImage {
        padding: 16px 16px;
        gap: 10px;
        max-width: 345px;
        width: auto;
    }

        .ProdutoMainGaleryImage img {
            max-width: 305px;
            width: 100%;
        }

    .ProdutoDetailsHeader {
        padding: 16px 12px 0px 12px;
        ;
    }

    .ProdutoDiferenciaisContainerTitle span {
        font-size: 20px;
    }

    .ProdutoDiferenciaisContainerDescriptionItem span {
        font-size: 16px;
    }

    .ProdutoDetailsHeaderContent span {
        font-size: 20px;
        width: 100%;
    }

    .ProdutoDetailsHeaderContentButton {
        display: none;
    }

    .ProdutoDetailsHeaderTabsAction {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Shows scrollbar only when content overflows */
        overflow-y: hidden; /* Hides vertical scrollbar */
        -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
        /* 3. Implement scroll snapping for a carousel effect */
        scroll-snap-type: x mandatory; /* Ensures items snap into place */
        /* Optional: Hide the scrollbar visually for a cleaner look */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        width: 93vw;
        gap: 1rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

        .ProdutoDetailsHeaderTabsAction::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

    .ProdutoDetailsHeaderTabsActionButton {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-shrink: 0; /* Prevents items from shrinking to fit the container */
        padding: 20px;
        scroll-snap-align: start; /* Snaps the start edge of the item to the start edge of the container */
    }

    .ProdutoDetailsHeaderTabsCardContentTitle {
        font-size: 16px;
    }

    .ProdutoDetailsHeaderTabsCardContentValue {
        font-size: 16px;
    }

    .ProdutoDescriptionTituloContainerContent span {
        font-size: 20px;
    }

    .ProdutoDescriptionTituloContainerSubtitle span {
        font-size: 16px;
    }

    .ProdutoDescriptionTituloContainerOption span {
        font-size: 16px;
    }

    .ProdutoMateriaisApoioTitle span {
        font-size: 20px;
    }

    #ProdutoDiferenciais {
        padding: 20px;
        margin-bottom: 40px;
    }

    #ProdutoDetails {
        padding: 20px;
    }

    #ProdutoDescriptionTitulo {
        padding: 20px;
    }

    #ProdutoMateriaisApoio {
        padding: 20px;
        margin-bottom: 40px;
    }

    .ElementosProdutoDescriptionTitulo {
        display: none;
    }

    #ProdutoGallery {
        display: none;
    }

    #ProdutoGalleryMobile {
        display: flex;
        padding: 80px 12px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        background: var(--Britnia-Secondary-Main, #00568C);
        position: relative;
        text-align: center;
        justify-content: center;
    }

    .ProdutoGalleryContentTitle span {
        font-size: 24px;
        text-align: center;
        width: 100%;
    }

    .ProdutoGalleryGrid {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Shows scrollbar only when content overflows */
        overflow-y: hidden; /* Hides vertical scrollbar */
        -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
        /* 3. Implement scroll snapping for a carousel effect */
        scroll-snap-type: x mandatory; /* Ensures items snap into place */
        /* Optional: Hide the scrollbar visually for a cleaner look */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        width: 93vw;
        gap: 1rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        height: 100%;
    }

        .ProdutoGalleryGrid::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

    .ProdutoGalleryGridItemImage {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-shrink: 0; /* Prevents items from shrinking to fit the container */
        padding: 12px;
        scroll-snap-align: start; /* Snaps the start edge of the item to the start edge of the container */
        border-radius: 16px;
        background: #FFF;
        width: 91%;
    }

        .ProdutoGalleryGridItemImage img {
            max-height: 220px;
        }

    .modal {
        z-index: 99999999999999999999999999999999999999999999999999;
        width: 100vw; /* Takes the full viewport width */
        height: 100vh; /* Takes the full viewport height */
        background-color: black;
    }

    .modalContent {
        width: 100vw; /* Takes the full viewport width */
        height: 100vh; /* Takes the full viewport height */
    }

    .mySlidesImg {
        height: 75vh;
        max-height: 100%;
    }

    .modal-content {
        top: 0;
        height: 75vh;
        transform: none;
    }

    .prev {
        display: none;
    }

    .next {
        display: none;
    }

    .row {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Shows scrollbar only when content overflows */
        overflow-y: hidden; /* Hides vertical scrollbar */
        -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
        /* 3. Implement scroll snapping for a carousel effect */
        scroll-snap-type: x mandatory; /* Ensures items snap into place */
        /* Optional: Hide the scrollbar visually for a cleaner look */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        width: 93vw;
        gap: 1rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        height: 104%;
    }

    .ProdutoDetailsHeaderContentButtonMobile {
        display: flex;
        padding: 12px 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        background: var(--Britnia-Primary-Main, #152942);
        color: var(--Default-White, #FFF);
        /* Britânia/Montserrat/Text MD/Semibold */
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
        cursor: pointer;
        border: none;
        width: 100%;
    }

        .ProdutoDetailsHeaderContentButtonMobile:hover {
            background-color: #00126D;
        }

    .ProdutoDetailsHeaderTabs {
        align-content: center;
        align-items: center;
    }

    .ProdutoMateriaisApoioCarrouselCard {
        max-width: 100%;
    }

    .ProdutoMateriaisApoioButton {
        width: 100%;
    }

    .ProdutoDescriptionContainerTitle span {
        font-size: 20px;
    }

    #ProdutoDescription {
        padding: 20px 20px;
        gap: 24px;
    }

    .ProdutoDescriptionContainerTitleButton {
        display: none;
    }

    .ProdutoDescriptionContainerTitleButtonMobile {
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--Britnia-Accent-Main, #CD9A33);
        color: var(--Neutral-Default-White, #FFF);
        padding: 12px 24px;
        gap: 8px;
        border-radius: 8px;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        cursor: pointer;
        border: none;
        width: 100%;
    }

        .ProdutoDescriptionContainerTitleButtonMobile:hover {
            background: #85571B;
        }

    .resultCategorieTotal {
        justify-content: center;
        align-content: center;
        padding-top: 8px;
    }
}