:root {
    --SERIOUSGREY:91,110,132;
    --BUBBLEGUM: 255,196,221;
    --COOLGREY: 161,168,183;
    --WINTERGREY: 231,233,238;
    --WHITEVTEX: #F8F7FC;
    --PLAINWHITE: 255,255,255;
    --REBELPINK: 247,25,99;
    --SERIOUSBLACK: 20,32,50;
    --SOFTBLUE: 245,249,255;
    --YOUGURTPINK: 255,224,239;
    --BLUEBLUE: 182,205,241;
    --SERIOUSBLUE: 47,76,144;
}

@font-face {
    font-family: "VTEXTrust"; font-weight: 300;
    src: url("icons/VTEXTrust-Light_24e9b2f6.otf");
    font-display: swap;
}

@font-face {
    font-family: "VTEXTrust"; font-weight: 400;
    src: url("icons/VTEXTrust-Regular_0291414e.otf");
    font-display: swap;
}

@font-face {
    font-family: "VTEXTrust"; font-weight: 500;
    src: url("icons/VTEXTrust-Medium_a96939b2.otf");
    font-display: swap;
}


body {
    background-color: rgba(var(--SERIOUSBLACK), 1);
    margin: 0rem;
    padding: 0rem;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    color: rgb(var(--PLAINWHITE));
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--BLUEBLUE), 0.4) transparent;
  }
  
  
  *::-webkit-scrollbar-thumb {
    background-color: rgba(var(--BLUEBLUE), 0.4);
    border-radius: 3px;
  }
  
  *::-webkit-scrollbar-button {
    background-color: transparent;
  }
  
  *::-webkit-scrollbar-track {
    background-color: rgba(var(--BLUEBLUE), 0.4);
  }

.popupFlex {
    backdrop-filter: blur(0.5rem);
    background-color: var(--OVERLAY_COLOR);
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.popupFlexMobile {
    backdrop-filter: blur(0.5rem);
    background-color: rgb(var(--OVERLAY_COLOR));
    z-index: 2;
    position: absolute;

    height: 100vh;
    width: 100vw;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}


#popupDiv, #popupDivThird, #popupDivPartner, #popupDivAbout {
    width: 40vw;
    min-height: 50vh;
    max-width: 768px;
    background-color: rgb(var(--SOFTBLUE));
    border: 1px solid rgb(var(--COOLGREY));
    border-radius: 25px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    box-sizing: border-box;
    gap: 1rem;
}

.popupWrapperTitle {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.popupActive {
    opacity: 100%;
}

.popupNotActive {
    opacity: 0%;
}

#popupTitle {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 0.5rem;
    padding-bottom: 1rem;
}

.addonX,.partnerX, .moreAboutX {
    width: 2.5rem;
    height: 2.5rem;
    background: rgb(var(--WINTERGREY));
    -moz-border-radius: 2rem;
    -webkit-border-radius: 2rem;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

#sections-phrases {
    display: none;
}

.xIcon {
    color: rgb(var(--SERIOUSBLACK));
    scale: 0.25;
}

#popupSubtitle {
    font-family: "VTEXTrust"; font-weight: 400;
    font-size: 1.35rem;
    color: rgb(var(--SERIOUSBLACK));
}

#popupIcon {
    width: 29px;
}


.popupIconAWS {
    width: 50px !important;
}

#videoPlayer {
    display: flex;
    justify-content: center;
}


video::-webkit-media-controls-panel {
    display: none !important;
    opacity: 1 !important;
}

#info {
    max-height: 60vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}


#informationTitle {
    margin-top: 1.3125rem;
    font-size: 1.5rem;
    color: rgb(var(--SERIOUSBLACK));
    font-family: "VTEXTrust"; font-weight: 500;
}

#informationBody {
    font-size: 1rem;
    color: rgb(var(--SERIOUSBLACK));
    font-family: "VTEXTrust"; font-weight: 400;
}

.partnerArea {
    width: 100%;
    height: fit-content;
    grid-column: 1/12;
    grid-row: 2/-1;
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 0.75rem));
    gap: 1rem;
    box-sizing: border-box; 
}

.catalog {
    max-height: 5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid rgb(var(--SERIOUSGREY));
    cursor: pointer;
    
}

#default {
    min-height: 5rem;
}

.catalog img {
    scale: 0.6;
}

.catalog_notActive {
    background-color: rgb(var(--PLAINWHITE));
}

.catalog_active {
    background-color: rgb(var(--WINTERGREY));
}

#multiplePartnerGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    max-width: 100%;
    max-height: 100%;
}

#multiplePartnerGrid img {
    width: 100%;
}

#multiplePartnerGridBottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    max-width: 100%;
    max-height: 100%;
}

#multiplePartnerGridBottom img {
    width: 100%;
}

.multiplePartner_notActive {
    display: none;
}

.multiplePartner_active {
    display: block;
}

