/* Carrossel similar — bleed 90vw fora do container da página */
.package-page-entry {
  transform-origin: center top;
  animation: package-page-open-zoom 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: transform;
}

.package-page {
  --package-buy-green: var(--pontos-accent, #86efac);
  --package-buy-green-soft: #7ee8a1;
  --package-buy-green-strong: #39d979;
  --package-buy-green-hover: #8ff0af;
  --package-buy-green-hover-strong: #46e083;
}

.package-page-entry[data-package-entry-complete="true"] {
  transform: scale(1) !important;
  will-change: auto;
}

html.package-page-active,
body.package-page-active {
  overflow-x: clip;
}

@keyframes package-page-open-zoom {
  from {
    transform: scale(1.2);
  }

  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .package-page-entry {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

.package-wrapper {
  padding-top: 3rem;
  padding-bottom: 3rem;
  overflow: visible;
}

.package-wrapper > .container,
.package-wrapper .package-similar-loader,
.package-wrapper .pkg-similar-section {
  overflow: visible;
}

/* Package: meta bar (Steam / estoque / Windows) — borda neutra, sem animação */
.package-wrapper .pk-product-meta-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1.25rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(161, 161, 170, 0.38);
  background: rgba(82, 82, 91, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: visible;
}

.package-wrapper .pk-product-meta-bar::after {
  display: none;
}

.package-wrapper .pk-meta-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.package-wrapper .pk-meta-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: #f4f4f5;
}

.package-wrapper .pk-meta-item--steam {
  gap: 0.45rem;
}

.package-wrapper .pk-meta-steam-icon {
  display: block;
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

.package-wrapper .pk-meta-status-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: #22c55e;
}

.package-wrapper .pk-meta-status-icon svg {
  display: block;
  width: 1.125rem !important;
  height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  stroke: #22c55e;
  color: #22c55e;
}

.package-wrapper .pk-product-meta-bar .pk-meta-status-icon svg {
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}

@media (max-width: 767px) {
  .package-wrapper .pk-product-meta-bar {
    justify-content: space-between;
    gap: 0.35rem 0.45rem;
    padding: 0.5rem 0.55rem;
  }

  .package-wrapper .pk-meta-item {
    gap: 0.3rem;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  .package-wrapper .pk-meta-label {
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .package-wrapper .pk-meta-steam-icon {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
  }

  .package-wrapper .pk-meta-status-icon {
    width: 0.95rem;
    height: 0.95rem;
  }

  .package-wrapper .pk-meta-status-icon svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
    max-width: 0.95rem !important;
    max-height: 0.95rem !important;
  }
}
/* Capa do produto 600×900 — imagem inteira visível (hero da página de produto) */
.pk-product-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 900;
  overflow: hidden;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pk-product-cover img {
  display: block;
  width: 100%;
  height: 100%;
}

.package-wrapper .pk-product-cover--hero {
  max-width: 100%;
}

.package-wrapper .pk-product-cover--hero img {
  object-fit: contain;
  object-position: center;
}

@media (min-width: 768px) {
  .package-wrapper .pk-product-cover--hero {
    max-width: 248px;
  }
}

.package-wrapper .pk-product-cover--hero {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius, 0.6rem);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: none;
  overflow: hidden;
}

.package-wrapper .pk-product-cover--hero img {
  border-radius: inherit;
}

.package-wrapper .pk-product-column {
  min-width: 0;
  overflow: visible;
}

.package-wrapper .pk-package-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .package-wrapper .pk-package-layout {
    display: grid;
    /* O trailer é o protagonista: a coluna de compra não pode passar dele. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-areas:
      "trailer buy"
      "desc desc"
      "sidebar sidebar";
    gap: 1rem 1.5rem;
    align-items: start;
  }

  .package-wrapper .pk-package-layout.pk-package-layout--no-sidebar {
    grid-template-areas:
      "trailer buy"
      "desc desc";
  }

  .package-wrapper .pk-product-banner {
    grid-area: trailer;
  }

  .package-wrapper .pk-buy-panel-shell {
    grid-area: buy;
  }

  .package-wrapper .pk-product-column--desc {
    grid-area: desc;
  }

  .package-wrapper .pk-package-sidebar {
    grid-area: sidebar;
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
  }

  .package-wrapper .pk-package-sidebar > .pk-sidebar-card {
    height: 100%;
  }
}

@media (min-width: 1280px) {
  .package-wrapper .pk-package-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 1rem 1.75rem;
  }
}

.package-wrapper .pk-product-banner {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  position: relative;
  top: auto;
  min-width: 0;
  z-index: 1;
  transition: none;
}

.package-wrapper .pk-buy-panel-shell {
  display: flex;
  flex-direction: column;
  position: static;
  top: auto;
  min-height: 0;
  overflow: visible;
  border-radius: var(--radius, 0.6rem);
  border: 1px solid rgba(63, 63, 70, 0.55);
  background: #18181b;
  padding: 0.8rem 0.95rem;
  width: 100%;
  transition: none;
}

@media (min-width: 768px) {
  .package-wrapper .pk-buy-panel-shell {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 1rem 1.15rem;
    /* Estica até a altura do trailer (que agora inclui a faixa de miniaturas). */
    align-self: stretch;
  }

  .package-wrapper .pk-buy-panel-shell .pk-buy-panel {
    flex: 1 1 auto;
    height: 100%;
  }

  .package-wrapper .pk-buy-panel-shell .pk-buy-body {
    flex: 1 1 auto;
  }

  /* Produtos com edição/variação têm um campo a mais (o combo de edição), então
     o painel de compra fica levemente mais alto que a galeria do trailer —
     encolhe um pouco pra alinhar as duas colunas certinho. */
  .package-wrapper .pk-buy-panel-shell:has(.pk-variation-field) {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .package-wrapper .pk-buy-panel-shell:has(.pk-variation-field) .pk-buy-body {
    gap: 0.35rem;
  }
}

@media (max-width: 767px) {
  .package-wrapper .pk-buy-panel-shell {
    margin-inline-start: 0;
    margin-block-start: 0;
    transform: none;
  }
}

.package-wrapper .pk-buy-panel {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  gap: 0;
}

.package-wrapper .pk-package-sidebar {
  position: static;
  top: auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 767px) {
  .package-wrapper > .container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  .package-wrapper .pk-product-column,
  .package-wrapper .pk-package-layout,
  .package-wrapper .pk-product-banner,
  .package-wrapper .pk-buy-panel-shell,
  .package-wrapper .pk-package-sidebar,
  .package-wrapper .pk-desc-panel {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .package-wrapper .pk-buy-panel-shell {
    margin-block-start: 0;
    transform: none;
  }
}

/* Sidebar cards — estrutura interna (mobile + desktop) */
.pk-sidebar-card {
  padding: 1rem 1.05rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pk-sidebar-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.pk-sidebar-card__icon-wrap {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--pk-side-accent) 40%, transparent);
  background: color-mix(in srgb, var(--pk-side-accent) 10%, transparent);
}

.pk-sidebar-card__title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fafafa;
  overflow-wrap: break-word;
}

.pk-sidebar-card__desc {
  margin: 0;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #a1a1aa;
  overflow-wrap: break-word;
}

.pk-sidebar-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pk-sidebar-card__points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #d4d4d8;
}

