input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

@keyframes fade-in {
  from {
      background-color: rgba(0, 0, 0, 0);
  }
  to {
      background-color: rgba(0, 0, 0, 0.8);
  }
}

@keyframes fade-out {
  from {
      background-color: rgba(0, 0, 0, 0.8);
  }
  to {
      background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes slide-in {
  from {
      transform: translateX(500px);
  }
  to {
      transform: translateX(0px);
  }
}

@keyframes slide-out {
  from {
      transform: translateX(0px);
  }
  to {
      transform: translateX(500px);
  }
}

body.cart-open {
  overflow: hidden;
  /*padding-right: var(--scrollbar-width, 0px);*/
}

a {
  cursor: pointer;
}

#cart-drawer[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

#cart-drawer[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

#cart-drawer[data-state="open"] > div {
  animation: slide-in 0.4s forwards;
}

#cart-drawer[data-state="closed"] > div {
  animation: slide-out 0.4s forwards;
}

.dialog[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

.dialog[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

.dialog[data-state="open"] > div {
  animation: dialog-in 0.2s forwards;
}

.dialog[data-state="closed"] > div {
  animation: dialog-out 0.2s forwards;
}

@keyframes dialog-in {
  from {
      opacity: 0;
      scale: 50%;
  }
  to {
      opacity: 1;
      scale: 100%;
  }
}

@keyframes dialog-out {
  from {
      opacity: 1;
      scale: 100%;
  }
  to {
      opacity: 0;
      scale: 50%;
  }
}

.reveal-fade-up {
  opacity: 1 !important;
  transform: none !important;
}

.reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.centralcart-content iframe {
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

.grid-background {
  background-image: linear-gradient(to right,hsla(0,0%,100%,.03) 1px,transparent 1px),linear-gradient(to bottom,hsla(0,0%,100%,.03) 1px,transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 85% at 40% 30%, #000 0%, #fff0 110%)
}

.custom-bg-mask {
	mask-image: linear-gradient(hsl(var(--background)), rgba(0, 0, 0, 0.3), rgb(0, 0, 0, 0));
}

@keyframes loading {
  0% {
      left: -50%;
  }

  to {
      left: 100%;
  }
}

.detail-dash {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, hsl(var(--foreground) / 0) 0%);
  background-position: center bottom;
  background-size: 16px;
  background-repeat: repeat-x;
  width: 100%;
  height: 1px;
}

/* Sidebar categories */
.custom-scrollbar::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--primary));
  border-radius: 0.25rem;
}

.cat-dropdown {
  transform-origin: top left;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.cat-dropdown.hidden {
  transform: scale(0);
  opacity: 0;
}

.cat-dropdown:not(.hidden) {
  transform: scale(1);
  opacity: 1;
}

@keyframes scaleInTopLeft {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.cat-dropdown {
  transform-origin: top left;
}

.cat-dropdown:not(.hidden) {
  animation: scaleInTopLeft 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

#mobile-categories-dropdown:not(.hidden) {
  animation: slideInMobile 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInMobile {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-subcategories:not(.hidden) {
  animation: slideInSub 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInSub {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Sidebar categories */

.searchbar input:focus {
    outline: none;
    box-shadow: none;
}

.qrdrcod:focus {
  border: 3px solid hsl(var(--primary)) !important;
}

.searchbar {
  z-index: 3;
}

@media (min-width: 1025px) {
  .sumarycdd {
  width: 46%;
}
  .txtbnrd {
    width: 29%;
  }
  .tditemcdd {
    margin-left: 3.9rem;
  }
  .container-text-bnr {
    height: 100%;
    bottom: 0 !Important;
  }

  .txtebtnsbnr {
    height: 100%;
  }
  .fndpdc-content {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  z-index: 2;
  border: none;
}

.fndpdc-pd {
  width: 100%;
  padding: 0rem;
  margin: 1rem 0;
  flex-direction: column;
}

.fndpdc {
  border-radius: 30px;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: auto;
  padding: 2px;
  position: relative;
}
@keyframes rotation_481 {
  0% {
    transform: rotateZ(0deg);
  }

  0% {
    transform: rotateZ(360deg);
  }
}

  #mobile-categories-dropdown {
    display: none !important;
  }
}

.sldmsmdk {
  display: inline-block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 0.7rem;
  border: none;
  border-radius: 5px;
  background-color: #ffffff14;
  font-weight: 200;
  padding: 3px 8px;
  text-align: center;
  letter-spacing: 0.5px;
}

@media (max-width: 1600px) {
  .txtgrandsss {
    margin-top: -4vw !important;
  }
}

@media (min-width: 1600px) {
  /*.container-text-bnr {
    top: 30%;
    bottom: auto !important;

}*/
.imgbnrdois {
    object-fit: contain !important;
}
}

@media (min-width: 1400px) {
    .container {
        max-width: 1350px !important;
    }
}

.btnsnav {
  color: #dedede;
  position: relative;
  transition: color 0.2s ease-in-out;
  justify-content: left;
  padding: 15px;
  gap: 10px;
}

.btnsnav:hover {
  color: hsl(var(--primary));
}

#search-result::-webkit-scrollbar {
  width: 4px;
}

#search-result::-webkit-scrollbar-track {
  background: transparent;
}

#search-result::-webkit-scrollbar-thumb {
  background: rgba(48, 48, 48, 0.15);
  border-radius: 999px;
}

#search-result::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Firefox */
#search-result {
  scrollbar-width: thin;
  scrollbar-color: rgb(43, 43, 43) transparent;
}

#search-result::-webkit-scrollbar-button {
  display: none !Important;
}

.cart-badge {
  border: none;
  width: 20px !important;
  height: 20px !important;
  font-size: 0.8rem !important;
  font-weight: bold !important;
  line-height: 2 !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 1px !important;
}

#header-personaliz {
  width: 100%;
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
  
 
}

 #search-result {
  max-height: 400px;
 }

 .sonprtinc .sidebarcdd {
      background-color: #292929b0 !important;
    backdrop-filter: blur(3px);
  }

  .largimg {
    position: relative;
  }

@media screen and (min-width: 1300px) {
  .largimg {
    margin-left: 3vw;
  }
  .brrdprc {
    max-width: 460px;
  }

  #search-result {
    position: absolute;
    left: 0%;
    width: 100%;
    max-height: 400px;
    box-sizing: border-box;
    padding: 10px;
    z-index: 1000;
    overflow-y: auto;
  }

}

  .lgdps {
    width: 130px;
  }

#search-bar::placeholder {
    color: #d1d1d1;
}

.searchbar, #search-bar {
  width: 100%;
}

.no-scroll {
  overflow: hidden !important;
}

.titlmn {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid #181818;
  padding: 10px;
  align-items: center;
  grid-gap: 10px;
}

