.disp-flex-options {
    display: flex;
    align-items: center;
    margin: 25px 0px;
}
.disp-flex-options .single-option-selector {
    border-radius: 50px;
    background-color: #f0f7ff;
        font-weight: 700;
}
.disp-flex-options .selector-wrapper label {
    padding-right: 5px;
}
.disp-flex.product-title {
    display: block;
}
.disp-flex.product-title .product-single__title{
    margin: 0;
    /*font-family: Poppins;*/
    /*font-size: 23px;*/
    /*font-weight: 600;*/    
    /*text-transform: inherit;*/
    letter-spacing: normal;
    color: #244174;
    border-bottom: 0;
}
.disp-flex.product-title {
    padding-bottom: 10px;
    border-bottom: solid 2px #e6eaed;
    margin-bottom: 12px;
}
.disp-flex-options .selector-wrapper {
   /* display: flex;
    align-items: center;*/
    width: 50%;
    margin-bottom: 0;
    margin-right: 10px;
        position: relative;
}
.disp-flex-options .selector-wrapper:last-child{
  margin-right: 0px;
}
.bar_adjustment {
    margin-bottom: 30px;
    display: block;
    padding: 5px 0px 5px 0px;
}
.pos-rel {
    position: relative;
}
.pos-rel svg {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 14px;
    right: 10px;
}
.pos-rel {
    display: block;
    width: 100%;
}
.disp-flex-options .single-option-selector{
        background-image: none;
  }
  .payment-icon {
    clear: both;
    float: none;
}
.prod_tags{
  float: none;
  margin-bottom: 12px;
}
.rte-setting {
    word-break: break-word;
}
.video_title {
    margin: 20px 0;
}
.video_option h5.title {
    margin: 20px 0;
}
.section-header .title {
    margin: 20px 0;
}
.product-single__meta {
  padding: 30px;
  border-radius: 13px;
  box-shadow: 0 2px 5px 0 rgba(58, 98, 152, 0.1);
  background-color: #ffffff;
  /*box-shadow: 0 0 10px #ddd;*/
}
.float_options {
    float: left;
    width: 100%;
}
#AddToCart {
    border-radius: 25px;
}
.text-warning {
    color: #ffc107!important;
}
.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.align-items-center {
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
}
.justify-content-center {
    -webkit-box-pack: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.d-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.w-100 {
    width: 100%!important;
}
.d-block {
    display: block!important;
}
.card .progress {
    margin: 0;
    margin-right: 10px;
}
.disp-flex {
    display: flex;
    justify-content: space-between;
}
.custom_label {
    font-size: 14px;
    font-weight: 500;
    color: #718aa2;
    padding-left: 15px;
}
.product-single__price {
    font-size: 18px;
    font-weight: 600;
}
.product-price__sale span[itemprop="price"] {
    font-size: 18px;
    font-weight: 600;
   /* color: #244174;*/
}
.product-form__item--quantity {
    flex: 0 0 40%;
    float: none;
    padding: 0;
}
.disp-flex-options .single-option-selector {
    font-family: Poppins;
    font-size: 11px;
    font-weight: 500;
    color: #244174;
}
.custom_cart_button {
    /*width: 50%;*/
}
.product-progress__addcart {
    margin: 0 0 6px;
    flex-wrap: wrap;
    width: 100%;
}
.product-description {
    font-size: 12px;
    line-height: 1.82;
    letter-spacing: normal;
    color: #718aa2;
}
.progressbar_text_sale {
    margin-top: 4px;
}
div#progress_bar_text_sale {
    margin-bottom: 10px;
}
.product-description p {
    color: #718aa2;
    word-break: break-word;
}
.delivery_time_new {
    margin-bottom: 10px;
    margin-top: 10px;
}
.btn--share {
    margin-bottom: 5px;
}
.fake_counter_p {
  font-size: 14px;
  letter-spacing: 0.16px;
  color: #718aa2;
  display: flex;
  /*align-items: center;*/
  float: none;
  padding: 5px 0px 5px 0px;
}
.fake_counter_icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: solid 1.5px #d8ddea;
    display: inline-block;
    padding: 1px 0 2px 1px;
    margin-right: 10px;
}
.fake_counter_icon span {
    width: 13px;
    height: 13px;
    border-radius: 2.4px;
    background-color: #06c972;
    display: block;
    margin: 0;
    padding: 0;
}
.fake_counter_b {
    margin-right: 3px;
}
.rte a:not(.btn).more_load {
    max-width: 100%;
    border: none;
    margin: 0;
    padding: 60px 0 15px;
    margin-top: -60px;
    background: linear-gradient(to top, white, transparent);
    position: relative;
}
.rte a:not(.btn).more_load img {
    transform: rotate(270deg);
    width: 15px;
}
.rte a:not(.btn).read--less-btn img {
    transform: rotate(90deg);
}
.rte a:not(.btn).read--less-btn {
    background: transparent;
}
#mst-stiky-box .product-progress__addcart {
    margin: 6px 0;
}
#mst-stiky-box .product-progress__addcart #progressBar1 {
    margin-bottom: 0;
}
#mst-stiky-box .product-progress__addcart .bar_adjustment {
    padding-right: 20px;
}
.card-body .feature-row {
    flex-direction: row;
}
.float_options{
    float: none;
}
.bar_adjustment {
    margin-bottom: 0;
}
.disp-flex-options .selector-wrapper, .ops-price, .product-form__item--quantity {
    width: 47%;
}
.ops-price {
    width: 100%;
}
.pos-rel svg {
    width: 8px;
    height: 8px;
    fill: #718aa2;
}
.disp-flex-options {
    margin: 12px 0;
    justify-content: space-between;
}
.disp-flex-options.swatch-included{
  margin: 0;
}
.stiky_form div#mst-stiky-box {
  bottom: 45px;
  padding: 10px 13px;
  border-radius: 40px;
}
ul.tabs {
  margin: 0 0 15px 0;
  padding-bottom: 5px;
  border-bottom: solid 2px #e6eaed;
}
.progress-bar-success {
  /*background-color: #06c972;*/
}
.progress {
  height: 6px;
  background-color: rgba(6, 201, 114, 0.15);
}
.progress_bar_text #counter_left, .progress_bar_text #counter_left1 {
  color:#244174;
}
.progress_bar_text, .product-single__description ul.tabs li a, .product-single__description ul.tabs li a.active, .payment-icon .line {
  /*font-family: Montserrat;*/
  font-size: 16px;
  color: #244174;
}
.payment-icon .line {
    padding-bottom: 5px;
    border-bottom: solid 2px #e6eaed;
}
.section-header h2 {
    margin: 20px 0;
}
.product-description p br[data-bogus="1"] {
    display: none;
}
.slideshow--small{height:325px}.slideshow.slideshow--medium{height:500px}.slideshow.slideshow--large{height:575px}

.slideshow--small .slideshow__image{height:325px}.slideshow.slideshow--medium .slideshow__image{height:500px}.slideshow.slideshow--large .slideshow__image{height:575px}

.ops-price{
  /*text-align: right;*/
}
.custom-select-wrapper{
  display: flex;
  align-items: center;
}

.custom-select-wrapper label{
  margin:0;
}

.custom_cart_button {
  padding-left: 0;
  margin-top: 0px;
}

.product-price__sale--single {
  padding-left: 0px;
}

span.save_discount_pro {
    margin-top: 5px;
    display: inline-block;
}

.product-progress__addcart #AddToCart, .product-progress__addcart #AddToCartZero {
  padding: 11px 0px;
  border-radius: 25px;
}
#reviewModal .modal-header {
    display: flex;
    justify-content: space-between;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-group {
    margin-bottom: 1rem;
}
.float-right {
    text-align: right;
}
.product-price__price {
    /*color: #244174;*/
}
.counter-wrapper{
  margin-bottom: 20px;
}

.cst-small-crtbtn #AddToCart>span {
    font-size: 14px !important;
}
.disp-flex.product-price__quantity .qty_selector {
    font-size: 15px;
    padding-top: 5px;
}
.fake_counter_icon span{
  animation: blinker 2s linear infinite;

}
.slideshow__image{
  z-index: 0;
}
#macy-container {
    margin-top: 20px;
    margin-left: 0;
}
#macy-container p {
    font-size: 14px;
}
.font-italic {
    font-style: italic!important;
}
.card-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.template-index .cartx-section:first-child {
    margin-top: 0px !important;
}
.custom_pro_price {
    display: block;
}
.disp-flex.product-title .product-single__title{
  margin-bottom: 12px;
}
.site-nav__dropdown{
  z-index: 999;
  top: 80%;
}
.product-progress__addcart_with_timer {
    justify-content: center;
}
.product-single__thumbnail-image {
    margin: 0 auto;
}
@media screen and (max-width: 749px) {
  .disp-flex.product-title,.disp-flex-options,.disp-flex-options .selector-wrapper {
    flex-wrap: wrap;
  }

  .disp-flex-options .selector-wrapper{
        width: 100%;
            margin-right: 0;
    margin-bottom: 12px;
  }
  .selector-wrapper label {
    width: 100%;
}
  .ops-price {
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: left;
  }
  .disp-flex.product-title {
      border-bottom: none;
      padding-bottom: 0;
  }
    h1.product-single__title.heading {
      display: block;
      width: 100%;
      border-bottom: 3px solid;
      padding-bottom: 8px;
  }
  #product-review-element .overall-rating-wrapper {
      margin: 10px auto;
  }
  #product-review-element button[data-toggle="modal"] {
      margin: 10px auto;
      display: block;
  }
  #AddToCartForm1 .price-lable {
    width: 40%;
    font-size: 12px !important;
  }
}
@media only screen and (min-width: 990px) {
  .grid__item.cst-small-crtbtn {
    padding-left: 0px;
  }
  .slideshow.slideshow--small .slideshow__image{height:475px}.slideshow.slideshow--medium .slideshow__image{height:650px}.slideshow.slideshow--large .slideshow__image{height:775px}
  .slideshow.slideshow--small{height:475px}.slideshow.slideshow--large{height:775px}
}

@media (min-width: 990px) and (max-width: 1180px){
  .slideshow.slideshow--medium {
      height: 500px;
  }
}
@media only screen and (max-width: 767px) {
    #AddToCartForm1.stiky_form button#AddToCart {
        float: none;
        width: 55%;
    }
}
@media screen and (max-width: 749px){
    .ops-price {
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
    }
    .disp-flex-options .selector-wrapper{
        width: 47%;
    }
    .stiky_form div#mst-stiky-box {
        left: 4% !important;
        width: 92%;
    }
    span#hm_timer samp{
      width: 24% !important;
    }
    .tm_sap {
      padding-right: 10px;
      padding-left: 10px;
      width: 10%;
    }
    .social-feeds-section .splide__pagination {
      bottom: 0;
    }
    .template-index .product-form__cart-submit {
        width: 100%;
    }
    .product-form__item--quantity {
      flex: 0 0 50%;
    }
}
@media only screen and (max-width: 500px) {
  #AddToCartForm1.stiky_form button#AddToCart {
    float: none;
    width: 55%;
  }
  #progress_bar2 .progress_bar_text {
    font-size: 12px;
  }
  #product-review-element h1 {
    font-size: 1.8em;
  }
}
.cu_feature .feature-row__image-wrapper .feature-row__image {
    position: relative;
    top: 0;
}
@media only screen and (min-width: 750px){
.feature-row__text--left {
    padding-left: 100px;
    padding-right: 100px;
}
}
#Collection {
    margin-bottom: 40px;
}
#Collection .medium-up--one-half .grid-view-item__link .grid-view-item__image-wrapper {
    display: inline-block;
    max-width: 300px;
}
#Collection .medium-up--nine-twelfths .medium-up--one-half .grid-view-item__link {
    display: block;
}
@media only screen and (min-width: 1025px){
  .reveal .hidden{
    width: auto;
  }
}
@media screen and (max-width: 749px){
  .product-single__photo--has-thumbnails .feature-row__image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  #product-review-element h1 {
    text-align: center;
  }
}
.shop-now{
  font-size: 15px;
}
.grid__item--collection-template.large-up--one-fifth .shop-now {
    font-size: 13px;
}
.prod-star-reviews {
    font-size: 20px;
    margin-bottom: 10px;
}
.payment-icons img {
    height: 30px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.payment-icons li {
    margin: 0 2px;
}
#mst-stiky-box .selector-wrapper.custom-select-wrapper {
    display: block;
    margin: 0;
}
#mst-stiky-box .disp-flex-options {
    margin: 0;
 }
.slick-slide {
    height: auto;
}

/* Cookie consent styles */
.cc-window.cc-banner {
    padding: 1.5em 1.8em;
    z-index: 99999999999 !important;
}
.cc-message {
    font-size: 0.8em;
    line-height: 1.4
}
.cc-compliance {
    padding-left: 4em
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .cc-window.cc-banner {
        padding: 1.5em 1.8em;
        flex: auto;
        max-width: 90%;
        margin-left: 5%;
        margin-bottom: 1%;
        border-radius: 5px;
        z-index: 9999999999 !important;
    }
    .cc-message {
        font-size: 0.9em;
        line-height: 1.4
    }
    .cc-compliance {
        padding-left: 4em
    }
}
[data-slider_count="1"] ul.slick-dots {
    display: none;
}
#Installment-Price-collection-template {
    display: block;
}
.product-price__quantity {
    margin-bottom: 12px;
}
.head-crt-icon {
     font: normal normal normal 14px/1 FontAwesome; 
}
@media screen and (min-width: 750px){
  .product-single .product-single__photo-wrapper .feature-row__image {
      height: auto;
      width: auto;
      left: 50%;
      transform: translateX(-50%);
  }
}
@media only screen and (max-width: 500px) {
  .product-single__meta {
    padding: 10px;
  }
  #ProductSection-product-template {
      padding-left: 10px;
      padding-right: 10px;
  }
  .slick-active.video-is-playing .responsive-iframe, .slick-active.video-is-paused .responsive-iframe {
      overflow: hidden;
      width: 100%;
      padding-top: 56.25%;
      position: relative;
  }
  .slick-active.video-is-playing .responsive-iframe + .slideshow__image, .slick-active.video-is-paused .responsive-iframe + .slideshow__image {
      display: none;
  }
  .responsive-iframe iframe {
      width: 100%;
      height: 100%;
  }
}
@media screen and (max-width: 750px){
  .product-single .product-single__photo-wrapper .feature-row__image {
      width: auto;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
  }
}

.timer_adjustment {
  padding: 5px 0px 5px 0px;
}
.secure-shopping p+img {
    margin-top: 18px;
}
@media only screen and (max-width: 749px){
  .thumbnails-wrapper {
      padding-bottom: 10px;
  }
  input.custome_checkout {
      display: none;
  }
}
.product-single__description ul.tabs li a {
    cursor: default;
}
.mobile-nav-wrapper.js-menu--is-open {
    z-index: 99;
}

