*{
  box-sizing:border-box;
}

:root{
  --green:#16c784;
  --green-dark:#07965d;
  --green-light:#e9fff5;
  --dark:#07110d;
  --dark-2:#102019;
  --text:#18251f;
  --muted:#718078;
  --bg:#f4f7f6;
  --white:#ffffff;
  --border:#e4ebe7;
  --danger:#dc3545;
  --shadow:0 10px 30px rgba(10,30,20,.08);
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
  background:var(--bg);
  color:var(--text);
}

button,
input,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}


/* =========================
   LOGIN
========================= */

.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 20px;
  background:
    radial-gradient(
      circle at top right,
      rgba(22,199,132,.16),
      transparent 35%
    ),
    var(--bg);
}

.login-card{
  width:100%;
  max-width:460px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px;
  box-shadow:var(--shadow);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand img{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:14px;
}

.brand strong{
  display:block;
  font-size:18px;
  font-weight:800;
  color:var(--dark);
}

.brand small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}

.login-title{
  margin:38px 0 25px;
}

.eyebrow{
  display:inline-block;
  color:var(--green-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  margin-bottom:8px;
}

.login-title h1{
  margin:0;
  font-size:34px;
  line-height:1.1;
  color:var(--dark);
}

.login-title p{
  margin:10px 0 0;
  color:var(--muted);
}


/* =========================
   FORMULÁRIOS
========================= */

.login-card form{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.login-card label,
.action-card label,
.pix-card label{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-top:8px;
}

input,
textarea{
  width:100%;
  border:1px solid var(--border);
  background:#fbfdfc;
  border-radius:12px;
  padding:13px 14px;
  outline:none;
  color:var(--text);
  transition:.2s;
}

input:focus,
textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(22,199,132,.12);
}

textarea{
  min-height:110px;
  resize:vertical;
}

.check-row{
  display:flex !important;
  flex-direction:row;
  align-items:flex-start;
  gap:8px;
  margin:16px 0 8px;
  font-weight:400 !important;
  line-height:1.4;
}

.check-row input{
  width:auto;
  margin-top:3px;
}

.inline-link,
.btn-link{
  border:0;
  background:none;
  color:var(--green-dark);
  font-weight:700;
  padding:0;
}

.btn-link{
  display:block;
  margin:20px auto 0;
}

.inline-link:hover,
.btn-link:hover{
  text-decoration:underline;
}


/* =========================
   BOTÕES
========================= */

.btn-primary,
.btn-secondary,
.btn-logout,
.small-btn,
.icon-btn{
  border:0;
  border-radius:12px;
  transition:.2s;
}

.btn-primary{
  width:100%;
  margin-top:14px;
  padding:14px 18px;
  background:linear-gradient(
    135deg,
    var(--green),
    var(--green-dark)
  );
  color:white;
  font-weight:800;
  box-shadow:0 7px 18px rgba(22,199,132,.20);
}

.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(22,199,132,.28);
}

.btn-secondary{
  padding:12px 18px;
  background:var(--dark);
  color:white;
  font-weight:700;
}

.btn-secondary:hover{
  background:#183126;
}

.btn-logout{
  padding:10px 16px;
  background:#f0f4f2;
  color:var(--text);
  font-weight:700;
}

.btn-logout:hover{
  background:#e4ebe7;
}

.small-btn{
  padding:7px 11px;
  background:var(--green-light);
  color:var(--green-dark);
  font-size:12px;
  font-weight:800;
}

.icon-btn{
  width:36px;
  height:36px;
  background:#f1f5f3;
  color:var(--text);
  font-size:20px;
}


/* =========================
   DASHBOARD
========================= */

.dashboard-shell{
  min-height:100vh;
}

.topbar{
  height:76px;
  padding:0 32px;
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topbar .brand img{
  width:42px;
  height:42px;
}

.main-nav{
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:0 32px;
  display:flex;
  gap:6px;
  overflow-x:auto;
}

.nav-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:16px 18px;
  font-weight:700;
  border-bottom:3px solid transparent;
  white-space:nowrap;
}

