/* Correções visuais pontuais ("pixel quebrado"). Carregado por último no layout. */

/*
  content-visibility:auto (kingdom-scroll-perf.css) implica paint containment:
  hairline/sombra externa dos painéis PS/Xbox era recortada nas bordas retas e
  sobravam só os arcos dos cantos. A margem de clip mantém a otimização.
*/
body.kingdom-is-home .home-category-block,
body.kingdom-is-home .home-trust-section,
.kb-footer-wrap {
  overflow-clip-margin: 64px;
}

@supports not (overflow-clip-margin: 1px) {
  body.kingdom-is-home .home-category-block {
    content-visibility: visible;
  }
}

@supports (-moz-appearance: none) {
  body.kingdom-is-home .home-category-block {
    content-visibility: visible;
  }
}

/* Carrosséis coverflow: cards das pontas somem em degradê em vez de corte seco */
.category-carousel-strip .kb-coverflow-track.category-carousel-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

@media (min-width: 768px) {
  .category-carousel-strip .kb-coverflow-track.category-carousel-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  }
}

/* Chromium deixava de pintar a imagem dos cards laterais (opacity + filter + backface hidden) */
.kb-coverflow-track > .package-carousel-slide .package-card,
.kb-coverflow-track > .package-carousel-slide .package-card__image {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/*
  F5 na home: até o kingdom-carousels.js ligar, o trilho SSR herdava justify-content:center
  (kingdom-home-extra) e, transbordando, mostrava o "meio" da lista deslocado. O 1º paint já
  nasce na pose final: 3º card no centro (initialCenterIndex) — 50% do trilho menos 2,5 cards
  e 2 gaps, sem depender da largura do breakpoint.
*/
body.kingdom-is-home .kb-coverflow-shell[data-category-carousel]:not([data-kb-carousel-bound]):not([data-similar-carousel]):not([data-ps-trailer-carousel]) > .kb-coverflow-track:has(> .package-carousel-slide:nth-child(5)) {
  justify-content: flex-start;
  scroll-snap-type: none;
}
body.kingdom-is-home .kb-coverflow-shell[data-category-carousel]:not([data-kb-carousel-bound]):not([data-similar-carousel]):not([data-ps-trailer-carousel]) > .kb-coverflow-track:has(> .package-carousel-slide:nth-child(5)) > .package-carousel-slide:first-child {
  margin-inline-start: 50%;
}
body.kingdom-is-home .kb-coverflow-shell[data-category-carousel]:not([data-kb-carousel-bound]):not([data-similar-carousel]):not([data-ps-trailer-carousel]) > .kb-coverflow-track:has(> .package-carousel-slide:nth-child(5)) > .package-carousel-slide {
  transform: translateX(calc(-250% - 2 * var(--kb-package-card-gap, 1.15rem))) !important;
}
/* Pose coverflow já no 1º paint (o critical deixa neutro até data-kb-cf-ready e a troca "pulava").
   Combos (.kbb-card) ficam planos no estado final, então ficam fora da pose. */
body.kingdom-is-home .kb-coverflow-shell[data-category-carousel]:not([data-kb-carousel-bound]):not([data-similar-carousel]):not([data-ps-trailer-carousel]) > .kb-coverflow-track:has(> .package-carousel-slide:nth-child(5)) > .package-carousel-slide .package-card:not(.kbb-card),
body.kingdom-is-home .kb-coverflow-shell[data-kb-carousel-bound]:not([data-kb-cf-ready]):not([data-similar-carousel]):not([data-ps-trailer-carousel]) > .kb-coverflow-track > .package-carousel-slide.is-snap-side .package-card:not(.kbb-card) {
  transform: translate3d(0, var(--kb-cf-side-y), 0) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 var(--kb-hairline, 1px) rgb(255 255 255 / 0.08) !important;
}
body.kingdom-is-home .kb-coverflow-shell[data-category-carousel]:not([data-kb-carousel-bound]):not([data-similar-carousel]):not([data-ps-trailer-carousel]) > .kb-coverflow-track:has(> .package-carousel-slide:nth-child(5)) > .package-carousel-slide:nth-child(3) .package-card:not(.kbb-card),
body.kingdom-is-home .kb-coverflow-shell[data-kb-carousel-bound]:not([data-kb-cf-ready]):not([data-similar-carousel]):not([data-ps-trailer-carousel]) > .kb-coverflow-track > .package-carousel-slide.is-snap-center .package-card:not(.kbb-card) {
  transform: translate3d(0, var(--kb-cf-center-y), 0) !important;
  opacity: 1 !important;
  box-shadow:
    0 0 0 var(--kb-hairline, 1px) rgb(255 255 255 / 0.14),
    0 14px 28px rgb(0 0 0 / 0.4) !important;
}

/* Setas do carrossel nascem [hidden] e só aparecem no bind — já mostra quando há cards para rolar */
body.kingdom-is-home .kb-coverflow-shell[data-category-carousel]:not([data-kb-carousel-bound]):not([data-similar-carousel]):not([data-ps-trailer-carousel]):has(> .kb-coverflow-track > .package-carousel-slide:nth-child(5)) > .popular-categories-nav[hidden] {
  display: flex;
}

/*
  Hero da home antes do main.js: o balão SSR já traz o 1º slide mas nasce [hidden], e os pontos
  são criados via JS. Mesmo balão e 3 pontos (1º ativo) desenhados em CSS até data-kb-hero-bound.
*/
.kingdom-home-hero[data-hero-rotator]:not([data-kb-hero-bound]) .kingdom-home-hero__balloon[hidden]:not(.is-disabled) {
  opacity: 1 !important;
  visibility: visible !important;
}
.kingdom-home-hero[data-hero-rotator]:not([data-kb-hero-bound]):has(.kingdom-home-hero__stage > :nth-child(3):last-child) .kingdom-home-hero__dots:empty::before,
.kingdom-home-hero[data-hero-rotator]:not([data-kb-hero-bound]):has(.kingdom-home-hero__stage > :nth-child(3):last-child) .kingdom-home-hero__dots:empty::after {
  content: "";
  flex-shrink: 0;
  height: 0.45rem;
  border-radius: 999px;
}
.kingdom-home-hero[data-hero-rotator]:not([data-kb-hero-bound]):has(.kingdom-home-hero__stage > :nth-child(3):last-child) .kingdom-home-hero__dots:empty::before {
  width: 1.15rem;
  background: hsl(var(--primary));
}
.kingdom-home-hero[data-hero-rotator]:not([data-kb-hero-bound]):has(.kingdom-home-hero__stage > :nth-child(3):last-child) .kingdom-home-hero__dots:empty::after {
  width: 0.45rem;
  margin-right: 0.85rem;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0.85rem 0 0 rgba(255, 255, 255, 0.35);
}

/* Combos: com o contêiner encostado na borda da tela, as setas (-1.1rem) saíam 1px da viewport */
@media (max-width: 1535px) {
  .kbx .kbx__arrow--prev { left: -0.35rem; }
  .kbx .kbx__arrow--next { right: -0.35rem; }
}

/* Mobile: copyright do rodapé ficava por baixo do botão flutuante do WhatsApp (o FAB é filho de <html>, fora do body) */
@media (max-width: 767px) {
  :root:has(.kb-social-fab__btn--whatsapp) .kb-footer__copy {
    max-width: min(22rem, calc(100% - 8.5rem));
  }
}

/* Avaliações: marquee em CSS puro, roda desde o 1º paint. A 2ª cópia SSR (feedbacks.html) fecha o loop em -50%;
   o padding final = gap, para -50% cair exatamente no início da 2ª cópia. ~70px/s como o marquee JS antigo. */
@keyframes kb-reviews-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.kb-reviews__carousel[data-kb-css-marquee] {
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.kb-reviews__carousel[data-kb-css-marquee] > .kb-reviews__track {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  gap: 0.75rem !important;
  padding-inline: 0 0.75rem !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  will-change: transform;
  animation: kb-reviews-marquee calc(var(--kb-rv-n, 16) * 4.34s) linear infinite;
}
.kb-reviews__carousel[data-kb-css-marquee] .kb-reviews__slide {
  flex: 0 0 min(18.25rem, calc(100vw - 3.5rem)) !important;
  width: min(18.25rem, calc(100vw - 3.5rem)) !important;
  max-width: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .kb-reviews__carousel[data-kb-css-marquee]:hover > .kb-reviews__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-reviews__carousel[data-kb-css-marquee] { overflow-x: auto !important; }
  .kb-reviews__carousel[data-kb-css-marquee] > .kb-reviews__track { animation: none; }
  .kb-reviews__carousel[data-kb-css-marquee] .kb-reviews__slide[data-kb-clone] { display: none !important; }
}

/* Ícones do 1º paint (<i data-lucide>, kingdom-icons-firstpaint.css): mesmas medidas das regras que só miravam o svg */
.kb-cat-hero__meta i[data-lucide] { width: 0.9rem; height: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.kb-cat-bar__search i[data-lucide] { position: absolute; left: 0.85rem; width: 1rem; height: 1rem; color: rgba(255, 255, 255, 0.5); pointer-events: none; }
.kb-cat-bar__sort i[data-lucide] { position: absolute; right: 0.7rem; width: 0.95rem; height: 0.95rem; color: rgba(255, 255, 255, 0.6); pointer-events: none; }
.kb-vale__btn i[data-lucide] { width: 0.95rem; height: 0.95rem; }

/* Top 5: sem preço no SSR (kingdom-top5-prices.js busca depois) o rodapé pintava vazio; skeleton igual ao dos cards.
   Some sozinho aos 8s se a busca falhar (o JS só remove o atributo quando preenche). */
@keyframes kb-top5-skel-out { to { opacity: 0; } }
.home-top5-card[data-top5-needs-price] .home-top5-card__prices:not(:has(> *))::before {
  content: "";
  display: inline-block;
  width: 5.1rem;
  max-width: 100%;
  height: 1.2rem;
  border-radius: 0.35rem;
  background-color: rgb(255 255 255 / 0.09);
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.13) 50%, rgb(255 255 255 / 0) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: kb-price-skel 1.25s linear infinite, kb-top5-skel-out 0.3s 8s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .home-top5-card[data-top5-needs-price] .home-top5-card__prices:not(:has(> *))::before { animation: kb-top5-skel-out 0.3s 8s forwards; }
}