/* ===== VIVA PLENA - TARJA PROMO (TOPO) ===== */
.vp-announcement{
  background: #e5525f;
  width: 100%;
  height: 40px;              /* ALTURA EXATA do Hostinger */
  padding: 0;
  margin: 0;

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

  box-sizing: border-box;
}

.vp-announcement span{
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20.4px;           /* TAMANHO EXATO do Hostinger */
  line-height: 1.3;

  text-transform: uppercase; /* CAIXA ALTA (OBRIGATÓRIO) */
  color: #ffffff;

  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;

  margin: 0;
  padding: 0;
}

/* REMOVE TARJA NATIVA DO TEMA LIFT */
.announcement,
.announcement-bar,
.header__announcement,
.top-bar {
  display: none !important;
}

/* ===== VIVA PLENA - HEADER (OPÇÃO A - LIMPO) ===== */

.site-header{
  height: 84px !important;
  min-height: 84px !important;
  padding: 0 !important;
}

.site-header .row{
  height: 84px !important;
  display: flex !important;
  align-items: center !important;
}

.site-header__logo{
  margin: 0 !important;
}

.desktop_header_logo img,
.mobile_header_logo img{
  height: 83px !important;   /* ajusta a logo aqui */
  width: auto !important;
  object-fit: contain !important;
  display: block;
}

.desktop_header_logo,
.mobile_header_logo{
  transform: translate(76px, -23px);
}

/* ===== VIVA PLENA - FIX APENAS MOBILE (não mexe no desktop) ===== */
@media (max-width: 989px){

  /* anula o empurrão/transform que você aplicou e que quebrou no mobile */
  .mobile_header_logo{
    transform: none !important;
  }

  /* garante alinhamento vertical do header no mobile */
  header.site-header .grid--table{
    display: flex !important;
    align-items: center !important;
  }

  /* se ainda precisar ajustar fininho posição no mobile */
  .mobile_header_logo{
    position: relative !important;
    top: 0px !important;   /* ex: -6px sobe */
    left: 0px !important;  /* ex: 10px empurra pra direita */
  }
}

/* ===== VIVA PLENA - AJUSTES EXTRAS APENAS MOBILE (SEM MEXER NA LOGO) ===== */
@media (max-width: 989px){

  /* 1) TARJA VERMELHA: mexe SÓ na fonte (altura da tarja fica intacta) */
  @media (max-width: 989px){

  .vp-announcement{
    justify-content: center !important;
  }

  .vp-announcement span{
    font-size: 13px !important;      /* começa em 12px pra caber 100% */
    line-height: 1.05 !important;

    white-space: nowrap !important;  /* NÃO quebra linha */
    overflow: hidden !important;     /* se faltar espaço, não estoura */
    text-overflow: ellipsis !important; /* opcional: coloca “...” */
    display: block !important;

    max-width: 100% !important;
  }

}


  @media (max-width: 989px){

  /* CONTROLE: altura do header no MOBILE */
  :root{
    --vp-header-h-mobile: 126px; /* <-- AJUSTE AQUI o quanto quiser */
  }

  header.site-header,
  .site-header{
    height: var(--vp-header-h-mobile) !important;
    min-height: var(--vp-header-h-mobile) !important;
    padding: 0 !important;
  }

  /* acompanha a altura do header */
  .site-header .row{
    height: var(--vp-header-h-mobile) !important;
  }

}


  /* 3) ÍCONE DO MENU (HAMBURGUER): ajuste fino X/Y */
  header.site-header .site-header__menu.js-mobile-nav-toggle{
    position: relative !important;
    top: 0px !important;    /* negativo sobe | positivo desce */
    left: 20px !important;   /* positivo vai pra direita | negativo esquerda */
  }

  /* 4) SACOLA/CARRINHO: ajuste fino X/Y */
  header.site-header a.site-header__cart.head_cart{
    position: relative !important;
    top: 0px !important;    /* negativo sobe | positivo desce */
    left: -20px !important;   /* positivo vai pra direita | negativo esquerda */
  }

}

/* ===== VIVA PLENA - MOBILE: LIBERAR LIMITES PRA LOGO CRESCER (SEM MEXER NO DESKTOP) ===== */
@media (max-width: 989px){

  /* 1) tira qualquer "teto" de tamanho que o tema esteja impondo */
  header.site-header a.mobile_header_logo img{
    max-height: none !important;
    max-width: none !important;
    height: 125.5px !important;   /* <-- AQUI você controla o tamanho REAL (teste 190, 210...) */
    width: auto !important;
  }

  /* 2) garante que o link/caixa da logo não esteja travando a altura */
  header.site-header a.mobile_header_logo{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
  }

  /* 3) garante que o "slot" da logo (o h1/div do logo mobile) não recorte */
  header.site-header .site-header__logo.medium-up--hide{
    overflow: visible !important;
  }
}

/* ===== VIVA PLENA - MOBILE: AFINAR SUBLINHADO DO TEXTO DA TARJA VERMELHA ===== */
@media (max-width: 989px){

  .vp-announcement span{
    text-decoration-thickness: 1px !important; /* teste: 0.8px / 1px / 1.2px */
    text-underline-offset: 1.5px !important;     /* afasta um pouco da letra */
  }

}
/* FIX: overlay do header roubando clique do menu (desktop) */
@media (min-width: 750px){
  .site-header { position: relative; z-index: 50; }
  #AccessibleNav { position: relative; z-index: 60; }

  /* garante que o link receba clique */
  #AccessibleNav .site-nav__link { position: relative; z-index: 70; pointer-events: auto; }

  /* desativa clique em overlays comuns que ficam por cima */
  .site-header:before,
  .site-header:after,
  .site-header .grid:before,
  .site-header .grid:after{
    pointer-events: none !important;
  }
}

/* ===== VIVA PLENA - MENU DESKTOP (TIPOGRAFIA + ALINHAMENTO + UNDERLINE) ===== */
@media (min-width: 990px){

  /* 1) Empurra o menu do desktop para a direita (mesma “pegada” do site oficial) */
  #AccessibleNav{
    text-align: right !important;
  }

  /* 2) Menu em linha, com espaçamento “limpo” */
  #SiteNav{
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important; /* ajuste fino: 18~28 */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Tipografia igual ao site oficial */
  #SiteNav > li > a.site-nav__link--main{
    font-family: "Poppins", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

    /* underline controlado */
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    padding-bottom: 4px !important;
  }

  /* 4) Underline APENAS no hover/focus */
  #SiteNav > li > a.site-nav__link--main:hover,
  #SiteNav > li > a.site-nav__link--main:focus{
    border-bottom-color: currentColor !important;
  }

  /* 5) Underline FIXO no item ATIVO (página atual) */
  #SiteNav > li.site-nav--active > a.site-nav__link--main,
  #SiteNav > li > a.site-nav__link--main[aria-current="page"]{
    border-bottom-color: currentColor !important;
  }

  /* 6) Dropdown: mantém o underline só durante hover no pai (não “gruda”) */
  .site-nav--has-dropdown:hover > a.site-nav__link--main{
    border-bottom-color: currentColor !important;
  }
}

/* =========================
   VIVA PLENA - CONTROLES (DESKTOP)
   - Move MENU e ICONES de forma independente
   - NÃO move o campo/overlay da busca
   ========================= */

:root{
  /* MENU (nav) */
  --vp-menu-x: -80px;     /* + vai pra direita | - vai pra esquerda */
  --vp-menu-y: -35px;     /* + desce | - sobe */

  /* ICONES (lupa + sacola) */
  --vp-icons-x: -20px;    /* + vai pra direita | - vai pra esquerda */
  --vp-icons-y: -23px;    /* + desce | - sobe */

  /* TIPOGRAFIA DO MENU */
  --vp-menu-font-size: 27px;
  --vp-menu-letter-spacing: 0px;
  --vp-menu-underline-h: 0.2px;   /* espessura do sublinhado */
}

/* Só DESKTOP */
@media (min-width: 990px){

  /* ---------- MENU: posição livre ---------- */
  nav#AccessibleNav{
    position: relative;
    transform: translate(var(--vp-menu-x), var(--vp-menu-y));
    z-index: 5;
  }

  /* ---------- ICONES (lupa + carrinho): posição livre ---------- */
  .site-header__icons{
    position: relative;
    transform: translate(var(--vp-icons-x), var(--vp-icons-y));
    z-index: 6;
  }

  /* ---------- Fonte/estilo do menu ---------- */
  #SiteNav .site-nav__link--main{
    font-family: "Poppins", sans-serif !important;
    font-size: var(--vp-menu-font-size) !important;
    font-weight: 400 !important;        /* <<< AQUI ajusta a “grossura” */
    letter-spacing: var(--vp-menu-letter-spacing) !important;
    text-transform: none !important;
    position: relative;
    padding-bottom: 6px; /* espaço pra linha do sublinhado */
  }

  /* ---------- Sublinhado igual ao site oficial:
     - aparece no HOVER
     - fica fixo no item ATIVO (página atual)
  ---------- */
  #SiteNav .site-nav__link--main::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 70%;                 /* <<< CONTROLA O COMPRIMENTO */
    transform: translateX(-50%) scaleX(0);
    bottom: 0;
    height: var(--vp-menu-underline-h);
    background: currentColor;
    transform-origin: left;
    transition: transform .10s ease;
  }

  /* hover */
  #SiteNav .site-nav__link--main:hover::after{
    transform: translateX(-50%) scaleX(1);
  }

  /* ativo (quando estiver na página do link) */
  #SiteNav li.site-nav--active > .site-nav__link--main::after,
  #SiteNav .site-nav__link--main[aria-current="page"]::after{
    transform: translateX(-50%) scaleX(1);
  }
}

/* ===== FIX CLIQUE MENU (DESKTOP) ===== */
@media (min-width: 990px){

  /* 1) Menu acima de qualquer camada do header */
  nav#AccessibleNav{
    position: relative !important;
    z-index: 9999 !important;
  }

  /* garante que o UL e os links estão na “frente” */
  #SiteNav,
  #SiteNav li,
  #SiteNav a{
    position: relative !important;
    z-index: 10000 !important;
  }

  /* 2) Deixa a área clicável do link “cheia” (não só algumas letras) */
  #SiteNav a.site-nav__link--main{
    display: inline-block !important;
    pointer-events: auto !important;
  }

  /* 3) Ícones ficam abaixo do menu (se estiverem sobrepondo) */
  .site-header__icons,
  .site-header__icons-wrapper{
    position: relative !important;
    z-index: 50 !important;
  }

  /* 4) Qualquer enfeite/linha/pseudo-elemento não pode “roubar” clique */
  header.site-header::before,
  header.site-header::after,
  #SiteNav a.site-nav__link--main::before,
  #SiteNav a.site-nav__link--main::after{
    pointer-events: none !important;
  }
}

/* ===== VIVA PLENA - UNDERLINE REAL (IGUAL AO DROPDOWN) ===== */
@media (min-width: 990px){

  /* base: SEM underline */
  #SiteNav .site-nav__link--main{
    text-decoration: none !important;
    text-underline-offset: 5px;   /* MESMO OFFSET do dropdown */
    text-decoration-thickness: 1px; /* MESMA GROSSURA do dropdown */
  }

  /* hover */
  #SiteNav .site-nav__link--main:hover{
    text-decoration: underline !important;
  }

  /* ativo (página atual) */
  #SiteNav li.site-nav--active > .site-nav__link--main,
  #SiteNav .site-nav__link--main[aria-current="page"]{
    text-decoration: underline !important;
  }

  /* mantém Categorias ativo em páginas de coleção (regra que já corrigimos) */
  body.template-collection
  #SiteNav:not(:has(a[aria-current="page"][href*="/collections/all"]))
  > li[aria-controls="SiteNavLabel-categorias"]
  > a.site-nav__link--main{
    text-decoration: underline !important;
  }
}

/* ===== VIVA PLENA - REMOVE OVERLAY ESCURO DO HERO (HOME) ===== */
.template-index{
  --image_overlay_opacity: 0 !important;
  --color_image_overlay: transparent !important;
}

.template-index .hero__overlay::before,
.template-index .hero__overlay:before{
  opacity: 0 !important;
  background: transparent !important;
  display: none !important;
  content: none !important;
}


/* =========================
   VIVA PLENA - DROPDOWN CATEGORIAS (DESKTOP)
   - underline no hover nas opções
   - NÃO mantém underline no item clicado
   - mantém "Categorias" ativo em páginas de coleção
   ========================= */
@media (min-width: 990px){

  /* 1) Underline no hover das opções do dropdown */
  .site-nav__dropdown a.site-nav__child-link{
    text-decoration: none !important;
  }

  .site-nav__dropdown a.site-nav__child-link:hover{
    text-decoration: underline !important;
    text-underline-offset: 3px;
  }

  /* 2) Se a opção estiver "ativa" (aria-current), NÃO deixa sublinhado */
  .site-nav__dropdown a.site-nav__child-link[aria-current="page"]{
    text-decoration: none !important;
  }

}
  
@media (min-width: 990px){

  /* Em qualquer coleção, mantém "Categorias" ativo...
     EXCETO quando a página atual é /collections/all (Todos os produtos) */
  body.template-collection
  #SiteNav:not(:has(a[aria-current="page"][href*="/collections/all"]))
  > li[aria-controls="SiteNavLabel-categorias"] > a.site-nav__link--main::after{
    transform: scaleX(1) !important;
  }
}

/* =========================
   PATCH CIRÚRGICO - CATEGORIAS (DESKTOP)
   - NÃO mexe no alinhamento do menu
   - só ajusta dropdown + hover/click
   ========================= */
@media (min-width: 990px){

  /* alvo: o <li> do item "Categorias" */
  #SiteNav > li[aria-controls="SiteNavLabel-categorias"]{
    position: relative !important;
  }

  /* 1) Mantém o clique no texto inteiro do botão Categorias */
  #SiteNav > li[aria-controls="SiteNavLabel-categorias"] > a.site-nav__link--main{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  /* 2) Dropdown MAIS PRA BAIXO (só do Categorias) */
  #SiteNav > li[aria-controls="SiteNavLabel-categorias"] > .site-nav__dropdown{
    top: calc(100% + 5px) !important; /* <<< ajusta aqui (8px~18px) */
    left: auto !important;
    right: 20 !important;              /* mantém alinhado pra direita como tá no print */
    z-index: 10000 !important;
  }

  /* 3) "PONTE" invisível pra não sumir quando mover o mouse mais devagar */
  #SiteNav > li[aria-controls="SiteNavLabel-categorias"]::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;                     /* <<< ajusta aqui (10px~20px) */
    background: transparent;
  }

  /* 4) Hitbox do dropdown = linha inteira (hover funciona 100%) */
  #SiteNav > li[aria-controls="SiteNavLabel-categorias"] .site-nav__dropdown a.site-nav__child-link{
    display: block !important;
    width: 100% !important;
    padding: 8px 14px !important;     /* área de hover maior */
    position: relative !important;
    z-index: 10002 !important;
  }

  /* 5) Underline no hover dos itens (inclusive Vibradores) */
  #SiteNav > li[aria-controls="SiteNavLabel-categorias"] .site-nav__dropdown a.site-nav__child-link:hover{
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
}

