/* PetNobre — carrinho sempre preso à janela visível. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html.cart-panel-open,
body.cart-panel-open {
  overscroll-behavior: none;
}

/*
 * A animação de entrada da página usa transform no body. Um elemento fixed
 * dentro de um ancestral transformado passa a acompanhar o documento.
 * Ao abrir o carrinho, removemos esse contexto para que ele use a viewport.
 */
body.cart-panel-open {
  overflow: hidden !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}

body.cart-panel-open::before,
body.cart-panel-open::after {
  transform: none !important;
  filter: none !important;
}

.overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 100090 !important;
}

.cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  inset: 0 0 0 auto !important;
  width: min(460px, 100vw) !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(23, 79, 58, .10);
  transform: translate3d(102%, 0, 0) !important;
  will-change: transform;
  isolation: isolate;
  z-index: 100100 !important;
}

.cart-drawer.active {
  transform: translate3d(0, 0, 0) !important;
}

.cart-drawer .cart-body {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cart-drawer .drawer-header,
.cart-drawer .cart-footer,
.cart-drawer .cart-item {
  max-width: 100%;
}

.cart-drawer img {
  max-width: 100%;
}

@media (max-width: 560px) {
  .cart-drawer {
    width: 100vw !important;
    border-left: 0;
    box-shadow: none;
  }
}