/** Shopify CDN: Minification failed

Line 516:0 Unexpected "}"

**/
.vex-tierkit,
.vex-tierkit *{ box-sizing:border-box; }

.vex-tierkit{
  margin:18px 0 22px;
  max-width: 1080px;
  margin-left:auto;
  margin-right:auto;
}

.vex-tierkit__label{
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
  font-size:14px;
}

/* ===== CARDS (3 colunas) ===== */
.vex-tierkit__tiers{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-bottom:16px;
}

/* card base */
.vex-tierkit__tier{
  border:2px solid #cfcfcf;
  border-radius:18px;
  padding:16px 16px 18px;
  background:#fff;
  cursor:pointer;
  min-width:0;
  overflow:hidden;
  text-align:center;

  display:grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap:10px;
  justify-items:center;
}

/* card ativo (rosa) */
.vex-tierkit__tier.is-active{
  border-color:#c77b8f;
  background:#f8dfe6;
}

/* título */
.vex-tierkit__title{
  font-weight:900;
  color:#b10f3a;
  text-transform:uppercase;
  font-size:22px;
  line-height:1.05;
}

/* pills abaixo do título */
.vex-tierkit__pills{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.vex-tierkit__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#b61a3d;
  color:#fff;
  font-size:12px;
  font-weight:950;
  padding:5px 12px;
  border-radius:999px;
  white-space:nowrap;
}

