.commerce-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  align-items:start;
}

.commerce-shell > *{
  min-width:0;
}

.commerce-sidebar{
  position:static;
  border:1px solid rgba(0,0,0,.08);
  border-radius:2rem;
  background:rgba(255,255,255,.88);
  padding:1rem;
  box-shadow:0 18px 54px rgba(0,0,0,.08);
}

.commerce-sidebar h2{
  font-family:'Baloo 2',Poppins,sans-serif;
  font-size:1.65rem;
  font-weight:900;
  line-height:1;
}

.category-nav-list{
  display:grid;
  gap:.55rem;
  margin-top:1rem;
}

.category-nav-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  background:#fff;
  padding:.85rem .9rem;
  font-weight:900;
  color:rgba(0,0,0,.68);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}

.category-nav-list a:hover,
.category-nav-list a.is-active{
  transform:translateX(.2rem);
  border-color:rgba(0,239,47,.65);
  background:rgba(0,239,47,.16);
  color:#000;
}

.category-topbar{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:stretch;
  justify-content:space-between;
  border:1px solid rgba(0,0,0,.08);
  border-radius:2rem;
  background:rgba(255,255,255,.82);
  padding:1rem;
  box-shadow:0 14px 44px rgba(0,0,0,.06);
}

.category-topbar > *{
  min-width:0;
}

.category-search{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  width:100%;
}

.category-search input{
  width:100%;
  min-width:0;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  padding:1rem 1.1rem;
  font-weight:800;
  outline:none;
}

.category-search input:focus{
  border-color:rgba(0,239,47,.85);
  box-shadow:0 0 0 .25rem rgba(0,239,47,.13);
}

.commerce-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  align-items:stretch;
}

.commerce-card{
  position:relative;
  display:flex;
  min-width:0;
  min-height:100%;
  height:100%;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  border-radius:2rem;
  background:rgba(255,255,255,.94);
  padding:1rem;
  box-shadow:0 18px 54px rgba(0,0,0,.09);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.commerce-card:hover{
  transform:translateY(-5px);
  border-color:rgba(0,239,47,.46);
  box-shadow:0 28px 80px rgba(0,0,0,.13);
}

.commerce-image{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1/.76;
  min-height:10.5rem;
  overflow:hidden;
  border-radius:1.55rem;
  background:radial-gradient(circle at 30% 20%,rgba(0,239,47,.35),transparent 9rem),linear-gradient(135deg,#050706,#0e2117);
  font-size:4rem;
  color:#fff;
}

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

.commerce-seal{
  position:absolute;
  left:.8rem;
  top:.8rem;
  border-radius:999px;
  background:#00ef2f;
  color:#000;
  padding:.42rem .65rem;
  font-size:.7rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.1em;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.commerce-body{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  padding:.95rem .2rem 0;
}

.commerce-category{
  display:grid;
  grid-template-columns:1fr;
  gap:.28rem;
  align-items:start;
  color:rgba(6,58,45,.78);
  font-size:.72rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.commerce-category span{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}

.commerce-category span:last-child{
  font-size:.68rem;
  letter-spacing:.11em;
  color:rgba(6,58,45,.72);
}

.commerce-card h3{
  margin-top:.65rem;
  font-family:'Baloo 2',Poppins,sans-serif;
  font-size:clamp(1.35rem,2vw,1.65rem);
  font-weight:900;
  line-height:1.03;
  color:#050706;
  overflow-wrap:anywhere;
}

.commerce-card p{
  margin-top:.55rem;
  color:rgba(0,0,0,.62);
  font-size:.94rem;
  font-weight:500;
  line-height:1.55;
}

.commerce-price{
  margin-top:auto;
  padding-top:1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.55rem;
  align-items:start;
  justify-content:start;
}

.commerce-price strong{
  display:block;
  font-family:'Baloo 2',Poppins,sans-serif;
  font-size:clamp(1.6rem,2.4vw,1.95rem);
  font-weight:900;
  line-height:.98;
  color:#050706;
  overflow-wrap:anywhere;
}

.commerce-price del{
  display:block;
  color:rgba(0,0,0,.45);
  font-size:.86rem;
  font-weight:800;
}

.commerce-stock{
  display:inline-flex;
  width:fit-content;
  max-width:100%;
  border-radius:999px;
  background:rgba(0,0,0,.045);
  padding:.35rem .55rem;
  font-size:.72rem;
  font-weight:900;
  line-height:1.15;
  color:rgba(0,0,0,.62);
  text-align:left;
}

.commerce-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:.65rem;
  margin-top:1rem;
}

.commerce-actions .btn{
  width:100%;
  min-height:3.15rem;
  padding:.85rem 1rem;
  white-space:normal;
  text-align:center;
  line-height:1.05;
}

.commerce-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  margin-top:2rem;
}

.commerce-pagination a,
.commerce-pagination span{
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:#fff;
  padding:.78rem 1rem;
  font-weight:950;
  color:rgba(0,0,0,.64);
  box-shadow:0 10px 28px rgba(0,0,0,.05);
}

.commerce-pagination .is-active{
  background:#00ef2f;
  color:#000;
  border-color:#00ef2f;
}

.commerce-pagination .is-disabled{
  opacity:.45;
}

/* Correção do resumo do checkout dentro da sacola */
.checkout-summary .cart-total{
  margin-top:.35rem;
  border-top:1px solid rgba(0,0,0,.09);
  border-radius:1rem;
  background:#050706;
  color:#fff;
  padding:1rem;
  font-size:1.05rem;
}

.checkout-summary .cart-total span{
  color:rgba(255,255,255,.72);
}

.checkout-summary .cart-total strong{
  color:#fff;
}

@media(min-width:640px){
  .commerce-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .category-topbar{
    flex-direction:row;
    align-items:center;
  }

  .category-search{
    flex-direction:row;
    width:min(100%,31rem);
    min-width:22rem;
  }
}

@media(min-width:1024px){
  .commerce-shell{
    grid-template-columns:17rem minmax(0,1fr);
  }

  .commerce-sidebar{
    position:sticky;
    top:6rem;
  }

  .commerce-grid{
    grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  }
}

@media(min-width:1536px){
  .commerce-grid{
    grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  }
}

@media(max-width:767px){
  .category-search{
    min-width:0;
  }
}