@media screen and (max-width: 767px) {
  .dxsprn {
    border-radius: 20px !important;
  }
  .scatgsrs {
    padding: 0 !important;
  }
  .isscnmb {
    width: 11vw !important;
  }
  .isscnmb-d {
    width: 7vw !important;
  }
  .somndsof {
    height: auto !important;
    gap: 8vw !important;
    padding: 0 !important;
  }
  .bnrdocdc, .bckcatgs-content, .bckcatgs {
    border-radius: 7vw !important;
  }
  .bnrdocdc::before {
    border-radius: 7vw !important;
  }
  .fndbck {
    background: radial-gradient(circle at 50% 60vw, #01ccff57, transparent 60vw) !important;
  }
  .essmb {
    padding-top: 2rem !important;
  }
  .quatmes .sp-track-static {
    height: 850px !important;
  }
  .imgsscad {
    width: 9vw !important;
  }
  .txsubsds {
    font-size: 2.5vw !important;
  }
  .tldbad {
    font-size: 3.2vw !important;
  }
  .sp-fixed-layout {
    order: 2;
  }
  .frfrmb {
    margin: 5rem 0 !important;
  }
  .sp-track-static {
    height: 120vw !important;
    margin-top: 17vw !important;
  }
  .cadssumsd {
    gap: 15px !important;
    justify-content: flex-start !important;
    }
 .sp-fixed-layout {
    width: 100%;
  }
  .essmsjg {
    position: relative !important;
  }
  .ossubsgl, .esdsv {
    font-size: 3.3vw !important;
}
 .opadpr {
    flex-direction: column;
 }

  .eisaio, .esssr, .rsrsrx {
    font-size: 8vw !important;
}
}

@media screen and (min-width: 1300px) and (max-width: 1600px) {
  .brrdprc {
    max-width: 32vw !important;
  }

}

@media screen and (max-width: 1299px) {
  .sonprtinc .amgdcnt {
    padding: 0.9rem 1.5rem !important;
  }
  .sprdm {
    border: none;
  }

  .largimg {
    width: 100% !important;
  }

}

.drgrdbakd {
  background: radial-gradient(circle at center, #ff779926 0%, #ff779926 6%, #0d0d0d 85%);
}

 .hd-pernd .amgdcnt {
  width: 100%;
  padding: 2.5rem 0 0.9rem;
}

.fscrperf {
    width: 100%;
}

@media screen and (max-width: 1024px) {
  .brrdprc {
    width: 100%;
  }
  .sprsprmb {
    flex-direction: column;
  }
  .tnszrn {
    display: none !important;
  }
  .txtbnrd {
    justify-content: center !important;
  }
  .hd-pernd {
    
  }

  .slideshow-controls {
    width: 100% !important;
  }

#slideshow-bnrcdd {
    aspect-ratio: 16 / 9 !important;
}

.btnslds {
  background-color: hsl(var(--primary)) !important;
  width: 70%;
  margin-top: 0 !important;
}

  .txtbnrd {
    position: absolute;
    width: 18rem;
    border-radius: 20px !important;
        background: linear-gradient(90deg, #000000b5 40%, transparent) !important;
  }

  .lgdps {
    width: 100px;
  }
  .navcdd {
    flex-wrap: wrap;
  }
  .prtlrlgn {
    display: none !important;
  }
  .lgdps {
    margin-left: 2vw;
  }
  .hd-pernd .amgdcnt {
    padding: 0.9rem 0 0.9rem;
  }
  .cntdsprm {
    grid-template-columns: repeat(2, 1fr) !Important;
  }
  .fscrperf {
    min-width: auto;
    max-width: 100%;
  }
  .saphvst {
    flex-direction: column;
  }
   .sprhnfot {
    flex-direction: column !important;
    grid-gap: 20px !important;
    text-align: left !important;
  }
  .ostrms {
    flex-direction: column !important;
    width: 100% !important;
    grid-gap: 10px !important;
  }

  .txtebtnsbnr {
    width: 60% !important;
  }

.container-text-bnr {
  top: 40% !important;
}
.primary-button-bnr {
  font-size: 15px !important;
}
.textbnrrtilt {
  font-size: 30px !important;
} 
.textbnrr {
  font-size: 20px !important;
}

.cartdrwds {
  width: 90% !important;
}
#cart-drawer {
  right: 0;
  left: auto;
}
.mobile-subcategories {
    background: #c900001a;
    padding: 5px;
    border-radius: 10px;
}

body .drop-category[data-state="open"] {
  overflow: hidden !important;
}

#mobile-categories-dropdown[data-state="open"] {
  transform: translateX(0) !important;
}
  .drop-category {
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      height: 100%;
      transform: translateX(-100%);
      transition: transform .25s ease-out;
      pointer-events: auto;
      box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
      display: flex;
      flex-direction: column;
      margin: 0;
  }
  .btncartlgn {
    order: 3;
    gap: 3vw !important;
  }
  .logocdd {
    order: 2;
  }
  .categocdd {
    display: none !important;
  }
  .sidebarcdd {
    order: 4;
    width: 100%;
    flex: auto !important;
  }
}

@media screen and (min-width: 1650px) {
  .container-text-bnr {
    padding: 0 !important;
  }
}

@media screen and (min-width: 2000px) {
  .primary-button-bnr {
    font-size: 1.2rem !important;
  }
  .textbnrr {
    font-size: 2rem !important;
  }
  .textbnrrtilt {
    font-size: 3rem !important;
  }
  .grandbnr {
    background: linear-gradient(to right, rgb(0 0 0 / 99%) 6%, transparent 60%) !important;
  }
}

.classdpbtrn {
  display: flex;
  align-items: center;
  justify-content: left;
  grid-gap: 15px;
}

.sbrstai {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  min-height: 15.6vh;
  padding: 22px 20px !important;
}

@media screen and (min-width: 551px) {
  .bckfooter {
      padding: 2.5rem !important;
  }
}