.nav-btn:hover{
  color:var(--text);
}

.nav-btn.active{
  color:var(--green-dark);
  border-bottom-color:var(--green);
}

#page-content{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
  padding:35px 0 60px;
}


/* =========================
   CABEÇALHOS
========================= */

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:28px;
}

.page-head h1{
  margin:0;
  font-size:32px;
  color:var(--dark);
}

.page-head p{
  margin:8px 0 0;
  color:var(--muted);
}

.page-head .btn-secondary{
  width:auto;
}


/* =========================
   CARDS
========================= */

.stats-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:35px;
}

.stat-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  box-shadow:0 5px 20px rgba(10,30,20,.04);
}

.stat-card span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:8px;
}

.stat-card strong{
  display:block;
  font-size:25px;
  color:var(--dark);
}

.code-value{
  font-size:18px !important;
  letter-spacing:1px;
}

.section-block{
  margin-top:10px;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:16px;
}

.section-title h2{
  margin:0;
  font-size:22px;
  color:var(--dark);
}


/* =========================
   PLANOS
========================= */

.cards-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:16px;
}

.plan-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow);
}
.plan-image{
  display:block;
  width:calc(100% + 48px);
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  margin:-24px -24px 20px;
  border-radius:20px 20px 0 0;
}
.plan-badge{
  display:inline-block;
  background:var(--green-light);
  color:var(--green-dark);
  border-radius:20px;
  padding:6px 10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.plan-card h3{
  margin:18px 0 10px;
  font-size:20px;
}

.plan-price{
  font-size:29px;
  font-weight:900;
  color:var(--dark);
  margin-bottom:16px;
}

.plan-detail{
  padding:9px 0;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
}

.plan-card .btn-primary{
  margin-top:18px;
}
/* =========================
   CARTEIRA
========================= */

.wallet-balance{
  background:
    linear-gradient(
      135deg,
      var(--dark),
      #16372a
    );
  color:white;
  border-radius:22px;
  padding:30px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}

.wallet-balance span{
  display:block;
  color:#b9ccc2;
  font-size:13px;
  margin-bottom:8px;
}

.wallet-balance strong{
  font-size:38px;
}

.action-card,
.pix-card,
.profile-card,
.referral-card,
.network-level,
.table-card,
.empty-card,
.error-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  margin-bottom:18px;
  box-shadow:0 5px 20px rgba(10,30,20,.04);
}

.action-card h2,
.pix-card h2{
  margin:0 0 8px;
  color:var(--dark);
}

.action-card p{
  color:var(--muted);
  margin:0 0 15px;
}

.action-card .btn-primary,
.pix-card .btn-primary{
  max-width:300px;
}


/* =========================
   PIX
========================= */

.pix-card{
  border-left:4px solid var(--green);
}

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:20px;
  background:var(--green-light);
  color:var(--green-dark);
  font-size:12px;
  font-weight:800;
  margin:8px 0 20px;
}

.notice{
  background:#f7faf8;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin:15px 0;
}

.muted{
  color:var(--muted);
  font-size:13px;
}


/* =========================
   PRODUTOS
========================= */

.products-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:18px;
}

.product-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.product-image{
  height:clamp(190px, 25vw, 280px);
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#ffffff;
  color:var(--green);
  font-size:28px;
  font-weight:900;
  letter-spacing:2px;
}