.vex-tierkit__best{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#d9f7d9;
  color:#0f7a2b;
  font-size:13px;
  font-weight:950;
  padding:5px 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* bloco de preços central */
.vex-tierkit__pricing{
  width:100%;
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* DE */
.vex-tierkit__old{
  color:#6b7280;
  font-weight:800;
  font-size:15px;
  text-decoration:line-through;
}

/* POR + PREÇO na MESMA linha */
.vex-tierkit__newrow{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.vex-tierkit__por{
  font-size:22px;
  color:#6b7280;
  font-weight:700;
}

/* preço grande sempre CINZA (igual referência) */
.vex-tierkit__new{
  font-size:52px;
  font-weight:950;
  color:#3f3f46;
  line-height:1;
  white-space:nowrap;
}

/* no unitário, deixa ainda maior */
.vex-tierkit__tier.is-unit .vex-tierkit__new{
  font-size:64px;
}

/* unit price */
.vex-tierkit__unit{
  font-size:15px;
  font-weight:800;
  color:#6b7280;
}

/* economia verde */
.vex-tierkit__economy{
  font-size:18px;
  font-weight:950;
  color: #16A34A;
}

/* botão dentro do card (verde claro + texto verde) */
.vex-tierkit__cardbtn{
  width:100%;
  max-width: 280px;
  background:#d9f7d9;
  color:#0f7a2b;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.02em;
  padding:14px 16px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== botões grandes (fora) ===== */
.vex-tierkit__single{ display:grid; gap:12px; }

.vex-tierkit__btn{
  width:100%;
  padding:14px 16px;
  border-radius:999px;
  font-weight:900;
  border:2px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.vex-tierkit__btn--outline{
  background:transparent;
  border-color:#16a34a;
  color:#16a34a;
  text-transform:none;
}

.vex-tierkit__btn--solid{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.vex-tierkit__btn:disabled{ opacity:.45; cursor:not-allowed; }
.vex-tierkit__loading{ display:inline-flex; align-items:center; justify-content:center; }

.vex-tierkit__error{
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  font-size:13px;
  text-align:center;
}

/* ===== grade ===== */
.vex-tierkit__grade{
  border:1px solid #eef2f7;
  border-radius:14px;
  padding:12px;
  background:#fff;
  display:grid;
  margin-top: 50px;
  gap:12px;
}

.vex-tierkit__bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #f3f4f6;
  border-radius:12px;
  background:#fafafa;
  font-size:13px;
}

.vex-tierkit__status{ color:#6b7280; font-weight:700; }

.vex-tierkit__grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}

.vex-tierkit__col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.vex-tierkit__bubble{
  position:relative;
  background:#c01843;
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:7px 9px;
  border-radius:8px;
  min-width:40px;
  text-align:center;
}

.vex-tierkit__bubble:after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-5px;
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #c01843;
}

.vex-tierkit__pm{
  width:26px;height:26px;
  border-radius:8px;
  border:1px solid #d1d5db;
  background:#fff;
  font-weight:900;
}

.vex-tierkit__qty{
  width:44px;height:30px;
  text-align:center;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-weight:900;
}

.vex-tierkit__col.is-disabled{ opacity:.45; }
.vex-tierkit__soldout{ font-size:11px; color:#991b1b; }

@media (max-width: 900px){
  .vex-tierkit__new{ font-size:44px; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size:54px; }
}

@media (max-width: 640px){
  .vex-tierkit{ max-width: 100%; padding:0 10px; }
  .vex-tierkit__tiers{ gap:10px; }
  .vex-tierkit__tier{ padding:12px 10px 14px; row-gap:8px; }

  .vex-tierkit__title{ font-size:14px; }
  .vex-tierkit__badge{ font-size:9px; padding:4px 10px; }
  .vex-tierkit__best{ font-size:10px; padding:4px 10px; }

  .vex-tierkit__por{ font-size:14px; }
  .vex-tierkit__new{ font-size:26px; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size:34px; }

  .vex-tierkit__unit{ font-size:12px; }
  .vex-tierkit__economy{ font-size:18px; }
  .vex-tierkit__cardbtn{ padding:10px 12px; border-radius:10px; }

  .vex-tierkit__bar{ flex-direction:column; gap:6px; }
}

.vex-tierkit [hidden]{ display:none !important; }
/* =========================
   FIX DESKTOP: não cortar conteúdo
   - garante largura mínima por card
   - se não couber 3, cai pra 2 (ou 1)
   ========================= */
@media (min-width: 641px){

  /* em vez de 3 fixo, usa auto-fit com mínimo seguro */
  .vex-tierkit__tiers{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
  }

  /* impede vazamento */
  .vex-tierkit__tier{
    overflow: hidden !important;
  }

  /* "Por: R$" sempre em 1 linha */
  .vex-tierkit__newrow{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 10px !important;
  }

  /* ajusta tamanho do preço pra não estourar */
  .vex-tierkit__new{
    font-size: 46px !important;        /* antes 52 */
    letter-spacing: -0.02em !important;
  }

  /* unitário um pouco menor também */
  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: 56px !important;        /* antes 64 */
  }
}

/* =========================
   DESKTOP MÉDIO (telas menores/laptops)
   ========================= */
@media (min-width: 641px) and (max-width: 980px){
  .vex-tierkit__new{ font-size: 40px !important; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 50px !important; }
  .vex-tierkit__por{ font-size: 18px !important; }
}

/* =========================
   RESPONSIVO FINAL (sem quebrar / sem gigante)
   - >=900px: 3 colunas
   - 700-899px: 2 colunas
   - <=699px: 1 coluna
   ========================= */

/* DESKTOP / NOTEBOOK */
@media (min-width: 900px){
  .vex-tierkit__tiers{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .vex-tierkit__tier{
    padding: 14px 14px 16px !important;
    row-gap: 8px !important;
  }
  .vex-tierkit__title{ font-size: 18px !important; }
  .vex-tierkit__new{ font-size: 46px !important; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 54px !important; }
  .vex-tierkit__por{ font-size: 18px !important; }
  .vex-tierkit__economy{ font-size: 19px !important; }
  .vex-tierkit__cardbtn{ padding: 12px 14px !important; max-width: 100% !important; }
}

/* TABLET / PC MÉDIO (o seu print) */
@media (min-width: 700px) and (max-width: 899px){
  .vex-tierkit__tiers{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .vex-tierkit__tier{
    padding: 14px 14px 16px !important;
  }
  .vex-tierkit__title{ font-size: 18px !important; }
  .vex-tierkit__newrow{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 8px !important;
  }
  .vex-tierkit__por{ font-size: 18px !important; }
  .vex-tierkit__new{ font-size: 44px !important; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 52px !important; }
  .vex-tierkit__cardbtn{ padding: 12px 14px !important; }
}

/* MOBILE */
@media (max-width: 699px){
  .vex-tierkit{
    padding: 0 12px !important;
  }
  .vex-tierkit__tiers{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .vex-tierkit__tier{
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 14px 14px 16px !important;
  }
  .vex-tierkit__newrow{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 8px !important;
  }
  .vex-tierkit__por{ font-size: 16px !important; }
  .vex-tierkit__new{ font-size: 42px !important; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 52px !important; }
  .vex-tierkit__cardbtn{ max-width: 320px !important; }
}

/* =========================
   VEX TierKit - FIX FINAL (tudo menor e sem cortar)
   - Mobile: 3 colunas
   - PC: 3 colunas (mas com fonte menor p/ caber no sidebar)
   ========================= */

/* ---------- BASE: evita corte visual ---------- */
.vex-tierkit__tier{
  overflow: hidden !important;
}
.vex-tierkit__new{
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.vex-tierkit__newrow{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* =========================
   MOBILE (<=640px): 3 CARDS em uma LINHA
   ========================= */
@media (max-width: 640px){
   }

  .vex-tierkit__tiers{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .vex-tierkit__tier{
    padding: 8px 6px 10px !important;
    border-radius: 12px !important;
    min-height: 150px !important;
  }

  .vex-tierkit__title{
    font-size: 10px !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }

  .vex-tierkit__badge,
  .vex-tierkit__best{
    font-size: 7px !important;
    padding: 2px 6px !important;
  }

  .vex-tierkit__old{ font-size: 9px !important; }

  .vex-tierkit__por{ font-size: 10px !important; }

  /* preço bem menor pra nunca cortar */
  .vex-tierkit__new{ font-size: 17px !important; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 22px !important; }

  .vex-tierkit__unit{ font-size: 9px !important; }

  /* pra caber em 3 colunas: some itens longos */
  
  .vex-tierkit__hint{ display:none !important; }

  .vex-tierkit__cardbtn{
    margin-top: 6px !important;
    padding: 7px 6px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* =========================
   PC / SIDEBAR (>=900px): 3 colunas, porém menor
   (resolve o corte do R$ 330,00 e R$ 600,00)
   ========================= */
@media (min-width: 900px){
  .vex-tierkit__tiers{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .vex-tierkit__tier{
    padding: 12px 12px 14px !important;
    border-radius: 16px !important;
  }

  .vex-tierkit__title{
    font-size: 15px !important;
    letter-spacing: .02em !important;
  }

  .vex-tierkit__badge{
    font-size: 9px !important;
    padding: 3px 10px !important;
  }
  .vex-tierkit__best{
    font-size: 10px !important;
    padding: 3px 10px !important;
  }

  .vex-tierkit__old{ font-size: 12px !important; }

  .vex-tierkit__por{ font-size: 16px !important; }

  /* aqui está o principal: reduzir preços */
  .vex-tierkit__new{ font-size: 38px !important; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 44px !important; }

  .vex-tierkit__unit{ font-size: 12px !important; }
  .vex-tierkit__economy{ font-size: 18px !important; }

  .vex-tierkit__cardbtn{
    padding: 10px 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
}

/* =========================
   NOTEBOOK / PC MÉDIO (700-899px): 2 colunas pra não esmagar
   ========================= */
@media (min-width: 700px) and (max-width: 899px){
  .vex-tierkit__tiers{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .vex-tierkit__new{ font-size: 36px !important; }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 42px !important; }
}

/* =========================
   PC: diminuir MAIS (deixar tudo cabendo perfeito)
   ========================= */
@media (min-width: 900px){

  /* cards um pouco mais compactos */
  .vex-tierkit__tier{
    padding: 10px 10px 12px !important;
  }

  .vex-tierkit__title{
    font-size: 14px !important;
  }

  .vex-tierkit__badge{
    font-size: 8px !important;
    padding: 2px 8px !important;
  }
  .vex-tierkit__best{
    font-size: 9px !important;
    padding: 2px 8px !important;
  }

  .vex-tierkit__old{
    font-size: 11px !important;
  }

  .vex-tierkit__por{
    font-size: 14px !important;
  }

  /* PRINCIPAL: preços menores */
  .vex-tierkit__new{
    font-size: 34px !important;
    letter-spacing: -0.02em !important;
  }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: 32px !important;
  }

  .vex-tierkit__unit{
    font-size: 11px !important;
  }
  .vex-tierkit__economy{
    font-size: 19px !important;
  }

  .vex-tierkit__cardbtn{
    padding: 9px 10px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }
}

/* PC: reduzir MAIS (último ajuste fino) */
@media (min-width: 900px){
  .vex-tierkit__tiers{ gap: 12px !important; }

  .vex-tierkit__tier{
    padding: 8px 8px 10px !important;
    border-radius: 14px !important;
  }

  .vex-tierkit__title{ font-size: 17px !important; }
  .vex-tierkit__old{ font-size: 11px !important; }

  .vex-tierkit__newrow{ gap: 4px !important; }
  .vex-tierkit__por{ font-size: 12px !important; }

  .vex-tierkit__new{
    font-size: 29px !important;
    letter-spacing: -0.03em !important;
  }
  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: 34px !important;
  }

  .vex-tierkit__unit{ font-size: 14px !important; }
  .vex-tierkit__economy{ font-size: 16px !important; }

  .vex-tierkit__badge{ font-size: 11px !important; padding: 2px 7px !important; }
  .vex-tierkit__best{ font-size: 11px !important; padding: 2px 7px !important; }

  .vex-tierkit__cardbtn{
    padding: 7px 9px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }
}

/* VEX TierKit — MOBILE ULTRA COMPACT (1 por linha e bem baixinho)
   Cole no FINAL do vex-tierkit.css
*/
@media (max-width: 640px){

  .vex-tierkit__tiers{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .vex-tierkit__tier{
    padding: 10px 10px 10px !important;
    border-radius: 12px !important;
    row-gap: 5px !important;
  }

  .vex-tierkit__title{
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  .vex-tierkit__pills{ gap: 3px !important; }

  .vex-tierkit__badge{
    font-size: 8px !important;
    padding: 2px 8px !important;
  }

  .vex-tierkit__best{
    font-size: 9px !important;
    padding: 2px 8px !important;
  }

  .vex-tierkit__pricing{ gap: 4px !important; }

  .vex-tierkit__old{ font-size: 10px !important; }

  /* Por + preço na mesma linha e menor */
  .vex-tierkit__newrow{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }

  .vex-tierkit__por{ font-size: 12px !important; }

  .vex-tierkit__new{
    font-size: 30px !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }

  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: 32px !important;
  }

  .vex-tierkit__unit{ font-size: 10px !important; }

  /* Economia aumenta muito a altura — se quiser MUITO baixo, esconde no mobile */
  .vex-tierkit__economy{ display: none !important; }

  /* Botão do card menor */
  .vex-tierkit__cardbtn{
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    max-width: 100% !important;
  }
}

/* ======= FORA DO RETÂNGULO (igual referência) ======= */

/* o card precisa permitir “sair” pra baixo */
.vex-tierkit__tier{
  position: relative;
  overflow: visible !important;
  padding-bottom: 42px; /* reserva espaço interno pro rodapé de fora */
}

/* container que fica FORA da borda */
.vex-tierkit__outside{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;            /* joga pra fora do retângulo */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;     /* clique continua no card */
}

/* unit price fora */
.vex-tierkit__unit{
  font-size: 11px;
  font-weight: 800;
  color: #9ca3af;           /* cinza claro igual print */
  line-height: 1;
}

/* economia fora (vermelho igual print) */
.vex-tierkit__economy{
  font-size: 12px;
  font-weight: 950;
  color: #16A34A;
  line-height: 1;
}

/* dá espaço entre os cards e os botões grandes abaixo */
.vex-tierkit__tiers{
  margin-bottom: 52px !important;
}

/* ======= MOBILE: tudo menor e mais enxuto (3 em linha) ======= */
@media (max-width: 640px){
  .vex-tierkit__tiers{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .vex-tierkit__tier{
    padding: 8px 8px 38px !important; /* compacto + reserva pro rodapé */
    border-radius: 14px !important;
  }

  .vex-tierkit__title{ font-size: 11px !important; }
  .vex-tierkit__badge{ font-size: 7px !important; padding: 2px 6px !important; }
  .vex-tierkit__best{ font-size: 8px !important; padding: 2px 6px !important; }

  .vex-tierkit__por{ font-size: 11px !important; }
  .vex-tierkit__new{ font-size: 17px !important; letter-spacing: -0.02em !important; }

  .vex-tierkit__cardbtn{
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }

  .vex-tierkit__outside{
    bottom: -28px !important;
    gap: 5px !important;
  }
  .vex-tierkit__unit{ font-size: 9px !important; }
  .vex-tierkit__economy{ font-size: 19px !important; }
}

/* MAIS ESPAÇO ENTRE O CARD E O TEXTO DE FORA */
.vex-tierkit__tier{
  padding-bottom: 70px !important;  /* aumenta a “reserva” interna */
}

/* desce mais o bloco externo */
.vex-tierkit__outside{
  bottom: -42px !important;         /* afasta da borda inferior do card */
}

/* dá uma folga extra só no texto unitário */
.vex-tierkit__outside .vex-tierkit__unit{
  margin-top: 6px !important;
}

/* MOBILE: proporcional */
@media (max-width: 640px){
  .vex-tierkit__tier{
    padding-bottom: 62px !important;
  }
  .vex-tierkit__outside{
    bottom: -46px !important;
  }
  .vex-tierkit__outside .vex-tierkit__unit{
    margin-top: 4px !important;
  }
}
/* NÃO AUMENTAR O “MIOLO” DO CARD */
.vex-tierkit__tier{
  padding-bottom: 16px !important; /* volta pra um valor normal (não reserva espaço gigante) */
}

/* AFASTAR SOMENTE O BLOCO “FORA DO RETÂNGULO” */
.vex-tierkit__outside{
  /* mantém a posição atual (seja absolute ou normal),
     mas empurra ele pra BAIXO sem mexer no tamanho do card */
  transform: translateY(10px) !important;
}



/* MOBILE: ajuste menor */
@media (max-width: 640px){
  .vex-tierkit__outside{
    transform: translateY(8px) !important;
  }
}
/* 1) Reserva espaço ABAIXO dos 3 cards (pra unidade + economia não bater no botão) */
.vex-tierkit__tiers{
  margin-bottom: 64px !important; /* ajuste fino: 52~80 */
}

/* 2) Se você estava usando translateY, reduz pra não empurrar demais */
.vex-tierkit__outside{
  transform: translateY(6px) !important;
}

/* 3) Garante que os botões grandes não “subam” por cima */
.vex-tierkit__single{
  margin-top: 0 !important;
}

/* MOBILE: normalmente precisa de um pouco menos */
@media (max-width: 640px){
  .vex-tierkit__tiers{
    margin-bottom: 52px !important;
  }
  .vex-tierkit__outside{
    transform: translateY(4px) !important;
  }
}

/* ==========================================
   MOBILE (2 em cima + 1 embaixo centralizado)
   Cole no FINAL do arquivo CSS
   ========================================== */
@media (max-width: 640px){

  /* 2 colunas */
  .vex-tierkit__tiers{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  /* 3º card vai pra linha de baixo e fica centralizado com largura de 1 card */
  .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
    grid-column: 1 / -1 !important;          /* ocupa a linha inteira */
    justify-self: center !important;         /* centraliza */
    width: min(260px, calc((100% - 10px)/2)) !important; /* largura de 1 coluna */
  }

  /* --------- Se você usa a linha de textos fora (unit/economia) --------- */
  .vex-tierkit__below,
  .vex-tierkit__belowline{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 10px 0 16px !important; /* espaço antes do CTA */
  }

  /* 3º bloco de texto (unit/economia) também centraliza */
  .vex-tierkit__below > *:nth-child(3),
  .vex-tierkit__belowline > *:nth-child(3){
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(260px, calc((100% - 10px)/2)) !important;
  }
}
/* ==========================================
   MOBILE FINAL — 2 em cima + 1 embaixo (igual ref)
   + unit/economia “fora do card” sem ficar no meio
   Cole NO FINAL do CSS
   ========================================== */
@media (max-width: 640px){

  /* GRID 2 colunas + gap vertical controlado */
  .vex-tierkit__tiers{
    --vex-col-gap: 12px;
    --vex-row-gap: 38px;          /* espaço p/ caber o (un) fora do card */

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--vex-col-gap) !important;
    

    margin-bottom: 34px !important; /* respiro pro (un) do último não bater no CTA */
  }

  /* GARANTE que o absolute do "outside" fique preso no card (não no container) */
  .vex-tierkit__tier{
    position: relative !important;
    overflow: visible !important;
    padding: 12px 12px 14px !important;
    border-radius: 16px !important;
  }

  /* 3º card: desce e fica centralizado com largura de 1 card */
  .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
    grid-column: 1 / -1 !important;
    justify-self: center !important;
   width: min(340px, 100%) !important;
  }

  /* “FORA DO RETÂNGULO” — centralizado abaixo do card correto */
  .vex-tierkit__outside{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: -24px !important;     /* aproxima do card (sem criar aquele vazio enorme) */
    width: max-content !important;
    max-width: 100% !important;
    gap: 3px !important;
    pointer-events: none !important;
    text-align: center !important;
  }

  .vex-tierkit__unit,
  .vex-tierkit__economy{
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .vex-tierkit__unit{
    font-size: 10px !important;
    color: #9ca3af !important;
    font-weight: 800 !important;
  }

  .vex-tierkit__economy{
    font-size: 12px !important;
    color: #16A34A !important;
    font-weight: 950 !important;
  }

  /* não quebrar info */
  .vex-tierkit__title{
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .vex-tierkit__badge,
  .vex-tierkit__best{
    font-size: 9px !important;
    padding: 3px 10px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .vex-tierkit__newrow{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 6px !important;
  }

  .vex-tierkit__por{ font-size: 12px !important; }

  .vex-tierkit__new{
   
    line-height: 1 !important;
  }

  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: 20px !important;
  }

  .vex-tierkit__cardbtn{
    padding: 10px 10px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* =========================================================
   VEX TierKit — MEIO TERMO (não afeta mobile)
   Só aplica em telas 768px–1280px E quando o bloco estiver estreito
   Cole NO FINAL do vex-tierkit.css
   ========================================================= */

.vex-tierkit{ container-type: inline-size; }

/* meio termo (tablet/pc menor / editor) */
@media (min-width: 768px) and (max-width: 1280px){

  /* quando a coluna do produto estiver "apertada" */
  @container (max-width: 560px){

    .vex-tierkit__tiers{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin-bottom: 34px !important;
    }

    /* remove aquele “vazio” (o 1fr) e deixa tudo proporcional */
    .vex-tierkit__tier{
      padding: 10px 10px 12px !important;
      border-radius: 16px !important;
      row-gap: 8px !important;
      grid-template-rows: auto auto auto auto !important;
      position: relative !important;
      overflow: visible !important;
    }

    .vex-tierkit__title{ font-size: 13px !important; }

    .vex-tierkit__badge,
    .vex-tierkit__best{
      font-size: 9px !important;
      padding: 3px 8px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      max-width: 100% !important;
    }

    .vex-tierkit__old{ font-size: 11px !important; }

    .vex-tierkit__newrow{
      flex-wrap: nowrap !important;
      white-space: nowrap !important;
      gap: 6px !important;
    }

    .vex-tierkit__por{ font-size: 13px !important; }
    .vex-tierkit__new{ font-size: 27px !important; letter-spacing: -0.02em !important; }
    .vex-tierkit__tier.is-unit .vex-tierkit__new{ font-size: 30px !important; }

    .vex-tierkit__cardbtn{
      padding: 8px 10px !important;
      font-size: 11px !important;
      border-radius: 12px !important;
    }

    /* textos fora do retângulo (sem buraco) */
    .vex-tierkit__outside{
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%) !important;
      bottom: -18px !important;
      width: max-content !important;
      max-width: 100% !important;
      text-align: center !important;
      gap: 4px !important;
    }

    .vex-tierkit__unit,
    .vex-tierkit__economy{ white-space: nowrap !important; line-height: 1 !important; }

    .vex-tierkit__unit{ font-size: 12px !important; }
    .vex-tierkit__economy{ font-size: 14px !important; }
  }

  /* se ficar MUITO estreito (editor apertado), cai pra 2 em cima + 1 embaixo */
  @container (max-width: 460px){

    .vex-tierkit__tiers{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 12px !important;
      row-gap: 38px !important;
      margin-bottom: 32px !important;
    }

    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
      grid-column: 1 / -1 !important;
      justify-self: center !important;
      width: calc((100% - 12px) / 2) !important;
    }
  }
}
/* MEIO TERMO: 3º card (o de baixo) MAIOR e centralizado */
@media (min-width: 768px) and (max-width: 1280px){
  @container (max-width: 460px){

    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
      /* antes era largura de 1 card */
      width: min(420px, 100%) !important;   /* aumenta o de baixo */
      max-width: 100% !important;
    }
  }
}
/* =========================================================
   MEIO TERMO (NÃO AFETA MOBILE):
   desce APENAS o preço por unidade + economia
   sem empurrar o card de baixo / sem mexer na grade
   ========================================================= */

.vex-tierkit { container-type: inline-size; }

/* só desktop/tablet (mobile fica intacto) */
@media (min-width: 641px) {

  /* quando o bloco estiver apertado (editor/coluna menor) */
  @container (max-width: 560px){

    /* garante que o absolute fique preso no card */
    .vex-tierkit__tier{ position: relative !important; }

    /* aqui é o ajuste: não usa bottom, usa TOP abaixo do card */
    .vex-tierkit__outside{
      bottom: auto !important;
      top: calc(100% + 10px) !important;   /* ↑ aumenta/diminui só esse valor */
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%) !important;
      gap: 4px !important;
      text-align: center !important;
      width: max-content !important;
      max-width: 100% !important;
      pointer-events: none !important;
    }

    /* se quiser mais “respiro” entre (un) e economia */
    .vex-tierkit__economy{ margin-top: 2px !important; }

  }
}
/* ==========================================
   MEIO TERMO — tirar (un) + economia de dentro do CTA
   (não mexe no mobile)
   ========================================== */
@media (min-width: 641px){
  .vex-tierkit{ container-type: inline-size; }

  @container (max-width: 560px){

    /* 1) respiro mínimo antes do CTA (pra não sobrepor) */
    .vex-tierkit__tiers{
      margin-bottom: 56px !important;
    }

    /* 2) sobe um pouco o bloco de fora (geral) */
    .vex-tierkit__outside{
      top: calc(100% + 2px) !important; /* antes estava maior; diminui se quiser subir mais */
      bottom: auto !important;
    }

    /* 3) o card de baixo fica mais perto do CTA, então sobe MAIS ele */
    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3) .vex-tierkit__outside{
      top: calc(100% + 2px) !important;
    }
  }
}
/* ============================
   AJUSTES FINOS (MEIO TERMO)
   ============================ */
@media (min-width: 641px){
  @container (max-width: 560px){

    /* 1) Mais espaço entre a linha de cima e o card de baixo (o que você pediu) */
    .vex-tierkit__tiers{
      row-gap: 54px !important;   /* sobe/abaixa aqui: 48~64 */
    }

    /* 2) Um pouquinho mais de respiro no "outside" do selecionado (sem mexer no bottom) */
    .vex-tierkit__tier.is-active .vex-tierkit__outside{
      top: calc(100% + 6px) !important; /* antes 2px */
    }

    /* 3) Diminuir tamanho do "Por:" e do preço */
    .vex-tierkit__newrow{ gap: 4px !important; }

    .vex-tierkit__por{
      font-size: 12px !important;
    }

    .vex-tierkit__new{
     
    }

    /* unitário um pouco maior que os kits, mas ainda menor que antes */
    .vex-tierkit__tier.is-unit .vex-tierkit__new{
     
    }
  }
}/* ==========================================
   MOBILE — FORÇAR aparecer (un) + Economize
   e ajustar espaçamento sem empurrar os botões
   Cole NO FINAL do vex-tierkit.css
   ========================================== */
@media (max-width: 640px){

  /* 0) se algum CSS antigo estiver escondendo, isso aqui vence */
  .vex-tierkit__unit,
  .vex-tierkit__economy{
    display: block !important;
  }

  /* 1) espaço entre linhas (pra não encostar no card de baixo) */
  .vex-tierkit__tiers{
    row-gap: 52px !important;      /* ajuste fino: 46~60 */
    margin-bottom: 10px !important; /* NÃO cria buracão antes do botão */
  }

  /* 2) garantir que o outside apareça e não seja cortado */
  .vex-tierkit__tier{
    position: relative !important;
    overflow: visible !important;
  }

  /* 3) posicionar o outside sem cair dentro do botão */
  .vex-tierkit__outside{
    bottom: -28px !important;  /* ajuste fino: -12 (mais pra cima) / -20 (mais pra baixo) */
    gap: 4px !important;
    z-index: 2 !important;
  }

  /* 4) tipografia pra não quebrar */
  .vex-tierkit__unit{
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    color: #9ca3af !important;
    font-weight: 800 !important;
  }

  .vex-tierkit__economy{
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    font-weight: 950 !important;
    color: #16A34A !important;
  }

  .vex-tierkit__btn--outline {
    background: transparent;
    border-color: #16a34a;
    color: #16a34a;
    text-transform: none;
    margin-top: 30px;
}

  /* 5) respiro pequeno só pra não sobrepor o CTA (não “aumenta o bottom”) */
  .vex-tierkit__single{
    margin-top: 14px !important; /* pequeno: 10~18 */
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ==========================================
   MOBILE: 1 UNIDADE (full) + 2 kits embaixo (2 colunas)
   ========================================== */
@media (max-width: 640px){

  /* 2 colunas no mobile */
  .vex-tierkit__tiers{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 14px !important; /* ajuste fino do espaçamento vertical */
  }

  /* 1º card pega a linha toda */
  .vex-tierkit__tiers > .vex-tierkit__tier:first-child{
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }

  /* garante que os outros dois ocupem 1 coluna cada */
  .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(2),
  .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
    grid-column: auto !important;
    width: 100% !important;
  }
}
/* =========================================================
   1) MOBILE — quando o preço é alto, não apertar / não quebrar
   ========================================================= */
@media (max-width: 640px){

  /* Espaços mais “inteligentes” */
  .vex-tierkit__tier{
    padding: 14px 14px 16px !important;
  }

  /* "Por:" menor pra sobrar espaço */
  .vex-tierkit__por{
    font-size: 12px !important;
  }

  /* Preço do KIT (cards de baixo) reduz automaticamente se for grande */
  .vex-tierkit__tier.is-kit .vex-tierkit__new{
    font-size: clamp(20px, 6.2vw, 26px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }

  /* Preço do 1 UNIDADE (card de cima) também responsivo */
  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: clamp(28px, 8vw, 44px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }

  /* Evita quebra feia do "Por: R$ ..." */
  .vex-tierkit__newrow{
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  /* Botão dentro do card: sempre cabe */
  .vex-tierkit__cardbtn{
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   2) MEIO TERMO / MONITOR MENOR
   - quando a COLUNA estiver estreita, aplica o layout do mobile:
     "1 unidade" full + 2 kits embaixo
   ========================================================= */
.vex-tierkit{ container-type: inline-size; }

/* Não pega mobile (só acima de 640px) */
@media (min-width: 641px){

  /* Quando o bloco do TierKit estiver estreito (coluna menor / editor) */
  @container (max-width: 860px){

    .vex-tierkit__tiers{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 12px !important;
      row-gap: 14px !important;
    }

    /* 1 UNIDADE ocupa a linha toda */
    .vex-tierkit__tiers > .vex-tierkit__tier:first-child{
      grid-column: 1 / -1 !important;
    }

    /* Kits ficam embaixo 2 colunas */
    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(2),
    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
      width: 100% !important;
    }

    /* Compacta um pouco (pra não “pegar PC grande”) */
    .vex-tierkit__tier{
      padding: 12px 12px 14px !important;
    }

    .vex-tierkit__por{ font-size: 13px !important; }

    .vex-tierkit__tier.is-kit .vex-tierkit__new{
      font-size: 32px !important;
      letter-spacing: -0.02em !important;
      line-height: 1 !important;
    }
    .vex-tierkit__tier.is-unit .vex-tierkit__new{
      font-size: 32px !important;
      letter-spacing: -0.02em !important;
      line-height: 1 !important;
    }

    .vex-tierkit__cardbtn{
      width: 100% !important;
      max-width: 100% !important;
      padding: 10px 12px !important;
      font-size: 12px !important;
    }
  }
}
/* ==========================================
   MOBILE — versão mais compacta (tudo menor)
   (mantém 1 unidade full + 2 kits embaixo)
   ========================================== */
@media (max-width: 640px){

  /* grid um pouco mais fechado */
  .vex-tierkit__tiers{
    column-gap: 10px !important;
    row-gap: 12px !important;
  }

  /* cards mais baixos */
  .vex-tierkit__tier{
    padding: 12px 12px 12px !important;
    border-radius: 16px !important;
    row-gap: 6px !important;
  }

  /* título menor */
  .vex-tierkit__title{
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* badges menores */
  .vex-tierkit__badge,
  .vex-tierkit__best{
    font-size: 8px !important;
    padding: 2px 8px !important;
  }

  /* "DE" menor */
  .vex-tierkit__old{
    font-size: 10px !important;
  }

  /* linha do "Por:" mais compacta */
  .vex-tierkit__newrow{
    gap: 4px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .vex-tierkit__por{
    font-size: 11px !important;
  }

  /* preços menores (responsivo quando for alto) */
  .vex-tierkit__tier.is-kit .vex-tierkit__new{
    font-size: clamp(18px, 5.8vw, 24px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }

  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: clamp(26px, 7.4vw, 38px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }

  /* botão dentro do card menor */
  .vex-tierkit__cardbtn{
    padding: 9px 10px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  /* textos de fora (un + economia) menores */
  .vex-tierkit__unit{
    font-size: 10px !important;
  }
  .vex-tierkit__economy{
    font-size: 12px !important;
  }
}
/* ==========================================
   MOBILE — MICRO COMPACT (MENOR AINDA)
   Cole NO FINAL do vex-tierkit.css
   ========================================== */
@media (max-width: 640px){

  .vex-tierkit__tiers{
    column-gap: 6px !important;
    row-gap: 8px !important;
  }

  .vex-tierkit__tier{
    padding: 7px 7px 8px !important;
    border-radius: 12px !important;
    row-gap: 4px !important;
  }

  .vex-tierkit__pills{ gap: 2px !important; }
  .vex-tierkit__pricing{ gap: 3px !important; }

  .vex-tierkit__title{
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .vex-tierkit__badge,
  .vex-tierkit__best{
    font-size: 6px !important;
    padding: 2px 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .vex-tierkit__old{
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .vex-tierkit__newrow{
    gap: 2px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
  }

  .vex-tierkit__por{
    font-size: 9px !important;
    line-height: 1 !important;
  }

  /* Kits (valores altos) */
  .vex-tierkit__tier.is-kit .vex-tierkit__new{
    font-size: clamp(14px, 4.6vw, 18px) !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
  }

  /* 1 unidade (card grande) */
  .vex-tierkit__tier.is-unit .vex-tierkit__new{
    font-size: clamp(20px, 6.0vw, 28px) !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
  }

  .vex-tierkit__cardbtn{
    padding: 6px 7px !important;
    font-size: 9px !important;
    border-radius: 9px !important;
    line-height: 1 !important;
  }

  .vex-tierkit__unit{
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .vex-tierkit__economy{
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* OPCIONAL (se ainda ficar apertado): esconder "De: R$" no mobile */
  /* .vex-tierkit__old{ display:none !important; } */
}
/* ==========================================
   MOBILE — ACHATAR DE VERDADE (ganha de tudo)
   Cole NO FINAL do vex-tierkit.css
   ========================================== */
@media (max-width: 640px){

  /* zera qualquer min-height antigo que deixa os cards altos */
  .vex-tierkit .vex-tierkit__tiers > .vex-tierkit__tier{
    min-height: 0 !important;
    height: auto !important;
  }

  /* cards (geral) mais baixos */
  .vex-tierkit .vex-tierkit__tiers > .vex-tierkit__tier{
    padding: 7px 8px 8px !important;
    row-gap: 3px !important;
  }

  /* 1 unidade (full) ainda mais baixinho */
  .vex-tierkit .vex-tierkit__tiers > .vex-tierkit__tier:first-child{
    padding: 12px 14px 14px !important;
  }

  /* espaçamentos internos menores */
  .vex-tierkit .vex-tierkit__pills{ gap: 1px !important; }
  .vex-tierkit .vex-tierkit__pricing{ gap: 2px !important; }
  .vex-tierkit .vex-tierkit__newrow{ gap: 2px !important; }

  /* botão interno mais “fino” (isso reduz MUITO a altura) */
  .vex-tierkit .vex-tierkit__cardbtn{
    padding: 5px 8px !important;
    border-radius: 10px !important;
    line-height: 1 !important;
  }

  /* textos com line-height menor pra não “inflar” */
  .vex-tierkit .vex-tierkit__title,
  .vex-tierkit .vex-tierkit__old,
  .vex-tierkit .vex-tierkit__por,
  .vex-tierkit .vex-tierkit__new{
    line-height: 1 !important;
  }

  /* (un) + economia um pouco mais próximos (não muda o botão) */
  .vex-tierkit .vex-tierkit__outside{
    gap: 2px !important;
  }
}
/* Não pega mobile (só acima de 640px) */
@media (min-width: 641px){

  /* MEIO TERMO: só quando a coluna do TierKit estiver REALMENTE apertada
     (evita pegar monitor grande / 24" em 100%) */
  @container (min-width: 520px) and (max-width: 720px){

    .vex-tierkit__tiers{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 12px !important;
      row-gap: 14px !important;
    }

    /* 1 UNIDADE ocupa a linha toda */
    .vex-tierkit__tiers > .vex-tierkit__tier:first-child{
      grid-column: 1 / -1 !important;
    }

    /* Kits ficam embaixo 2 colunas */
    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(2),
    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
      width: 100% !important;
    }

    /* Compacta um pouco (pra não “pegar PC grande”) */
    .vex-tierkit__tier{
      padding: 12px 12px 14px !important;
    }

    .vex-tierkit__por{ font-size: 13px !important; }

    .vex-tierkit__tier.is-kit .vex-tierkit__new{
      font-size: 32px !important;
      letter-spacing: -0.02em !important;
      line-height: 1 !important;
    }

    .vex-tierkit__tier.is-unit .vex-tierkit__new{
      font-size: 40px !important;
      letter-spacing: -0.02em !important;
      line-height: 1 !important;
    }

    .vex-tierkit__cardbtn{
      width: 100% !important;
      max-width: 100% !important;
      padding: 10px 12px !important;
      font-size: 12px !important;
    }
  }
}
/* NÃO pega mobile (só acima de 640px) */
@media (min-width: 641px){

  /* ativa container query */
  .vex-tierkit{ container-type: inline-size; }

  /* ============================
     REGRA 1: ACIMA DE 640px → SEMPRE 3 colunas (desktop)
     (isso impede o “meio termo” no seu monitor em 100%)
     ============================ */
  @container (min-width: 640px){
    .vex-tierkit__tiers{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 16px !important;
    }

    /* desfaz o "1 unidade full" */
    .vex-tierkit__tiers > .vex-tierkit__tier:first-child{
      grid-column: auto !important;
    }

    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(2),
    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
      width: auto !important;
    }
  }

  /* ============================
     REGRA 2: 520px–639px → "MEIO TERMO"
     (1 unidade full + 2 kits embaixo)
     ============================ */
  @container (min-width: 520px) and (max-width: 639px){

    .vex-tierkit__tiers{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 12px !important;
      row-gap: 14px !important;
    }

    .vex-tierkit__tiers > .vex-tierkit__tier:first-child{
      grid-column: 1 / -1 !important;
    }

    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(2),
    .vex-tierkit__tiers > .vex-tierkit__tier:nth-child(3){
      width: 100% !important;
    }

    .vex-tierkit__tier{ padding: 12px 12px 14px !important; }
    .vex-tierkit__por{ font-size: 13px !important; }

    .vex-tierkit__tier.is-kit .vex-tierkit__new{
      font-size: 32px !important;
      letter-spacing: -0.02em !important;
      line-height: 1 !important;
    }

    .vex-tierkit__tier.is-unit .vex-tierkit__new{
      font-size: 40px !important;
      letter-spacing: -0.02em !important;
      line-height: 1 !important;
    }

    .vex-tierkit__cardbtn{
      width: 100% !important;
      max-width: 100% !important;
      padding: 10px 12px !important;
      font-size: 12px !important;
    }
  }
}
/* MOBILE: deixar o card "1 UNIDADE" menos largo (centralizado) */
@media (max-width: 640px){
  .vex-tierkit .vex-tierkit__tiers > button.vex-tierkit__tier:first-child{
    grid-column: 1 / -1 !important;          /* continua em cima */
    justify-self: center !important;         /* centraliza no grid */
    width: min(60%, 420px) !important;       /* <-- AQUI deixa mais estreito */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* MEIO TERMO (coluna apertada): 1 UNIDADE menos largo e centralizado */
@media (min-width: 641px){
  .vex-tierkit{ container-type: inline-size; }

  /* use o mesmo range do seu "meio termo" */
  @container (min-width: 520px) and (max-width: 639px){

    .vex-tierkit__tiers > button.vex-tierkit__tier:first-child{
      grid-column: 1 / -1 !important;        /* continua em cima */
      justify-self: center !important;       /* centraliza */
      width: min(60%, 520px) !important;     /* <-- diminui a largura */
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
}