.pk-sidebar-card__point-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.pk-sidebar-card__points li svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  margin-top: 0.08rem;
  color: var(--pk-side-accent);
}

.package-wrapper .pk-buy-body {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: visible;
}

.package-wrapper .pk-product-meta-bar--inline {
  margin-top: 0.15rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.75rem;
  box-sizing: border-box;
}

.package-wrapper .pk-product-meta-bar--inline .pk-meta-item {
  min-width: 0;
}

.package-wrapper .pk-product-meta-bar--inline .pk-meta-label {
  white-space: normal;
}

/* —— Página do produto: overview em grid, passos e FAQ —— */
.pk-desc-panel {
  background: #18181b;
  border: 1px solid rgba(63, 63, 70, 0.55);
}

@media (min-width: 768px) {
  .package-wrapper .pk-desc-overview__lead {
    white-space: nowrap;
    max-width: none;
  }
}

.pk-spot-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pk-spot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.pk-spot-card {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  /* Contorno com o mesmo degradê verde→azul do texto marcado (pk-spot-highlight) */
  background:
    linear-gradient(#18181b, #18181b) padding-box,
    var(--pk-duo-gradient) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}

@media (hover: hover) {
  .pk-spot-card:hover {
    transform: scale(1.02);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px rgba(142, 197, 255, 0.35),
      0 10px 28px rgba(0, 0, 0, 0.35),
      0 0 22px -4px rgba(142, 197, 255, 0.28);
  }
}

.pk-desc-overview {
  --pk-duo-green: #86efac;
  --pk-duo-blue: #8ec5ff;
  --pk-duo-gradient: linear-gradient(120deg, var(--pk-duo-green) 0%, var(--pk-duo-blue) 100%);
}

.pk-spot-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(134, 239, 172, 0.45);
  background: rgba(134, 239, 172, 0.1);
}

.pk-spot-icon i,
.pk-spot-icon svg {
  color: #86efac;
}

.pk-spot-card--support {
  align-items: stretch;
}

.pk-spot-support-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}

.pk-spot-support-body > p {
  margin-bottom: 0.75rem;
}

.pk-spot-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  align-self: flex-end;
  margin-top: auto;
  margin-left: auto;
  padding: 0.45rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: #06130b;
  background: #86efac;
  border: 1px solid rgba(134, 239, 172, 0.9);
  transition: transform 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) {
  .pk-spot-support-btn:hover {
    transform: scale(1.03);
    filter: brightness(1.06);
  }
}