/* =========================
   VIVA PLENA - UNDERLINE UNIFICADO (DESKTOP)
   - mata underlines antigos (border/::after)
   - usa text-decoration igual ao dropdown
   - hover + ativo (página atual)
   - "Categorias" fica ativo em páginas de coleção
   ========================= */
@media (min-width: 990px){

  /* 0) DESLIGA qualquer underline antigo do menu principal */
  #SiteNav > li > a.site-nav__link--main{
    border-bottom: 0 !important;
    text-decoration: none !important;
  }
  #SiteNav > li > a.site-nav__link--main::after{
    content: none !important;
    display: none !important;
  }

  /* 1) Define a “grossura” padrão (igual ao dropdown) */
  :root{
    --vp-underline-thickness: 1px;      /* <<< ajuste aqui se quiser (1px / 2px) */
    --vp-underline-offset: 7px;
  }

  /* 2) Underline no hover/focus (botões do topo) */
  #SiteNav > li > a.site-nav__link--main:hover,
  #SiteNav > li > a.site-nav__link--main:focus{
    text-decoration-line: underline !important;
    text-decoration-thickness: var(--vp-underline-thickness) !important;
    text-underline-offset: var(--vp-underline-offset) !important;
  }

  /* 3) Underline FIXO no item ATIVO (página atual) */
  #SiteNav > li.site-nav--active > a.site-nav__link--main,
  #SiteNav > li > a.site-nav__link--main[aria-current="page"]:not([href*="www.vivaplenaoficial.com"]){
    text-decoration-line: underline !important;
    text-decoration-thickness: var(--vp-underline-thickness) !important;
    text-underline-offset: var(--vp-underline-offset) !important;
  }

  /* 4) Regra especial: em qualquer página de coleção, "Categorias" fica ativo */
  body.template-collection li[aria-controls="SiteNavLabel-categorias"] > a.site-nav__link--main{
    text-decoration-line: underline !important;
    text-decoration-thickness: var(--vp-underline-thickness) !important;
    text-underline-offset: var(--vp-underline-offset) !important;
  }

  /* 5) Dropdown: garante a MESMA grossura no hover dos itens */
  .site-nav__dropdown a.site-nav__child-link:hover{
    text-decoration-thickness: var(--vp-underline-thickness) !important;
    text-underline-offset: 3px !important;
  }
}

/* ===== VIVA PLENA - ALINHAMENTO SUBTOTAL / DESCONTO / TOTAL ===== */
.cart__footer .totle_cart > div {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 6px;
  column-gap: 14px;
  align-items: start;
}

.cart__footer .cart__subtotal-title {
  text-align: left;
  white-space: nowrap;
}

.cart__footer .cart__subtotal,
.cart__footer .cart__auto_discount,
.cart__footer .cart__auto_total {
  text-align: right;
}

/* garante que os blocos customizados respeitem o grid */
.cart__footer .vp-offer-wrap {
  align-items: flex-end;
}

/* ===== ALINHAMENTO SUBTOTAL / DESCONTO / TOTAL ===== */

.grid__item.totle_cart.text-right > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* cada linha (SUBTOTAL, DESCONTO, TOTAL) */
.grid__item.totle_cart.text-right > div > .vp-sum-row,
.grid__item.totle_cart.text-right > div > .cart_with_discount,
.grid__item.totle_cart.text-right > div > .cart_with_total,
.grid__item.totle_cart.text-right > div > span.cart__subtotal-title {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  width: 360px; /* controla a coluna inteira */
  gap: 20px;
}

/* rótulos */
.grid__item.totle_cart.text-right .cart__subtotal-title {
  min-width: 110px;
  text-align: right;
  font-weight: 700;
}

/* valores */
.grid__item.totle_cart.text-right .cart__subtotal,
.grid__item.totle_cart.text-right .cart__auto_discount,
.grid__item.totle_cart.text-right .cart__auto_total {
  text-align: right;
}

/* ===== AJUSTES FINAIS: TEXTO EM LINHA ÚNICA ===== */

/* DESCONTO: "65% OFF no PIX/CARTÃO" em uma linha */
.grid__item.totle_cart.text-right .cart__auto_discount {
  white-space: nowrap;
}

/* TOTAL: "R$ xxx | Economize R$ xxx" em uma linha */
.grid__item.totle_cart.text-right .vp-economy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* evita quebra do separador | */
.grid__item.totle_cart.text-right .vp-sep {
  white-space: nowrap;
}

/* ===== SUBTOTAL: PREÇO RISCADO ACIMA DO VALOR ===== */

/* transforma o bloco de valor do subtotal em coluna */
.grid__item.totle_cart.text-right
  .vp-sum-subtotal
  .cart__subtotal
  .vp-offer-wrap {
  display: flex;
  flex-direction: column-reverse; /* INVERTE: riscado em cima */
  align-items: flex-end;
  gap: 4px;
}

/* garante que o texto principal continue alinhado com o label SUBTOTAL */
.grid__item.totle_cart.text-right
  .vp-sum-subtotal {
  align-items: center;
}

/* Desce SOMENTE o label "SUBTOTAL" sem empurrar DESCONTO/TOTAL */
.grid__item.totle_cart.text-right > div > span.cart__subtotal-title {
  display: inline-block;
  transform: translateY(300px);
}

/* ================================
   VIVA PLENA - HERO FIX DEFINITIVO
   - força imagem FULL (sem thumbor)
   - remove overlay/escurecimento
   - SEM corte (contain)
   - sem faixa branca (fundo unificado)
================================ */

.template-index .slideshow-wrapper,
.template-index .slideshow,
.template-index .slideshow__slide,
.template-index .slideshow__image{
  background: #e7d0c7 !important; /* fundo do banner */
  margin: 0 !important;
  padding: 0 !important;
}

/* mata overlays que escurecem */
.template-index .slideshow__overlay,
.template-index .slideshow__image::before,
.template-index .slideshow__image::after{
  opacity: 0 !important;
  background: transparent !important;
  display: none !important;
}

/* O PULO DO GATO: o hero real normalmente é background na .slideshow__image */
.template-index .slideshow__image{
  background-image: url("https://assets.mycartpanda.com/static/theme_images/57/0e/d7/762005_7131067736.png?v=13252247658") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important; /* mostra o banner inteiro */
}

/* garante que nada “corte” */
.template-index .slideshow__image,
.template-index .slideshow__slide{
  overflow: hidden !important;
}

/* se tiver altura fixa no tema, deixa uma altura padrão boa (ajuste fino aqui) */
@media (min-width: 990px){
  .template-index .slideshow--large,
  .template-index .slideshow.slideshow--large .slideshow__image{
    height: 575px !important;
  }
}
@media (max-width: 989px){
  .template-index .slideshow--large,
  .template-index .slideshow.slideshow--large .slideshow__image{
    height: 360px !important;
  }
}

/* Banner hero – remove faixa branca do "contain" */
.hero.hero--medium.hero__overlay.box.ratio-container{
  background-position: center top !important;  /* gruda a imagem no topo */
  background-repeat: no-repeat !important;
  background-size: contain !important;         /* mantém sem cortar */
}

/* =========================
   VIVA PLENA - CATEGORIAS (ESTILO ADIDAS)
   ========================= */

.vp-cats{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 26px;
  padding: 20px 0;
  background: #fff;
  align-items: start;
}

.vp-cat{
  text-decoration: none;
  color: #111;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 14px;
  border: 1px solid transparent;  /* “quadrado invisível” */
  transition: border-color .18s ease;
}

.vp-cat__avatar{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
}

.vp-cat__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vp-cat__label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.vp-cat:hover{
  border-color: #111; /* aparece o quadrado no hover */
}

/* mobile */
@media (max-width: 768px){
  .vp-cats{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .vp-cat{
    padding: 14px 10px;
  }
  .vp-cat__avatar{
    width: 82px;
    height: 82px;
  }
}

/* =========================================
   VIVA PLENA - CATEGORIAS (COLLECTION-LIST) ESTILO ADIDAS
   - Círculo (avatar) maior (padrão Adidas)
   - Título abaixo
   - Hover com borda leve
   ========================================= */

/* >>> CONTROLES DE TAMANHO (ajuste fino aqui) <<< */
:root{
  --vp-cat-size-desktop: 170px; /* tamanho do círculo no DESKTOP */
  --vp-cat-size-mobile: 104px;  /* tamanho do círculo no MOBILE  */
  --vp-cat-gap-desktop: 12px;   /* espaço entre círculo e texto   */
  --vp-cat-gap-mobile: 10px;
}

/* container geral da lista */
.template-index .collection-grid{
  padding: 10px 0;
}

/* cada item centralizado */
.template-index .collection-grid .grid__item{
  text-align: center;
}

/* link vira “card” com borda no hover */
.template-index .collection-grid .collection-grid-item__link{
  display: grid !important;
  justify-items: center !important;
  gap: var(--vp-cat-gap-desktop) !important;
  padding: 18px 14px !important;
  border: 1px solid transparent !important; /* “quadrado invisível” */
  text-decoration: none !important;
  opacity: 1 !important;
  transition: border-color .18s ease !important;
}

.template-index .collection-grid .collection-grid-item__link:hover{
  border-color: #111 !important;
}

/* ====== IMAGEM (é background na overlay): força virar CÍRCULO ====== */
.template-index .collection-grid .collection-grid-item__overlay{
  width: var(--vp-cat-size-desktop) !important;
  height: var(--vp-cat-size-desktop) !important;
  border-radius: 999px !important;
  overflow: hidden !important;

  background-color: #fff !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  margin: 0 auto !important;
}

/* ====== TEXTO: tira overlay/posição absoluta e joga abaixo ====== */
.template-index .collection-grid .collection-grid-item__title-wrapper{
  position: static !important;
  transform: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.template-index .collection-grid .collection-grid-item__title{
  position: static !important;
  transform: none !important;
  margin: 0 !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: #111 !important;

  background: transparent !important;
  padding: 0 !important;
  text-align: center !important;
}

/* some com “VIEW ALL” (não existe no modelo Adidas) */
.template-index .collection-grid .coll_all{
  display: none !important;
}

/* ====== MOBILE ====== */
@media (max-width: 768px){
  .template-index .collection-grid .collection-grid-item__overlay{
    width: var(--vp-cat-size-mobile) !important;
    height: var(--vp-cat-size-mobile) !important;
  }

  .template-index .collection-grid .collection-grid-item__link{
    padding: 14px 10px !important;
    gap: var(--vp-cat-gap-mobile) !important;
  }
}

/* ================================
   VIVA PLENA - REMOVE OVERLAY CINZA DO HOVER (CATEGORIAS)
   Fonte do overlay: .collection-grid-item__title-wrapper::before
================================ */

.template-index .collection-grid-item__title-wrapper::before{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* redundância (caso o tema force no hover) */
.template-index .collection-grid-item__link:hover .collection-grid-item__title-wrapper::before{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* =========================================================
   PATCH FINAL - HEADER
   1) REMOVE LINHA DOURADA ENTRE HEADER E BANNER
   2) "INÍCIO" (link externo) SEM SUBLINHADO FIXO NA LOJA
   ========================================================= */

/* 1) Remove qualquer “linha”/divider sob o header (border/shadow/pseudo) */
header.site-header,
.site-header,
.site-header .row,
.site-header__icons,
.site-header__icons-wrapper,
nav#AccessibleNav{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

header.site-header::before,
header.site-header::after,
.site-header::before,
.site-header::after{
  content: none !important;
  display: none !important;
}

/* =========================
   VIVA PLENA - REMOVE GAP ENTRE HEADER E HERO (HOME)
   ========================= */

/* 1) ZERA qualquer margem inferior do header */
.template-index header.site-header,
.template-index .site-header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) ZERA margem superior da primeira section (hero/slideshow) */
.template-index .slideshow-wrapper,
.template-index .slideshow,
.template-index .slideshow__slide,
.template-index .slideshow__image{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Remove espaçamento fantasma do container principal */
.template-index main#MainContent{
  padding-top: 0 !important;
}

/* HERO: não cortar topo depois de remover gap */
.template-index .slideshow__image{
  background-position: center top !important;
}

/* ===== GAP ENTRE HEADER E PRIMEIRA SEÇÃO (HOME) - TIRO CERTEIRO ===== */
.template-index header.site-header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* o gap geralmente está no PRIMEIRO bloco do main, não no slideshow */
.template-index main#MainContent{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.template-index main#MainContent > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  top: -2px !important;   /* se ainda tiver 1px, sobe pra -3px */
}

/* se o tema cria a “linha” via pseudo-elemento do primeiro bloco */
.template-index main#MainContent > *:first-child::before,
.template-index main#MainContent > *:first-child::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   VIVA PLENA - CONTROLE FINO DOS TEXTOS (HOME / CATEGORIAS)
   - NÃO mexe na moldura/hover do card
   - controla: posição X/Y, fonte, peso, caixa branca etc.
   ========================================================= */

/* ====== TÍTULO "CATEGORIAS" (h2.title) ====== */
:root{
  /* posição */
  --vp-title-categorias-x: -450px;   /* + direita | - esquerda */
  --vp-title-categorias-y: 0px;   /* + desce  | - sobe */

  /* tipografia */
  --vp-title-categorias-size: 28px;
  --vp-title-categorias-weight: 700;
  --vp-title-categorias-letter: 0px;
  --vp-title-categorias-color: #111;
}

.template-index .section-header.text-center > h2.title{
  position: relative !important;
  transform: translate(var(--vp-title-categorias-x), var(--vp-title-categorias-y)) !important;

  font-size: var(--vp-title-categorias-size) !important;
  font-weight: var(--vp-title-categorias-weight) !important;
  letter-spacing: var(--vp-title-categorias-letter) !important;
  color: var(--vp-title-categorias-color) !important;

  margin: 0 !important;
}

/* BASE: garante que o H4 aceita transform */
.template-index .vp-catlabel{
  position: relative !important;
  display: inline-block !important;
  transform: translate(0px, 0px) !important;
}

/* =================================================
   VIVA PLENA – CONTROLE INDIVIDUAL X / Y DOS TEXTOS
   ================================================= */

/* BASE – habilita movimento fino */
.template-index .collection-grid-item__title.vp-catlabel{
  position: relative !important;
  display: inline-block !important;
  transform: translate(0px, 0px);
  will-change: transform;
}

/* ================================
   FIX DEFINITIVO - MOVE LABELS (X/Y)
   ================================ */

/* NÃO mexe no card, só garante que o texto aceita transform */
.template-index h4.vp-catlabel{
  position: relative !important;
  display: inline-block !important;
}

/* cada categoria (X, Y) */
.template-index h4.vp-catlabel.vp-catlabel--linha-premium{
  transform: translate(-60px, -35px) !important;
}