#salesApp_Popup,
#personal_Popup,
#live_Popup,
#pim_Popup,
#pick_Popup,
#oms_Popup,
#erp_Popup,
#crm_Popup,
#aws_Popup,
#thirdPartySellers_Popup,
#carriers_Popup,
#payments_Popup,
#marketing_Popup,
#search_Popup,
#thirdMarket_Popup,
#adNetwork_Popup,
#dataPipeline_Popup,
#shield_Popup,
#weny_Popup,
#digitalCommerce_Popup,
#B2BCommerce_Popup, 
#ExperienceManagement_Popup,
#Distributed_Popup,
#MarketPlace_Popup,
#Developer_Popup,
#Admin_Popup, 
#thirdMarketMobile_Popup, #other_Popup,
#otherMobile_Popup {
    display: none;
}


#grid-container-main {
    max-width: 1920px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0 3.75rem;
    background-color: var(--BACKGROUND);
}

#grid-container-title {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1.25rem;
    height: calc(10% - 1.25rem);
}

#title br {
    display: none;
}

#title {
    font-family: "VTEXTrust"; font-weight: 400;
    color: rgb(var(--BLUEBLUE));
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    grid-row: 1;
    grid-column: 2/-2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partnerBottomMobile {
    display: none !important;
}

#VTEX_LogoWrapper {
    grid-column: 1/2;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: start;
}

#VTEX_Logo {
    height: 2rem;
}


.arrowMobile {
    display: none;
}

#restart_button {
    width: 3rem;
    aspect-ratio: 1 /1;
    border-radius: 0.625rem;
    border: 1px solid rgb(var(--COOLGREY));
    align-items: center;
    color: rgb(var(--REBELPINK));
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(var(--SERIOUSBLACK), 0.5);
    color: white;
    cursor: pointer;
}

#restartWrapper {
    grid-row: 1;
    grid-column: 8/9;
    display: flex;
    align-items: center;
    place-content: end;
}

#restart {
    height: 1.5rem;
}

#navbar-mobile {
    display: none;
}

#middle-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    height: 70%;
}


#grid-container-app-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    padding-top: 1.5rem;
}

#column-first-party-left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    height: 76%;
}

#column-third-party-left {
    width: 100%;
    height: 24%;
    display: flex;
    flex-direction: row;
    align-items: end;
}

#grid-container-app-right {
    grid-column: 8;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;
    padding-top: 1.5rem;
}

#column-first-party-right {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    height: 76%;
    align-items: end;
}

#column-third-party-right {
    width: 100%;
    height: 24%;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
}

.item-first-party {
    background-color: rgba(var(--YOUGURTPINK), 0.1);
    min-width: 6.25rem;
    max-width: 10rem;
    width: 100%; 
    min-height: 5rem;
    height: 100%;
    border-radius: 0.62rem;
    align-items: center;
    text-align: left;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.item-first-party-active {
    background-color: rgb(var(--REBELPINK));
    border: 1px solid  rgb(var(--BUBBLEGUM));
    color: var(--PLAINWHITE);
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.item-first-party-notActive {
    border: 1px solid rgb(var(--BUBBLEGUM));
    color: rgb(var(--BUBBLEGUM));
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.item-first-party-notActive img {
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}


.item-third-party-Other {
    background-color: rgba(var(--SERIOUSBLACK), 0.5);
    border: 1px solid rgb(var(--SERIOUSBLUE));
    color: rgb(var(--BLUEBLUE));
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    font-size: 0.9rem;
    min-width: 6.25rem;
    max-width: 10rem;
    width: 100%; 
    aspect-ratio: 10/6;
    border-radius: 0.62rem;
    display: grid;
    cursor: pointer;
}

#other {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}


.item-third-party-bottom {
    min-width: 6.25rem;
    max-width: 10rem;
    width: 100%; 
    aspect-ratio: 10/6;
    border-radius: 0.625rem;
    border: 1px solid var(--ITEM_THIRD_PARTY_STROKE);
    color: var(--ITEM_THIRD_PARTY_TEXT);
    cursor: pointer;
    background-color: rgba(var(--SERIOUSBLACK), 0.5);
    border: 1px solid rgb(var(--SERIOUSBLUE));
    color: rgb(var(--BLUEBLUE));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
}

.item-third-party-bottom-active {
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    height: auto;
    font-size: 0.75rem;
}

.item-third-party-bottom-notActive {
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    font-size: 0.9rem;
}

.item-third-party-bottom-notActive img {
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}


.iconDefault-active {
    height: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}


.iconDefaultBottom-active {
    height: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

}

.iconDefaultBottom-notActive {
    display: none;
}

.iconpartner-active {
    display: block;
}

.iconpartner-notActive {
    display: none;
}


.partnerBox {
    border-radius: 0.5rem;
    border: 1px solid #2C4872;
    background-color: rgb(var(--PLAINWHITE));
    transition: all 0.2s linear;
    bottom: 0;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    align-self: baseline;
}

.partnerBox img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.partnerBoxActive {
    width: 100%;
    max-height: 6rem;
    height: 6rem;
    visibility: visible;
    align-items: center;
}


.partnerBoxActive img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.partnerBoxNotActive {
    display: none;
    max-height: 0rem;
    position: absolute;
    border: none;
}

.item-aws {
    align-items: center;
    width: 6rem;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    cursor: pointer;
}

.icon {
    width: 21.25%;
    max-height: 2rem;
}

.icon-aws {
    width: 3.5rem;
    shape-rendering: auto;
}


.icon-subtitle {
    font-family: "VTEXTrust"; font-weight: 400;
    text-decoration: none;
    font-size: 0.9rem;
    max-width: 50%
}

.icon-subtitle-AWS {
    font-family: "VTEXTrust"; font-weight: 400;
    display: inline-block;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.icon-subtitle-bottom {
    font-family: "VTEXTrust"; font-weight: 400;
    display: inline-block;
    text-decoration: none;
}

#grid-container-app-middle {
    position: relative;
    border-radius: 3.125rem; 
    background-color: rgba(var(--SERIOUSGREY), 0.16);
    grid-column: 2 / 8;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: calc(77.5% - 0.5rem) calc(22.5% - 0.5rem);
    column-gap: 1.5rem;
    row-gap: 1rem;
    padding: 1.25rem;
    height: 100%;
    z-index: 1;
    box-sizing: border-box;
}

#grid-container-app-middle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--PLAINWHITE), 0.4), rgba(var(--PLAINWHITE), 0), rgba(var(--PLAINWHITE), 0), rgba(var(--PLAINWHITE), 0.1));
    border-radius: inherit;
    padding: 0.1rem;
    z-index: -1;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}


#digitalCommerce_Box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    justify-content: center;
}

#B2BCommerce_Box{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    justify-content: center;
}