.pk-spot-highlight {
  font-weight: 600;
  background: var(--pk-duo-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pk-activation-key-format {
  color: #86efac;
  font-weight: 600;
}

.pk-step-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

.pk-step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0;
  transform-origin: center top;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pk-step-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 9999px;
  background: #8ec5ff;
  box-shadow:
    0 0 0 2px rgba(142, 197, 255, 0.35),
    0 8px 22px rgba(142, 197, 255, 0.18);
  margin: 0 auto 0.45rem;
}

.pk-step-ring svg {
  position: relative;
  z-index: 1;
  width: 1.125rem;
  height: 1.125rem;
}

.pk-step-ring > i {
  position: relative;
  z-index: 1;
}

.pk-step-badge {
  position: absolute;
  z-index: 2;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  color: #0f172a;
  background: #fff;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

@media (hover: hover) {
  .pk-step:hover {
    transform: scale(1.04) translateY(-2px);
  }
}

.pk-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fafafa;
  line-height: 1.25;
}

.pk-step-hint {
  margin-top: 0.2rem;
  font-size: 0.625rem;
  line-height: 1.35;
  color: #a1a1aa;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.15rem;
}

.pk-step-connector {
  display: block;
  flex: 1 1 0;
  min-width: 0.5rem;
  align-self: flex-start;
  margin-top: 1.35rem;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    rgba(142, 197, 255, 0.95) 0%,
    rgba(142, 197, 255, 0.55) 55%,
    rgba(142, 197, 255, 0.25) 100%
  );
  box-shadow: 0 0 0 1px rgba(142, 197, 255, 0.12);
}

@media (min-width: 640px) {
  .pk-step-ring {
    width: 3.15rem;
    height: 3.15rem;
    margin-bottom: 0.55rem;
  }

  .pk-step-ring svg,
  .pk-step-ring > i {
    width: 1.25rem;
    height: 1.25rem;
  }

  .pk-step-connector {
    margin-top: 1.5rem;
    min-width: 1rem;
    height: 3px;
  }

  .pk-step-label {
    font-size: 0.8125rem;
  }

  .pk-step-hint {
    font-size: 0.6875rem;
    max-width: 11rem;
  }
}

.pk-faq-item {
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: #18181b;
  overflow: hidden;
  transition:
    transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.pk-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  position: relative;
}

.pk-faq-item summary::-webkit-details-marker {
  display: none;
}

.pk-faq-item summary > .pk-faq-icon,
.pk-faq-item summary > .pk-faq-q,
.pk-faq-item summary > .pk-faq-plus {
  position: relative;
  z-index: 1;
}

.pk-faq-q {
  flex: 1;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f4f4f5;
}

@media (min-width: 640px) {
  .pk-faq-q {
    font-size: 0.75rem;
  }
}

.pk-faq-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(142, 197, 255, 0.32);
  background: rgba(142, 197, 255, 0.06);
}

.pk-faq-plus {
  transition: transform 0.22s ease;
}

.pk-faq-item[open] .pk-faq-plus {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .pk-faq-item:hover {
    transform: scale(1.018);
    border-color: rgba(142, 197, 255, 0.55);
    box-shadow: 0 0 22px -8px rgba(142, 197, 255, 0.22);
  }

  .pk-faq-item--support:hover {
    border-color: rgba(251, 146, 60, 0.65);
    box-shadow: 0 0 24px -6px rgba(251, 146, 60, 0.28);
  }
}

.pk-faq-item[open] > .pk-faq-a {
  animation: pkFaqSlideDown 0.36s cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes pkFaqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pk-faq-a {
  padding: 0 1rem 1rem 3.35rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #a1a1aa;
}

@media (max-width: 767px) {
  .pk-faq-a {
    padding-left: 1rem;
    padding-top: 0.25rem;
  }
}

.pk-faq-item--support {
  border-color: rgba(251, 146, 60, 0.45);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.12);
}

.pk-faq-item--support .pk-faq-icon {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(251, 146, 60, 0.1);
}

.pk-faq-item--support .pk-faq-icon svg,
.pk-faq-item--support .pk-faq-icon i {
  color: #fb923c !important;
}

.pk-faq-item--support .pk-faq-q {
  color: #ffedd5;
}

.pk-faq-item--support .pk-faq-plus {
  color: #fb923c !important;
}

.pk-faq-item--support .pk-faq-a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
}

.pk-faq-support-text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.55;
}

.pk-faq-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0;
  padding: 0.5rem 0.9rem;
  flex-shrink: 0;
  border-radius: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: #0f172a;
  background: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.9);
  transition: transform 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) {
  .pk-faq-support-btn:hover {
    transform: scale(1.03);
    filter: brightness(1.06);
  }
}

/* —— Página do produto: CTAs só com SCALE (sem shimmer) —— */
.package-wrapper .pk-cta-btn {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.2s ease;
}

@media (hover: hover) {
  .package-wrapper .pk-cta-btn:hover:not(:disabled) {
    transform: scale(1.035) translateY(-1px);
  }

  .package-wrapper .pk-cta-btn.pk-cta-btn--secondary:hover {
    transform: scale(1.035) translateY(-1px);
  }
}

