﻿
.roblox-ambient{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 88% 58% at 50% -4%, hsl(var(--primary) / 0.28), transparent 60%),
radial-gradient(ellipse 62% 48% at 48% 38%, hsl(var(--primary) / 0.12), transparent 64%),
radial-gradient(ellipse 48% 42% at 94% 22%, hsl(var(--primary) / 0.14), transparent 58%),
radial-gradient(ellipse 52% 40% at 6% 68%, hsl(var(--primary) / 0.1), transparent 60%),
radial-gradient(ellipse 70% 36% at 55% 100%, hsl(var(--primary) / 0.08), transparent 55%);
}
.roblox-ambient::before{
content: '';
position: absolute;
width: min(68vw, 52rem);
height: min(56vw, 44rem);
top: -16%;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle closest-side, hsl(var(--primary) / 0.28), hsl(var(--primary) / 0.08) 52%, transparent 74%);
opacity: 0.85;
animation: kb-ambient-pulse 7.5s ease-in-out infinite;
}
.roblox-ambient::after{
content: '';
position: absolute;
width: min(50vw, 40rem);
height: min(50vw, 40rem);
top: 16%;
right: -14%;
border-radius: 50%;
background: radial-gradient(circle closest-side, hsl(var(--primary) / 0.36), transparent 70%);
opacity: 0.9;
animation: kb-ambient-drift 11s ease-in-out infinite;
}
@keyframes kb-ambient-pulse{
0%, 100%{ opacity: 0.85; transform: translateX(-50%) scale(1); }
50%{ opacity: 1; transform: translateX(-50%) scale(1.06); }
}
@keyframes kb-ambient-drift{
0%, 100%{ opacity: 0.75; transform: translate(0, 0) scale(1); }
50%{ opacity: 0.95; transform: translate(-4%, 3%) scale(1.08); }
}
@media (max-width: 639px){
.roblox-ambient{
background:
radial-gradient(ellipse 100% 48% at 50% -2%, hsl(var(--primary) / 0.5), transparent 56%),
radial-gradient(ellipse 80% 46% at 50% 38%, hsl(var(--primary) / 0.24), transparent 62%),
radial-gradient(ellipse 62% 38% at 100% 28%, hsl(var(--primary) / 0.22), transparent 55%),
radial-gradient(ellipse 64% 34% at 0% 70%, hsl(var(--primary) / 0.18), transparent 58%),
radial-gradient(ellipse 70% 32% at 45% 100%, hsl(var(--primary) / 0.16), transparent 55%);
}
.roblox-ambient::before{ width: min(96vw, 32rem); height: min(76vw, 26rem); opacity: 0.95; }
.roblox-ambient::after{ width: min(78vw, 26rem); height: min(78vw, 26rem); top: 26%; right: -22%; opacity: 0.7; }
}
/* kb-grid-bg removed â€” tiled squares + sparkle dots looked like debug/grid overlay */
.kb-grid-bg{ display: none !important; }
.kb-ambient-glow{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 12% 30%, hsl(var(--primary) / 0.2), transparent 28%),
radial-gradient(circle at 88% 48%, hsl(var(--primary) / 0.18), transparent 30%),
radial-gradient(circle at 50% 85%, hsl(var(--primary) / 0.14), transparent 34%);
animation: kb-ambient-glow-breathe 9s ease-in-out infinite;
}
@keyframes kb-ambient-glow-breathe{
0%, 100%{ opacity: 0.7; }
50%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
.roblox-ambient::before,
.roblox-ambient::after,
.kb-ambient-glow{
animation: none !important;
}
}
@media (max-width: 767px){
.roblox-ambient::before,
.roblox-ambient::after,
.kb-ambient-glow{
animation: none !important;
}
.kb-ambient-glow{ opacity: 0.55; }
/* Do NOT use content-visibility here — contain-intrinsic-size: 1px collapses
   Top 5 / category rails into a narrow left column until (or unless) layout recovers. */
}
.custom-bg-mask{ mask-image: linear-gradient(rgb(var(--background)),rgba(0,0,0,0.3),rgb(0,0,0,0));}
.popular-categories-carousel{ position: relative; display: flex; align-items: center; gap: 0.35rem; width: 100%; overflow: visible;}
.popular-categories-carousel.is-fitting .popular-categories-grid{ justify-content: center; scroll-snap-type: none; padding-inline: 0; margin-inline: 0; scroll-padding-inline: 0;}
.popular-categories-grid{ display: flex; gap: 0.85rem; flex: 1 1 auto; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: 0.25rem; padding-block: 0.35rem 0.5rem; cursor: grab; touch-action: pan-x pan-y; overscroll-behavior-y: auto; overflow-anchor: none;}
.popular-categories-grid.is-dragging,.popular-categories-grid.is-wrapping{ cursor: grabbing; scroll-behavior: auto !important; scroll-snap-type: none !important; user-select: none; touch-action: pan-x;}
.popular-categories-grid::-webkit-scrollbar{ display: none;}
.popular-categories-nav{ flex: 0 0 auto; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: 999px; border: 0; background: rgba(6,10,18,0.88); color: hsl(var(--primary)); box-shadow: 0 0 0 var(--kb-hairline) hsl(var(--primary) / 0.45),0 0 16px -2px hsl(var(--primary) / 0.4); transition: opacity 0.2s ease,background-color 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease;}
.popular-categories-nav:hover:not(:disabled){ box-shadow: 0 0 0 var(--kb-hairline) hsl(var(--primary) / 0.8),0 0 16px -2px hsl(var(--primary) / 0.4); background: rgba(10,16,28,0.96); transform: scale(1.04);}
.popular-categories-nav:disabled{ opacity: 0.35; cursor: default;}
.popular-categories-nav[hidden]{ display: none !important;}
.popular-categories-nav__icon{ width: 1.15rem; height: 1.15rem; pointer-events: none;}
@media (max-width: 767px){ .popular-categories-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 2.1rem; height: 2.1rem; z-index: 4;}
.popular-categories-nav--prev{ left: 0.15rem;}
.popular-categories-nav--next{ right: 0.15rem;}
.popular-categories-nav:hover:not(:disabled){ transform: translateY(-50%) scale(1.04);}
}
.popular-categories-grid .popular-category-card,
.popular-categories-carousel .popular-category-card{ position: relative; display: block; flex: 0 0 calc((100% - 1.7rem) / 3); width: calc((100% - 1.7rem) / 3); max-width: none; min-width: 9.5rem; aspect-ratio: 16 / 10; overflow: visible; border: none; background: transparent; scroll-snap-align: start; scroll-snap-stop: normal; transform: none !important; opacity: 1; filter: none !important; box-shadow: none; z-index: 1;}
.popular-categories-grid .popular-category-card.is-snap-center,
.popular-categories-carousel .popular-category-card.is-snap-center{ z-index: 3;}
.popular-category-card__face{ position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 0.875rem; border: 0; background: rgb(var(--background)); box-shadow: 0 0 0 var(--kb-hairline) hsl(var(--primary) / 0.32), 0 8px 22px rgb(0 0 0 / 0.26); transform-origin: center center; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),opacity 0.3s ease,box-shadow 0.3s ease;}
.popular-category-card:hover .popular-category-card__face{ box-shadow: 0 0 0 var(--kb-hairline) hsl(var(--primary) / 0.55), 0 8px 22px rgb(0 0 0 / 0.26);}
.popular-category-card:focus-visible{ outline: none;}
.popular-category-card:focus-visible .popular-category-card__face{ box-shadow: 0 0 0 var(--kb-hairline) hsl(var(--primary) / 0.7), 0 0 0 calc(var(--kb-hairline) * 2) rgb(var(--background)), 0 0 0 calc(var(--kb-hairline) * 3) hsl(var(--primary) / 0.35);}
@media (max-width: 639px){ .popular-categories-grid.kb-coverflow-track{ gap: 0.75rem; scroll-padding-inline: 16vw; padding-inline: 16vw; padding-block: 1.35rem 1.25rem; scroll-snap-type: x proximity;}
.popular-categories-carousel.has-overflow .popular-categories-grid{ justify-content: flex-start;}
.popular-categories-grid .popular-category-card,
.popular-categories-carousel .popular-category-card{ flex: 0 0 68vw; width: 68vw; max-width: 22rem; min-width: 0; scroll-snap-align: center; scroll-snap-stop: normal;}
.kb-coverflow-track > .popular-category-card .popular-category-card__face{ transform: translate3d(0,var(--kb-cf-side-y),0); opacity: var(--kb-cf-side-opacity);}
.kb-coverflow-track > .popular-category-card .popular-category-card__img{ transform: scale(var(--kb-cf-img-side,1)); transform-origin: center center; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);}
.kb-coverflow-track > .popular-category-card.is-snap-center .popular-category-card__face{ transform: translate3d(0,var(--kb-cf-center-y),0); opacity: 1; box-shadow: 0 0 0 var(--kb-hairline) hsl(var(--primary) / 0.65),0 10px 22px rgb(0 0 0 / 0.28);}
.kb-coverflow-track > .popular-category-card.is-snap-center .popular-category-card__img{ transform: scale(var(--kb-cf-img-center,1.04));}
.kb-coverflow-track > .popular-category-card:not(.is-snap-center) .popular-category-card__face:hover{ transform: translate3d(0,var(--kb-cf-side-y),0);}
.kb-coverflow-track > .popular-category-card.is-snap-center .popular-category-card__face:hover{ transform: translate3d(0,var(--kb-cf-center-y),0);}
.popular-categories-carousel.is-fitting .kb-coverflow-track > .popular-category-card .popular-category-card__face{ transform: none !important; opacity: 1 !important; box-shadow: 0 0 0 var(--kb-hairline) hsl(var(--primary) / 0.32), 0 8px 22px rgb(0 0 0 / 0.28);}
.popular-categories-carousel.is-fitting .kb-coverflow-track > .popular-category-card .popular-category-card__img{ transform: none !important;}
}
@media (min-width: 640px) and (max-width: 1023px){ .popular-categories-grid .popular-category-card,
.popular-categories-carousel .popular-category-card{ flex: 0 0 calc((100% - 0.85rem) / 2); width: calc((100% - 0.85rem) / 2); min-width: 11rem;}
.popular-category-card__face{ border-radius: 0.875rem;}
}
@media (min-width: 1024px){ .popular-categories-grid{ gap: 1rem;}
.popular-categories-grid .popular-category-card,
.popular-categories-carousel .popular-category-card{ flex: 0 0 calc((100% - 2rem) / 3); width: calc((100% - 2rem) / 3); min-width: 14rem;}
.popular-category-card__face{ border-radius: 1rem;}
}
.popular-categories-carousel.is-fitting .popular-category-card{ flex: 1 1 0; width: auto; min-width: 0; max-width: none;}
.popular-category-card__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; pointer-events: none; transition: transform 0.35s ease;}
.popular-category-card:hover .popular-category-card__img{ transform: scale(1.04);}
@media (prefers-reduced-motion: reduce){ .popular-category-card__face{ transition-duration: 0.35s;}
}
@media (max-width: 767px){
}
.home-hero-shell{ position: relative; z-index: 0;}
.home-hero-shell::before{ content: ''; position: absolute; left: 50%; top: 50%; width: 128%; height: 145%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(ellipse 58% 48% at 50% 50%,hsl(var(--primary) / 0.55) 0%,hsl(var(--primary) / 0.28) 36%,hsl(var(--primary) / 0.1) 58%,transparent 78%); opacity: 1; pointer-events: none; z-index: -1;}
.home-hero-shell::after{ content: ''; position: absolute; left: 12%; top: 18%; width: min(42vw,18rem); height: min(36vw,14rem); border-radius: 50%; background: radial-gradient(circle closest-side,hsl(var(--primary) / 0.32),transparent 72%); opacity: 0.7; pointer-events: none; z-index: -1;}
.home-hero{ position: relative; isolation: isolate; box-shadow: 0 20px 60px rgba(0,0,0,0.45),inset 0 0 0 1px hsl(var(--primary) / 0.18); animation: home-hero-in 0.7s ease both;}
.home-hero-fallback{ background: radial-gradient(ellipse 80% 70% at 20% 80%,hsl(var(--primary) / 0.45),transparent 55%),radial-gradient(ellipse 70% 60% at 85% 20%,hsl(var(--primary) / 0.28),transparent 50%),radial-gradient(circle at 50% 50%,hsl(var(--primary) / 0.18),transparent 60%),linear-gradient(145deg,#0a101c 0%,#121a2a 45%,#0c1524 100%);}
.home-hero-fallback::before{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right,hsl(var(--primary) / 0.11) 1px,transparent 1px),linear-gradient(to bottom,hsl(var(--primary) / 0.08) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 90% 80% at 50% 50%,#000 20%,transparent 75%); opacity: 0.85;}
.home-hero-fallback::after{ content: ''; position: absolute; width: 14rem; height: 14rem; right: 8%; top: 15%; border-radius: 50%; background: radial-gradient(circle closest-side,hsl(var(--primary) / 0.34),transparent 70%); opacity: 0.75;}
.home-hero-overlay{ background: linear-gradient(180deg,rgba(4,10,20,0.05) 0%,rgba(4,10,20,0.16) 70%,rgba(4,10,20,0.4) 100%),radial-gradient(ellipse 70% 55% at 50% 100%,hsl(var(--primary) / 0.34),transparent 70%),radial-gradient(ellipse 40% 45% at 8% 30%,hsl(var(--primary) / 0.22),transparent 60%),radial-gradient(ellipse 40% 45% at 92% 25%,hsl(var(--primary) / 0.2),transparent 60%);}
/* Mobile: more air under hero; sm+ keeps the tighter desktop rhythm */
body.kingdom-is-home .home-search-near-hero{ margin-top: 1.25rem !important; overflow: visible !important;}
@media (min-width: 640px){ body.kingdom-is-home .home-search-near-hero{ margin-top: 0.45rem !important;}
}
/* Preserve former space-y gap between search and categories block */
body.kingdom-is-home .home-search-near-hero + .home-page{
  margin-top: 1.75rem !important;
  padding-top: 0 !important;
}
@media (min-width: 640px){
  body.kingdom-is-home .home-search-near-hero + .home-page{
    margin-top: 2rem !important;
  }
}
/* Busca na navbar: espaÃ§o hero â†’ conteÃºdo (substitui a faixa sticky removida) */
body.kingdom-is-home .kingdom-home-hero-wrap + .home-page{
  margin-top: 1.35rem !important;
  padding-top: 0 !important;
}
@media (min-width: 640px){
  body.kingdom-is-home .kingdom-home-hero-wrap + .home-page{
    margin-top: 1.65rem !important;
  }
}
.home-page.space-y-8 > .home-store-popular-categories{ margin-top: 2rem !important;}
@media (min-width: 640px){ .home-page.space-y-8 > .home-store-popular-categories{ margin-top: 2.5rem !important;}
}
html:has(body.kingdom-is-home),
html {
overflow-x: hidden !important;
overflow-x: clip !important;
overflow-y: auto !important;
height: auto !important;
min-height: 100% !important;
max-height: none !important;
width: 100% !important;
max-width: 100% !important;
overscroll-behavior-x: none;
scrollbar-gutter: auto !important;
}
body.kingdom-is-home,
body {
overflow-x: hidden !important;
overflow-x: clip !important;
overflow-y: visible !important;
height: auto !important;
min-height: 100% !important;
max-height: none !important;
width: 100% !important;
max-width: 100% !important;
overscroll-behavior-x: none;
}
body.kingdom-is-home main.flex-1,
main.flex-1 {
overflow: visible !important;
overflow-x: clip !important;
overflow-y: visible !important;
max-width: 100% !important;
width: 100% !important;
max-height: none !important;
padding-inline: 0 !important;
margin-inline: 0 !important;
position: relative;
height: auto !important;
min-height: 0 !important;
flex: 1 0 auto !important;
}
/*
  Sticky search breaks when any ancestor uses overflow-x: clip/hidden (mobile nav X lock).
  Home: keep X containment on html only; body + main stay visible so sticky can pin under nav.
*/
@media (max-width: 1279px), (pointer: coarse), (hover: none) {
  html:has(body.kingdom-is-home) {
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }
  body.kingdom-is-home {
    overflow-x: visible !important;
  }
  body.kingdom-is-home main.flex-1 {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
html:has(body.kingdom-is-home),
html {
overflow-x: hidden !important;
}
body.kingdom-is-home,
body {
overflow-x: visible !important;
}
body.kingdom-is-home main.flex-1,
main.flex-1 {
overflow-x: visible !important;
max-width: none !important;
}
}
/* Avaliações Kaist-style — cards grandes, limpos, dentro do container (não full-bleed) */
.kb-reviews {
position: relative;
z-index: 6;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100%;
max-width: min(100%, 98rem);
margin: 1.75rem auto 0.85rem;
padding-inline: clamp(0.4rem, 1vw, 0.75rem);
padding-block: 0;
box-sizing: border-box;
background: transparent;
overflow: hidden;
min-height: 10.5rem;
}
.kb-reviews--package {
margin-top: 1.1rem;
margin-bottom: 0.35rem;
max-width: min(100%, 72rem);
padding-inline: clamp(0.75rem, 2.5vw, 1.25rem);
}
.kb-reviews--package .kb-reviews__inner {
max-width: 100% !important;
}
.kb-reviews--package .kb-reviews__head {
display: none !important;
}
.kb-reviews--package .kb-review-card--pkg,
.kb-reviews--package .kb-review-card {
min-height: 7.85rem;
padding: 0.85rem 0.9rem 0.8rem;
border-radius: 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.07);
background: #161b24;
box-shadow: none;
gap: 0.55rem;
}
.kb-reviews--package .kb-review-card__avatar {
width: 2.35rem;
height: 2.35rem;
font-size: 0.68rem;
color: rgba(255, 255, 255, 0.88);
background: #2a3140;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.kb-reviews--package .kb-review-card__name {
font-size: 0.88rem;
font-weight: 700;
}
.kb-reviews--package .kb-review-card__star {
width: 0.78rem !important;
height: 0.78rem !important;
max-width: 0.78rem !important;
max-height: 0.78rem !important;
}
.kb-reviews--package .kb-review-card__badge--product {
max-width: 44%;
min-height: 1.4rem;
padding: 0.16rem 0.48rem 0.16rem 0.38rem;
border: 1px solid hsl(var(--primary) / 0.45);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.78);
gap: 0.32rem;
}
.kb-reviews--package .kb-review-card__badge-cart {
flex: 0 0 auto;
width: 0.78rem !important;
height: 0.78rem !important;
max-width: 0.78rem !important;
max-height: 0.78rem !important;
color: hsl(var(--primary));
}
.kb-reviews--package .kb-review-card__badge-text {
font-size: 0.6rem;
font-weight: 650;
}
.kb-reviews--package .kb-review-card__quote {
font-size: 0.84rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.9);
-webkit-line-clamp: 3;
}
.kb-reviews--package .kb-reviews__slide.home-feedback-slide,
.kb-reviews--package .kb-reviews__slide,
.kb-reviews--package .home-feedback-slide {
flex: 0 0 calc(100% - 1.65rem) !important;
width: calc(100% - 1.65rem) !important;
max-width: 17.5rem !important;
}
.kb-reviews--package .kb-reviews__track {
gap: 0.65rem !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
@media (min-width: 768px) {
.kb-reviews--package .kb-reviews__track {
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
}
}
.kb-reviews--package svg {
max-width: 1.25rem !important;
max-height: 1.25rem !important;
}
.kb-reviews--package .kb-review-card__badge-cart {
max-width: 0.78rem !important;
max-height: 0.78rem !important;
}
.kb-reviews--package .kb-review-card__star {
max-width: 0.78rem !important;
max-height: 0.78rem !important;
}
@media (min-width: 640px) {
.kb-reviews--package {
margin-top: 1.45rem;
padding-inline: 1rem;
}
.kb-reviews--package .kb-reviews__slide.home-feedback-slide,
.kb-reviews--package .kb-reviews__slide,
.kb-reviews--package .home-feedback-slide {
flex: 0 0 18.75rem !important;
width: 18.75rem !important;
max-width: 18.75rem !important;
}
.kb-reviews--package .kb-review-card--pkg,
.kb-reviews--package .kb-review-card {
min-height: 8.15rem;
padding: 0.95rem 1rem 0.9rem;
}
}
.kb-reviews__inner {
position: relative;
width: 100%;
max-width: 100% !important;
padding-inline: 0 !important;
margin-inline: 0 !important;
}
.kb-reviews__head {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 0.75rem;
margin-bottom: 0.85rem;
padding-inline: 0.15rem;
}
.kb-reviews__head-copy {
min-width: 0;
flex: 1 1 auto;
}
.kb-reviews__eyebrow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem 0.55rem;
margin: 0 0 0.28rem;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.2;
color: rgba(255, 255, 255, 0.55);
}
.kb-reviews__score {
font-size: 0.84rem;
font-weight: 800;
color: #fff;
letter-spacing: 0.01em;
}
.kb-reviews__stars-inline {
display: inline-flex;
align-items: center;
gap: 0.08rem;
}
.kb-reviews__stars-inline svg {
width: 0.78rem !important;
height: 0.78rem !important;
max-width: 0.78rem !important;
max-height: 0.78rem !important;
fill: #ffd000;
}
.kb-reviews__title {
margin: 0;
font-size: clamp(1.05rem, 3.8vw, 1.35rem);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
color: #fff;
}
.kb-reviews__all {
display: none !important;
}
.kb-reviews__carousel {
width: 100%;
overflow: hidden;
position: relative;
}
.kb-reviews__track.kb-coverflow-track,
.kb-reviews .kb-reviews__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0.75rem !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0.15rem 0 0.35rem !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: none !important;
scroll-behavior: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
touch-action: pan-x pan-y;
overflow-anchor: none;
/* Mobile: sem mask — evita “corte”/barra nas laterais dos cards */
-webkit-mask-image: none !important;
mask-image: none !important;
}
.kb-reviews__carousel.is-fitting .kb-reviews__track {
justify-content: flex-start !important;
padding-inline: 0 !important;
cursor: default;
-webkit-mask-image: none !important;
mask-image: none !important;
}
@media (min-width: 768px) {
.kb-reviews__track.kb-coverflow-track,
.kb-reviews .kb-reviews__track {
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
}
.kb-reviews__carousel.is-fitting .kb-reviews__track {
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
}
}
.kb-reviews__track::-webkit-scrollbar {
display: none;
}
.kb-reviews__slide.home-feedback-slide,
.kb-reviews .kb-reviews__slide,
.kb-reviews .home-feedback-slide {
flex: 0 0 calc(100% - 1.85rem) !important;
width: calc(100% - 1.85rem) !important;
max-width: 18.25rem !important;
min-width: 0 !important;
scroll-snap-align: none !important;
display: flex !important;
align-items: stretch !important;
overflow: visible !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
.kb-review-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.7rem;
box-sizing: border-box;
width: 100%;
min-height: 8.75rem;
height: auto;
margin: 0 !important;
padding: 0.95rem 1rem 0.9rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #121821;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.kb-review-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.55rem;
min-width: 0;
}
.kb-review-card__who {
display: flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
flex: 1 1 auto;
}
.kb-review-card__avatar {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.55rem;
height: 2.55rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1;
color: #041018;
background: linear-gradient(160deg, hsl(var(--primary) / 0.95), hsl(var(--primary) / 0.65));
border: 1px solid hsl(var(--primary) / 0.4);
}
.kb-review-card__meta {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.kb-review-card__name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.15;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kb-review-card__stars {
display: flex;
align-items: center;
gap: 0.12rem;
}
.kb-review-card__star {
width: 0.85rem !important;
height: 0.85rem !important;
max-width: 0.85rem !important;
max-height: 0.85rem !important;
fill: rgba(255, 255, 255, 0.14);
flex: 0 0 auto;
}
.kb-review-card__star.is-on {
fill: #ffd000;
}
.kb-review-card img,
.kb-reviews img {
max-width: 2.85rem !important;
max-height: 2.85rem !important;
width: auto !important;
height: auto !important;
object-fit: cover;
}
.kb-review-card__badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.28rem;
max-width: 42%;
min-height: 1.45rem;
padding: 0.18rem 0.5rem 0.18rem 0.35rem;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.72);
font-size: 0.62rem;
font-weight: 650;
line-height: 1.1;
}
.kb-review-card__badge--trust {
padding-inline: 0.5rem;
max-width: 46%;
}
.kb-review-card__badge-img {
width: 0.95rem;
height: 0.95rem;
border-radius: 0.22rem;
object-fit: cover;
flex: 0 0 auto;
}
.kb-review-card__badge-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kb-review-card__body {
position: relative;
display: flex;
align-items: flex-end;
gap: 0.65rem;
min-width: 0;
flex: 1 1 auto;
}
.kb-review-card__quote {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-size: 0.86rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.86);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-break: break-word;
}
.kb-review-card__thumb {
flex: 0 0 auto;
width: 2.65rem;
height: 2.65rem;
border-radius: 0.45rem;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.kb-review-card--sheet {
width: 100%;
min-height: 0;
box-shadow: none;
}
.kb-reviews-sheet .kb-review-card__badge {
max-width: 38%;
}
.kb-reviews-sheet .kb-review-card__quote {
-webkit-line-clamp: 6;
color: rgba(255, 255, 255, 0.88);
}
@media (min-width: 640px) {
.kb-reviews {
margin-top: 2.1rem;
margin-bottom: 1.1rem;
}
.kb-reviews--package {
margin-top: 1.45rem;
}
.kb-reviews__head {
margin-bottom: 1rem;
}
.kb-reviews__title {
font-size: 1.4rem;
}
.kb-reviews__track.kb-coverflow-track,
.kb-reviews .kb-reviews__track {
gap: 0.9rem !important;
}
.kb-reviews__slide.home-feedback-slide,
.kb-reviews .kb-reviews__slide,
.kb-reviews .home-feedback-slide {
flex: 0 0 20rem !important;
width: 20rem !important;
max-width: 20rem !important;
}
.kb-review-card {
min-height: 9.25rem;
padding: 1.05rem 1.1rem 1rem;
border-radius: 1.1rem;
gap: 0.8rem;
}
.kb-review-card__avatar {
width: 2.75rem;
height: 2.75rem;
font-size: 0.76rem;
}
.kb-review-card__name {
font-size: 0.98rem;
}
.kb-review-card__star {
width: 0.9rem;
height: 0.9rem;
}
.kb-review-card__quote {
font-size: 0.9rem;
-webkit-line-clamp: 3;
}
.kb-review-card__thumb {
width: 2.85rem;
height: 2.85rem;
}
}
@media (min-width: 1024px) {
.kb-reviews__slide.home-feedback-slide,
.kb-reviews .kb-reviews__slide,
.kb-reviews .home-feedback-slide {
flex: 0 0 20.75rem !important;
width: 20.75rem !important;
max-width: 20.75rem !important;
}
.kb-review-card {
min-height: 9.5rem;
}
}
/* Chip legado (sheet modal) — mantém tipografia limpa */
.home-review-chip {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.4rem;
box-sizing: border-box;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
margin: 0;
padding: 0.7rem 0.8rem;
border-radius: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #121821;
box-shadow: none;
}
.home-review-chip__head {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.home-review-chip__avatar {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 9999px;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1;
color: #041018;
background: linear-gradient(160deg, hsl(var(--primary) / 0.95), hsl(var(--primary) / 0.65));
border: 1px solid hsl(var(--primary) / 0.45);
}
.home-review-chip__meta {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.home-review-chip__name {
margin: 0;
font-size: 0.84rem;
font-weight: 700;
line-height: 1.15;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-review-chip__stars {
display: flex;
align-items: center;
gap: 0.1rem;
}
.home-review-chip__star {
width: 0.78rem;
height: 0.78rem;
fill: rgba(255, 255, 255, 0.14);
}
.home-review-chip__star.is-on {
fill: #ffd000;
}
.home-review-chip__quote {
margin: 0;
flex: 1 1 auto;
min-height: 0;
font-size: 0.78rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.72);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
word-break: break-word;
}
.kb-reviews + .home-page,
.kb-reviews + .home-page--after-marquee {
margin-top: 1.15rem !important;
}
@media (min-width: 640px) {
.kb-reviews + .home-page,
.kb-reviews + .home-page--after-marquee {
margin-top: 1.4rem !important;
}
}
.home-page,
body.kingdom-is-home .home-page {
overflow-x: clip !important;
max-width: 100%;
}
@media (min-width: 768px) {
.home-page,
body.kingdom-is-home .home-page {
overflow-x: visible !important;
}
}
.home-search-logo{ display: none !important; }
.home-popular-categories{ overflow: visible;}
.home-popular-categories__body{ margin-top: 2.5rem; overflow: visible;}
@media (min-width: 640px){ .home-popular-categories__body{ margin-top: 3.15rem;}
}
.home-page.space-y-8 > .home-popular-categories + #store{ margin-top: 3.35rem !important;}
@media (min-width: 640px){ .home-page.space-y-8 > .home-popular-categories + #store{ margin-top: 4.15rem !important;}
}
.popular-category-card--fallback .popular-category-card__face{ display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 70% 80% at 50% 30%,hsl(var(--primary) / 0.28),transparent 65%),linear-gradient(160deg,rgba(10,16,28,0.98),rgba(6,10,18,0.94)); padding: 1rem;}
.popular-category-card__fallback-label{ position: relative; z-index: 1; max-width: 100%; padding: 0 0.5rem; font-size: clamp(0.85rem,2.2vw,1.05rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: #fff; text-shadow: 0 0 18px hsl(var(--primary) / 0.45);}
.home-page.space-y-8 > .home-search-row{ overflow: visible !important;}
.home-search-row{ position: relative; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; max-width: min(96vw, 42rem); margin-inline: auto; padding-inline: clamp(0.4rem, 1vw, 0.75rem); box-sizing: border-box; background: none; border: none; box-shadow: none; overflow: visible;}
/* Home: busca sticky abaixo do hero; gruda na navbar ao rolar (is-stuck só compacta visual) */
body.kingdom-is-home .home-search-dock-sentinel{
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}
body.kingdom-is-home .home-search-dock-placeholder{
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
body.kingdom-is-home .home-search-row.home-search-near-hero{
  position: sticky;
  /* Colada sob a float-nav (offset inclui padding inferior da header — subtrai pra grudar) */
  top: calc(var(--site-header-sticky-below, var(--kb-header-offset, 6rem)) - 0.72rem);
  z-index: 50;
  overflow: visible !important;
  transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck{
  top: calc(var(--site-header-sticky-below, var(--kb-header-offset, 6rem)) - 1.05rem);
}
body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-stage{
  transition: padding 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-stage{
  padding-block: 0 !important;
}
body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-input{
  transition:
    height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s ease,
    background-color 0.32s ease,
    box-shadow 0.32s ease,
    backdrop-filter 0.32s ease,
    -webkit-backdrop-filter 0.32s ease;
}
body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-icon,
body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-ph{
  transition:
    left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.32s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Encaixe: sobe um pouco + compacta + mesma superfície da nav/busca */
body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-input{
  height: 2.7rem !important;
  min-height: 2.7rem !important;
  padding: 0 1.05rem 0 2.65rem !important;
  font-size: 0.86rem !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(12, 20, 34, 0.52) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgb(0 0 0 / 0.22) !important;
}
@media (min-width: 640px){
  body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-input{
    height: 2.85rem !important;
    min-height: 2.85rem !important;
    padding-left: 2.9rem !important;
    font-size: 0.9rem !important;
  }
}
body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-icon{
  left: 0.95rem !important;
  width: 0.98rem !important;
  height: 0.98rem !important;
}
@media (min-width: 640px){
  body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-icon{
    left: 1.1rem !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
  }
}
body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-ph{
  left: 2.55rem !important;
  font-size: 0.82rem !important;
}
@media (min-width: 640px){
  body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-ph{
    left: 2.9rem !important;
    font-size: 0.86rem !important;
  }
}
body.kingdom-is-home .home-search-row.home-search-near-hero.is-stuck .home-search-wrap--hint .home-search-input{
  animation: none !important;
}
@media (prefers-reduced-motion: reduce){
  body.kingdom-is-home .home-search-row.home-search-near-hero,
  body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-stage,
  body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-input,
  body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-icon,
  body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-ph{
    transition: none !important;
  }
  body.kingdom-is-home .home-search-row.home-search-near-hero.is-dock-pulse .home-search-input{
    animation: none !important;
  }
}
@keyframes home-search-dock-pulse{
  0%{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 10px 28px rgb(0 0 0 / 0.28),0 0 0 0 hsl(var(--primary) / 0.35); }
  45%{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),0 12px 32px rgb(0 0 0 / 0.32),0 0 0 3px hsl(var(--primary) / 0.22); }
  100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 10px 28px rgb(0 0 0 / 0.28),0 0 0 0 hsl(var(--primary) / 0); }
}
body.kingdom-is-home .home-search-row.home-search-near-hero.is-dock-pulse .home-search-input{
  animation: home-search-dock-pulse 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.kingdom-is-home .home-search-row.home-search-near-hero .home-search-result,
body.kingdom-is-home .home-search-row.home-search-near-hero #search-result{
  z-index: 51;
}
.home-search-stage{ position: relative; z-index: 1; width: 100%; overflow: visible; padding-block: 0.2rem;}
.home-search-hub{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; isolation: auto;}
.home-search-field{ position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; width: 100%; overflow: visible;}
.home-search-wrap{ position: relative; z-index: 10; width: 100%; max-width: 100%; min-width: 0; overflow: visible;}
.home-search-icon{ position: absolute; left: 1.05rem; top: 50%; z-index: 5; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); pointer-events: none; color: rgb(var(--foreground) / 0.72); filter: none;}
.home-search-input{ position: relative; z-index: 1; display: block; width: 100%; height: 3.45rem; min-height: 3.45rem; padding: 0 1.2rem 0 2.95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(12,20,34,0.52); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); color: rgb(var(--foreground) / 0.95); font-size: 0.92rem; font-weight: 600; outline: none; appearance: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),0 8px 24px rgb(0 0 0 / 0.22);}
.home-search-ph{ position: absolute; left: 2.55rem; right: 1rem; top: 0; bottom: 0; z-index: 6; display: flex; align-items: center; pointer-events: none; overflow: hidden; white-space: nowrap; color: rgb(var(--foreground) / 0.55); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.015em; line-height: 1;}
@media (min-width: 640px){
  .home-search-icon{ left: 1.25rem; width: 1.2rem; height: 1.2rem;}
  .home-search-input{ height: 3.85rem; min-height: 3.85rem; padding-left: 3.2rem; font-size: 0.98rem;}
  .home-search-ph{ left: 3.2rem; font-size: 0.92rem;}
}