.template-index h4.vp-catlabel.vp-catlabel--vibradores{
  transform: translate(-69px, -35px) !important;
}

.template-index h4.vp-catlabel.vp-catlabel--sugadores{
  transform: translate(-72px, -35px) !important;
}

.template-index h4.vp-catlabel.vp-catlabel--sugador-com-vibrador{
  transform: translate(-20px, -35px) !important;
}

/* =========================================================
   VIVA PLENA - RETÂNGULO BRANCO ATRÁS DO TEXTO (tipo Adidas)
   - NÃO altera seu posicionamento atual do texto
   - adiciona “label” com ::before
   - com controles globais + por categoria
   ========================================================= */

/* ===== CONTROLES GLOBAIS (ajuste aqui primeiro) ===== */
:root{
  --vp-tag-w: 190px;          /* largura do retângulo */
  --vp-tag-h: 36px;           /* altura do retângulo */
  --vp-tag-radius: 0px;       /* 0 = quadrado / 4px = levemente arredondado */
  --vp-tag-bg: #ffffff;       /* cor do retângulo */
  --vp-tag-shadow: none;      /* opcional: 0 1px 0 rgba(0,0,0,.08) */

  /* posição do retângulo (em relação ao TEXTO) */
  --vp-tag-x: 0px;            /* + direita | - esquerda */
  --vp-tag-y: -4px;           /* + desce   | - sobe */
}

/* base do texto (já existe, mas aqui garante o “slot” do retângulo) */
.template-index h4.vp-catlabel{
  position: relative !important;
  display: inline-block !important;
  z-index: 1; /* texto na frente */
  padding: 0 10px; /* respiro pro retângulo não encostar na letra */
}

/* o retângulo */
.template-index h4.vp-catlabel::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--vp-tag-w);
  height: var(--vp-tag-h);
  background: var(--vp-tag-bg);
  border-radius: var(--vp-tag-radius);
  box-shadow: var(--vp-tag-shadow);

  transform: translate(calc(-50% + var(--vp-tag-x)), calc(-50% + var(--vp-tag-y)));
  z-index: -1; /* fica atrás do texto */
  pointer-events: none; /* não atrapalha clique/hover */
}

/* ===== CONTROLES INDIVIDUAIS (só se precisar) =====
   Se quiser, você ajusta cada um aqui sem mexer no global
*/

/* LINHA PREMIUM */
.template-index h4.vp-catlabel--linha-premium{
  --vp-tag-w: 120px;
  --vp-tag-h: 13px;
  --vp-tag-x: 0px;
  --vp-tag-y: -4px;
}

/* VIBRADORES */
.template-index h4.vp-catlabel--vibradores{
  --vp-tag-w: 100px;
  --vp-tag-h: 13px;
  --vp-tag-x: 0px;
  --vp-tag-y: -4px;
}

/* SUGADORES */
.template-index h4.vp-catlabel--sugadores{
  --vp-tag-w: 98px;
  --vp-tag-h: 13px;
  --vp-tag-x: 0px;
  --vp-tag-y: -4px;
}

/* SUGADORES COM VIBRADOR */
.template-index h4.vp-catlabel--sugador-com-vibrador{
  --vp-tag-w: 140px;   /* esse é o mais comprido */
  --vp-tag-h: 13px;
  --vp-tag-x: 0px;
  --vp-tag-y: -4px;
}

/* =========================================================
   VIVA PLENA – CONTROLE VERTICAL DAS CATEGORIAS (HOME)
   Move o BLOCO inteiro (círculo + texto + retângulo)
   ========================================================= */

/* ===== CONTROLES GLOBAIS ===== */
:root{
  --vp-cat-shift-y: 20px;   /* + desce | - sobe (todas as categorias) */
}

/* aplica o deslocamento global */
.template-index .collection-grid .grid__item{
  position: relative !important;
  transform: translateY(var(--vp-cat-shift-y));
}

/* ===== CONTROLES INDIVIDUAIS (por categoria) ===== */
/* ajuste só se precisar refinar */

/* LINHA PREMIUM */
.template-index .collection-grid
h4.vp-catlabel--linha-premium{
  --vp-item-shift-y: 0px;
}
.template-index .collection-grid
h4.vp-catlabel--linha-premium{
  transform: translateY(var(--vp-item-shift-y));
}

/* VIBRADORES */
.template-index .collection-grid
h4.vp-catlabel--vibradores{
  --vp-item-shift-y: 0px;
}
.template-index .collection-grid
h4.vp-catlabel--vibradores{
  transform: translateY(var(--vp-item-shift-y));
}

/* SUGADORES */
.template-index .collection-grid
h4.vp-catlabel--sugadores{
  --vp-item-shift-y: 0px;
}
.template-index .collection-grid
h4.vp-catlabel--sugadores{
  transform: translateY(var(--vp-item-shift-y));
}

/* SUGADORES COM VIBRADOR */
.template-index .collection-grid
h4.vp-catlabel--sugadores-com-vibrador{
  --vp-item-shift-y: 0px;   /* EX: -12px sobe | 12px desce */
}
.template-index .collection-grid
h4.vp-catlabel--sugadores-com-vibrador{
  transform: translateY(var(--vp-item-shift-y));
}

/* =========================================================
   FIX: CATEGORIAS (HOME) SEM SCROLL INTERNO
   (o tema colocou height/overflow em algum nível)
   ========================================================= */
.template-index .collection-grid,
.template-index .collection-grid .grid.grid--uniform{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* se algum item estiver “forçando” scroll por altura fixa */
.template-index .collection-grid .grid__item{
  height: auto !important;
  max-height: none !important;
}

/* segurança: alguns temas aplicam overflow no wrapper pai */
.template-index .collection-grid-item__link,
.template-index .collection-grid-item__title-wrapper{
  overflow: visible !important;
}

/* =========================================================
   HOME (template-index) — BLOCO DOS 4 PRODUTOS (Cartx)
   Controles: subir/descer bloco + altura da área da imagem
   ========================================================= */

/* CONTROLES (ajusta aqui) */
.template-index{
  --vp-home-prod-offset-y: 70px;   /* + desce / - sobe o bloco inteiro */
  --vp-home-prod-img-h: 360px;    /* altura da área da imagem (alinha topo) */
}

/* alvo do bloco (pelo teu inspect: cartx-section -> custom_bg hero__overlay -> page-width) */
.template-index .cartx-section .custom_bg.hero__overlay{
  margin-top: var(--vp-home-prod-offset-y) !important;
}

/* faz os 4 cards terem a mesma “estrutura” sem quebrar nada */
.template-index .cartx-section .custom_bg.hero__overlay .grid{
  align-items: flex-start !important;
}

/* garante que cada coluna se comporte como card */
.template-index .cartx-section .custom_bg.hero__overlay .grid > .grid__item{
  display: flex !important;
}

/* wrapper do produto ocupa a coluna toda */
.template-index .cartx-section .custom_bg.hero__overlay .grid > .grid__item .grid-view-item{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* ========= A PARTE CRÍTICA: IMAGEM =========
   Em vez de “flexizar” o link e colapsar o reveal,
   a gente define um slot fixo e força o img a preencher com object-fit.
*/
.template-index .cartx-section .custom_bg.hero__overlay a.grid-view-item__link.grid-view-item__image-container{
  display: block !important;
  width: 100% !important;
}

/* slot fixo da imagem (isso que alinha as imagens no topo) */
.template-index .cartx-section .custom_bg.hero__overlay a.grid-view-item__link.grid-view-item__image-container .reveal.image-size-1{
  position: relative !important;
  height: var(--vp-home-prod-img-h) !important;
  overflow: hidden !important;
}

/* força a imagem a aparecer SEM sumir */
.template-index .cartx-section .custom_bg.hero__overlay a.grid-view-item__link.grid-view-item__image-container .reveal.image-size-1 img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* mantém tudo visível */
}

/* =========================================================
   HOME (template-index) — FIX ALINHAMENTO POR CAUSA DO TÍTULO
   (Padroniza a área do nome do produto pra 2 linhas)
========================================================= */

/* CONTROLES */
.template-index{
  --vp-home-title-lines: 2;          /* 2 = padrão (igual você quer) */
  --vp-home-title-lineheight: 18px;  /* ajuste fino */
  --vp-home-title-gap-top: 10px;     /* espaço entre imagem e título */
}

/* 1) garante que o bloco dos 4 produtos não "quebre" por conta de título curto */
.template-index .cartx-section .grid-view-item__title,
.template-index .cartx-section .grid-view-item__title > a{
  line-height: var(--vp-home-title-lineheight) !important;
  min-height: calc(var(--vp-home-title-lines) * var(--vp-home-title-lineheight)) !important;
  margin-top: var(--vp-home-title-gap-top) !important;
}

/* 2) (extra) evita que algum tema force altura/overflow esquisito no wrapper do título */
.template-index .cartx-section .grid-view-item__title{
  overflow: visible !important;
}

/* =========================================
   VIVA PLENA - MOLDURA (HOVER) SÓ ATÉ A LINHA VERMELHA
   alvo correto: .reveal.image-size-1 (imagem + botão)
   ========================================= */

/* 1) garante que NÃO existe moldura no card inteiro (se sobrou de testes antigos) */
.template-index .cartx-section .grid-view-item{
  border: 0 !important;
}

/* 2) também zera borda no link container (caso algum código antigo esteja pegando aqui) */
.template-index .cartx-section a.grid-view-item__link.grid-view-item__image-container{
  border: 0 !important;
  padding: 0 !important;
}

/* 3) A MOLDURA CERTA: só na área da imagem (inclui o botão “Comprar Agora”) */
.template-index .cartx-section .reveal.image-size-1{
  border: 1px solid transparent !important;   /* invisível */
  padding: 18px 14px !important;              /* respiro igual categorias */
  box-sizing: border-box !important;
  transition: border-color .18s ease !important;
}

/* 4) hover: passou o mouse no card, aparece a moldura só nesse bloco */
.template-index .cartx-section .grid__item:hover .reveal.image-size-1{
  border-color: #111 !important;
}

/* =====================================================
   HOME – BOTÃO FIXO "ADICIONAR AO CARRINHO"
   solução definitiva (fora do sistema de hover do tema)
   ===================================================== */

/* container da imagem vira referência */
.template-index .cartx-section .reveal.image-size-1{
  position: relative !important;
}

/* ignora completamente o sistema antigo */
.template-index .cartx-section .reveal.image-size-1 .hidden{
  display: contents !important; /* REMOVE o wrapper do fluxo */
}

/* botão real */
.template-index .cartx-section .reveal.image-size-1 .shop-now{
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  opacity: 1 !important;
  visibility: visible !important;

  animation: none !important;
  transition: none !important;

  z-index: 5 !important;
  pointer-events: auto !important;
}

/* hover NÃO interfere mais */
.template-index .cartx-section .grid-view-item:hover .shop-now{
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* =========================================
   AJUSTE FINO — TEXTO DO BOTÃO ADD TO CART
   ========================================= */

.template-index .cartx-section .reveal.image-size-1 .shop-now{
  font-family: Poppins, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  line-height: 1 !important;
  white-space: nowrap !important;

  height: 36px !important;
  padding: 0 16px !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* =========================================
   POSIÇÃO HORIZONTAL DO BOTÃO (ESQUERDA)
   ========================================= */

.template-index .cartx-section .reveal.image-size-1 .shop-now{
  left: 6px !important;        /* controla o quão à esquerda */
  transform: none !important;  /* remove centralização */
}

/* BOTÃO DO BANNER (estilo Adidas 3D) */
.template-index .btn_hero a.btn.hero__btn.medium{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 28px !important;
  min-height: 52px !important;

  background: #fff !important;
  color: #111 !important;

  border: 2px solid #111 !important;
  border-radius: 0 !important;

  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;

  box-shadow: none !important;
  outline: none !important;

  z-index: 1 !important;
  transition: background .15s ease, color .15s ease, transform .15s ease !important;
}

/* placa por trás (efeito 3D) */
.template-index .btn_hero a.btn.hero__btn.medium::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background: #111 !important;
  border-radius: 0 !important;

  z-index: -1 !important;
  transform: translate(7px, 7px) !important;

  transition: transform .15s ease, background .15s ease !important;
}

/* Hover: inverte e a placa muda de cor */
.template-index .btn_hero a.btn.hero__btn.medium:hover{
  background: #111 !important;
  color: #fff !important;
  transform: translate(-1px, -1px) !important;
}

.template-index .btn_hero a.btn.hero__btn.medium:hover::after{
  background: #e9e9e9 !important; /* cor da "placa" no hover */
  transform: translate(5px, 5px) !important;
}

/* Active (clique) */
.template-index .btn_hero a.btn.hero__btn.medium:active{
  transform: translate(0, 0) !important;
}
.template-index .btn_hero a.btn.hero__btn.medium:active::after{
  transform: translate(3px, 3px) !important;
}

/* =========================================================
   CONTROLES DO BOTÃO (MEXA SOMENTE AQUI 👇)
   ========================================================= */
:root {
  /* OFFSET (DESLOCAMENTO) DA PLACA 3D */
  --btn-3d-x: 5px;                  /* empurra a placa p/ direita (+) ou esquerda (-) */
  --btn-3d-y: 5px;                  /* empurra a placa p/ baixo (+) ou cima (-) */

  /* TAMANHO / POSIÇÃO "BASE" DA PLACA 3D (ANTES DO TRANSLATE) */
  --btn-3d-w: 221px;                 /* largura da placa (ex: 100%, 240px) */
  --btn-3d-h: 70px;                 /* altura  da placa (ex: 100%, 60px) */
  --btn-3d-left: 1px;               /* move a placa (base) p/ direita/esquerda */
  --btn-3d-top: 13px;                /* move a placa (base) p/ baixo/cima */

  /* CORES DO BOTÃO (NORMAL) */
  --btn-bg: #ffffff;                /* fundo do botão */
  --btn-text: #111111;              /* texto do botão */
  --btn-border: #ffffff;            /* borda do botão */

  /* CORES DO BOTÃO (HOVER) — se quiser igual, repete as mesmas */
  --btn-bg-hover: #ffffff;          /* fundo no hover */
  --btn-text-hover: #111111;        /* texto no hover */
  --btn-border-hover: #ffffff;      /* borda no hover */
  
  /* BORDA DA PLACA 3D */
  --btn-3d-border: #ffffff;         /* borda normal da placa */
  --btn-3d-border-hover: #ed7d58;   /* borda da placa no hover */
  --btn-3d-border-width: 1px; /* grossura da borda da placa 3D */

  /* TEXTO */
  --btn-font-size: 16px;
  --btn-font-weight: 600;

  /* ===== CONTROLES DO BOTÃO (FRENTE) ===== */
  --btn-w: 221px;               /* largura do botão (auto, 231px, 100%...) */
  --btn-h: 20;               /* altura do botão (auto, 70px...) */
  --btn-pad-y: 20px;           /* padding vertical */
  --btn-pad-x: 28px;           /* padding horizontal */
  --btn-offset-x: 0px;         /* move o botão p/ direita (+) ou esquerda (-) */
  --btn-offset-y: 0px;         /* move o botão p/ baixo (+) ou cima (-) */

}

/* =========================================================
   WRAPPER (CONTÉM A PLACA 3D)
   ========================================================= */
.template-index .btn_hero {
  position: relative !important;
  display: inline-block !important; /* wrapper acompanha o tamanho do botão */
}

/* =========================================================
   BOTÃO (SEMPRE NA FRENTE)
   ========================================================= */
.template-index .btn_hero a.btn.hero__btn.medium {
  white-space: nowrap !important;
  position: relative !important;
  z-index: 2 !important; /* botão sempre acima da placa */
  background-clip: border-box !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;


  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: var(--btn-w) !important;
  height: var(--btn-h) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  min-height: 0 !important; /* importante: senão o min-height trava a altura */

  font-family: 'Poppins', sans-serif !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  letter-spacing: .02em !important;

  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 2px solid var(--btn-border) !important;
  border-radius: 0 !important;

  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;

  transition: none !important;
  transform: translate(var(--btn-offset-x), var(--btn-offset-y)) !important;

}

/* =========================================================
   HOVER DO BOTÃO — FIXA AS CORES (não deixa o tema mudar)
   ========================================================= */
.template-index .btn_hero a.btn.hero__btn.medium:hover {
  background: var(--btn-bg-hover) !important;
  color: var(--btn-text-hover) !important;
  border-color: var(--btn-border-hover) !important;
  transform: translate(var(--btn-offset-x), var(--btn-offset-y)) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;

}

/* =========================================================
   PLACA 3D (ATRÁS DO BOTÃO) — SÓ BORDA, FUNDO SEMPRE TRANSPARENTE
   ========================================================= */
.template-index .btn_hero::before {
  content: "" !important;
  position: absolute !important;

  /* >>> CONTROLE REAL DE TAMANHO/POSIÇÃO DA PLACA <<< */
  left: var(--btn-3d-left) !important;
  top: var(--btn-3d-top) !important;
  width: var(--btn-3d-w) !important;
  height: var(--btn-3d-h) !important;

  background: transparent !important; /* fundo sempre transparente */
  border: var(--btn-3d-border-width) solid var(--btn-3d-border) !important;
  border-radius: 0 !important;

  transform: translate(var(--btn-3d-x), var(--btn-3d-y)) !important;

  z-index: 1 !important; /* fica atrás do botão (botão tá no 2) */
  pointer-events: auto !important;

  transition: none !important;
}

/* =========================================================
   HOVER — SÓ MUDA A BORDA DA PLACA
   ========================================================= */
.template-index .btn_hero:hover::before {
  border-color: var(--btn-3d-border-hover) !important;
  background: transparent !important; /* garante transparente no hover também */
}

/* =========================================================
   LIMPEZA DE PLACAS FANTASMAS
   ========================================================= */
.template-index .btn_hero::after,
.template-index .btn_hero a.btn.hero__btn.medium::before,
.template-index .btn_hero a.btn.hero__btn.medium::after {
  content: none !important;
}

/* =========================================
   VIVA PLENA — HEADER FIXO (ESTILO ADIDAS)
   - tarja + header viram 1 bloco fixo no topo
   - some ao descer, aparece ao subir (qualquer pouco)
========================================= */

#vpHeaderWrap{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  transform: translateY(0);
  transition: transform .22s ease;
  will-change: transform;
}

/* dentro do wrap, tudo fica “normal” */
#vpHeaderWrap .vp-announcement{
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

#vpHeaderWrap header.site-header{
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

/* quando esconder: move o BLOCO TODO pra cima */
body.vp-header-hidden #vpHeaderWrap{
  transform: translateY(var(--vp-hideY, -200px)) !important;
}