.moreAboutMobile {
    display: none;
}


#grid-container-VtexSolutions-bottom {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5625rem;
    border: 0.16rem solid rgb(var(--BLUEBLUE));
    border-radius: 1.875rem;
    padding: 0.625rem;
    height: calc(100% - 1.75rem);
}

#grid-container-middle-bottom {
    margin-top: 1rem;
    grid-column: 1/9;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: start;
    height: calc(20% - 1.25rem);;
}

#awsArea {
    grid-column: 10/-1;
    grid-row: -3/-2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    align-self: center;
}

#grid-container-middle-bottom-phrase {
    grid-column: 2/-2;
    grid-row: -2/-2;
    text-align: center;

    font-family: "VTEXTrust"; font-weight: 400;
    color: var(--COOLGREY);
    font-size: 27px;
    height: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 5rem;
}

#grid-container-FlexLeft {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: 1rem
}



#grid-container-FlexRight {
    grid-column: 4/8;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


#grid-container-core{
    grid-column: 1/8;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 1.5625rem;
    border: rgb(247, 25, 99) solid 0.16rem;
    padding: 0.625rem;
    border-radius: 1.875rem;
    height: calc(100% - 1.75rem);
}


#grid-container-digitalCommerce, #grid-container-B2BCommerce {
    display: grid;
    grid-template-rows: 0.28fr 0.72fr;
    border-radius: 1.25rem;
    cursor: pointer;
    padding: 0 1rem 1rem 1rem;
    height:50%;
    background-color: rgba(var(--SERIOUSGREY), 0.30);
}


.grid-container-notActive {
    background-color: var(--VTEX_SOLUTION_BACKGROUND);
    color: var(--VTEX_SOLUTION_COLOR);
    border:  0.0625rem solid var(--VTEX_SOLUTION_STROKE);
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid-container-active {
    background-color: var(--VTEX_SOLUTION_BACKGROUND);
    color: var(--VTEX_SOLUTION_COLOR);
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid-container-border {
    position: relative;
    z-index: 1;
}

.grid-container-border ::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--PLAINWHITE), 0.05), rgba(var(--PLAINWHITE), 0), rgba(var(--PLAINWHITE), 0), rgba(var(--PLAINWHITE), 0.02));
    border-radius: 1.25rem;
    padding: 0.1rem;
    z-index: -1;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
}


.grid-container-activeALT {
    position: relative;
    background-color: var(--VTEX_SOLUTION_ALT_BACKGROUND);
    color: var(--PLAINWHITE);
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 1;
}

.grid-container-notActiveALT {
    background-color: var(--VTEX_SOLUTION_ALT_BACKGROUND);
    color: var(--PLAINWHITE);
    border: 0.0625rem solid var(--VTEX_SOLUTION_ALT_STROKE);
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#Title_digitalCommerce {
    height: 100%;
    display: flex;
    align-items: center;
}


#grid-container-experience {
    display: grid;
    grid-template-rows: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 1.25rem;
    cursor: pointer;
    padding: 0 1rem 1rem 1rem;
    height: 33.3%;
    background-color: rgba(var(--SERIOUSGREY), 0.30);
}