@media screen and (max-width: 550px) {
  .imgload {
  width: 40% !important;
}
  .sdvps {
    padding: 3vw !important;
  }
  .mgndfrnt {
    margin-top: 4vw !important;
  }
  .cardavl {
    padding: 4vw !important;
  }
  .strlavl {
    font-size: 3vw !important;
  }
  .ttldavll {
    font-size: 3.5vw !important;
  }
  .txtmnraavl {
      font-size: 3vw !important;
  }
  .trpdsdts {
    font-size: 3vw !important;
    height: 9vw !important;
    margin-bottom: 2vw !important;
  }
  .tltiinictmn {
    font-size: 4vw !important;
  }
  .txtbnrd h3 {
  font-size: 4vw !important;
}

.txtbnrd p {
  font-size: 2.5vw !important;
}
  .btnslds {
    padding: 1vw !important;
    font-size: 2.8vw !important;
    width: 27vw !important;
    border-radius: 1.5vw !important;
  }
  .searcmnr {
    height: auto;
    width: 4vw !important;
  }
  #simple-tooltip {
  font-size: 1rem !important;
  width: 80% !important;
}
  .adwrwvv {
    font-size: 3vw !important;
  }
  .frscve {
    width: 32vw !important;
  }
  .bckfooter {
    padding: 8vw 3vw !important;
  }
  .clsssprqbr {
    flex-direction: column;
    gap: 20px;
  }
  .eddtlt {
    font-size: 5vw !important;
  }

  .gdgrr {
    font-size: 3vw !important;
  }

  .bckcatgs-pd {
    padding: 0.8rem !important;
  }
  .quatmes .sp-track-static {
    height: 120vh !important;
  }
  .sp-track-static {
    height: 100vh !important;
  }
  .txsubsds {
    font-size: 3vw !important;
  }
  .tldbad {
    font-size: 4.2vw !important;
  }
  .imgsscad {
    width: 11vw !important;
    margin-bottom: 15px !important;
  }
  .txtebtnsbnr {
    width: 80% !important;
  }
  .btnsord {
    width: 100% !important;
    justify-content: center !important;
  }
  .classdpbtrn {
    flex-direction: column;
    align-items: flex-start;
  }
  .qrdrcod {
    width: 10vw !important;
    height: 10vw !important;
  }
 
  .primary-button-bnr {
        font-size: 3vw !important;
    }
  .textbnrrtilt {
    font-size: 7vw !important;
  }

  .textbnrr {
      font-size: 5vw !important;
      margin-top: 10px !important;
  }

  .lgloading {
    width: 40vw !important;
  }
  .status {
    font-size: 4vw !important;
  }
  #progress-value {
    font-size: 5vw !important;
  }
  .loading-content {
    max-width: 90vw !important;
  }
  .cart-badge {
    font-size: 2.2vw !important;
    width: 3vw !important;
    height: 3vw !important;
    align-items: center !important;
  }
  .sidebarcdd input {
    font-size:  2.5vw !important;
  }
  .logocdd {
    width: 6.2rem;
  }

  .icsomnd {
    height: auto !important;
    width: 1rem !important;
  }

  .icncabe {
    width: 2rem !important;
    height: 2rem !important;
  }

  .icnvcbd {
    font-size: 0.8rem !important;
    width: 2rem !important;
    height: 2rem !important;
  }

  .sidebarcdd {
    height: 8vw !important;
    margin-top: 3px !important;
  }
}


.categocdd {
  width: 200px;
  margin-top: 5px;
  padding-bottom: 10px;
  z-index: 9;
}

.sracslmn {
  display: flex;
  gap: 40px;
}

.btn-ghost {
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.btn-ghost:hover {
  background-color: hsl(var(--primary)) !important;
}

.imgecntr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 !important;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;     /* Centraliza verticalmente */
  z-index: 2;              /* Garante que fique na frente da outra imagem */
}

.imgbnrdois {
  /* Removido position absolute daqui para não conflitar com o flex do pai */
  width: 100%;
  height: 100%;            /* Força a imagem a ter a altura do container (100vh) */
  object-fit: cover;       /* Faz o "corte" inteligente para preencher o espaço */
}

/* Estilo para travar o scroll do body */
body.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.lgloading {
  width: 140px;
  margin-bottom: 20px;
}

.loading-wrapper {
    /* Ocupar a tela toda */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0d0d0d; /* Fundo escuro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ficar na frente de tudo */
    
    /* Efeito de Fade */
    transition: opacity 0.8s ease, visibility 0.8s;
}

/* Classe que ativa o fade out */
.loading-wrapper.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.loading-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 12px;
}

.status {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#progress-value {
    font-size: 18px;
    font-weight: 700;
}

.progress-container {
    width: 100%;
    height: 6px;
    background-color: #1a1a1a;
    border-radius: 100px;
    overflow: hidden;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, hsl(var(--primary)), #ff2d64);
    box-shadow: 0 0 15px rgba(0, 112, 255, 0.4);
    border-radius: 100px;
    transition: width 0.3s ease-out; /* Transição suave do preenchimento */
}

/*
.progress-bar-cust {
  background: linear-gradient(135deg, rgb(255, 0, 0), rgb(255, 165, 0), rgb(255, 255, 0), rgb(0, 200, 0),rgb(0, 120, 255),rgb(138, 43, 226)) !important;
}*/


/* From Uiverse.io by kennyotsu-monochromia */ 
.buttonvip {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  position: relative;
  cursor: pointer;
  font-weight: 700;
  transition-duration: .2s;
  z-index: 2;

  background: linear-gradient(
    45deg,
    #ff0040,
    #ff4674,
    #ff0040,
    #ff4674,
    #ff0040,
    #ff4674,
    #ff0040,
    #ff0040
  );
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: steam 30s linear infinite;
}

.buttonvip:hover {
  opacity: 0.85;
}

@keyframes steam {
  0% { background-position: 0% 0%; }
  100% { background-position: 1000% 0%; }
}

.vdgmdp {
  line-height: normal;
  z-index: 2;
}

.container-text-bnr {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 40%;
    text-align: left;
    transform: translateX(-50%);
}


.grandbnr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgb(0 0 0 / 76%) 3%, transparent 50%);
    pointer-events: none;
    z-index: 5;
}


/* From Uiverse.io by faizanullah1999 */ 
.primary-button-bnr {
 color: rgb(0, 0, 0);
 cursor: pointer;
 font-size: 1vw;
 font-weight: bold;
 letter-spacing: 0.05rem;
 border: 1px solid #fff;
 padding: 0.8rem 2.1rem;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
 background-color: #fff;
 background-size: 200%;
 background-position: 200%;
 background-repeat: no-repeat;
 transition: 0.3s ease-in-out;
 transition-property: background-position, border, color;
 position: relative;
 z-index: 1;
}

.primary-button-bnr:hover {
 border: 1px solid hsl(var(--primary));
 color: white;
 background-position: 40%;
}

.primary-button-bnr:before {
 content: "";
 position: absolute;
 background-color: #0E1822;
 width: 0.2rem;
 height: 0.2rem;
 top: -1px;
 left: -1px;
 transition: background-color 0.15s ease-in-out;
}

.primary-button-bnr:hover:before {
 background-color: white;
}

.primary-button-bnr:hover:after {
 background-color: white;
}

.primary-button-bnr:after {
 content: "";
 position: absolute;
 background-color: hsl(var(--primary));
 width: 0.3rem;
 height: 0.3rem;
 bottom: -1px;
 right: -1px;
 transition: background-color 0.15s ease-in-out;
}

.button-borders {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin-top: 50px;
}

.button-borders:before {
 content: "";
 position: absolute;
 width: calc(100% + 0.6em);
  height: 50%;
  left: -0.3em;
  top: -1.03em;
 border: 1px solid #fff;
 border-bottom: 0px;
    /* opacity: 0.3; */
}

.button-borders:after {
 content: "";
 position: absolute;
  width: calc(100% + 0.6em);
  height: 50%;
  left: -0.3em;
  bottom: -1em;
 border: 1px solid #fff;
 border-top: 0px;
    /* opacity: 0.3; */
 z-index: 0;
}

.shape {
 fill: #0E1822;
}

.txtebtnsbnr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 45%;
}

.textbnrr {
    font-weight: 400;
    font-size: 1.8vw;
    margin-top: 20px;
    line-height: 1.3;
    text-shadow: 0px 0px 20px rgb(0 0 0 / 62%);
}

.textbnrrtilt {
  font-size: 2.5vw;
  line-height: 1;
  text-shadow: 0px 0px 20px rgb(0 0 0 / 62%);
}

