div,
section,
table{
  box-sizing: border-box;
}

.main_content{
    row-gap: 40px !important;
}

section{
    padding: 20px;
}

.nota{
    border: 1px solid #4fbc2834;
    background-color: #4fbc2809;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    padding: 25px;
    column-gap: 10px;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nota img{
   height: 18px;
}

.nota p{
    margin: 0;
}

.tabela_precos{
    border: 1px solid #6868682c;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 25px;
    row-gap: 20px;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tabela_title{
    font-size: 25px;
    text-align: left;
    font-weight: bold;
    margin: 0;
}
table {
  width: 100%;
  border-collapse: separate; /* important fix */
  border-spacing: 0; /* keep cells tight if you want */
  border: 1px solid #6868682c;
  border-radius: 10px;
  overflow: hidden; /* ensures inner corners are clipped */
}


/* Sticky header */
thead {
  top: 0;
  background: #f0f0f0; /* keep header visible */
  z-index: 2;
}

/* Scrollable body */
tbody {
  display: block;
}

/* Keep rows aligned */
thead tr,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

tbody tr {
  font-size: 15px;
  font-weight: 500;
}

table th,
table td {
  text-align: left;
  vertical-align: middle;    /* vertically center content */
  padding: 10px;             /* unified padding */
  border-bottom: 1px solid #ebebeb;
  height: 30px;              /* ensures td flex align-items works */
}

table th {
  padding-bottom: 10px;      /* extra space for headers */
}

table tr:last-child td {
  border-bottom: none !important;
}

table tr:hover td {
  background-color: #efefef;
}

table th:nth-child(1),
table td:nth-child(1) { width: calc(100% - 165px) } /* Nome */

table th:nth-child(2),
table td:nth-child(2) { width: 165px; } /* Categoria */

table td:nth-child(2) { 
    text-align: right;
}

.cost{
    font-size: 16px;
    background-color: #84b40012;
    color: #85B400;
    margin: 0;
    text-align: center;
    width: 50px;
    border-radius: 15px;
    margin-left: auto;
    padding: 5px;
    margin-right: 10px;
}

@media (max-width: 600px) {
  .tabela_precos,
  .nota{
      box-sizing: border-box; /* 👈 key line */
      width: 100%;
      max-width: 350px;
  }

  table th:nth-child(1),
  table td:nth-child(1) { width: 60% } /* Nome */

  table th:nth-child(2),
  table td:nth-child(2) { width: 40%; } /* Categoria */

  table th:nth-child(2),
  table td:nth-child(2) { 
    text-align: right;
  }
}