#Title_ExperienceManagement {
    height: 100%;
    display: flex;
    align-items: center;

}

#ExperienceManagement_Box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}


#grid-container-distributed {
    display: grid;
    grid-template-rows: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 1.25rem;
    cursor: pointer;
    padding: 0 1rem 1rem 1rem;
    height: 33.3%;
    background-color: rgba(var(--SERIOUSGREY), 0.30);
}

#content-container-distributed {
    width: 100%;
    display: grid;
    grid-template-rows: 45% 55%;
}

#content-container-experience {
    width: 100%;
    display: grid;
    grid-template-rows: 45% 55%;
}

#content-container-marketplace {
    height:100%;
    display: grid;
    grid-template-rows: 45% 55%;
}



#Title_Distributed {
    height: 100%;
    display: flex;
    align-items: center;
}

#Distributed_Box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

#grid-container-marketplace {
    display: grid;
    grid-template-rows: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 1.25rem;
    cursor: pointer;
    padding: 0 1rem 1rem 1rem;
    height: 33.3%;
    background-color: rgba(var(--SERIOUSGREY), 0.30);
}


#Title_Marketplace {
    height: 100%;
    display: flex;
    align-items: center;
}

#Marketplace_Box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    height: 100%;
}

#grid-container-user {
    grid-column: 1;
    border-radius: 1.25rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    padding: 1rem;
    gap: 0.5rem;
    height: 100%;
    cursor: pointer;
    background-color: rgba(var(--SERIOUSGREY), 0.30);
}


#Title_User {
    grid-column: 1/2;
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#User_Box {
    grid-column: 2/6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
}

#grid-container-developer {
    grid-column: 2;
    border-radius: 1.25rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    padding: 1rem;
    gap: 0.5rem;
    cursor: pointer;
    height: 100%;
    background-color: rgba(var(--SERIOUSGREY), 0.30);
}

#Title_Developer {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#Developer_Box {
    grid-column: 2/6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
}

.Title_VTEXSolution {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    font-family: "VTEXTrust"; font-weight: 400;
    font-size: 1.2rem;
    text-align: left;
    height: 28%;
}

.Box_VtexSolution {
    font-family: "VTEXTrust"; font-weight: 400;
    font-size: 1.125rem;
    border-radius: 0.625rem;
    width: 100%;
    height: auto;
    min-width: 6.25rem;
    min-height: 2.375rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}

.Box_VtexSolution_active {
    border: 1px solid var(--BOX_ACTIVE_BORDER);
    background-color: rgb(var(--REBELPINK));
    color: rgb(var(--PLAINWHITE));
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;

}

.Box_VtexSolution_notActive {
    background-color: rgba(var(--SERIOUSBLACK), 0.7);
    color: rgb(var(--PLAINWHITE));
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;

}

.BoxALT_VtexSolution {
    height: 100%;
    font-family: "VTEXTrust"; font-weight: 400;
    color: #142032;
    font-size: 0.9375rem;
    max-width: 5.5rem;
    max-height: 5.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    border-radius: 0.625rem;
}

.Box_VtexSolution_notActiveALT {
    color: var(--PLAINWHITE);
    border: 1px solid #132032B3;
    background-color: #132032B3;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.Box_VtexSolution_activeALTVariation {
    border: 1px solid !important;
    border-color: rgb(var(--BUBBLEGUM))!important;
    box-shadow: 0px 0px 10px rgb(var(--BUBBLEGUM));
}

.Box_VtexSolution_notActiveALTVariation {
    border: 2px solid;
    box-shadow: 0 0 6px 3px #F7B7D3;
    background-color: #2c4872;
}

.Box_VtexSolution_activeALT {
    height: 100%;
    background-color: rgb(var(--SERIOUSBLUE));
    font-family: "VTEXTrust"; font-weight: 400;
    color: var(--PLAINWHITE);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

#mobile_Popup {
    display: none;
}

@media (min-width: 3840px) {
    html {
        font-size: 32px;
      }
      
      #grid-container-main{
        max-width: 3840px;
        height: 100vh;
      }

      #popupDiv, #popupDivThird, #popupDivPartner, #popupDivAbout {
        max-width: 1536px;
      }

      .catalog {
        min-height: 3rem;
      }

      .catalog img {
        scale: 1.2;
      }

      #default {
        min-height: 3rem;
      }

      .MoreAbout {
        min-height: 1.25rem;
      }

      .MoreAboutIcon {
        min-height: 1.5rem;
      }

      #popupDiv {
        min-height: 10vh;
      }

}

@media (max-height: 900px){
    html {
      font-size: 13.33px;
    }
}

@media (pointer:coarse) and (max-width: 1181px) and (max-height: 821px) {
    html {
        font-size: 10px;
      }
}

@media (max-height: 768px){
    html {
      font-size: 13px;
    }
}