.package-wrapper .pk-cta-btn:active:not(:disabled) {
  transform: scale(0.98) translateY(0);
  transition-duration: 0.08s;
}

.package-wrapper .pk-cta-btn:disabled {
  transform: none;
  filter: grayscale(0.08);
}

@media (prefers-reduced-motion: reduce) {
  .package-wrapper .pk-cta-btn:hover,
  .package-wrapper .pk-cta-btn:active {
    transform: none !important;
  }
}

/* Combobox de edição — menu flutuante (não empurra o layout) */
.pk-variation-field {
  position: relative;
  min-width: 0;
}

.pk-variation-combo {
  position: relative;
  display: block;
  width: 100%;
}

.package-wrapper .pk-variation-root--open {
  z-index: 250;
}

.package-wrapper .pk-buy-selects:has(.pk-variation-root--open) {
  position: relative;
  z-index: 250;
}

.package-wrapper .pk-buy-selects,
.package-wrapper .pk-buy-field,
.package-wrapper .pk-variation-field,
.package-wrapper .pk-buy-body {
  overflow: visible;
}

.package-wrapper .pk-buy-panel-shell:has(.pk-variation-root--open) {
  position: relative;
  z-index: 40;
}

.pk-variation-select-fallback {
  display: none;
}

.pk-variation-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.45rem 2.4rem 0.45rem 0.75rem;
  box-sizing: border-box;
  list-style: none;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fafafa;
  background: #18181b;
  border: 1px solid rgba(63, 63, 70, 0.55);
  border-radius: var(--radius, 0.6rem);
  box-shadow: none;
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.pk-variation-trigger::-webkit-details-marker {
  display: none;
}

.pk-variation-trigger::marker {
  content: '';
}

.pk-variation-trigger:hover {
  border-color: rgba(142, 197, 255, 0.55);
  background: #27272a;
}

.pk-variation-trigger:focus-visible {
  border-color: #8ec5ff;
  box-shadow: 0 0 0 2px rgba(142, 197, 255, 0.35);
}

#pk-variation-root:has(#package-variation-select option:checked:not([value=""])) .pk-variation-trigger {
  background: #121213;
}

.pk-variation-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-variation-trigger .pk-variation-chevron {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  color: #8ec5ff;
  opacity: 0.95;
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 0.22s ease;
}