.product-image img{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

.product-body{
  padding:20px;
}
 .product-stock{
  display:inline-block;
  color:var(--green-dark);
  background:var(--green-light);
  padding:5px 9px;
  border-radius:15px;
  font-size:11px;
  font-weight:800;
}

.product-body h3{
  margin:14px 0 8px;
  font-size:19px;
}

.product-price{
  display:block;
  font-size:25px;
  color:var(--dark);
  margin-bottom:12px;
}

.product-body .btn-primary{
  margin-top:5px;
}


/* =========================
   COMPRAS
========================= */

.table-card{
  overflow:hidden;
  padding:0;
}

.table-head,
.table-row{
  display:grid;
  grid-template-columns:
    2fr .7fr 1fr 1fr;
  gap:15px;
  align-items:center;
  padding:17px 20px;
}

.table-head{
  background:#f6f9f7;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.table-row{
  border-top:1px solid var(--border);
  font-size:14px;
}

.status-success{
  display:inline-block;
  color:var(--green-dark);
  background:var(--green-light);
  padding:6px 9px;
  border-radius:15px;
  font-size:11px;
  font-weight:800;
  width:max-content;
}


/* =========================
   REDE
========================= */

.referral-card{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  background:
    linear-gradient(
      135deg,
      var(--dark),
      #123427
    );
  color:white;
}

.referral-card > span{
  width:100%;
  color:#b9ccc2;
  font-size:13px;
}

.referral-code{
  font-size:28px;
  font-weight:900;
  letter-spacing:2px;
}

.referral-card .btn-primary{
  width:auto;
  margin:0;
}

.network-summary{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}

.network-level{
  margin-bottom:18px;
}

.network-level .section-title{
  margin-bottom:18px;
}

.network-level .section-title span{
  color:var(--muted);
  font-size:13px;
}

.people-list{
  display:flex;
  flex-direction:column;
}

.person-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 0;
  border-top:1px solid var(--border);
}

.person-row:first-child{
  border-top:0;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--green-light);
  color:var(--green-dark);
  font-weight:900;
}

.person-row > div:nth-child(2){
  flex:1;
}

.person-row strong{
  display:block;
  font-size:14px;
}

.person-row small{
  display:block;
  margin-top:3px;
  color:var(--muted);
}

.person-row > span{
  color:var(--muted);
  font-size:12px;
}

.empty-inline{
  padding:20px;
  border-radius:12px;
  background:#f7faf8;
  color:var(--muted);
  text-align:center;
}


/* =========================
   PERFIL
========================= */

.profile-card{
  display:flex;
  align-items:flex-start;
  gap:30px;
}

.profile-avatar{
  width:90px;
  height:90px;
  min-width:90px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(
      135deg,
      var(--green),
      var(--green-dark)
    );
  color:white;
  font-size:38px;
  font-weight:900;
}

.profile-data{
  flex:1;
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:20px;
}

.profile-data > div{
  padding-bottom:15px;
  border-bottom:1px solid var(--border);
}

.profile-data span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:5px;
}

.profile-data strong{
  color:var(--dark);
}


/* =========================
   MODAL
========================= */

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.6);
}

.modal-card{
  position:relative;
  width:100%;
  max-width:520px;
  max-height:85vh;
  overflow:auto;
  background:white;
  border-radius:22px;
  padding:30px;
  box-shadow:0 25px 80px rgba(0,0,0,.25);
}

.modal-card h2{
  margin-top:0;
}

.modal-card p{
  color:var(--muted);
  line-height:1.6;
}

.modal-close{
  position:absolute;
  right:16px;
  top:16px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#f1f4f2;
  font-size:22px;
}


/* =========================
   LOADING / ERROS
========================= */

.loading-screen{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  color:var(--muted);
}