/* Estado inicial (escondido) */
.animatext, .animatext2, .animbtn {
    opacity: 0;
    transform: translateY(30px);
    display: inline-block;
    will-change: transform, opacity; /* Otimização de performance */
}

/* A animação só ocorre quando o pai (.backimg) tem a classe .active-slidcdd 
   E o body tem a classe .page-ready */
.page-ready .active-slidcdd .animatext {
    animation: fadeUp 0.8s ease-out 0.2s forwards;
}

.page-ready .active-slidcdd .animatext2 {
    animation: fadeUp 0.8s ease-out 0.6s forwards;
}

.page-ready .active-slidcdd .animbtn {
    animation: fadeUp 0.8s ease-out 0.8s forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-primary {
  color: #fff !important;
}

.slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}


.containerprinc {
  display: block;
  width: 100%;
   overflow: hidden; 
}

/* Controles */
.slideshow-controls {
    width: calc(100% - 340px);
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    margin-top: 10px;
    gap: 15px;
    z-index: 10;
}


.dots-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dot {
    width: 9px;
    height: 9px;
    background: #45383b;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.slide-playpause {
  width: 13px;
}

/* Estilo do Dot Ativo (Retângulo com barra) */
.dot.active-slidcdd {
    width: 30px;
    height: 8px;
    border-radius: 50px;
    background: #45383b;
}

.dot.active-slidcdd.paused::after {
    animation-play-state: paused;
}

.dot.active-slidcdd::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #fff; /* Cor da barra de carregamento */
    animation: loadingBar 7s linear forwards;
}

@keyframes loadingBar {
    from { width: 0%; }
    to { width: 100%; }
}

.cntnrprimg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.fndlogn-content {
  width: 100%;
  height: 100%;
  background: #2c2023;
  border-radius: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  z-index: 2;
}

.lgndos {
  width: 100%;
  padding: 1.5rem;
}

.fndlogn {
  border-radius: 20px;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: auto;
  padding: 2px;
  position: relative;
}
.btn-login {
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsl(344.94deg 100% 65.08%);
    --btn-bg-2: hsl(344.94deg 100% 50%);
    --btn-bg-color: hsl(0deg 0% 100%);
    --radii: 0.5em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    padding: 10px;
    font-size: 1rem;
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;
    color: var(--btn-bg-color);
}

.btn-login:hover {
  background-position: right top;
  box-shadow: 0 0 30px #ff004052;
}

@media (prefers-reduced-motion: reduce) {
  .btn-login {
    transition: linear;
  }
}

.input-login {
    display: flex;
    align-items: center;
    background-color: #352a2d;
    border-radius: 6px;
    height: 2.5rem;
    width: 100%;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border: 1px solid #352a2d;
}

.input-login:hover {
    border: 1px solid #ffffff21;
}

.eprewsscm {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid hsl(var(--primary));
}

.nmclnt {
  max-width: 11ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inpttextlg {
  background: transparent; 
  border: none; 
  width: 100%;
  border-radius: 0 !important;
}

input:focus {
  border: none !important;
  box-shadow: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;

  /* aqui está o ponto */
  -webkit-box-shadow: 0 0 0px 1000px #352a2d inset !important;
  box-shadow: 0 0 0px 1000px #352a2d inset !important;

  transition: background-color 9999s ease-out, color 9999s ease-out;
}


/* Firefox */
input:-moz-autofill {
  box-shadow: 0 0 0px 1000px #352a2d inset !important;
  -moz-text-fill-color: #fff !important;
  font-size: 0.875rem !important;
  caret-color: #fff !important;
}

.limituser {
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btnvltlg {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  background-color: #352a2d;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  color: #818181;
  padding: 9px;
}

.btnvltlg:hover {
  color: white;
  background-color: hsl(var(--primary));
}

.btn-cartdrawer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    line-height: 1;
    height: auto;
    background-color: #389c84;
    color: white;
    border-radius: 7px;
    font-weight: bold;
    font-size: 1.1rem;
}

.btn-cartdrawer:hover {
  background-color: #48c4a7;
}

.msgdrawer {
    font-size: 0.9rem;
    margin-bottom: 20px;
    text-align: right;
    color: #9c9c9c;
    width: 100%;
}

/* Configuração para Chrome, Edge e Safari */
#cart-drawer-wrapper::-webkit-scrollbar {
  width: 5px;               /* Largura bem fina */
}

#cart-drawer-wrapper::-webkit-scrollbar-track {
  background: transparent;  /* Fundo transparente para não poluir */
}

#cart-drawer-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.1); /* Cor sutil */
  border-radius: 20px;       /* Totalmente arredondado */
  border: 1px solid transparent; /* Truque para dar um "respiro" */
}

#cart-drawer-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Destaca levemente ao passar o mouse */
}

/* Configuração para Firefox */
#cart-drawer-wrapper {
  scrollbar-width: thin;          /* Deixa o scroll fino */
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent; /* Cor do thumb e do track */
}

.fcrvrml:hover {
  color: hsl(var(--primary));
}

.addcvlrs:hover {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.btncrvz {
    margin-top: 20px;
    background-color: hsl(var(--primary));
    color: #ffffff;
    padding: 5px 30px;
    border-radius: 7px;
    font-size: 1.2rem;
    font-weight: bold;
}

.totlachck {
    display: flex;
    font-size: 1.3rem;
    font-weight: 500;
    border-top: 1px solid #ffffff1a;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    margin-top: 15px !important;
}

.fnsmrchc {
    --border-width: 1px;
    --radius: 30px;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    background-color: #2c2023;
}

.mdsprvermlh:hover {
  background-color: hsl(var(--primary)) !important;
  color: white;
}

#client_identifier {
  border-radius: 10px;
  width: 100%;
  padding: 0.5rem 1rem;
  height: auto;
  /*margin-top: 0.5rem;*/
}

.msgerrcht:not(:empty) {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: #fe8a8a14;
  color: #ff7777;
  border-radius: 7px;
  margin-top: 10px;
}