@media (max-height: 720px){
    html {
      font-size: 12px;
    }
}

@media (max-height: 600px){
    html {
      font-size: 10.3px;
    }
}

@media (max-width: 1367px) and (max-height: 552px){
    html {
      font-size: 9px;
    }
}

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

    /* ============================================================
       VTEX INTERACTIVE ARCHITECTURE — MOBILE UX REDESIGN
       Breakpoint: ≤ 1025px (phones + small tablets)
       Design principles:
         • Single-column vertical scroll — no horizontal overflow
         • Sticky header with compact logo + restart
         • Segmented-control navbar (pill style, 48px touch target)
         • Core: smooth accordion with chevron animation
         • Add-Ons: 2-column icon grid with large tap targets
         • Partners: 3-column icon grid
         • Popups: bottom-sheet with drag handle + dark overlay
         • Base font 16px, min touch target 48px
    ============================================================ */

    /* ---- RESET BODY & ROOT ---- */
    html {
        font-size: 16px;
    }

    body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100dvh;
        display: block;
        width: 100vw;
        padding: 0;
        margin: 0;
    }

    /* ---- MAIN CONTAINER ---- */
    #grid-container-main {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        margin: 0;
        padding: 0 0 2rem 0;
        height: auto;
        gap: 0;
        box-sizing: border-box;
        overflow: visible !important; /* CRITICAL: allow fixed popups to escape container */
    }

    /* ---- HEADER / TITLE ROW ---- */
    #grid-container-title {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        height: auto;
        padding: 1rem 1rem 0 1rem;
        box-sizing: border-box;
        gap: 0.75rem;
        /* Sticky header so nav is always accessible */
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: rgb(var(--SERIOUSBLACK));
        border-bottom: 1px solid rgba(var(--BLUEBLUE), 0.15);
    }

    /* Top bar: logo + restart button side by side */
    #VTEX_LogoWrapper {
        display: flex;
        align-items: center;
        order: 1;
    }

    #VTEX_Logo {
        height: 1.75rem;
        width: auto;
    }

    #restartWrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        order: 2;
        /* Float to top-right using absolute within the flex header */
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    #restart_button {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #restart {
        height: 1.125rem;
        width: auto;
    }

    #awsWrapper {
        display: none !important;
    }

    /* Title: centered, readable size */
    #title {
        order: 3;
        font-size: 1.125rem;
        text-align: center;
        color: rgb(var(--BLUEBLUE));
        line-height: 1.4;
        padding: 0 2.5rem; /* leave room for restart button */
    }

    #title br {
        display: block;
    }

    /* ---- NAVBAR: SEGMENTED CONTROL ---- */
    #navbar-mobile-wrapper {
        order: 4;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.75rem;
    }

    #navbar-mobile-wrapper::-webkit-scrollbar {
        display: none;
    }

    #navbar-mobile {
        display: flex;
        flex-direction: row;
        gap: 0;
        white-space: nowrap;
        background-color: rgba(var(--BLUEBLUE), 0.08);
        border-radius: 0.75rem;
        padding: 0.25rem;
        width: max-content;
        min-width: 100%;
    }

    .separator {
        display: none !important;
    }

    .navbar-item {
        font-family: "VTEXTrust"; font-weight: 400;
        font-size: 0.8125rem;
        padding: 0.5rem 0.625rem;
        border-radius: 0.5rem;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        flex: 1;
        text-align: center;
        white-space: nowrap;
    }

    .navbar-item-notActive {
        color: rgba(var(--BLUEBLUE), 0.55);
        background-color: transparent;
    }

    .navbar-item-active {
        color: rgb(var(--SERIOUSBLACK));
        background-color: rgb(var(--PLAINWHITE));
        text-decoration: none;
        font-family: "VTEXTrust"; font-weight: 500;
        border-radius: 0.5rem;
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    }

    /* ---- SECTION PHRASE (subtitle under navbar) ---- */
    #sections-phrases {
        display: flex;
        order: 5;
        font-family: "VTEXTrust"; font-weight: 300;
        font-size: 0.875rem;
        color: rgba(var(--BLUEBLUE), 0.7);
        text-align: center;
        padding: 0.5rem 1rem 0.75rem;
        line-height: 1.5;
    }

    .phrase-item-notActive {
        display: none !important;
    }

    .phrase-item-active {
        display: block !important;
    }

    /* ---- SECTION VISIBILITY TOGGLES ---- */
    .section-active-grid-mobile {
        display: grid !important;
    }

    .section-active-flex-mobile {
        display: flex !important;
    }

    .section-notActive-flex-mobile {
        display: none !important;
    }

    .section-notActive-grid-mobile {
        display: none !important;
    }

    /* ---- MIDDLE ROW (wraps all 3 sections) ---- */
    #middle-row {
        order: 6;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        height: auto;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    /* ============================================================
       CORE SECTION — Accordion layout
    ============================================================ */
    /* Core visible */
    #grid-container-app-middle.section-active-flex-mobile {
        display: flex !important;
    }
    /* Core hidden */
    #grid-container-app-middle.section-notActive-flex-mobile {
        display: none !important;
    }
    /* Base styles */
    #grid-container-app-middle {
        width: 100%;
        flex-direction: column;
        height: auto;
        box-sizing: border-box;
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        gap: 0;
    }

    #grid-container-app-middle::before {
        display: none;
    }

    /* Core outer container — pink border, rounded */
    #grid-container-core {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 0.5rem;
        border-radius: 1.25rem;
        gap: 0.5rem;
        border: 2px solid rgb(var(--REBELPINK));
        margin-bottom: 0;
    }

    /* Left + Right flex columns become a single column */
    #grid-container-FlexLeft,
    #grid-container-FlexRight {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    /* Bottom row (Admin + Developer) */
    #grid-container-VtexSolutions-bottom {
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 1rem;
        padding: 0.375rem;
        gap: 0.5rem;
        border: 1.5px solid rgb(var(--BLUEBLUE));
    }

    /* ---- ACCORDION ITEM (each Core section) ---- */
    #grid-container-digitalCommerce,
    #grid-container-B2BCommerce {
        display: flex;
        flex-direction: column;
        padding: 0;
        height: auto;
        gap: 0;
        border-radius: 0.875rem;
        background-color: rgba(var(--SERIOUSGREY), 0.22);
        overflow: hidden;
    }

    #grid-container-experience,
    #grid-container-distributed,
    #grid-container-marketplace {
        display: flex;
        flex-direction: column;
        padding: 0;
        height: auto;
        gap: 0;
        border-radius: 0.875rem;
        background-color: rgba(var(--SERIOUSGREY), 0.22);
        overflow: hidden;
    }

    #content-container-experience,
    #content-container-distributed,
    #content-container-marketplace {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    #grid-container-user,
    #grid-container-developer {
        display: flex;
        flex-direction: column;
        padding: 0;
        height: auto;
        gap: 0;
        border-radius: 0.875rem;
        background-color: rgba(var(--SERIOUSGREY), 0.22);
        overflow: hidden;
    }

    /* ---- ACCORDION HEADER (Title row — always visible) ---- */
    .Title_VTEXSolution {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        font-family: "VTEXTrust"; font-weight: 400;
        padding: 0.875rem 1rem;
        box-sizing: border-box;
        min-height: 3rem;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(247,25,99,0.08);
    }

    .Title_VTEXSolution span {
        font-size: 1rem;
        color: rgb(var(--PLAINWHITE));
        line-height: 1.3;
    }

    /* Hide the desktop "Know More" icon on mobile */
    .MoreAbout {
        display: none !important;
    }

    /* Show the chevron arrow on mobile */
    .arrowMobile {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        transition: transform 0.25s ease;
    }

    /* ---- ACCORDION BODY — hidden by default ---- */
    .boxNotOpen {
        display: none !important;
        max-height: 0;
        overflow: hidden;
    }

    /* ---- ACCORDION BODY — open state ---- */
    .boxOpen {
        display: grid !important;
        animation: accordionOpen 0.2s ease;
    }

    @keyframes accordionOpen {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Grid layout for Core sub-items */
    #digitalCommerce_Box,
    #B2BCommerce_Box {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 0.625rem;
        padding: 0 0.75rem 0.875rem 0.75rem;
        box-sizing: border-box;
    }

    #ExperienceManagement_Box,
    #Distributed_Box,
    #Marketplace_Box {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 0.625rem;
        padding: 0 0.75rem 0.875rem 0.75rem;
        box-sizing: border-box;
        width: 100%;
    }

    #User_Box,
    #Developer_Box {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 0.625rem;
        padding: 0 0.75rem 0.875rem 0.75rem;
        box-sizing: border-box;
    }

    /* Core sub-item pill */
    .Box_VtexSolution {
        min-height: 3rem;
        font-size: 0.875rem;
        border-radius: 0.625rem;
        padding: 0.5rem 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.3;
    }

    /* Admin/Developer sub-item pill */
    .BoxALT_VtexSolution {
        width: 100%;
        min-height: 3rem;
        min-width: unset;
        max-width: 100%;
        font-size: 0.875rem;
        border-radius: 0.625rem;
        padding: 0.5rem 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.3;
    }

    /* "Know more" link at bottom of accordion */
    .moreAboutMobile {
        font-family: "VTEXTrust"; font-weight: 400;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        grid-column: 1 / -1;
        font-size: 0.8125rem;
        text-decoration: underline;
        color: rgba(var(--BLUEBLUE), 0.8);
        padding: 0.375rem 0 0.25rem;
        min-height: 2rem;
    }

    /* ---- Title_Developer br fix ---- */
    #Title_Developer br {
        display: none;
    }

    /* ============================================================
       ADD-ONS SECTION — 2-column icon card grid
    ============================================================ */
    /* Add-Ons visible */
    #grid-container-app-left.section-active-flex-mobile,
    #grid-container-app-right.section-active-flex-mobile {
        display: flex !important;
    }
    /* Add-Ons hidden */
    #grid-container-app-left.section-notActive-flex-mobile,
    #grid-container-app-right.section-notActive-flex-mobile {
        display: none !important;
    }
    /* Base styles */
    #grid-container-app-left,
    #grid-container-app-right {
        flex-direction: column;
        height: auto;
        width: 100%;
        padding: 0;
        gap: 0;
        box-sizing: border-box;
    }

    /* When Add-Ons containers are visible but their children are hidden,
       collapse them to prevent empty space (happens when Partners is active
       because app-left/right have both .addon-mobile and .partners-mobile) */
    #grid-container-app-left:has(> #column-first-party-left.section-notActive-flex-mobile),
    #grid-container-app-right:has(> #column-first-party-right.section-notActive-flex-mobile) {
        display: none !important;
    }

    /* Add-Ons column containers — 2-column grid */
    #column-first-party-left.section-active-flex-mobile,
    #column-first-party-right.section-active-flex-mobile {
        display: grid !important;
    }
    #column-first-party-left.section-notActive-flex-mobile,
    #column-first-party-right.section-notActive-flex-mobile {
        display: none !important;
    }
    #column-first-party-left,
    #column-first-party-right {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        height: auto;
        width: 100%;
        padding: 0.5rem 0;
    }

    /* Each Add-On card */
    .item-first-party {
        width: 100%;
        max-width: 100%;
        min-height: 5.5rem;
        height: auto;
        aspect-ratio: unset;
        border-radius: 0.875rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        padding: 0.875rem 0.5rem;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(247,25,99,0.12);
    }

    .icon {
        width: auto;
        height: 2.25rem;
        max-height: 2.25rem;
        max-width: 2.25rem;
        object-fit: contain;
    }

    /* Add-On label text */
    .icon-subtitle {
        font-family: "VTEXTrust"; font-weight: 400;
        font-size: 0.8125rem;
        text-align: center;
        max-width: 100%;
        line-height: 1.3;
    }

    /* Fix br tags inside icon-subtitle — render as space */
    .icon-subtitle br,
    .icon-subtitle-bottom br {
        content: ' ';
        display: inline;
    }

    .icon-subtitle span,
    .icon-subtitle-bottom span {
        display: inline;
    }

    /* Third-party items in Add-Ons (left/right columns) */
    #column-third-party-left,
    #column-third-party-right {
        display: none !important;
    }

    /* ============================================================
       PARTNERS SECTION — 2-column icon grid (readable on 390px)
    ============================================================ */
    /* When visible, use grid layout */
    #grid-container-middle-bottom.section-active-flex-mobile {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0.5rem 0;
        box-sizing: border-box;
    }

    /* When hidden, ensure it stays hidden (override any display rules) */
    #grid-container-middle-bottom.section-notActive-flex-mobile {
        display: none !important;
    }

    /* Base styles for the grid (applied regardless of visibility state) */
    #grid-container-middle-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0.5rem 0;
        box-sizing: border-box;
    }

    .item-third-party-bottom {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        height: auto;
        min-height: 5.5rem;
        aspect-ratio: unset;
        border-radius: 0.875rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        padding: 0.875rem 0.375rem;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(182,205,241,0.15);
    }

    #other {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        height: auto;
        min-height: 5.5rem;
        aspect-ratio: unset;
        border-radius: 0.875rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        padding: 0.875rem 0.375rem;
        box-sizing: border-box;
        cursor: pointer;
    }

    .icon-subtitle-bottom {
        font-family: "VTEXTrust"; font-weight: 400;
        font-size: 0.8125rem;
        text-align: center;
        line-height: 1.3;
        display: inline;
    }

    /* Mobile-only partner items (thirdMarketMobile, otherMobile) */
    .partnerBottomMobile {
        display: flex !important;
    }

    /* ============================================================
       POPUP — Bottom sheet with dark overlay (UX-first)
    ============================================================ */

    /* ---- POPUP VISIBILITY ---- */
    .popupFlex.popupNotActive,
    .popupFlex.popupactive,
    .popupFlexMobile.popupNotActive,
    .popupFlexMobile.popupactive,
    .popupThirdPartySystems.popupNotActive,
    .popupThirdPartySystems.popupactive,
    .popupPartner.popupNotActive,
    .popupPartner.popupactive,
    .moreAboutPopup.popupNotActive,
    .moreAboutPopup.popupactive {
        display: none !important;
    }

    /* Show active popups */
    .popupFlex.popupActive,
    .popupFlexMobile.popupActive,
    .popupThirdPartySystems.popupActive,
    .popupPartner.popupActive,
    .moreAboutPopup.popupActive {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* ---- ALL POPUP OVERLAYS — full-page takeover on mobile ---- */
    /* JS hides all sibling content when a popup opens.
       The popup stays in its original DOM position but becomes
       the only visible content. Uses relative positioning
       with a dark background to simulate an overlay. */
    .popupFlex.popupActive,
    .popupFlexMobile.popupActive,
    .popupThirdPartySystems.popupActive,
    .popupPartner.popupActive,
    .moreAboutPopup.popupActive {
        position: relative !important;
        width: 100% !important;
        min-height: 100vh !important;
        height: auto !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    /* When body has mobile-popup-open class, set dark bg on grid-container-main */
    body.mobile-popup-open #grid-container-main {
        background: rgba(0, 0, 0, 0.6) !important;
        min-height: 100vh !important;
    }

    /* Force-hide elements when popup is open - overrides section-active-flex-mobile !important */
    [data-hidden-by-popup="true"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* ---- ADDON POPUP SHEET (the white card) ---- */
    #popupDiv {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: unset;
        height: auto;
        max-height: 85dvh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem 1rem 2rem !important;
        box-sizing: border-box;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        margin: 0 !important;
        gap: 1rem;
        background: #fff !important;
    }

    /* Drag handle on the white sheet */
    #popupDiv::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        background-color: rgba(0,0,0,0.2);
        border-radius: 0.125rem;
        margin: 0 auto 0.5rem;
        flex-shrink: 0;
    }

    /* Title row: icon + name + X button */
    #popupDiv > .popupWrapperTitle {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.75rem;
    }

    #popupTitle {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 0.75rem;
        width: auto;
        flex: 1;
        padding: 0;
        margin: 0;
        height: fit-content;
    }

    #popupIcon {
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
    }

    #popupSubtitle {
        font-size: 1.125rem;
        font-weight: 600;
        color: #142032;
    }

    /* X close button — large touch target */
    .addonX {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem;
        min-height: 2.75rem;
        margin: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        border-radius: 50%;
        background: rgba(0,0,0,0.06);
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }

    .addonX .xIcon {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Video — full width, proper aspect ratio */
    #videoPlayer {
        width: 100% !important;
        padding: 0;
        order: 2;
    }

    .addonVideo {
        width: 100% !important;
        aspect-ratio: 16/9;
        height: auto;
        border-radius: 0.75rem;
        background: #000;
    }

    /* popupAddon wrapper — inherits overlay from .popupFlex, no background override */
    .popupAddon {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        /* DO NOT set background here — let .popupFlex overlay show through */
    }

    /* ---- PARTNER X close button ---- */
    .partnerX, .moreAboutX {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem;
        min-height: 2.75rem;
        margin: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        border-radius: 50%;
        background: rgba(0,0,0,0.06);
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }

    .partnerX .xIcon, .moreAboutX .xIcon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .partnerBottomMobile {
        display: flex !important;
    }


    #informationTitle {
        margin-top: 1.3125rem;
        font-size: 1.375rem;
    }
    
    #informationBody {
        font-size: 0.875rem;
    }

    #popupDivThird, #popupDivPartner, #popupDivAbout {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        padding: 1.25rem 1rem 2rem;
        box-sizing: border-box;
        height: auto;
        max-height: 85dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        border: 0;
        background: #fff;
    }

    /* Drag handle for partner/third-party/moreAbout sheets */
    #popupDivThird::before, #popupDivPartner::before, #popupDivAbout::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        background-color: rgba(0,0,0,0.2);
        border-radius: 0.125rem;
        margin: 0 auto 0.5rem;
        flex-shrink: 0;
    }

    /* Title row for partner/third-party/moreAbout sheets */
    #popupDivThird > .popupWrapperTitle,
    #popupDivPartner > .popupWrapperTitle,
    #popupDivAbout > .popupWrapperTitle {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.75rem;
    }

    #popupDivAbout {
        gap: 0.5rem;
    }

    .partnerArea {
        overflow-y: scroll;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: calc(100vw - 2rem);
        max-width: calc(650px - 2rem);
        grid-column: 1/-1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 0.635rem;
        align-content: start;
        padding: 0%;
        height: 100%;
    }

    .catalog {
        height: 3.125rem;
    }

    .moreAboutMobile {
        font-family: "VTEXTrust"; font-weight: 400;
        display: flex;
        flex-direction: row;
        justify-content: center;
        grid-column: 1/-1;
        font-size: 0.75rem;
        text-decoration: underline;
    }

    #column-third-party-left {
        display: none;
    }
    #column-third-party-right {
        display: none;
    }

    #sections-phrases {
        display: flex;
        font-family: "VTEXTrust"; font-weight: 300;
        grid-column: 1/-1;
        grid-row: 4;
        font-size: 1.25rem;
    }

    .phrase-item-notActive {
        display: none;
    }

    .phrase-item-active {
        display: flex;
    }

    #awsWrapper {
        display: none;
    }
}