.pk-variation-root--open .pk-variation-trigger .pk-variation-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.pk-variation-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.28rem);
  z-index: 500;
  display: none !important;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0.35rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(142, 197, 255, 0.38);
  background: rgba(10, 11, 14, 0.98);
  backdrop-filter: blur(12px);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(102, 192, 244, 0.08);
  max-height: min(45vh, 13.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pk-variation-root--open > .pk-variation-listbox:not([hidden]),
.pk-variation-listbox.pk-variation-listbox--closing:not([hidden]) {
  display: flex !important;
}

.pk-variation-root--open > .pk-variation-listbox,
.pk-variation-listbox.pk-variation-listbox--anim-in {
  animation: pkVarPanelIn 0.28s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.pk-variation-listbox.pk-variation-listbox--closing {
  animation: pkVarPanelOut 0.24s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

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

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

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

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

/* Linha única: nome + estoque à esquerda, preço à direita. */
.pk-variation-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(142, 197, 255, 0.16);
  border-radius: 0.5rem;
  background: linear-gradient(165deg, rgba(24, 28, 36, 0.95), rgba(12, 14, 18, 0.98));
  color: #e4e4e7;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.16s cubic-bezier(0.33, 1, 0.68, 1);
}

.pk-variation-option:hover,
.pk-variation-option:focus-visible {
  background: linear-gradient(165deg, rgba(32, 42, 58, 0.98), rgba(18, 22, 30, 0.99));
  border-color: rgba(142, 197, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(102, 192, 244, 0.12);
  outline: none;
}

.pk-variation-option[aria-selected='true'] {
  background: linear-gradient(165deg, rgba(36, 52, 72, 0.98), rgba(22, 30, 44, 0.99));
  border-color: rgba(102, 192, 244, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(102, 192, 244, 0.2);
}

@media (hover: hover) {
  .pk-variation-option:hover {
    transform: translateY(-1px) scale(1.01);
  }

  .pk-variation-option:active {
    transform: scale(0.99);
  }
}

.pk-variation-option-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.pk-variation-option-name {
  max-width: 100%;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #fafafa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estoque como texto simples, não mais pílula — é o que enxuga a linha. */
.pk-variation-stock-badge {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
  white-space: nowrap;
}

.pk-variation-stock-badge--out {
  color: #fb7185;
}

.pk-variation-stock-badge--ok,
.pk-variation-stock-badge--qty {
  color: #4ade80;
}

.pk-variation-option-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  width: auto;
  flex-shrink: 0;
}

.pk-variation-price-site {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fafafa;
  white-space: nowrap;
}

.pk-variation-steam-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  white-space: nowrap;
}

.pk-variation-price-steam {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.65);
}

.pk-variation-save-pill {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.35rem;
  border-radius: 9999px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.45);
  border: 1px solid rgba(248, 113, 113, 0.45);
}

@media (min-width: 768px) {
  .package-wrapper .pk-buy-selects:not(.pk-buy-selects--solo) {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .package-wrapper .pk-buy-selects:not(.pk-buy-selects--solo) > .pk-buy-field:first-child {
    display: grid;
    grid-template-columns: auto minmax(4.75rem, 5.75rem);
    gap: 0.55rem;
    align-items: end;
    width: fit-content;
    max-width: 100%;
  }

  .package-wrapper .pk-buy-selects:not(.pk-buy-selects--solo) > .pk-buy-field:first-child .pk-buy-field-label {
    margin-bottom: 0;
    align-self: center;
  }

  .package-wrapper .pk-variation-field {
    width: 100%;
  }

  .package-wrapper .pk-variation-trigger {
    min-height: 2.75rem;
    padding: 0.5rem 2.5rem 0.5rem 0.9rem;
    font-size: 0.9375rem;
  }

  .pk-variation-listbox {
    max-height: min(62vh, 26rem);
  }

  .pk-variation-option {
    padding: 0.5rem 0.75rem;
    gap: 0.75rem;
  }
}

@media (max-width: 767px) {
  .package-wrapper .pk-buy-selects:not(.pk-buy-selects--solo) {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .package-wrapper .pk-buy-selects:not(.pk-buy-selects--solo) > .pk-buy-field:first-child {
    display: grid;
    grid-template-columns: minmax(4.75rem, auto) minmax(0, 1fr);
    gap: 0.45rem;
    align-items: end;
  }

  .package-wrapper .pk-buy-selects:not(.pk-buy-selects--solo) > .pk-buy-field:first-child .pk-buy-field-label {
    margin-bottom: 0;
    align-self: center;
  }

  .pk-variation-listbox {
    max-height: min(52vh, 17rem);
  }

  .pk-variation-option {
    gap: 0.5rem;
    min-height: 3.25rem;
    padding: 0.4rem 0.6rem;
  }

  .pk-variation-steam-wrap {
    flex-shrink: 0;
  }
}

.pk-variation-root--picked .pk-variation-trigger {
  animation: pkVarPickFlash 0.45s ease;
}

@keyframes pkVarPickFlash {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  35% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 0 2px rgba(142, 197, 255, 0.45),
      0 0 28px rgba(142, 197, 255, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-variation-root--open > .pk-variation-listbox,
  .pk-variation-listbox.pk-variation-listbox--anim-in,
  .pk-variation-listbox.pk-variation-listbox--closing {
    animation: none;
  }

  .pk-variation-root--picked .pk-variation-trigger {
    animation: none;
  }

  .pk-variation-option:hover {
    transform: none !important;
  }

  .pk-variation-option:active {
    transform: none;
  }

  .pk-step:hover,
  .pk-spot-card:hover {
    animation: none !important;
    transform: none !important;
  }

  .pk-faq-item:hover {
    transform: none !important;
  }

  .pk-faq-item[open] > .pk-faq-a {
    animation: none;
  }
}

.pk-sidebar-card {
  background: #18181b;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.pk-sidebar-card--pay {
  padding: 1rem 1.05rem !important;
}

/* Sidebar — ícones por bloco (cores leves) */
.pk-sidebar-card__icon {
  display: block;
  flex-shrink: 0;
}

.pk-sidebar-card__icon,
.pk-sidebar-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pk-sidebar-card--delivery {
  --pk-side-accent: #e8a86a;
  --pk-side-accent-deep: #a67c52;
}

.pk-sidebar-card--delivery .pk-sidebar-card__icon {
  color: var(--pk-side-accent);
}

.pk-sidebar-card--delivery .pk-sidebar-card__icon svg {
  stroke: var(--pk-side-accent);
  color: var(--pk-side-accent);
}

.pk-sidebar-card--security {
  --pk-side-accent: #7dcea0;
  --pk-side-accent-deep: #4ade80;
}

.pk-sidebar-card--security .pk-sidebar-card__icon {
  color: var(--pk-side-accent);
}

.pk-sidebar-card--security .pk-sidebar-card__icon svg {
  stroke: var(--pk-side-accent);
  color: var(--pk-side-accent);
}

.pk-sidebar-card--pay {
  --pk-side-accent: #b8a0f0;
  --pk-side-accent-deep: #a78bfa;
}

.pk-sidebar-card--pay .pk-sidebar-card__icon {
  color: var(--pk-side-accent);
}

.pk-sidebar-card--pay .pk-sidebar-card__icon svg {
  stroke: var(--pk-side-accent);
  color: var(--pk-side-accent);
}

.pk-pay-methods {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
}

.pk-pay-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.pk-pay-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.32rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(142, 197, 255, 0.28);
  background: rgba(142, 197, 255, 0.06);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e4e4e7;
}

.pk-pay-pill--pix {
  width: 100%;
}

.pk-sidebar-card--pay .pk-pay-pill {
  border: 1px solid rgba(184, 160, 240, 0.32);
  background: rgba(184, 160, 240, 0.08);
}

.pk-sidebar-card--pay .pk-pay-pill__icon {
  color: var(--pk-side-accent);
}

.pk-sidebar-card--pay .pk-pay-pill__icon svg {
  stroke: var(--pk-side-accent);
  color: var(--pk-side-accent);
}

.pk-pay-pill-label {
  line-height: 1;
}

@media (hover: hover) {
  .pk-sidebar-card--delivery:hover {
    transform: scale(1.02);
    border-color: rgba(232, 168, 106, 0.65);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px rgba(232, 168, 106, 0.35);
  }

  .pk-sidebar-card--security:hover {
    transform: scale(1.02);
    border-color: rgba(125, 206, 160, 0.65);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px rgba(125, 206, 160, 0.35);
  }

  .pk-sidebar-card--pay:hover {
    transform: scale(1.02);
    border-color: rgba(184, 160, 240, 0.65);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px rgba(184, 160, 240, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-sidebar-card:hover {
    transform: none;
  }
}

/* Buy panel (produto — inspiração Shadow Keys) */
.pk-buy-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .pk-buy-title {
    font-size: 1.75rem;
  }
}

.pk-buy-selects {
  display: grid;
  grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
  gap: 0.45rem 0.65rem;
  align-items: start;
  position: relative;
}

.pk-buy-selects--solo {
  grid-template-columns: minmax(7rem, 0.38fr);
}

.pk-buy-field {
  min-width: 0;
}

.pk-buy-field-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.pk-buy-static {
  display: flex;
  align-items: center;
  min-height: 2.55rem;
  padding: 0 0.85rem;
  border-radius: var(--radius, 0.6rem);
  border: 1px solid rgba(63, 63, 70, 0.55);
  background: #18181b;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fafafa;
}

.package-wrapper .pk-variation-trigger {
  min-height: 2.55rem;
  padding: 0.45rem 2.4rem 0.45rem 0.85rem;
  font-size: 0.875rem;
}

.pk-buy-selects .pk-variation-field {
  margin-bottom: 0;
}

.pk-buy-pricing {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pk-buy-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}

.pk-buy-price {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.pk-buy-price--pending:empty {
  display: none;
}

.pk-buy-discount-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.pk-buy-discount-group.hidden {
  display: none;
}

.pk-buy-compare {
  margin: 0;
  font-size: 0.9375rem;
  color: #a1a1aa;
  text-decoration: line-through;
}

.pk-buy-off {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.38rem;
  border-radius: 9999px;
  border: 1px solid rgba(142, 197, 255, 0.45);
  background: rgba(142, 197, 255, 0.1);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8ec5ff;
}
.pk-buy-off-icon {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
}

.pk-buy-savings {
  margin: 0;
  font-size: 0.75rem;
  color: #a1a1aa;
}

.pk-buy-savings.hidden {
  display: none;
}

.pk-buy-pix {
  margin: 0;
  font-size: 0.75rem;
  color: #a1a1aa;
}

.pk-buy-steam-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  align-self: flex-start;
  margin: 0;
  padding: 0.22rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(142, 197, 255, 0.55);
  background: rgba(142, 197, 255, 0.06);
  font-size: 0.5625rem;
  font-weight: 700;
  color: #8ec5ff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pk-buy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.pk-live-viewers {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0;
  flex-shrink: 0;
  max-width: 55%;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  color: #a1a1aa;
  text-align: right;
}

.pk-live-viewers__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: pkLivePulse 1.8s ease-in-out infinite;
}

.pk-live-viewers__text {
  white-space: nowrap;
}

@keyframes pkLivePulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}

@media (max-width: 767px) {
  .pk-live-viewers {
    font-size: 0.625rem;
    max-width: 52%;
  }

  .pk-live-viewers__dot {
    width: 0.4rem;
    height: 0.4rem;
    animation: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-live-viewers__dot {
    animation: none;
  }
}

.pk-buy-steam-badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #8ec5ff;
}

.pk-buy-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin-top: 0.05rem;
}

/* Sem shimmer no tema CentralCart nestes botões */
.package-wrapper .pk-buy-actions .btn-primary::before,
.package-wrapper .pk-buy-actions .btn-primary::after,
.package-wrapper .pk-buy-cart-icon::after {
  display: none !important;
  animation: none !important;
}

.pk-buy-cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #020617;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

@media (hover: hover) {
  .pk-buy-cart-icon:hover:not(:disabled) {
    border-color: #f4f4f5;
    background: #f4f4f5;
    filter: brightness(1.06);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
  }
}

.pk-buy-cart-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  appearance: none;
  border: 1px solid rgba(126, 232, 161, 0.65);
  background-color: var(--package-buy-green);
  background-image: linear-gradient(
    135deg,
    var(--package-buy-green-soft) 0%,
    var(--package-buy-green-strong) 100%
  );
  color: #06130b;
  box-shadow: none;
}