.overlay-cdd {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 80%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .hidden-cdd {
    display: none;
  }

  .modal-card-cdd {
    background: #2c2023; /* Se usar dark mode, troque para a cor do seu fundo */
    color: #fff;
    width: 100%;
    max-width: 800px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: fadeIn-cdd 0.2s ease-out;
  }

  @keyframes fadeIn-cdd {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  .close-btn-cdd {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
  }

  .close-btn-cdd:hover { color: hsl(var(--primary)); }

  .content-cdd {
    padding: 24px;
    overflow-y: auto;
  }

  .title-cdd {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .text-body-cdd {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .ymgdcrl {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 20px;
  }

.marcndpgn {
  color: hsl(var(--primary));
  font-weight: bold;
  border-radius: 2px;
}

.btnpromc .marcndpgn::before {
  background: #ffe247;
}

.marcndpgn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 50%;
  border-radius: 50px;
  background: hsl(var(--primary));
}

.popupcdd .marcndpgn {
  background-color: hsl(var(--primary));
  color: white;
  font-weight: bold;
}

.bckfooter {
    padding: 2.5rem;
    border-top: 2px solid hsl(var(--primary));
    background: linear-gradient(45deg, #0e0a0a, #261217);
}

.txtgrandsss {
    font-size: clamp(6rem, 19.4cqi, 19.4rem);
    height: 265px;
    color: #211316;
    margin-top: -5rem;
    font-weight: bold;
}

.degrdtxt {
    position: absolute;
    width: 100%;
    height: 300px;
    left: 0;
    background: linear-gradient(to top, #170d0e, transparent 50%);
}

.colirhvr:hover {
  color: hsl(var(--primary));
}

.sonprtinc .amgdcnt {
  background: none;
  margin-top: 0 !important;
  padding: 0.9rem 0;
}

.btn-primary {
  color: white !important;
}

.cardpofl {
    background-color: #2c2023;
    padding: 20px;
    border-radius: 20px;
}

.imgdoprdtcard {
  object-fit: cover;
  object-position: left center;
  aspect-ratio: 1/1;
  width: 100%;
}

.saphvst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
}

#similar-packages-slider .sprcblz {
  display: none !important;
}

#similar-packages-slider .prtstne {
  display: none !important;
}

#similar-packages-slider .trpdsdts {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




.backdprc {
    background-color: #2c2023;
    padding: 20px;
    border-radius: 20px;
}

.jntasprnc {
  display: flex;
    width: 100%;
    gap: 1.5rem;
    justify-content: right;
}

.btn-primary:disabled {
  opacity: 0.5 !important;
  background-color: #545454;
}
.btn-outline:disabled {
  opacity: 0.5 !important;
  border-color: #545454;
}

.btn-outline:disabled:hover {
  opacity: 0.5 !important;
  border-color: #545454 !important;
  background: none !important;
}

.btn-primary:disabled:hover {
  opacity: 0.5 !important;
  background-color: #545454 !important;
}

.semestkcard:hover {
  border-color: #7e7e7e !important;
}

.smrsw {
    margin: 0px auto 15px;
    display: flex;
    background-color: #2c2023;
    border-radius: 20px;
    padding: 20px;
    width: 95%;
    flex-direction: column;
}

.fnddls {
    background-color: #2c2023;
    border-radius: 20px;
    padding: 15px 20px;
}

.cartdrwds {
   background: radial-gradient(circle at center, #251217 0%, #251217 6%, #0d0d0d 85%);
}


.centralcart-content ul, .centralcart-content ol {
  margin: 1rem 0 !important;
  padding: 0 !important;
}

#package-description {
    padding: 20px;
}

.sprcblz {
    justify-content: center;
    right: 0.5rem;
    position: absolute;
    margin-right: auto;
    margin-bottom: 0.3rem;
    top: 0.5rem;
    border: none;
    border-radius: 50px;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    font-weight: bold;
    background-color: #009460;
    z-index: 8;
}


.trpdsdts {
  font-size: 1.1rem;
}




.aocntsee {
  border-radius: 20px;
  padding: 10px 0;
}

.imgcrd {
    border-radius: 10px;
}

.cntrprc {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dxsprn {
  padding: 0.8rem;
  border-radius: 20px;
  background-color: #2c2023;
  border: 2px solid #2c2023;
}

.dxsprn:hover {
  border: 2px solid hsl(var(--primary));
}

#pstatualizac p {
  margin-bottom: 10px;
}

#similar-packages-slider .keen-slider__slide {
  padding: 5px;
}

#pstatualizac ul {
    background-color: #322629;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 20px;
    color: #bcbcbc;
    list-style: none;
}

#pstatualizac li {
  position: relative;
  padding-left: 1rem;
}

#pstatualizac li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
}

.btgav {
    background: #2c2023;
    border-radius: 30px;
}