/* evita clique quando estiver escondido */
body.vp-header-hidden #vpHeaderWrap{
  pointer-events: none;
}
body:not(.vp-header-hidden) #vpHeaderWrap{
  pointer-events: auto;
}

/* =====================================================
   TODOS OS PRODUTOS (template-collection) — VERSÃO DEFINITIVA
   - Moldura no hover só na área da imagem (reveal)
   - Botão SEMPRE visível
   - SEM animação / SEM deslocamento do texto
   - NÃO altera link da imagem nem do título
   ===================================================== */

/* 1) Moldura só na área imagem + botão */
.template-collection .reveal.image-size-1{
  border: 1px solid transparent !important;
  padding: 18px 14px !important;
  box-sizing: border-box !important;
  transition: border-color .18s ease !important;
  position: relative !important;
}

/* hover: moldura aparece quando passa no card */
.template-collection .grid__item:hover .reveal.image-size-1{
  border-color: #111 !important;
}

/* 2) Mata o wrapper do tema que controla fade/hover */
.template-collection .reveal.image-size-1 .hidden{
  display: contents !important;
}

/* 3) BOTÃO: trava tudo (posição + sem fade + sem animação) */
.template-collection .reveal.image-size-1 .shop-now{
  position: absolute !important;
  left: 6px !important;
  bottom: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  visibility: visible !important;

  /* mata QUALQUER transição/animação */
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  -webkit-transition: none !important;

  /* mata QUALQUER transform (isso é o que tava “jogando” o texto pra fora) */
  transform: none !important;
  -webkit-transform: none !important;

  z-index: 999 !important;
  pointer-events: auto !important;

  font-family: Poppins, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  line-height: 36px !important;
  height: 36px !important;
  padding: 0 16px !important;
  white-space: nowrap !important;

  /* garante caixa estável */
  box-sizing: border-box !important;
}

/* 4) Se o tema aplicar animate.css via classes (teu inspect mostrou fadeInUp animated) */
.template-collection .reveal.image-size-1 .shop-now.animated,
.template-collection .reveal.image-size-1 .shop-now.fadeInUp,
.template-collection .reveal.image-size-1 .shop-now[class*="fade"],
.template-collection .reveal.image-size-1 .shop-now[class*="InUp"]{
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* 5) Blindagem extra: qualquer coisa dentro do botão NÃO pode transformar */
.template-collection .reveal.image-size-1 .shop-now *,
.template-collection .reveal.image-size-1 .shop-now span,
.template-collection .reveal.image-size-1 .shop-now div{
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* 6) Alguns temas aplicam transform no hover do card — corta pela raiz */
.template-collection .grid__item:hover .reveal.image-size-1 .shop-now,
.template-collection .grid__item:hover .reveal.image-size-1 .shop-now *,
.template-collection .grid__item:hover .reveal.image-size-1 .shop-now span,
.template-collection .grid__item:hover .reveal.image-size-1 .shop-now div{
  transform: none !important;
  -webkit-transform: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  transition: none

}

/* Troca "View All" por "Ver Todos" na página de coleções */
.template-collections .btn_all {
  font-size: 0 !important;
}

.template-collections .btn_all::before {
  content: "Ver Todos" !important;
  font-size: 14px !important; /* mantém o tamanho visual */
}

/* =========================================================
   FOOTER LOJA — LIBERDADE TOTAL (posicionar cada texto)
   Alvo: retângulo vermelho do footer (área inteira)
   ========================================================= */

/* =========================
   CONTROLES (MEXA SÓ AQUI)
   ========================= */
:root{
  /* altura mínima do footer (pra ter “espaço” no retângulo vermelho) */
  --vp-footer-min-h: 320px;

  /* cor e fonte padrão (loja = preto) */
  --vp-footer-color: #111;
  --vp-footer-font: Poppins, sans-serif;

  /* ===== Título: "Contato" ===== */
  --vp-ft-title-x: 90px;      /* posição horizontal */
  --vp-ft-title-y: 60px;      /* posição vertical */
  --vp-ft-title-size: 40px;
  --vp-ft-title-weight: 700;

  /* ===== Subtítulo: "SIGA NOSSO INSTAGRAM" ===== */
  --vp-ft-sub-x: 90px;
  --vp-ft-sub-y: 120px;
  --vp-ft-sub-size: 16px;
  --vp-ft-sub-weight: 700;
  --vp-ft-sub-letter: 0.5px;

  /* ===== Linha IG: "Instagram | @vivaplenaofc" ===== */
  --vp-ft-ig-x: 90px;
  --vp-ft-ig-y: 165px;
  --vp-ft-ig-size: 18px;
  --vp-ft-ig-weight: 500;

  /* ===== Linha WA: "Whatsapp | (21) 98293-4864" ===== */
  --vp-ft-wa-x: 90px;
  --vp-ft-wa-y: 205px;
  --vp-ft-wa-size: 18px;
  --vp-ft-wa-weight: 500;

  /* ===== Email: "contato@vivaplenaoficial.com" ===== */
  --vp-ft-email-x: 90px;
  --vp-ft-email-y: 250px;
  --vp-ft-email-size: 18px;
  --vp-ft-email-weight: 500;

  /* ===== Copyright (centro embaixo) ===== */
  --vp-ft-copy-y: 28px;        /* distância do fundo */
  --vp-ft-copy-size: 20px;
  --vp-ft-copy-weight: 500;
}

/* =========================
   “PALCO” DO FOOTER (área toda)
   ========================= */
#cartx-section-footer,
#cartx-section-footer footer.site-footer{
  position: relative !important;
}

#cartx-section-footer footer.site-footer{
  min-height: var(--vp-footer-min-h) !important;
  padding-bottom: 80px !important; /* garante espaço pro © + ícones */
}

/* garante que a área interna não limite o “canvas” */
#cartx-section-footer footer.site-footer .page-width{
  position: relative !important;
}

/* =========================
   CANVAS 100% (seu bloco “Contato”)
   ========================= */
#cartx-section-footer .vp-store-footer-contact{
  position: absolute !important;
  inset: 0 !important;             /* ocupa TODO o footer */
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;

  /* evita que o grid do tema te empurre */
  display: block !important;
  z-index: 5 !important;

  font-family: var(--vp-footer-font) !important;
  color: var(--vp-footer-color) !important;

  /* opcional: se quiser “ver” a área do canvas:
  outline: 2px dashed red !important;
  */
}

/* =========================
   POSICIONAMENTO INDIVIDUAL (cada texto)
   ========================= */

/* "Contato" */
#cartx-section-footer .vp-store-footer-contact .vp-ft-title{
  position: absolute !important;
  left: var(--vp-ft-title-x) !important;
  top:  var(--vp-ft-title-y) !important;

  font-family: var(--vp-footer-font) !important;
  color: var(--vp-footer-color) !important;
  font-size: var(--vp-ft-title-size) !important;
  font-weight: var(--vp-ft-title-weight) !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

/* "SIGA NOSSO INSTAGRAM" */
#cartx-section-footer .vp-store-footer-contact .vp-ft-subtitle{
  position: absolute !important;
  left: var(--vp-ft-sub-x) !important;
  top:  var(--vp-ft-sub-y) !important;

  font-family: var(--vp-footer-font) !important;
  color: var(--vp-footer-color) !important;
  font-size: var(--vp-ft-sub-size) !important;
  font-weight: var(--vp-ft-sub-weight) !important;
  letter-spacing: var(--vp-ft-sub-letter) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Instagram link */
#cartx-section-footer .vp-store-footer-contact a.vp-ft-ig{
  position: absolute !important;
  left: var(--vp-ft-ig-x) !important;
  top:  var(--vp-ft-ig-y) !important;

  font-family: var(--vp-footer-font) !important;
  color: var(--vp-footer-color) !important;
  font-size: var(--vp-ft-ig-size) !important;
  font-weight: var(--vp-ft-ig-weight) !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* Whatsapp link */
#cartx-section-footer .vp-store-footer-contact a.vp-ft-wa{
  position: absolute !important;
  left: var(--vp-ft-wa-x) !important;
  top:  var(--vp-ft-wa-y) !important;

  font-family: var(--vp-footer-font) !important;
  color: var(--vp-footer-color) !important;
  font-size: var(--vp-ft-wa-size) !important;
  font-weight: var(--vp-ft-wa-weight) !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* Email */
#cartx-section-footer .vp-store-footer-contact .vp-ft-email{
  position: absolute !important;
  left: var(--vp-ft-email-x) !important;
  top:  var(--vp-ft-email-y) !important;

  font-family: var(--vp-footer-font) !important;
  color: var(--vp-footer-color) !important;
  font-size: var(--vp-ft-email-size) !important;
  font-weight: var(--vp-ft-email-weight) !important;
  margin: 0 !important;
}

/* hover bonitinho pros links */
#cartx-section-footer .vp-store-footer-contact a.vp-ft-ig:hover,
#cartx-section-footer .vp-store-footer-contact a.vp-ft-wa:hover{
  text-decoration: underline !important;
}

/* =========================
   © “All rights reserved” centralizado embaixo
   (p.credits no tema)
   ========================= */
#cartx-section-footer footer.site-footer .footer-credits,
#cartx-section-footer footer.site-footer p.credits{
  position: absolute !important;
  left: 50% !important;
  bottom: var(--vp-ft-copy-y) !important;
  transform: translateX(-50%) !important;

  font-family: var(--vp-footer-font) !important;
  color: var(--vp-footer-color) !important;
  font-size: var(--vp-ft-copy-size) !important;
  font-weight: var(--vp-ft-copy-weight) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  z-index: 6 !important;
}

/* SOMENTE DESKTOP — mantém posição atual dos ícones */
@media (min-width: 990px){
  #cartx-section-footer footer.site-footer .site-footer__payment-icons{
    position: absolute !important;
    right: 60px !important;
    bottom: 22px !important;
    z-index: 6 !important;
  }
}


/* (opcional) “VIVA PLENA OFICIAL” (logo textual do tema)
   Se você quiser posicionar também:
   Descomenta e ajusta.
*/
/*
#cartx-section-footer footer.site-footer .site-header__logo,
#cartx-section-footer footer.site-footer .footer_logo{
  position:absolute !important;
  left: 90px !important;
  bottom: 90px !important;
  z-index: 6 !important;
}
*/

/* =========================================================
   VIVA PLENA — FOOTER (LOJA) CONTROLE TOTAL (DESKTOP)
   - "VIVA PLENA OFICIAL"
   - "© 2025. All rights reserved."
   - Ícones de pagamento
   ========================================================= */

/* ===== CONTROLES (MEXE SÓ AQUI) ===== */
:root{
  /* dá “área livre” pra movimentar tudo */
  --vp-footer-min-h: 260px;
  --vp-footer-pad-top: 28px;
  --vp-footer-pad-bottom: 28px;

  /* 1) VIVA PLENA OFICIAL */
  --vp-footer-brand-size: 22px;
  --vp-footer-brand-weight: 500;
  --vp-footer-brand-color: #000;

  /* 3) Pagamentos */
  --vp-footer-pay-x: 610px;
  --vp-footer-pay-y: 190px;
  --vp-footer-pay-scale: 1; /* 0.9 menor | 1 normal | 1.1 maior */
}