.package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn .pk-cta-btn-inner,
.package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn .pk-cta-btn-inner i,
.package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn .pk-cta-btn-inner svg {
  color: inherit;
}

@media (hover: hover) {
  .package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn:hover:not(:disabled) {
    background-color: var(--package-buy-green-hover);
    background-image: linear-gradient(
      135deg,
      var(--package-buy-green-hover) 0%,
      var(--package-buy-green-hover-strong) 100%
    );
    border-color: rgba(143, 240, 175, 0.85);
    color: #06130b;
    box-shadow: none;
  }
}

.package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn:focus-visible {
  outline: 2px solid rgba(134, 239, 172, 0.62);
  outline-offset: 2px;
}

.package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.package-page #purchase-button.pk-buy-primary.btn-primary.pk-cta-btn:disabled {
  border-color: rgba(134, 239, 172, 0.28);
  background-color: rgba(134, 239, 172, 0.18);
  background-image: none;
  color: rgba(5, 46, 22, 0.72);
  box-shadow: none;
}

.pk-buy-restock {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #8ec5ff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .pk-buy-restock:hover {
    color: #a8d4ff;
  }
}

.pk-buy-restock.hidden {
  display: none;
}

.pk-buy-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.75rem;
  color: #a1a1aa;
}

.pk-buy-trust {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.2rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(63, 63, 70, 0.6);
}