.bckdscardslk {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    width: 100%;
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid transparent;
    background-image: linear-gradient(0deg, black 30%, #181818);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform 0.2s linear, box-shadow 0.2s linear, border 0.2s linear !important;
}

.quatmes .bckdscardslk:hover {
  border: 1px solid #ffffff;
  box-shadow: none;
}

.bckdscardslk:hover {
  transform: scale(1.02) !important;
  border: 1px solid #01ccff;
  box-shadow: 0 0 90px #01ccff59;
}

.tldbad {
    font-size: 1.4rem;
    border-bottom: 1px solid #272727;
    padding-bottom: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.txsubsds {
  font-size: 1.1rem;
  color: #a4a4a4;
}

.essmsjg {
  position: sticky;
  top: 20%;
  height: auto;
  text-align: left;
  margin-bottom: 5rem;
}

.eisaio {
  background: linear-gradient(to right, #e20139, #d83d63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 10px;
}

.ossubsgl {
  font-size: 1.5rem;
  color: #d9d9d9;
  max-width: 600px;
}

.imgsscad {
  width: 4rem;
  margin-bottom: 25px;
}

.cadssumsd {
  display: flex;
  gap: 40px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
}

.opadpr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.txt-anmd {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
  /* A mágica está aqui: */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: 500ms; /* O delay que você queria está aqui */
}

.txt-anmd.show {
  opacity: 1;
  transform: translateY(0);
}

.grid-container {
  position: relative;
  width: 100%;
  background: radial-gradient(circle at 120% 22%, #01ccff40, transparent 30%);
}

.grid-container::before {
  content: "";
  position: absolute;
  top: -40px; 
  left: -40px;
  width: calc(100%);
  height: calc(100%);
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: move-grid 3s linear infinite;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
  opacity: 0.8;
}

@keyframes move-grid {
  from { 
    transform: translate(0, 0); 
  }
  to { 
    transform: translate(40px, 40px); 
  }
}

/* Container Principal */
.sp-fixed-layout {
  display: flex;
  gap: 20px;
  position: relative;
  /* Define a timeline baseada no movimento desta seção na tela */
  view-timeline-name: --timelineStatic;
  view-timeline-axis: block;
}

/* Trilho da Barra (A linha de fundo) */
.sp-track-static {
  width: 4px;
  background: #242424;
  position: relative;
  align-self: stretch; 
  border-radius: 4px;
  height: 850px;
  margin-top: 8rem;
  margin-right: 20px;
  margin-left: 20px;
}

.quatmes .sp-track-static {
  height: 910px;
}
.quatmes .sp-fill-static {
  background: #fff;
}

/* O Preenchimento da Barra */
.sp-fill-static {
  width: 100%;
  height: 0%;
  background: linear-gradient(45deg, #ff4976, #01ccff 40%);
  border-radius: 4px;
  box-shadow: 0 0 30px #01ccff;
  
  /* Animação vinculada ao scroll */
  animation: fillLinear linear forwards;
  animation-timeline: --timelineStatic;
  /* Sincronizado com o seu código: começa em 10% e termina em 70% do scroll */
  animation-range: cover 10% cover 70%;
}

/* Estilo Base das Bolinhas (Círculos) */
.sp-ball {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #242424; /* Cor desativada */
  border-radius: 50%;
  z-index: 2;

  /* Mesma timeline da barra */
  animation: fillBall linear forwards;
  animation-timeline: --timelineStatic;
}

.sp-ball { 
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #242424;
  border-radius: 50%;
  z-index: 2;

  animation: fillBall linear forwards;
  animation-timeline: --timelineStatic;
}

.quatmes .sp-fill-static {
  box-shadow: 0 0 30px #ffffff;
}

/* VARIAÇÃO PARA QUATMÊS */
.quatmes .sp-ball {
  animation-name: fillBallQuatmes;
}

@keyframes fillBallQuatmes {
  from {
    background: #111;
    box-shadow: none;
  }
  to {
    background: #ffffff;
    box-shadow: 0 0 25px #ffffffc4 !important;
  }
}


/* Sincronia Individual de cada Bolinha */

/* b1: No topo (0% da barra). Acende quando o preenchimento inicia (10%) */
.b1 { 
  top: 0%; 
  animation-range: cover 10% cover 11%; 
}

/* b2: Em 35%. Acende quando o scroll atinge ~31% da seção */
.b2 { 
  top: 34%; 
  animation-range: cover 31% cover 32%; 
}

/* b3: Em 68%. Acende quando o scroll atinge ~51% da seção */
.b3 { 
  top: 66%; 
  animation-range: cover 51% cover 52%; 
}

/* b4: No final (100% da barra). Acende quando o preenchimento termina (70%) */
.b4 { 
  top: 99%; 
  animation-range: cover 69% cover 70%; 
}

.quatmes .b2 { 
  top: 32%; 
}

/* b3: Em 68%. Acende quando o scroll atinge ~51% da seção */
.quatmes .b3 { 
  top: 65%; 
}

/* Animação do Preenchimento da Barra */
@keyframes fillLinear {
  from { height: 0%; }
  to { height: 100%; }
}

/* Animação do Preenchimento das Bolinhas */
@keyframes fillBall {
  from {
    background: #111;
    box-shadow: none;
  }
  to {
    background: linear-gradient(45deg, #ff4976, #01ccff 40%);
    box-shadow: 0 0 25px #01ccffc4;
  }
}

/* Ajuste da Coluna de Conteúdo */
.sp-cards-list {
  flex: 1;
}

.bnrdocdc {
  position: relative;
  padding: 5rem;
  border-radius: 50px;

  background-image: url(https://cdn.centralcart.io/stores/11071/posts/25f9df18-0491-4208-8ee8-117ef9604f94.webp);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bnrdocdc::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* espessura da borda */
  border-radius: 50px;

  background: linear-gradient(180deg, #ffcad77d, #1b1b1b 60%);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}

.esssr {
    display: inline-block;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
}


.etegd {
  margin-bottom: 2rem;
}

.rsrsrx {
  display: block;
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 10px;
  text-align: center;
  background: linear-gradient(to right, #e20139, #d83d63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.esdsv {
  font-size: 1.5rem;
  color: #d9d9d9;
  margin: 0 auto;
  text-align: center;
}

.bckcatgs {
  border-radius: 50px;
  padding: 2rem;
  border: 1px solid transparent;
  background-image: linear-gradient(#0c0c0c 60%, #121214), linear-gradient(to bottom, #3a3a3a, #0c0c0c 60%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  margin-top: 3rem;
}

.somndsof {
  padding: 1rem 1rem 0;
  background: transparent;
  border-radius: 50px;
  margin: 0;
  display: flex;
  height: 5rem;
  gap: 4rem;
  justify-content: center;
}

.tab-btn {
  fill: white;
}

.tab-btn:hover {
  fill: #01ccff;
  border-bottom: 3px solid #01ccff;
}

.tab-select {
  fill: #01ccff;
  border-bottom: 3px solid #01ccff;
}

.scatgsrs .sdttlt {
  display: none;
}

.eddtlt {
  font-size: 1.7rem;
  font-weight: bold;
}

.gdgrr {
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 500px;
  color: #b1b1b1;
}

.scatgsrs {
  padding: 2rem;
  border-radius: 30px;
}

.scatgsrs .esdcsd {
  margin-top: 0rem !important;
}

/* Container principal */
.slide-content {
  position: relative;
  overflow: hidden;
  padding: 4px;
  transition: max-height 0.5s ease-in-out;
}

/* Estado Fechado */
.slide-content.collapsed {
  max-height: 690px;
}

/* Degradê */
.slide-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 270px;
  background: linear-gradient(transparent, #080808);
  pointer-events: none;
  opacity: 0; 
  transition: opacity 0.5s ease-in-out;
}

.slide-content.collapsed::after {
  opacity: 1;
}

/* Estado Aberto */
.slide-content.expanded {
  max-height: 5000px; /* Dica: use um valor alto, mas não exagerado para não atrasar a transição */
}

.slide-content.expanded::after {
  opacity: 0;
}

.toggle-slide-btn {
  font-size: 1.1rem;
  margin-top: 2rem;
  border: 1px solid #4f4f4f;
  padding: 6px 20px;
  border-radius: 7px;
  transition: all 0.3s ease;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.toggle-slide-btn:hover {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary));
}

#slider-feedback-left-cddqp .keen-slider__slide,
#slider-feedback-right-cddqp .keen-slider__slide {
  min-width: 420px !important; 
  max-width: 420px !important;
}

/* Opcional: Efeito suave nas bordas para esconder a "entrada" dos cards */
.grad-left {
  background: linear-gradient(to right, rgba(0,0,0,1), transparent);
}
.grad-right {
  background: linear-gradient(to left, rgba(0,0,0,1), transparent);
}

.bckcatgs-content {
  width: 100%;
  height: 100%;
  background: linear-gradient(201deg, #23080f, #080808 50%);
  border-radius: 50px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  z-index: 2;
  border: none;
}

.bckcatgs-pd {
  width: 100%;
  padding: 1.5rem;
}

.bckcatgs {
  background: transparent;
  --tw-backdrop-blur: blur(5px) !important;
  border-radius: 50px;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: auto;
  padding: 2px;
  position: relative;
}

@keyframes rotation_bachf {
  0% {
    transform: rotateZ(0deg);
  }

  0% {
    transform: rotateZ(360deg);
  }
}

.bckcatgs::before {
  position: absolute;
  content: ' ';
  display: block;
  width: 600px;
  height: 290%;
  background: linear-gradient(90deg, transparent, #ff698f70, transparent);
  animation: rotation_bachf 10000ms infinite linear;
}

.fndbck {
  width: 100%;
  background: radial-gradient(circle at 50% 790px, #01ccff57, transparent 800px);
}

.grad-left {
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.4),
    transparent
  );
}

.grad-right {
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.4),
    transparent
  );
}

.fndddld::after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(transparent, #000000, transparent);
  pointer-events: none;
}

 .limited-height {
    max-height: 450px;
    overflow: hidden;
    position: relative;
  }

  /* Estilo básico para o popup */
  .modal-overlay-cddqp {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  #close-modal-cddqp {
    position: absolute;
    font-size: 2rem;
    font-weight: 300;
    right: 2rem;
    top: 2rem;
    line-height: 0.5;
  }

  .modal-body-cddqp {
    background: #272021;
    padding: 2rem;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border-radius: 30px;
  }

  #modal-content-cddqp .pb-10 {
    padding: 0;
  }

  @keyframes modal-in-cddqp {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-out-cddqp {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}

.modal-body-cddqp.is-opening {
  animation: modal-in-cddqp 0.25s ease forwards;
}

.modal-body-cddqp.is-closing {
  animation: modal-out-cddqp 0.2s ease forwards;
}

  .modal-body-cddqp::-webkit-scrollbar {
  width: 8px;
}

/* 2. O "trilho" da barra (fundo) */
.modal-body-cddqp::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

/* 3. O "polegar" (a parte que desliza) */
.modal-body-cddqp::-webkit-scrollbar-thumb {
  background-color: #333; /* Cor escura para combinar com seu degradê */
  border-radius: 20px;
  border: 2px solid transparent; /* Cria um efeito de respiro */
}

/* 4. Efeito hover para feedback visual */
.modal-body-cddqp::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
  
  .package-desc-wrapper {
  position: relative;
    border-radius: 20px;
}

.package-desc {
  max-height: 425px;
  overflow: hidden;
}

.package-desc-action {
    position: relative;
    text-align: center;
    background-color: #2c2023;
    padding: 20px;
    border-radius: 20px;
}

.package-desc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
}

.pqstock {
  color: #ffb000;
  background-color: #ffb00026 !important;
  border: 1px solid #ffb0003b;
}

#package-desc-wrapper p {
  margin-bottom: 15px;
}

#modal-content-cddqp p {
  margin: 15px 0px;
}

.crprtd {
  background-color: #000;
}

.imbnr1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  border-radius: 15px;
  background: url(https://cdn.centralcart.io/stores/11071/posts/5e737182-d465-4b11-8d69-eeaa3eb6341f.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.3s ease;
  width: 100%;
}

.btnslds {
  margin-top: auto;
  background-color: #00000061;
  padding: 7px;
  text-align: center;
  border-radius: 10px;
  transition: background-color 0.7s ease, color 0.7s ease, font-weight 0.7s ease;
}

.btnslds:hover {
  font-weight: bold;
  color: #ffffff;
  background-color: hsl(var(--primary));
}

.icnvcbd {
    align-items: center;
    display: flex !important;
    justify-content: center;
    height: 40px;
    width: 40px;
    text-align: center;
    padding: 10px;
    background-color: #ac9a9a33;
    border-radius: 50px;
    font-size: 16px;
}

.icnvcbd:hover {
  background-color: #c0c0c075;
}

.imbnr1:hover {
  background: linear-gradient(rgb(180 0 0 / 14%), rgb(180 0 0 / 14%)),
  url(https://cdn.centralcart.io/stores/11071/posts/5e737182-d465-4b11-8d69-eeaa3eb6341f.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.crprtd {
  display: inline-flex;
  width: auto;
  border-radius: 15px;
  border: 2px solid #2c2023;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.crprtd:hover {
  border: 2px solid hsl(var(--primary));
  transform: scale(1.05);
}

.imfrdrprm {
  width: 80%;
}

.cntdsprm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 2rem;
  padding: 20px;
  background: #2c2023;
  border-radius: 20px;
}

.btnpromc {
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  position: relative;
  cursor: pointer;
  font-weight: 700;
  transition-duration: .2s;
  z-index: 2;

  background: linear-gradient(
    45deg,
    #ffd700,
    #fff2ad,
    #ffd700,
    #fff2ad,
    #ffd700,
    #fff2ad,
    #ffd700,
    #ffd700
  );
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: steam-promc 30s linear infinite;
}

.btnpromc:hover {
  opacity: 0.85;
}

@keyframes steam-promc {
  0% { background-position: 0% 0%; }
  100% { background-position: 1000% 0%; }
}


.btncopa {
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  position: relative;
  cursor: pointer;
  font-weight: 700;
  transition-duration: .2s;
  z-index: 2;

  background: linear-gradient(45deg, #64ff4a, #fae032, #40a4ff, #64ff4a, #fae032, #40a4ff, #f7dd31, #64ff4a);
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: steam-copa 30s linear infinite;
}

.btncopa::after {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 8px;
  background: linear-gradient(45deg, #64ff4a, #fae032, #40a4ff, #64ff4a, #fae032, #40a4ff, #f7dd31, #64ff4a);
  background-size: 400%;
  filter: blur(8px) brightness(1.3);
  opacity: 0.16;
  animation: steam-copa 30s linear infinite;
}

.btncopa:hover {
  opacity: 0.85;
}

@keyframes steam-copa {
  0% { background-position: 0% 0%; }
  100% { background-position: 1000% 0%; }
}
.imgbnrprnv {
  width: 35%;
  margin-bottom: 10px;
}

.backexclsv {
  background-image: url('https://cdn.centralcart.io/stores/11071/posts/a5b8b370-2f6b-49cc-b385-658ba0ab511b.webp');
  background-repeat: repeat;
  background-size: 300px;
  background-color: #121212;
}


#slideshow-bnrcdd {
    position: relative;
    aspect-ratio: 16 / 6;
    overflow: visible;
    width: 100%;
}

.backimg {
    display: flex;
    gap: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    visibility: hidden;
}

.backimg.active-slidcdd {
    visibility: visible;
    z-index: 3;
}

.backimg.is-leaving {
    visibility: visible;
    z-index: 2;
}

.ocntsofs {
    position: relative;
    height: 100%;
    flex: 1;
    overflow: hidden;
    border-radius: 20px;
}

.ocntsofs-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;           /* ← clippa a imagem nas bordas durante o slide  */
}

/* ── Keyframes com gap de 16px entre os slides ── */
@keyframes slide-in-from-right {
    from { transform: translateX(calc(100% + 16px)); }
    to   { transform: translateX(0); }
}
@keyframes slide-in-from-left {
    from { transform: translateX(calc(-100% - 16px)); }
    to   { transform: translateX(0); }
}
@keyframes slide-out-to-left {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - 16px)); }
}
@keyframes slide-out-to-right {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100% + 16px)); }
}