.spinner{
  width:38px;
  height:38px;
  border:4px solid #dce8e2;
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

.error-card{
  border-left:4px solid var(--danger);
}

.error-card h2{
  margin-top:0;
}

.error-card p{
  color:var(--muted);
}

.empty-card{
  text-align:center;
  padding:50px 25px;
}

.empty-card h2{
  margin-top:0;
}

.empty-card p{
  color:var(--muted);
}


/* =========================
   TOAST
========================= */

.hd-toast{
  position:fixed;
  z-index:10000;
  right:24px;
  bottom:24px;
  max-width:360px;
  padding:14px 18px;
  border-radius:13px;
  background:var(--dark);
  color:white;
  font-size:14px;
  font-weight:700;
  box-shadow:0 15px 40px rgba(0,0,0,.2);
  animation:toastIn .25s ease;
}

.hd-toast.success{
  background:var(--green-dark);
}

.hd-toast.error{
  background:#b42332;
}

.hd-toast.hide{
  opacity:0;
  transform:translateY(10px);
  transition:.3s;
}

@keyframes toastIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================
   PLANO / DETALHES
========================= */

.plan-info{
  max-width:650px;
}

.plan-info-price{
  font-size:38px;
  font-weight:900;
  color:var(--green-dark);
  margin:18px 0;
}
/* =========================
   RESPONSIVO
========================= */

@media (max-width:1000px){

  .cards-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .products-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .network-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================
   TABLET
========================= */

@media (max-width:760px){

  .topbar{
    height:auto;
    min-height:70px;
    padding:14px 18px;
  }

  .topbar .brand strong{
    font-size:15px;
  }

  .topbar .brand small{
    font-size:10px;
  }

  .topbar .brand img{
    width:38px;
    height:38px;
  }

  .main-nav{
    padding:0 12px;
    gap:0;
  }

  .nav-btn{
    padding:14px 13px;
    font-size:12px;
  }

  #page-content{
    width:
      calc(100% - 24px);
    padding:
      25px 0 45px;
  }

  .page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .page-head h1{
    font-size:27px;
  }

  .page-head .btn-secondary{
    width:100%;
  }

  .stats-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .cards-grid{
    grid-template-columns:
      1fr;
  }

  .products-grid{
    grid-template-columns:
      1fr;
  }

  .profile-card{
    flex-direction:column;
  }

  .profile-data{
    width:100%;
    grid-template-columns:1fr;
  }

  .table-card{
    overflow-x:auto;
  }

  .table-head,
  .table-row{
    min-width:650px;
  }

}


/* =========================
   CELULAR
========================= */

@media (max-width:520px){

  .login-page{
    padding:15px;
    align-items:flex-start;
    padding-top:25px;
  }

  .login-card{
    padding:25px 20px;
    border-radius:20px;
  }

  .login-title{
    margin-top:28px;
  }

  .login-title h1{
    font-size:29px;
  }

  .brand img{
    width:46px;
    height:46px;
  }

  .brand strong{
    font-size:16px;
  }

  .topbar{
    padding:12px 14px;
  }

  .topbar .btn-logout{
    padding:8px 12px;
    font-size:12px;
  }

  .main-nav{
    padding:
      0 6px;
  }

  .nav-btn{
    padding:
      13px 9px;
    font-size:11px;
  }

  #page-content{
    width:
      calc(100% - 20px);
    padding-top:20px;
  }

  .page-head{
    margin-bottom:20px;
  }

  .page-head h1{
    font-size:25px;
  }

  .page-head p{
    font-size:13px;
  }

  .stats-grid{
    grid-template-columns:
      1fr;
    gap:12px;
  }

  .stat-card{
    padding:18px;
  }

  .stat-card strong{
    font-size:22px;
  }

  .network-summary{
    grid-template-columns:
      1fr 1fr;
    gap:10px;
  }

  .network-summary .stat-card{
    padding:15px;
  }

  .network-summary .stat-card strong{
    font-size:20px;
  }

  .wallet-balance{
    padding:24px;
  }

  .wallet-balance strong{
    font-size:31px;
  }

  .action-card,
  .pix-card,
  .profile-card,
  .referral-card,
  .network-level,
  .empty-card,
  .error-card{
    padding:19px;
    border-radius:17px;
  }

  .referral-card{
    gap:12px;
  }

  .referral-code{
    font-size:23px;
    width:100%;
  }

  .referral-card .btn-primary{
    width:100%;
  }

  .profile-avatar{
    width:75px;
    height:75px;
    min-width:75px;
    border-radius:20px;
    font-size:31px;
  }

  .person-row{
    align-items:flex-start;
  }

  .person-row > span{
    display:none;
  }

  .product-image{
    height:clamp(170px, 52vw, 230px);
    padding:12px;
  }

  .product-body{
    padding:18px;
  }

  .product-price{
    font-size:22px;
  }

  .modal-card{
    padding:23px;
  }

  .hd-toast{
    left:12px;
    right:12px;
    bottom:15px;
    max-width:none;
  }

}