/* ===== PALCO DO FOOTER ===== */
#cartx-section-footer,
#cartx-section-footer .site-footer,
#cartx-section-footer .site-footer .page-width{
  position: relative !important;
}

#cartx-section-footer .site-footer .page-width{
  min-height: var(--vp-footer-min-h) !important;
  padding-top: var(--vp-footer-pad-top) !important;
  padding-bottom: var(--vp-footer-pad-bottom) !important;
}

/* mata travas do grid/float do tema (pra absolute reinar) */
#cartx-section-footer .site-footer .grid,
#cartx-section-footer .site-footer .grid__item{
  float: none !important;
}

/* =========================================================
   1) "VIVA PLENA OFICIAL"
   (no teu HTML: .footer_logo .site-header__logo)
   ========================================================= */
#cartx-section-footer .site-footer .footer_logo .site-header__logo{
  position: absolute !important;
  left: var(--vp-footer-brand-x) !important;
  top:  var(--vp-footer-brand-y) !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: Poppins, sans-serif !important;
  font-size: var(--vp-footer-brand-size) !important;
  font-weight: var(--vp-footer-brand-weight) !important;
  color: var(--vp-footer-brand-color) !important;
  letter-spacing: .08em !important;

  z-index: 50 !important;
}

#cartx-section-footer .site-footer .footer_logo .site-header__logo a{
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================================================
   2) "© 2025. All rights reserved."
   (no teu HTML: p.credits)
   ========================================================= */
#cartx-section-footer .site-footer p.credits{
  position: absolute !important;
  left: var(--vp-footer-credits-x) !important;
  top:  var(--vp-footer-credits-y) !important;

  margin: 0 !important;
  padding: 0 !important;

  /* remove qualquer centralização antiga */
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: max-content !important;
  max-width: none !important;
  text-align: left !important;
  float: none !important;
  white-space: nowrap !important;

  font-family: Poppins, sans-serif !important;
  font-size: var(--vp-footer-credits-size) !important;
  font-weight: var(--vp-footer-credits-weight) !important;
  color: var(--vp-footer-credits-color) !important;

  z-index: 50 !important;
}

/* =========================================================
   3) Ícones de pagamento
   (no teu HTML: .site-footer__payment-icons--right)
   ========================================================= */
#cartx-section-footer .site-footer .site-footer__payment-icons--right{
  position: absolute !important;
  left: var(--vp-footer-pay-x) !important;
  top:  var(--vp-footer-pay-y) !important;

  margin: 0 !important;
  float: none !important;

  transform: scale(var(--vp-footer-pay-scale)) !important;
  transform-origin: top left !important;

  z-index: 50 !important;
}

#cartx-section-footer .site-footer .site-footer__payment-icons--right ul.payment-icons{
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

#cartx-section-footer .site-footer .site-footer__payment-icons--right ul.payment-icons li{
  margin: 0 !important;
  padding: 0 !important;
}

/* deixa os SVG pretos (se o tema tentar mudar) */
#cartx-section-footer .site-footer svg.icon:not(.icon--full-color) path{
  fill: #000 !important;
}

/* =========================================================
   FOOTER — OVERRIDE FINAL (INVENCÍVEL)
   Move o © SEM depender do layout do tema
   ========================================================= */

:root{
  --vp-credits-x: 620px;   /* + direita | - esquerda */
  --vp-credits-y: 25px;   /* + desce   | - sobe */
}

#cartx-section-footer footer.site-footer p.credits{
  position: relative !important;
  display: inline-block !important;

  /* neutraliza qualquer posicionamento anterior do tema */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  float: none !important;

  transform: translate(var(--vp-credits-x), var(--vp-credits-y)) !important;
  z-index: 999999 !important;

}

/* SÓ O TEXTO "VIVA PLENA OFICIAL" (footer) — mover livremente */
:root{
  --vp-brand-x: 687px;   /* + direita | - esquerda */
  --vp-brand-y: 65px;   /* + desce   | - sobe */
}

#cartx-section-footer .site-footer .footer_logo .site-header__logo{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform: translate(var(--vp-brand-x), var(--vp-brand-y)) !important;
  margin: 0 !important;
  z-index: 999999 !important;
}

/* =========================================================
   FIX HARD: não deixar o input de qty mudar no foco (cart)
   ========================================================= */

/* força só no carrinho */
body.template-cart input.cart__qty-input[type="number"],
body.template-cart .cart__qty input[type="number"]{
  -webkit-appearance: none !important;
  appearance: none !important;

  /* define o visual "fixo" (igual ao normal) */
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #f2a280 !important; /* <- se quiser, troca pela cor exata do tema */
  border-radius: 0 !important;

  outline: none !important;
  box-shadow: none !important;

  text-align: center !important;
}