.ocntsofs-inner.anim-slide-in-right  { animation: slide-in-from-right 0.45s ease forwards; }
.ocntsofs-inner.anim-slide-in-left   { animation: slide-in-from-left  0.45s ease forwards; }
.ocntsofs-inner.anim-slide-out-left  { animation: slide-out-to-left   0.45s ease forwards; }
.ocntsofs-inner.anim-slide-out-right { animation: slide-out-to-right  0.45s ease forwards; }

.backimg .txtbnrd {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.backimg.active-slidcdd .txtbnrd {
    opacity: 1;
}


.slide-arrow {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.4);
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, background 0.2s;
}

#slideshow-bnrcdd:hover .slide-arrow {
    opacity: 1;
}

.slide-arrow:hover {
    background: rgba(0,0,0,0.7);
}

.prev-slid { left: 12px; }
.next-slid { right: 12px; }

.imgbnr {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.txtbnrd {
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px;
    gap: 12px;
    z-index: 2;
    background: radial-gradient(ellipse at 15% 25%, #ff595978 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, #ff014085 0%, transparent 60%), #1a1314;
    border-radius: 25px;
}

.txtbnrd h3 {
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 700;
    margin: 0;
}

.txtbnrd p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
}

.txtbnrd h3,
.txtbnrd p {
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.slider-track { display:flex; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; }
  .slider-track::-webkit-scrollbar { display:none; }
  .slider-track.dragging { cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; user-select:none; }
  .slider-track > div { flex:0 0 50%; scroll-snap-align:start; padding:0 4px; box-sizing:border-box; }
  @media (min-width: 768px) {
    .slider-track > div { flex: 0 0 25%; }
  }

  #categorisdesk {
    position: sticky;
    margin-top: 5%;
  }


  .cc-preview-container {
    display: none !important;
  }
  
  .avl-arrow.avl-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.keen-slider {
  border-radius: 20px;s
}

#avl-prev {
  left: 1.5%;
}