.pk-buy-trust__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #a1a1aa;
}

.pk-buy-trust__icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #8ec5ff;
}

/* Mobile: scroll suave — menos repaint, sem animações decorativas */
@media (max-width: 767px) {
  .package-wrapper {
    -webkit-overflow-scrolling: touch;
  }

  .package-wrapper .pk-desc-faq,
  .package-wrapper .pk-desc-steps,
  .package-wrapper .package-list {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }

  .package-wrapper .pkg-similar-section,
  .package-wrapper .pkg-similar-section .pkg-carousel-track {
    content-visibility: visible;
    contain: none;
  }

  .pk-variation-listbox {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #121213;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .pk-variation-root--open > .pk-variation-listbox,
  .pk-variation-listbox.pk-variation-listbox--anim-in {
    animation: pkVarPanelInLite 0.16s ease-out both;
  }

  .pk-variation-listbox.pk-variation-listbox--closing {
    animation: pkVarPanelOutLite 0.14s ease-in forwards;
  }

  .pk-variation-root--picked .pk-variation-trigger,
  .pk-faq-item[open] > .pk-faq-a {
    animation: none !important;
  }

  .pk-spot-card,
  .pk-faq-item,
  .pk-step,
  .pk-sidebar-card,
  .pk-variation-option,
  .pk-faq-plus,
  .pk-spot-support-btn,
  .pk-buy-cart-icon,
  .pk-cta-btn,
  .pk-buy-restock {
    transition: none !important;
  }

  .pk-variation-trigger .pk-variation-chevron {
    transition: transform 0.16s ease;
  }

  .pk-spot-card,
  .pk-sidebar-card {
    box-shadow: none;
  }

  .pk-spot-card:hover,
  .pk-faq-item:hover,
  .pk-step:hover,
  .pk-sidebar-card:hover,
  .pk-variation-option:hover,
  .pk-variation-option:active {
    transform: none !important;
    box-shadow: none !important;
  }

  .pk-step-ring {
    box-shadow: 0 0 0 2px rgba(142, 197, 255, 0.35);
  }

  .pk-step-connector {
    box-shadow: none;
  }
}

/* ─── Steam gallery (template loja completa 2) ─── */
/* Card da galeria: mídia rente às bordas, o card arredonda e recorta. */
.steam-media-gallery {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(63, 63, 70, 0.55);
  /* Fundo opaco (sem backdrop-filter): um blur de fundo num container com VÍDEO
     tocando dentro força o navegador a recalcular o blur a cada frame — trava feio
     no mobile. O fundo já é praticamente coberto pelo palco, então não faz falta. */
  background: #1a1a1e;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  padding: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  contain: layout paint;
}

/* Palco: ancora setas e barra de progresso por cima da mídia. */
.steam-viewer-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #18181b;
}

.steam-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.steam-viewer-stage:hover .steam-gallery-nav,
.steam-gallery-nav:focus-visible {
  opacity: 1;
}

.steam-gallery-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.steam-gallery-nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.steam-gallery-nav--prev {
  left: 0.5rem;
}

.steam-gallery-nav--next {
  right: 0.5rem;
}

/* Progresso do próprio trailer — não é slideshow automático. */
.steam-gallery-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.steam-gallery-progress.is-hidden {
  display: none;
}