/* =========================
   TELAS MUITO PEQUENAS
========================= */

@media (max-width:360px){

  .nav-btn{
    padding-left:7px;
    padding-right:7px;
    font-size:10px;
  }

  .login-card{
    padding:
      22px 16px;
  }

  .login-title h1{
    font-size:26px;
  }

  .network-summary{
    grid-template-columns:1fr;
  }

}
/* Banner da tela de login e cadastro */
.login-banner {
  display: block;
  position: relative;
  left: 0;
  transform: none;

  width: 100%;
  max-width: 100%;
  margin: 32px 0 20px;

  padding: 0;
  box-sizing: border-box;
  justify-self: center;
  align-self: center;

  overflow: hidden;
  border-radius: 10px;
}

.login-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .login-banner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    width: calc(100vw - 32px);
    max-width: none;
    margin: 32px 0 20px;

    box-sizing: border-box;
    overflow: hidden;
  }

  .login-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }
/* Ajuste para celulares */
@media screen and (max-width: 600px) {
  .login-banner {
    width: calc(100vw - 24px) !important;
    max-width: none !important;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    margin: 28px 0 20px !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .login-banner img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain;
    margin: 0;
  }
}

/* Ajustes para os novos resumos de frete e imagens clicáveis */
.product-image img { cursor: pointer; }
.product-image img:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.shipping-summary { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #f7faf8; }


/* Health Distribuidor: saldo e pontos com fundo laranja neon claro em qualquer tela. */
.stats-grid .stat-card.desktop-neon-card {
  background-color: #FFB347 !important;
  background-image: none !important;
  background: #FFB347 !important;
  color: #111111 !important;
  border: 1px solid #FFD08A !important;
  box-sizing: border-box;
  overflow: hidden;
}
.stats-grid .stat-card.desktop-neon-card::before,
.stats-grid .stat-card.desktop-neon-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.stats-grid .stat-card.desktop-neon-card span,
.stats-grid .stat-card.desktop-neon-card strong {
  color: #111111 !important;
  background: transparent !important;
}

/* Override final para garantir fundo sólido em todos os tamanhos de tela. */
.stats-grid .stat-card.desktop-neon-card, .stats-grid .stat-card.desktop-neon-card:hover { background:#FFB347 !important; background-color:#FFB347 !important; background-image:none !important; color:#111 !important; }
.stats-grid .stat-card.desktop-neon-card::before, .stats-grid .stat-card.desktop-neon-card::after { content:none !important; display:none !important; background-image:none !important; }


/* Moldura responsiva para imagens: mantém o produto inteiro visível em celular e desktop. */
.product-card, .featured-product-card { min-width:0; max-width:100%; box-sizing:border-box; }
.product-image img, .featured-product-image-frame img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; }
.featured-product-image-frame { min-width:0; }
@media (max-width:640px) { .featured-product-image-frame { height:clamp(180px,58vw,260px) !important; padding:12px !important; } .product-body { min-width:0; overflow-wrap:anywhere; } }
.banner-atacado {
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
  overflow: hidden;
  border-radius: 16px;
  box-sizing: border-box;
}

.banner-atacado img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  box-sizing: border-box;
}
/* CORREÇÃO DO BANNER DE PRODUTOS NO DESKTOP */
.page-head {
  min-width: 0;
}

.page-head > div {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.banner-atacado {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.banner-atacado img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}
/* Ajuste do banner da tela de login no celular */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Correção definitiva do banner no celular */
@media screen and (max-width: 600px) {
  .login-card {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
  }

  .login-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px 0 20px !important;
    padding: 0 !important;
    left: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .login-banner img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}
/* Ajuste das imagens dos Planos Essenciais no celular */
.plan-card {
  min-width: 0;
  overflow: hidden;
}

.plan-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 0 20px 0 !important;
  border-radius: 20px 20px 0 0;
}