#avl-next {
  right: 1.5%;
}

#avl-prev,
#avl-next {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover no wrapper pai exibe os botões */
#avl-slider-wrap:hover #avl-prev,
#avl-slider-wrap:hover #avl-next {
  opacity: 1;
}


.sdvps {
    --black: #d10435;
    --ch-black: #d10435;
    --eer-black: #d10435;
    --night-rider: #d10435;
    --white: #ff5e84;
    --af-white: #ff5e84;
    --ch-white: #ff5e84;
    border-radius: 20px;
    padding: 20px;
    transition-duration: .2s;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    z-index: 2;
}


.sdvps:before, .sdvps:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 20px;
  background: linear-gradient(45deg, 
  var(--ch-black), var(--eer-black),
  var(--night-rider), var(--ch-white), var(--night-rider), 
	var(--eer-black), var(--ch-black),var(--ch-black));
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: steamfundo 30s linear infinite;
}

@keyframes steamfundo {
    0% {
        background-position: 0% 0%;
    }
    100% {
        /* Movemos exatamente a largura do background para a esquerda */
        background-position: 1000% 0%;
    }
}

.sdvps .tnszrn {
  background-color: rgb(57 46 49 / 35%);
}

.sdvps .dxsprn {
  background-color: #861c36;
  border-color: #6a263700;
}

.sdvps .dxsprn:hover {
  border-color: #6a263700;
}
.btndqdsc.animar {
  transition: background-color 0.3s;
}
.btndqdsc.active {
  background-color: #2f2527;
  border-radius: 0.75rem 0px 0px 0.75rem;
}

.btnabrcat .btnsnav:hover{
  color: #fff !important;
}

.sprrbrd {
  overflow-y: auto;
  max-height: 290px;
  border-radius: 0rem 0.75rem 0.75rem 0.75rem;
}

.rmvebfr::before {
  width: 0px !important;
}

.sprrbrd::-webkit-scrollbar {
  width: 4px;
}

.sprrbrd::-webkit-scrollbar-track {
  background: transparent;
}

.sprrbrd::-webkit-scrollbar-thumb {
  background: rgba(48, 48, 48, 0.15);
  border-radius: 999px;
}

.sprrbrd::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Firefox */
.sprrbrd {
  scrollbar-width: thin;
  scrollbar-color: #544447 transparent;
}

.sprrbrd::-webkit-scrollbar-button {
  display: none;
}



.pcfg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titlconf {
  font-size: 1.5rem;
  font-weight: bold;
}

.pcfg-hidden {
  display: none;
}

.pcfg-close {
  position: absolute;
  right: 2rem;
  font-size: 1.3rem;
  line-height: 1;
}

.pcfg-box {
  display: block;
  height: auto;
  max-height: 60vh;
  width: 700px;
  max-width: 700px;
  background-color: #272021;
  border-radius: 25px;
  padding: 2rem;
  animation: pcfg-in 0.25s ease forwards;
}

.pcfg-saindo .pcfg-box {
  animation: pcfg-out 0.2s ease forwards;
}

@keyframes pcfg-in {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes pcfg-out {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(0.7); opacity: 0; }
}

.clsspfl {
  display: flex;
  flex-direction: column;
  background: #2f2829;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 15px;
  margin-top: 1rem;
  gap: 1rem;
}

.btnadd {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 50px;
    width: 100%;
    border: 2px solid hsl(var(--primary));
    font-size: 1rem;
    padding: 10px;
    position: relative;
    z-index: 0;
    transition: box-shadow 0.4s ease;
}

.btnadd::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background-image: linear-gradient(
        325deg,
        hsl(var(--primary)) 0%,
        #ff4d7a 55%,
        hsl(var(--primary)) 90%
    );
    background-size: 200% auto;
    background-position: left center;
    opacity: 0;
    z-index: -1;
    transition: 
        opacity 0.4s ease,
        background-position 0.6s ease,
        background-size 0.6s ease;
}

.btnadd:hover::before {
    opacity: 1;
    background-size: 280% auto;
    background-position: right center;
}

.btnadd:hover {
    box-shadow: 0 0 30px #ff004052;
}

.semstok:hover {
    box-shadow: none !important;
}

.semstok {
    color: #ffffff82 !important;
    background: #413639!important;
}

/* From Uiverse.io by Allyhere */ 
.btncompr {
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsl(344.94deg 100% 65.08%);
    --btn-bg-2: hsl(344.94deg 100% 50%);
    --btn-bg-color: hsl(0deg 0% 100%);
    --radii: 0.5em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 50px;
    padding: 10px;
    font-size: 1rem;
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;
    color: var(--btn-bg-color);
}

.btncompr:hover {
  background-position: right top;
  box-shadow: 0 0 30px #ff004052;
}

@media (prefers-reduced-motion: reduce) {
  .btncompr {
    transition: linear;
  }
}

.btn-prev-pgprdct {
  position:absolute;
  left:0.2rem;
  top:50%;
  transform:translateY(-50%);
  background:#0003;
  border-radius:50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  font-size: 1rem;
  z-index:10;
  opacity:0;
  transition:opacity 0.2s ease;
}

.btn-next-pgprdct {
  position:absolute;
  right:0.2rem;
  top:50%;
  transform:translateY(-50%);
  background:#0003;
  border-radius:50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  font-size: 1rem;
  z-index:10;
  opacity:0;
  transition:opacity 0.2s ease;
}

.btn-prev-pgprdct:hover, 
.btn-next-pgprdct:hover {
  background-color: hsl(var(--primary));
}

.esegnd {
  min-width: 47%;
}

.prmcbfmdd::before {
  background: #ffdc21 !important;
}

.prmccopa::before {
  background: #8ec834 !important;
}

.btnsolictdis {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 50px;
  padding: 10px;
  font-size: 1rem;
  font-weight: 500;
  background: #7289da;
}

.imgload {
  width: 220px;
}

.fndcpa {
    color: #000;
    justify-content: center;
    background: linear-gradient(45deg, #48b935, #f8de31, #21417a);
    padding: 5px 10px;
    border-radius: 0px 0px 20px 20px;
}