.steam-gallery-progress__bar {
  height: 100%;
  width: 0;
  background: #00b8db;
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .steam-gallery-nav {
    transition: none;
  }

  .steam-gallery-progress__bar {
    transition: none;
  }
}

@media (min-width: 768px) {
  .package-wrapper .pk-product-banner .steam-media-gallery {
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .package-wrapper .pk-product-banner .steam-viewer-stage,
  .package-wrapper .pk-product-banner #steam-viewer {
    flex: 1 1 auto;
    min-height: 0;
  }

  .package-wrapper .pk-product-banner #steam-viewer > div {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
  }

  .package-wrapper .pk-product-banner #steam-viewer video,
  .package-wrapper .pk-product-banner #steam-viewer img,
  .package-wrapper .pk-product-banner #steam-viewer iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
  }

  .package-wrapper .pk-product-banner .steam-media-gallery__fallback {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

.steam-media-gallery__fallback {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.65rem;
  background: #18181b;
}

#steam-media-gallery img,
#steam-media-gallery video,
#steam-media-gallery iframe {
  max-width: 100%;
}

#steam-viewer {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 0;
  flex: 0 0 auto;
  contain: layout paint;
}

#steam-viewer > div {
  width: 100%;
  max-width: 100%;
}

.package-page #steam-viewer > .package-trailer,
.package-page #steam-viewer > .package-video,
.package-page #steam-viewer > .product-trailer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 0;
  border-radius: 0;
  contain: layout paint;
  opacity: 1;
  transform: none;
  transition: none;
}

#steam-viewer video,
#steam-viewer img,
#steam-viewer iframe {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #000;
  display: block;
  border: 0;
  transform: none;
  transition: none;
  filter: none;
}

/* Banner do produto sobreposto ao trailer até ele estar pronto para tocar. */
.package-page #steam-viewer .steam-media-fallback-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transition: opacity 520ms ease;
}

.package-page #steam-viewer .steam-media-fallback-overlay.is-gone {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .package-page #steam-viewer .steam-media-fallback-overlay {
    transition: none;
  }
}

/* Faixa de miniaturas colada na mídia, como na referência. */
.steam-gallery-thumbs {
  display: flex;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0.5rem;
  overflow-x: auto;
  background: #18181b;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.steam-gallery-thumbs::-webkit-scrollbar {
  display: none;
  height: 0;
}

/* Drag por mouse é só desktop — no mobile o touch rola nativamente (sem JS,
   sem travar o gesto com touch-action) igual sempre foi. */
@media (min-width: 768px) {
  .steam-gallery-thumbs {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .steam-gallery-thumbs.is-dragging {
    cursor: grabbing;
  }
}

.steam-gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  /* Largura/altura fixas em border-box pra bater exatamente com o skeleton
     SSR (pages/package.html define os placeholders com o mesmo width/height
     inline). Sem isso, o botão real ficava só do tamanho da img (3.75rem) e
     a borda de 2px somava por fora, então a faixa de miniaturas — e com ela
     o card do trailer e o painel de compra ao lado, que estica pra bater a
     mesma altura — cresciam ~4px assim que o JS trocava o skeleton pelas
     miniaturas de verdade. */
  width: 5rem;
  height: 3.75rem;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid rgba(63, 63, 70, 0.55);
  border-radius: 0.25rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: border-color 0.18s ease;
  background: rgba(0, 0, 0, 0.35);
}

.steam-gallery-thumb:hover {
  border-color: rgba(142, 197, 255, 0.5);
}

.steam-gallery-thumb.is-active {
  border-color: #8ec5ff;
}

.steam-gallery-thumb img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

.steam-gallery-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.steam-gallery-rawg {
  margin: 0;
  padding: 0 0.5rem 0.4rem;
  font-size: 0.65rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.35);
  text-align: right;
}

.steam-gallery-rawg a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.steam-gallery-rawg a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.steam-requirements-wrap {
  margin-bottom: 1rem;
}

.steam-req-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: #18181b;
  overflow: hidden;
}

.steam-req-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.15rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.steam-req-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

.steam-req-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.steam-req-chevron {
  width: 1.15rem;
  height: 1.15rem;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.28s ease;
  flex-shrink: 0;
}

.steam-req-content {
  max-height: 0;
  transition: max-height 0.32s ease;
  overflow: hidden;
}

.steam-req-open .steam-req-chevron {
  transform: rotate(180deg);
}

.steam-req-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0 1.15rem;
}

.steam-req-open .steam-req-grid {
  padding-bottom: 1.15rem;
}

@media (min-width: 640px) {
  .steam-req-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.steam-req-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 193, 77, 0.85);
}

.steam-req-label--rec {
  color: rgba(134, 239, 172, 0.85);
}

.steam-req-list {
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);
}

.steam-req-list strong {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.steam-req-list ul {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
}

.steam-req-list li {
  margin: 0.2rem 0;
}

.steam-req-list br + br {
  display: none;
}