/* estado de foco/click/active */
body.template-cart input.cart__qty-input[type="number"]:focus,
body.template-cart input.cart__qty-input[type="number"]:focus-visible,
body.template-cart input.cart__qty-input[type="number"]:active,
body.template-cart .cart__qty:focus-within input[type="number"]{
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #f2a280 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* remove spinner do number no Chrome */
body.template-cart input.cart__qty-input[type]()

/* =========================================
   MOBILE (HOME) — TIRAR GAP ENTRE HEADER E HERO
   NÃO mexe na altura do header/tarja
   NÃO afeta o hide/show (JS)
========================================= */
@media (max-width: 989px){
  :root{
    --vp-mobile-gap-nudge: 30px;   /* ajuste aqui: 6px / 8px / 10px / 12px */
    --vp-mobile-body-pad: 166px;   /* << é o valor que apareceu no teu DevTools */
  }

  body.template-index{
    padding-top: calc(var(--vp-mobile-body-pad) - var(--vp-mobile-gap-nudge)) !important;
  }
}

/* =========================================
   VIVA PLENA — BOTÃO HERO (MOBILE ONLY)
   - NÃO altera aparência (cores/hover)
   - só muda TAMANHO + POSIÇÃO do botão e da placa 3D no MOBILE
   ========================================= */
@media (max-width: 989px){
  :root{
    /* ===== BOTÃO (FRENTE) — tamanho/posição ===== */
    --btn-w: 132px;         /* largura do botão no mobile */
    --btn-h: 17px;          /* altura do botão no mobile (use px!) */
    --btn-pad-y: 17px;
    --btn-pad-x: 12px;

    --btn-offset-x: -82px;    /* move o botão (frente) no mobile */
    --btn-offset-y: 60px;

    /* ===== PLACA 3D (ATRÁS) — tamanho/posição ===== */
    --btn-3d-w: 132px;      /* normalmente igual ao --btn-w */
    --btn-3d-h: 37px;       /* normalmente igual ao --btn-h */

    --btn-3d-left: -78px;     /* posição base da placa */
    --btn-3d-top: 80px;

    --btn-3d-x: 0px;        /* deslocamento 3D (sombra/placa) */
    --btn-3d-y: 0px;
  }
}

/* =========================================
   BOTÃO HERO — TEXTO SÓ NO MOBILE (SEM mexer no desktop)
   - controla tamanho/peso/altura da linha
   - texto NÃO muda o tamanho do botão
   ========================================= */
@media (max-width: 989px){
  :root{
    /* CONTROLES DO TEXTO (MOBILE) */
    --btn-text-size-m: 12px;      /* tamanho da fonte no mobile */
    --btn-text-weight-m: 600;     /* peso da fonte no mobile */
    --btn-text-line-m: 1;         /* line-height no mobile (1 ou 1.1) */
    --btn-text-letter-m: 0px;     /* espaçamento entre letras */
  }

  /* aplica SÓ no mobile */
  .template-index .btn_hero a.btn.hero__btn.medium{
    font-size: var(--btn-text-size-m) !important;
    font-weight: var(--btn-text-weight-m) !important;
    line-height: var(--btn-text-line-m) !important;
    letter-spacing: var(--btn-text-letter-m) !important;

    /* trava o botão: texto não altera tamanho */
    width: var(--btn-w) !important;
    height: var(--btn-h) !important;
    overflow: hidden !important;          /* se o texto crescer demais, não estoura */
    white-space: nowrap !important;       /* nunca quebra linha */
    text-overflow: ellipsis !important;   /* coloca "..." se passar */
  }
}

/* =========================================================
   MOBILE ONLY — TITULOS DAS CATEGORIAS (X/Y + RETÂNGULO)
   - NÃO altera desktop
   - Retângulo cresce com 1 ou 2 linhas
   - Corrige "sugador-com-vibrador" (classe singular)
   ========================================================= */
@media (max-width: 989px){
  :root{
    /* ===== CONTROLES GLOBAIS (todos os títulos) ===== */
    --vp-label-x: 0px;     /* + direita | - esquerda */
    --vp-label-y: -30px;     /* + desce   | - sobe */

    /* ===== CONTROLES DO “RETÂNGULO BRANCO” ===== */
    --vp-label-bg: #FFFFFF;
    --vp-label-radius: 0px;
    --vp-label-pad-y: 2px;
    --vp-label-pad-x: 6px;

    /* ===== TEXTO ===== */
    --vp-label-font: 12px;
    --vp-label-weight: 700;
    --vp-label-line: 1.15;
    --vp-label-letter: .6px;

    /* largura máxima do retângulo (ajuda em 2 linhas) */
    --vp-label-maxw: 140px;

    /* ===== AJUSTES POR CATEGORIA (opcional) ===== */
    --vp-x--linha-premium: 0px;
    --vp-y--linha-premium: 0px;

    --vp-x--vibradores: 0px;
    --vp-y--vibradores: 0px;

    --vp-x--sugadores: 0px;
    --vp-y--sugadores: 0px;

    /* ATENÇÃO: é singular no teu CSS atual */
    --vp-x--sugador-com-vibrador: 0px;
    --vp-y--sugador-com-vibrador: 0px;

    /* se quiser um max-width diferente SÓ pra esse */
    --vp-maxw--sugador-com-vibrador: 150px;
  }

  /* ✅ SELETOR MAIS FORTE (ganha do "Adidas" que zera background/padding) */
  .template-index .collection-grid h4.collection-grid-item__title.vp-catlabel{
    background: var(--vp-label-bg) !important;
    border-radius: var(--vp-label-radius) !important;
    padding: var(--vp-label-pad-y) var(--vp-label-pad-x) !important;

    font-size: var(--vp-label-font) !important;
    font-weight: var(--vp-label-weight) !important;
    line-height: var(--vp-label-line) !important;
    letter-spacing: var(--vp-label-letter) !important;

    display: inline-block !important;
    max-width: var(--vp-label-maxw) !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;

    position: relative !important;
    transform: translate(var(--vp-label-x), var(--vp-label-y)) !important;

    z-index: 2 !important; /* só pra garantir que fica na frente */
  }

  /* mata o ::before antigo no mobile */
  .template-index .collection-grid h4.collection-grid-item__title.vp-catlabel::before{
    content: none !important;
    display: none !important;
  }

  /* ===== MOVIMENTO POR CATEGORIA (somando com o global) ===== */
  .template-index .collection-grid h4.collection-grid-item__title.vp-catlabel.vp-catlabel--linha-premium{
    transform: translate(
      calc(var(--vp-label-x) + var(--vp-x--linha-premium)),
      calc(var(--vp-label-y) + var(--vp-y--linha-premium))
    ) !important;
  }

  .template-index .collection-grid h4.collection-grid-item__title.vp-catlabel.vp-catlabel--vibradores{
    transform: translate(
      calc(var(--vp-label-x) + var(--vp-x--vibradores)),
      calc(var(--vp-label-y) + var(--vp-y--vibradores))
    ) !important;
  }

  .template-index .collection-grid h4.collection-grid-item__title.vp-catlabel.vp-catlabel--sugadores{
    transform: translate(
      calc(var(--vp-label-x) + var(--vp-x--sugadores)),
      calc(var(--vp-label-y) + var(--vp-y--sugadores))
    ) !important;
  }

  /* ✅ singular "sugador-com-vibrador" */
  .template-index .collection-grid h4.collection-grid-item__title.vp-catlabel.vp-catlabel--sugador-com-vibrador{
    max-width: var(--vp-maxw--sugador-com-vibrador) !important;

    transform: translate(
      calc(var(--vp-label-x) + var(--vp-x--sugador-com-vibrador)),
      calc(var(--vp-label-y) + var(--vp-y--sugador-com-vibrador))
    ) !important;
  }
}

/* =========================================================
   VIVA PLENA — FOOTER (MOBILE ONLY) — CONTROLES POR TEXTO
   - NÃO mexe no desktop (só <= 989px)
   - MESMO padrão do desktop: variáveis + posicionamento livre
   - Comentário do lado de CADA comando
   ========================================================= */
@media (max-width: 989px){

  /* =========================
     CONTROLES (MEXA SÓ AQUI)
     ========================= */
  :root{
    /* ---------- PALCO / ÁREA DO FOOTER ---------- */
    --vp-footer-min-h: 360px;                 /* altura mínima do footer no MOBILE (pra sobrar “canvas”) */
    --vp-footer-pad-top: 24px;                /* padding-top do container interno (mobile) */
    --vp-footer-pad-bottom: 30px;             /* padding-bottom do container interno (mobile) */

    --vp-footer-font: Poppins, sans-serif;    /* fonte padrão do footer (mobile) */
    --vp-footer-color: #111;                  /* cor padrão dos textos do footer (mobile) */

    /* =================================================
       TEXTO 1 — "Contato"  (.vp-ft-title)
       ================================================= */
    --vp-ft-title-x: 140px;                    /* X: move "Contato" p/ direita (+) ou esquerda (-) */
    --vp-ft-title-y: 90px;                    /* Y: move "Contato" p/ baixo (+) ou cima (-) */
    --vp-ft-title-size: 28px;                 /* tamanho da fonte do "Contato" */
    --vp-ft-title-weight: 700;                /* peso (bold) do "Contato" */
    --vp-ft-title-line: 1.05;                 /* line-height do "Contato" (altura da linha) */
    --vp-ft-title-color: #111;                /* cor do "Contato" (se quiser diferente do padrão) */

    /* =================================================
       TEXTO 2 — "SIGA NOSSO INSTAGRAM" (.vp-ft-subtitle)
       ================================================= */
    --vp-ft-sub-x: 120px;                      /* X: move "SIGA..." p/ direita (+) ou esquerda (-) */
    --vp-ft-sub-y: 130px;                      /* Y: move "SIGA..." p/ baixo (+) ou cima (-) */
    --vp-ft-sub-size: 12px;                   /* tamanho da fonte do "SIGA..." */
    --vp-ft-sub-weight: 700;                  /* peso do "SIGA..." */
    --vp-ft-sub-letter: 0.6px;                /* letter-spacing (espaçamento entre letras) do "SIGA..." */
    --vp-ft-sub-transform: uppercase;          /* transforma texto (uppercase/none) */
    --vp-ft-sub-color: #111;                  /* cor do "SIGA..." */

    /* =================================================
       TEXTO 3 — Instagram | @...  (link a.vp-ft-ig)
       ================================================= */
    --vp-ft-ig-x: 107px;                       /* X: move linha do Instagram p/ direita (+) ou esquerda (-) */
    --vp-ft-ig-y: 163px;                       /* Y: move linha do Instagram p/ baixo (+) ou cima (-) */
    --vp-ft-ig-size: 14px;                    /* tamanho da fonte do Instagram */
    --vp-ft-ig-weight: 500;                   /* peso da fonte do Instagram */
    --vp-ft-ig-color: #111;                   /* cor do link do Instagram */
    --vp-ft-ig-decoration: none;              /* decoração do link (none/underline) */

    /* =================================================
       TEXTO 4 — Whatsapp | (xx) ... (link a.vp-ft-wa)
       ================================================= */
    --vp-ft-wa-x: 103px;                       /* X: move linha do WhatsApp p/ direita (+) ou esquerda (-) */
    --vp-ft-wa-y: 196px;                      /* Y: move linha do WhatsApp p/ baixo (+) ou cima (-) */
    --vp-ft-wa-size: 14px;                    /* tamanho da fonte do WhatsApp */
    --vp-ft-wa-weight: 500;                   /* peso da fonte do WhatsApp */
    --vp-ft-wa-color: #111;                   /* cor do link do WhatsApp */
    --vp-ft-wa-decoration: none;              /* decoração do link (none/underline) */

    /* =================================================
       TEXTO 5 — Email (span/div .vp-ft-email)
       ================================================= */
    --vp-ft-email-x: 97px;                    /* X: move o Email p/ direita (+) ou esquerda (-) */
    --vp-ft-email-y: 230px;                   /* Y: move o Email p/ baixo (+) ou cima (-) */
    --vp-ft-email-size: 14px;                 /* tamanho da fonte do Email */
    --vp-ft-email-weight: 500;                /* peso da fonte do Email */
    --vp-ft-email-color: #111;                /* cor do Email */
    --vp-ft-email-nowrap: nowrap;             /* quebra de linha do Email (nowrap/normal) */

    /* =================================================
       TEXTO 6 — "VIVA PLENA OFICIAL" (footer_logo .site-header__logo)
       ================================================= */
    --vp-brand-x: 125px;                       /* X: move "VIVA PLENA OFICIAL" p/ direita (+) ou esquerda (-) */
    --vp-brand-y: 1px;                      /* Y: move "VIVA PLENA OFICIAL" p/ baixo (+) ou cima (-) */
    --vp-brand-size: 14px;                    /* tamanho da fonte do "VIVA PLENA OFICIAL" */
    --vp-brand-weight: 600;                   /* peso da fonte do "VIVA PLENA OFICIAL" */
    --vp-brand-letter: 0.08em;                /* espaçamento entre letras do "VIVA PLENA OFICIAL" */
    --vp-brand-color: #000;                   /* cor do "VIVA PLENA OFICIAL" */
    --vp-brand-decoration: none;              /* underline do link do "VIVA PLENA OFICIAL" (none/underline) */

    /* =================================================
       TEXTO 7 — "© 2025. All rights reserved." (p.credits)
       ================================================= */
    --vp-credits-x: 123px;                     /* X: move o © p/ direita (+) ou esquerda (-) */
    --vp-credits-y: 30px;                    /* Y: move o © p/ baixo (+) ou cima (-) */
    --vp-credits-size: 12px;                  /* tamanho da fonte do © */
    --vp-credits-weight: 500;                 /* peso da fonte do © */
    --vp-credits-color: #000;                 /* cor do © */
    --vp-credits-nowrap: nowrap;              /* quebra de linha do © (nowrap/normal) */

  }

  /* =========================
     PALCO (mobile) — cria “canvas” livre
     ========================= */
  #cartx-section-footer,
  #cartx-section-footer .site-footer,
  #cartx-section-footer .site-footer .page-width{
    position: relative !important;            /* permite absolute dentro */
  }

  #cartx-section-footer .site-footer .page-width{
    min-height: var(--vp-footer-min-h) !important;          /* aplica altura mínima do footer */
    padding-top: var(--vp-footer-pad-top) !important;       /* aplica padding-top do footer */
    padding-bottom: var(--vp-footer-pad-bottom) !important; /* aplica padding-bottom do footer */
  }

  /* mata floats do tema (só no mobile) */
  #cartx-section-footer .site-footer .grid,
  #cartx-section-footer .site-footer .grid__item{
    float: none !important;                    /* impede grid “empurrar” elementos */
  }

  /* =========================
     BLOCO CONTATO (se existir no HTML)
     ========================= */
  #cartx-section-footer .vp-store-footer-contact{
    position: absolute !important;             /* permite posicionar textos dentro sem layout do tema */
    inset: 0 !important;                       /* ocupa o footer inteiro (top/right/bottom/left = 0) */
    width: 100% !important;                    /* garante largura total */
    height: 100% !important;                   /* garante altura total */
    margin: 0 !important;                      /* remove margens */
    display: block !important;                 /* evita flex/grid do tema */
    z-index: 5 !important;                     /* fica por cima do fundo do footer */
    font-family: var(--vp-footer-font) !important; /* fonte padrão do bloco */
    color: var(--vp-footer-color) !important;      /* cor padrão do bloco */
  }

  /* ===== TEXTO 1: "Contato" ===== */
  #cartx-section-footer .vp-store-footer-contact .vp-ft-title{
    position: absolute !important;             /* permite mexer livremente */
    left: var(--vp-ft-title-x) !important;     /* X do "Contato" */
    top:  var(--vp-ft-title-y) !important;     /* Y do "Contato" */
    font-family: var(--vp-footer-font) !important; /* fonte */
    color: var(--vp-ft-title-color) !important;    /* cor */
    font-size: var(--vp-ft-title-size) !important; /* tamanho */
    font-weight: var(--vp-ft-title-weight) !important; /* peso */
    line-height: var(--vp-ft-title-line) !important;   /* line-height */
    margin: 0 !important;                      /* zera margem padrão */
  }

  /* ===== TEXTO 2: "SIGA NOSSO INSTAGRAM" ===== */
  #cartx-section-footer .vp-store-footer-contact .vp-ft-subtitle{
    position: absolute !important;             /* posicionamento livre */
    left: var(--vp-ft-sub-x) !important;       /* X do "SIGA..." */
    top:  var(--vp-ft-sub-y) !important;       /* Y do "SIGA..." */
    font-family: var(--vp-footer-font) !important; /* fonte */
    color: var(--vp-ft-sub-color) !important;      /* cor */
    font-size: var(--vp-ft-sub-size) !important;   /* tamanho */
    font-weight: var(--vp-ft-sub-weight) !important; /* peso */
    letter-spacing: var(--vp-ft-sub-letter) !important; /* espaçamento letras */
    text-transform: var(--vp-ft-sub-transform) !important; /* uppercase/none */
    margin: 0 !important;                      /* zera margem */
  }

  /* ===== TEXTO 3: Instagram (link) ===== */
  #cartx-section-footer .vp-store-footer-contact a.vp-ft-ig{
    position: absolute !important;             /* posicionamento livre */
    left: var(--vp-ft-ig-x) !important;        /* X do Instagram */
    top:  var(--vp-ft-ig-y) !important;        /* Y do Instagram */
    font-family: var(--vp-footer-font) !important; /* fonte */
    color: var(--vp-ft-ig-color) !important;       /* cor */
    font-size: var(--vp-ft-ig-size) !important;    /* tamanho */
    font-weight: var(--vp-ft-ig-weight) !important;/* peso */
    text-decoration: var(--vp-ft-ig-decoration) !important; /* underline/none */
    margin: 0 !important;                      /* zera margem */
  }

  /* ===== TEXTO 4: WhatsApp (link) ===== */
  #cartx-section-footer .vp-store-footer-contact a.vp-ft-wa{
    position: absolute !important;             /* posicionamento livre */
    left: var(--vp-ft-wa-x) !important;        /* X do WhatsApp */
    top:  var(--vp-ft-wa-y) !important;        /* Y do WhatsApp */
    font-family: var(--vp-footer-font) !important; /* fonte */
    color: var(--vp-ft-wa-color) !important;       /* cor */
    font-size: var(--vp-ft-wa-size) !important;    /* tamanho */
    font-weight: var(--vp-ft-wa-weight) !important;/* peso */
    text-decoration: var(--vp-ft-wa-decoration) !important; /* underline/none */
    margin: 0 !important;                      /* zera margem */
  }

  /* ===== TEXTO 5: Email ===== */
  #cartx-section-footer .vp-store-footer-contact .vp-ft-email{
    position: absolute !important;             /* posicionamento livre */
    left: var(--vp-ft-email-x) !important;     /* X do Email */
    top:  var(--vp-ft-email-y) !important;     /* Y do Email */
    font-family: var(--vp-footer-font) !important; /* fonte */
    color: var(--vp-ft-email-color) !important;    /* cor */
    font-size: var(--vp-ft-email-size) !important; /* tamanho */
    font-weight: var(--vp-ft-email-weight) !important; /* peso */
    white-space: var(--vp-ft-email-nowrap) !important; /* quebra/linha única */
    margin: 0 !important;                      /* zera margem */
  }

  /* hover bonitinho pros links (se quiser mudar, mexe aqui direto) */
  #cartx-section-footer .vp-store-footer-contact a.vp-ft-ig:hover,
  #cartx-section-footer .vp-store-footer-contact a.vp-ft-wa:hover{
    text-decoration: underline !important;     /* underline só no hover */
  }

  /* =========================
     TEXTO 6 — "VIVA PLENA OFICIAL"
     ========================= */
  #cartx-section-footer .site-footer .footer_logo .site-header__logo{
    position: absolute !important;             /* permite mover livremente */
    left: 0 !important;                        /* base neutra (pra usar translate) */
    top: 0 !important;                         /* base neutra (pra usar translate) */
    transform: translate(var(--vp-brand-x), var(--vp-brand-y)) !important; /* X/Y do brand */
    margin: 0 !important;                      /* remove margem */
    z-index: 999999 !important;                /* garante na frente */
    font-family: var(--vp-footer-font) !important; /* fonte */
    font-size: var(--vp-brand-size) !important;    /* tamanho */
    font-weight: var(--vp-brand-weight) !important;/* peso */
    color: var(--vp-brand-color) !important;       /* cor */
    letter-spacing: var(--vp-brand-letter) !important; /* espaçamento letras */
  }

  #cartx-section-footer .site-footer .footer_logo .site-header__logo a{
    color: inherit !important;                 /* link herda a cor do texto */
    text-decoration: var(--vp-brand-decoration) !important; /* underline/none */
  }

  /* =========================
     TEXTO 7 — © credits
     ========================= */
  #cartx-section-footer footer.site-footer p.credits{
    position: absolute !important;             /* permite mover livremente */
    left: 0 !important;                        /* base neutra (pra usar translate) */
    top: 0 !important;                         /* base neutra (pra usar translate) */
    transform: translate(var(--vp-credits-x), var(--vp-credits-y)) !important; /* X/Y do © */

    margin: 0 !important;                      /* remove margem */
    padding: 0 !important;                     /* remove padding */

    right: auto !important;                    /* neutraliza regras antigas */
    bottom: auto !important;                   /* neutraliza regras antigas */
    float: none !important;                    /* neutraliza float do tema */

    white-space: var(--vp-credits-nowrap) !important; /* linha única ou quebra */
    width: max-content !important;             /* não “enche” a linha toda */

    font-family: var(--vp-footer-font) !important; /* fonte */
    font-size: var(--vp-credits-size) !important;  /* tamanho */
    font-weight: var(--vp-credits-weight) !important; /* peso */
    color: var(--vp-credits-color) !important;      /* cor */

    z-index: 999999 !important;                /* garante na frente */
}

/* ================================
   FOOTER — PAYMENT ICONS (MOBILE)
   FIX DEFINITIVO — NÃO MEXE EM MAIS NADA
   ================================ */
@media (max-width: 989px){

  :root{
    --vp-pay-x: 5px;      /* + direita | - esquerda */
    --vp-pay-y: 300px;     /* + desce   | - sobe */
    --vp-pay-scale: 0.95;  /* tamanho dos ícones */
    --vp-pay-gap: -5px;    /* espaço entre eles */
  }

  /* garante que o footer seja o “palco” */
  #cartx-section-footer footer.site-footer,
  #cartx-section-footer footer.site-footer .page-width{
    position: relative !important;
  }

  /* alvo real dos ícones */
  #cartx-section-footer footer.site-footer ul.payment-icons{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    transform: translate(var(--vp-pay-x), var(--vp-pay-y)) scale(var(--vp-pay-scale)) !important;
    transform-origin: top left !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: var(--vp-pay-gap) !important;

    z-index: 999999 !important;
    width: max-content !important;
  }

  /* neutraliza wrappers do tema */
  #cartx-section-footer footer.site-footer .site-footer__payment-icons,
  #cartx-section-footer footer.site-footer .site-footer__payment-icons--right{
    position: static !important;
    float: none !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* limpa margens internas */
  #cartx-section-footer footer.site-footer ul.payment-icons li{
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   ✅ MOBILE ONLY — conserta “vazamento” do BLOCO DE PREÇOS
   (não mexe no desktop)
   ========================================================= */
@media (max-width: 749px){

  /* ---- CONTROLES (MEXA SÓ AQUI) ---- */
  :root{
    --vp-price-font-size: 13px;     /* tamanho da fonte dos preços */
    --vp-price-line-height: 1.25;   /* espaçamento vertical dos preços */
  }

  /* 1) TRAVA o container do preço dentro do card */
  .grid-view-item .product-price,
  .grid-view-item .grid-view-item__meta,
  .grid-view-item .product-price__container{
    max-width: 100% !important;
    overflow: hidden !important;          /* impede invadir o card ao lado */
  }

  /* 2) Quebra de linha e limites — só nos textos de preço */
  .grid-view-item .product-price *,
  .grid-view-item .product-price__price,
  .grid-view-item .product-price__sale,
  .grid-view-item .product-price__regular,
  .grid-view-item .product-price__compare,
  .grid-view-item [id^="Installment-Price"]{
    display: block !important;            /* cada pedaço do preço fica “na sua linha” quando precisar */
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;   /* quebra mesmo em strings “ruins” */
    word-break: break-word !important;
    font-size: var(--vp-price-font-size) !important;
    line-height: var(--vp-price-line-height) !important;
  }

  /* bônus: dá um respiro entre linhas do bloco de preço */
  .grid-view-item .product-price{
    margin-top: 6px !important;
  }
}

/* =========================================================
   ✅ MOBILE ONLY — remove duplicação do "12x R$"
   (mantém só o que já está no .product-price__sale)
   ========================================================= */
@media (max-width: 749px){
  /* esconde a linha de parcelas do tema */
  .grid-view-item [id^="Installment-Price"],
  .grid-view-item .product-price__installment,
  .grid-view-item .installment-price,
  .grid-view-item .product-price__installment-price{
    display: none !important;
  }
}

/* =========================================================
   MOBILE ONLY — ORDEM DO CARD (FOTO > BOTÃO > NOME > PREÇO)
   ========================================================= */
@media (max-width: 749px){

  /* CONTROLES (MEXA SÓ AQUI) */
  :root{
   
  }

  /* card em coluna (mobile only) */
  .template-collection .grid-view-item{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 1) FOTO */
  .template-collection .grid-view-item .grid-view-item__image-container,
  .template-collection .grid-view-item .reveal.image-size-1{
    order: 1 !important;
    position: relative !important;
  }

  /* 2) BOTÃO (abaixo da foto) */
  .template-collection .grid-view-item .shop-now{
    order: 2 !important;

    width: var(--vp-atc-w) !important;
    height: var(--vp-atc-h) !important;
    line-height: var(--vp-atc-h) !important;
    font-size: var(--vp-atc-font) !important;

    margin: var(--vp-atc-mt) auto var(--vp-atc-mb) auto !important;

    /* garante que NÃO fique em cima da foto */
    position: static !important;
    transform: none !important;
  }

  /* 3) NOME */
  .template-collection .grid-view-item .subheading.grid-view-item__title{
    order: 3 !important;
  }

  /* 4) PREÇOS */
  .template-collection .grid-view-item .product-price{
    order: 4 !important;
  }

  /* neutraliza wrapper do tema que tenta posicionar o botão */
  .template-collection .grid-view-item .hidden{
    position: static !important;
    height: auto !important;
  }

  /* mata animações/efeitos no mobile (comportamento “sempre visível”) */
  .template-collection .reveal.image-size-1 .shop-now.animated,
  .template-collection .reveal.image-size-1 .shop-now[class*="fade"],
  .template-collection .reveal.image-size-1 .shop-now[class*="InUp"]{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   MOBILE ONLY — CONTROLES FINOS DO BOTÃO "Adicionar ao carrinho"
   (não empurra nada: move via transform)
   ========================================================= */
@media (max-width: 749px) {

  :root{
    /* 🔧 TAMANHO DO BOTÃO */
    --vp-atc-h: 34px;

    /* 🔧 FONTE DO BOTÃO (agora desce SEM LIMITAÇÃO) */
    --vp-atc-font: 12px;     /* pode pôr 10px, 9px etc */
    --vp-atc-line: 1;        /* ajuda a caber menor */



  /* alvo do seu botão (div.shop-now...) */
  .template-collection .grid-view-item .hidden > .shop-now{
    /* garante sempre visível e sem animação */
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;

    /* tamanho */
    width: var(--vp-atc-w) !important;
    height: var(--vp-atc-h) !important;

    /* fonte (bem forçado) */
    font-size: var(--vp-atc-font) !important;
    line-height: var(--vp-atc-line) !important;

    /* centraliza o texto */
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;

    /* move sem empurrar nada (não altera layout) */
    transform: translate(var(--vp-atc-x), var(--vp-atc-y)) !important;
  }

  /* se o tema estiver aplicando scale no wrapper do botão, neutraliza */
  .template-collection .grid-view-item .hidden{
    transform: none !important;
  }
}

@media (max-width: 749px){

  :root{
    --vp-atc-x: -8px;  /* negativo = esquerda | positivo = direita */
    --vp-atc-y:  73px;  /* positivo = desce | negativo = sobe */

    --vp-atc-w:  140px; /* largura do botão (pra X funcionar de verdade) */
  }

  /* garante que não vai cortar o deslocamento horizontal */
  .template-collection .grid-view-item .hidden,
  .template-collection .grid-view-item .reveal{
    overflow: visible !important;
  }

  .template-collection .grid-view-item .shop-now{
    /* 1) deixa de ser 100% pra você PERCEBER o X */
    width: var(--vp-atc-w) !important;
    max-width: calc(100% - 16px) !important;

    /* 2) mantém o botão central “por padrão” */
    margin-left: auto !important;
    margin-right: auto !important;

    /* 3) move sem empurrar layout */
    position: relative !important;
    left: var(--vp-atc-x) !important;
    top:  var(--vp-atc-y) !important;

    /* 4) corta qualquer treta de animação/transform do tema */
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   MOBILE ONLY — /cart: QTD + REMOVER + PREÇO UNITÁRIO (overlay)
   - não empurra layout (absolute + transform)
   - não altera desktop
   ========================================================= */
@media (max-width: 749px){

  :root{
    /* ====== POSIÇÕES (SEM EMPURRAR NADA) ====== */
    --vp-mcart-qty-x:  -260px;   /* + direita | - esquerda */
    --vp-mcart-qty-y:  91px;   /* + desce   | - sobe     */

    --vp-mcart-rm-x:   0px;   /* + direita | - esquerda */
    --vp-mcart-rm-y:   1px;  /* + desce   | - sobe     */

    --vp-mcart-price-x: 0px;  /* + direita | - esquerda */
    --vp-mcart-price-y: 78px;  /* + desce   | - sobe     */

    /* ====== TAMANHOS ====== */
    --vp-mcart-qty-w:  56px;
    --vp-mcart-qty-h:  36px;
    --vp-mcart-qty-font: 14px;

    --vp-mcart-rm-font: 12px;

    --vp-mcart-unit-font: 13px;     /* fonte do preço unitário */
    --vp-mcart-unit-line: 1.2;      /* line-height do preço unitário */
  }

  /* O JS marca cada item com essa classe */
  body.template-cart .vp-mcart-item{
    position: relative !important; /* base pro absolute */
  }

  /* ===== QTD ===== */
  body.template-cart .vp-mcart-qty{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important; /* ancorado no canto direito do item */
    transform: translate3d(var(--vp-mcart-qty-x), var(--vp-mcart-qty-y), 0) !important;
    z-index: 9999 !important;
    display: block !important;
  }

  body.template-cart .vp-mcart-qty input{
    width: var(--vp-mcart-qty-w) !important;
    height: var(--vp-mcart-qty-h) !important;
    font-size: var(--vp-mcart-qty-font) !important;
    line-height: 1 !important;
    text-align: center !important;
    border: 1px solid rgba(0,0,0,.18) !important;
    background: #fff !important;
    border-radius: 6px !important;
    padding: 0 !important;
    outline: none !important;
  }

  /* ===== REMOVER ===== */
  body.template-cart .vp-mcart-remove{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate3d(var(--vp-mcart-rm-x), var(--vp-mcart-rm-y), 0) !important;
    z-index: 9999 !important;
    display: inline-block !important;

    font-size: var(--vp-mcart-rm-font) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;

    /* deixa neutro: você pode “pintar” se quiser */
    border: 1px solid rgba(0,0,0,.18) !important;
    background: #fff !important;
    color: inherit !important;
  }

  /* ===== PREÇO UNITÁRIO (mesma “pegada” do tema: sem inventar cor) ===== */
  body.template-cart .vp-mcart-unitprice{
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    transform: translate3d(var(--vp-mcart-price-x), var(--vp-mcart-price-y), 0) !important;
    z-index: 9998 !important;

    font-size: var(--vp-mcart-unit-font) !important;
    line-height: var(--vp-mcart-unit-line) !important;
    text-align: right !important;
    max-width: 58% !important;      /* evita estourar */
    white-space: normal !important; /* pode quebrar linha */
    overflow-wrap: anywhere !important;
    pointer-events: none !important; /* não atrapalha clique */
  }

  body.template-cart .vp-mcart-unitprice .vp-strike{
    text-decoration: line-through !important;
    opacity: .75 !important;
    display: block !important;
    margin-top: 4px !important;
  }

  /* ===== REMOVE o "(x3)" no título (caso venha via texto) ===== */
  body.template-cart .vp-mcart-title-clean{
    /* só marcador; quem remove é o JS */
  }
}

/* =========================================================
   MOBILE ONLY — quebra de linha no preço unitário do /cart
   "R$ xx no PIX/CARTÃO"
   "ou 12x R$ xx"
   ========================================================= */
@media (max-width: 749px){

  /* força o texto do preço a virar duas linhas */
  body.template-cart .vp-mcart-unitprice > div:first-child{
    display: block !important;
    margin-bottom: 2px !important; /* ajuste fino de espaço entre as linhas */
  }

  body.template-cart .vp-mcart-unitprice > div:last-child{
    display: block !important;
  }

}

/* =========================================================
   MOBILE ONLY — AJUSTE HORIZONTAL DOS TEXTOS DE PREÇO NO CART
   (não afeta desktop, não quebra layout, não empurra nada)
   ========================================================= */
@media (max-width: 749px) {

  :root {
    /* CONTROLE FINO — mexa só nesses valores */
    --vp-cart-price-x: -63px;   /* puxa preços individuais pra esquerda */
    --vp-cart-total-x: 0px;   /* puxa bloco TOTAL (verde + valor) pra esquerda */
  }

  /* Preço por produto (R$ xx no PIX...) */
  .template-cart .vp-offer-wrap.vp-right {
    transform: translateX(var(--vp-cart-price-x)) !important;
    will-change: transform;
  }

  /* Linha verde: riscado + economize */
  .template-cart .vp-economy {
    transform: translateX(var(--vp-cart-total-x)) !important;
    will-change: transform;
  }

}

/* =========================================================
   MOBILE ONLY — AJUSTE HORIZONTAL DO SUBTOTAL (SEPARADO)
   não afeta itens, não afeta total, não afeta desktop
   ========================================================= */
@media (max-width: 749px) {

  :root {
    /* Controle exclusivo do SUBTOTAL */
    --vp-cart-subtotal-x: 0px;   /* positivo = empurra pra direita */
  }

  /* Apenas o bloco do SUBTOTAL */
  .template-cart .vp-sum-subtotal .vp-offer-wrap.vp-right {
    transform: translateX(var(--vp-cart-subtotal-x)) !important;
    will-change: transform;
  }

}

/* CONTROLES */
:root{
  --vp-w: 220px;
  --vp-h: 38px;
  --vp-radius: 999px;

  --vp-bg: rgba(92, 38, 57, .85);
  --vp-bg-hover: rgba(92, 38, 57, .95);

  --vp-border-color: rgba(248, 168, 141, .35);
  --vp-border-color-focus: rgba(248, 168, 141, .70);

  --vp-font: Poppins, Arial, sans-serif;
  --vp-size: 14px;
  --vp-weight: 400;

  --vp-color: rgba(255,255,255,.82);
  --vp-placeholder: rgba(255,255,255,.55);

  --vp-pad-x: 16px;
  --vp-shadow-focus: 0 0 0 3px rgba(248, 168, 141, .18);

  /* MOVIMENTO */
  --vp-pill-x: -20px;   /* translate X */
  --vp-pill-y: 0px;     /* translate Y */
  --vp-pill-ml: -20px;    /* margin-left (flex-friendly) */
}

/* pill em si */
html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: var(--vp-w) !important;
  height: var(--vp-h) !important;
  min-width: 140px !important;

  padding: 0 var(--vp-pad-x) !important;

  background: var(--vp-bg) !important;
  border: 1px solid var(--vp-border-color) !important;
  border-radius: var(--vp-radius) !important;

  font-family: var(--vp-font) !important;
  font-size: var(--vp-size) !important;
  font-weight: var(--vp-weight) !important;

  color: var(--vp-placeholder) !important;

  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;

  /* MOVIMENTO (2 camadas) */
  margin-left: var(--vp-pill-ml) !important;
  position: relative !important;
  transform: translate3d(var(--vp-pill-x), var(--vp-pill-y), 0) !important;
  will-change: transform;

  cursor: text !important;

  outline: 3px solid lime !important;
  outline-offset: 2px !important;
}

html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill:hover{
  background: var(--vp-bg-hover) !important;
  color: var(--vp-color) !important;
}

html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill:focus,
html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill:focus-visible{
  border-color: var(--vp-border-color-focus) !important;
  box-shadow: var(--vp-shadow-focus) !important;
  color: var(--vp-color) !important;
  outline: 3px solid lime !important;
}

/* OPCIONAL: se você criar o wrapper #vpHeaderSearchWrap no header.liquid */
html body header.site-header .site-header__icons-wrapper #vpHeaderSearchWrap{
  position: relative !important;
  transform: translate3d(var(--vp-pill-x), var(--vp-pill-y), 0) !important;
  will-change: transform;
}

/* =========================================================
   VIVA PLENA — BUSCA NO HEADER — DESKTOP ONLY (MOVE COM LEFT/TOP)
   Mobile NÃO é tocado.
   ========================================================= */

@media (min-width: 990px){

  /* ===== CONTROLES (DESKTOP) ===== */
  :root{
    --vp-w: 220px;
    --vp-h: 38px;
    --vp-radius: 999px;

    --vp-bg: rgba(92, 38, 57, .85);
    --vp-bg-hover: rgba(92, 38, 57, .95);

    --vp-border-color: rgba(248, 168, 141, .35);
    --vp-border-color-focus: rgba(248, 168, 141, .70);

    --vp-font: Poppins, Arial, sans-serif;
    --vp-size: 14px;
    --vp-weight: 400;

    --vp-color: rgba(255,255,255,.82);
    --vp-placeholder: rgba(255,255,255,.55);

    --vp-pad-x: 16px;
    --vp-shadow-focus: 0 0 0 3px rgba(248, 168, 141, .18);

    /* ===== MOVIMENTO (DESKTOP) =====
       + direita | - esquerda
       + desce   | - sobe
    */
    --vp-pill-left: -200px;
    --vp-pill-top: 0px;
  }

  /* =========================================================
     PIL L (DESKTOP): estiliza + MOVE DE VERDADE
     ========================================================= */
  html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: var(--vp-w) !important;
    height: var(--vp-h) !important;
    min-width: 140px !important;

    padding: 0 var(--vp-pad-x) !important;

    background: var(--vp-bg) !important;
    border: 1px solid var(--vp-border-color) !important;
    border-radius: var(--vp-radius) !important;

    font-family: var(--vp-font) !important;
    font-size: var(--vp-size) !important;
    font-weight: var(--vp-weight) !important;

    color: var(--vp-placeholder) !important;

    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;

    cursor: text !important;
    box-sizing: border-box !important;

    /* ===== MOVIMENTO (DESKTOP ONLY) ===== */
    position: relative !important;
    left: var(--vp-pill-left) !important;
    top:  var(--vp-pill-top) !important;

    /* mata qualquer transform do tema/JS */
    transform: none !important;

    /* DEBUG (DESKTOP ONLY): se aparecer, teu CSS tá pegando */
    outline: 3px solid lime !important;
    outline-offset: 2px !important;
  }

  html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill:hover{
    background: var(--vp-bg-hover) !important;
    color: var(--vp-color) !important;
  }

  html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill:focus,
  html body header.site-header .site-header__icons-wrapper #vpHeaderSearchPill:focus-visible{
    border-color: var(--vp-border-color-focus) !important;
    box-shadow: var(--vp-shadow-focus) !important;
    color: var(--vp-color) !important;

    /* debug também no focus */
    outline: 3px solid lime !important;
  }
}