@media (max-width: 640px) {
.hero-steam--home {
--hero-home-fan-h: 20rem;
--hero-home-card-center: 9.25rem;
}
.hero-steam--home .hero-home-title {
font-size: clamp(1.65rem, 7.8vw, 2rem) !important;
line-height: 1.1 !important;
}
.hero-steam--home .hero-home-desc {
font-size: 0.875rem !important;
padding: 0 !important;
}
.hero-steam-games {
justify-content: flex-start !important;
min-height: 0 !important;
}
#hero-steam-title {
font-size: clamp(1.85rem, 8.6vw, 2.25rem) !important;
text-wrap: balance;
overflow-wrap: anywhere;
line-height: 1.1;
letter-spacing: -0.02em;
max-width: 100%;
}
.hero-inset-badge {
padding: 0.3rem 0.55rem;
font-size: 0.58rem;
letter-spacing: 0.05em;
}
.hero-trust-bar__item {
padding: 0.58rem 0.3rem;
}
.hero-inset-msg--flat {
padding: 0.72rem 0.8rem;
font-size: 0.9rem;
line-height: 1.45;
}
.hero-secondary-btn {
padding: 0.48rem 0.62rem;
border-radius: 0.65rem;
font-size: 0.76rem;
gap: 0.42rem;
}
.hero-secondary-btn {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -2px 4px rgba(0, 0, 0, 0.45),
0 6px 18px rgba(0, 0, 0, 0.28);
}
.hero-secondary-btn--wide span {
font-size: 0.74rem;
line-height: 1.15;
}
.hero-secondary-btn--wide {
flex: 0 0 auto;
justify-content: center;
text-align: center;
min-height: 2.6rem;
}

.hero-steam--home .hero-home-actions {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: 0.5rem !important;
max-width: 100%;
position: relative;
z-index: 3;
overflow: visible;
isolation: isolate;
}
.hero-steam--home .hero-home-actions .hero-home-btn-ghost,
.hero-steam--home .hero-home-actions .hero-home-btn-primary {
width: 100% !important;
max-width: 100%;
min-width: 0;
min-height: 2.35rem !important;
padding: 0.4rem 0.5rem !important;
font-size: 0.7rem !important;
gap: 0.35rem !important;
flex: none !important;
overflow: hidden;
}
.hero-steam--home .hero-home-actions .hero-secondary-btn svg,
.hero-steam--home .hero-home-actions .hero-secondary-btn .lucide {
width: 0.8rem !important;
height: 0.8rem !important;
}
.hero-steam--home .hero-home-btn-primary span {
font-size: 0.68rem;
line-height: 1.15;
}
}
@media (max-width: 390px) {
.hero-steam--home .hero-home-actions {
gap: 0.4rem !important;
}
.hero-steam--home .hero-home-actions .hero-home-btn-ghost,
.hero-steam--home .hero-home-actions .hero-home-btn-primary {
padding: 0.38rem 0.42rem !important;
font-size: 0.66rem !important;
}
.hero-steam--home .hero-home-btn-primary span {
font-size: 0.64rem;
}
.hero-steam-shell > .relative,
.hero-steam--home .hero-home-grid {
padding: 0.85rem !important;
gap: 0.85rem !important;
}
#hero-steam-title {
font-size: clamp(1.65rem, 8.2vw, 1.9rem) !important;
}
.hero-inset-msg--flat {
font-size: 0.84rem;
line-height: 1.4;
}
.hero-game-card--fan,
.hero-game-card--fan-left,
.hero-game-card--fan-center,
.hero-game-card--fan-right {
width: 100% !important;
}
}

body.ck-checkout-page #top-announce,
body.ck-checkout-page footer,
body.ck-checkout-page #mobile-bottom-nav,
body.ck-checkout-page .site-page-bg,
body.ck-checkout-page .site-glow-viewport {
display: none !important;
}
body.ck-checkout-page main {
padding: 0;
}
.ck-checkout {
--ck-accent: #8ec5ff;
--ck-accent-dim: rgba(142, 197, 255, 0.14);
--ck-accent-glow: rgba(142, 197, 255, 0.35);
--ck-accent-border: rgba(142, 197, 255, 0.45);
--ck-card: rgba(18, 18, 22, 0.72);
--ck-card-border: rgba(255, 255, 255, 0.07);
--ck-input: rgba(0, 0, 0, 0.38);
--ck-success: #86efac;
--ck-success-dim: rgba(134, 239, 172, 0.12);
--ck-success-border: rgba(134, 239, 172, 0.32);
position: relative;
min-height: calc(100dvh - 2rem);
padding: 1rem 0 2.5rem;
}
.ck-checkout__bg {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.ck-checkout__bg .grid-background {
background-color: #0c0c0e;
background-image:
linear-gradient(rgba(142, 197, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(142, 197, 255, 0.035) 1px, transparent 1px),
radial-gradient(ellipse 66% 52% at 50% -4%, rgba(142, 197, 255, 0.50), transparent 66%),
radial-gradient(ellipse 140% 125% at 50% -12%, rgba(142, 197, 255, 0.22), transparent 84%);
background-size: 52px 52px, 52px 52px, 100% 100%, 100% 100%;
}
.ck-checkout__inner {
width: min(100%, 72rem);
margin: 0 auto;
padding: 0 1rem;
}
.ck-checkout__topbar {
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.32);
margin-bottom: 1.25rem;
overflow: hidden;
}
@media (min-width: 1024px) {
.ck-checkout__topbar {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
}
.ck-checkout__header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.1rem;
}
.ck-checkout__steps {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ck-checkout__back {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #d4d4d8;
font-size: 0.8125rem;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.ck-checkout__back:hover {
color: var(--ck-accent);
}
.ck-checkout__brand {
justify-self: center;
display: flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
color: #fafafa;
}
.ck-checkout__brand img {
width: 3.25rem;
height: 3.25rem;
object-fit: contain;
}
.ck-checkout__secure {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--ck-success-border);
background: var(--ck-success-dim);
color: var(--ck-success);
font-size: 0.75rem;
font-weight: 600;
}
.ck-checkout__steps {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.45rem 0.65rem;
padding: 0.75rem 1.1rem;
font-size: 0.8125rem;
}
.ck-checkout__step {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #71717a;
font-weight: 500;
}
.ck-checkout__step--done { color: #a1a1aa; }
.ck-checkout__step--active { color: var(--ck-accent); font-weight: 700; }
.ck-checkout__step-sep { color: #52525b; font-size: 0.7rem; }
.ck-checkout__step-check { color: var(--ck-success); }
.ck-checkout__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
}
@media (min-width: 960px) {
.ck-checkout__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
align-items: start;
gap: 1.5rem;
}
}
.ck-checkout__col {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.ck-checkout__card {
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.32);
box-shadow: none;
}

@media (min-width: 1024px) {
.ck-checkout__card {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
}
.ck-checkout__card-title {
margin: 0;
padding: 1rem 1.1rem 0.85rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a1a1aa;
background: transparent;
border-radius: 1rem 1rem 0 0;
}
.ck-checkout__card-body { padding: 0 1.1rem 1.1rem; }
.ck-checkout__card-body--tight { padding-top: 0.15rem; }
.ck-checkout #personal-info {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.ck-checkout [data-payment-method] {
width: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 0.95rem;
margin-bottom: 0.55rem;
border-radius: 0.85rem;
border: 1.5px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.28);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ck-checkout [data-payment-method]:last-child { margin-bottom: 0; }
.ck-checkout [data-payment-method][data-selected='true'] {
border-color: var(--ck-accent-border);
background: rgba(142, 197, 255, 0.07);
box-shadow: 0 0 0 1px rgba(142, 197, 255, 0.12), 0 0 24px rgba(142, 197, 255, 0.12);
}
.ck-checkout__pay-left {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.ck-checkout__pay-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
display: grid;
place-items: center;
flex-shrink: 0;
}
.ck-checkout__pay-icon img {
width: 1.45rem;
height: 1.45rem;
object-fit: contain;
}
.ck-checkout__pay-name {
font-size: 0.9375rem;
font-weight: 600;
color: #f4f4f5;
}
.ck-checkout__pay-badges {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.2rem;
}
.ck-checkout__badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.12rem 0.45rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.ck-checkout__badge--fast {
color: var(--ck-success);
background: var(--ck-success-dim);
border: 1px solid var(--ck-success-border);
}
.ck-checkout__badge--info {
color: #a5b4fc;
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.28);
}
.ck-checkout__badge--deal {
color: #fbbf24;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.28);
}
.ck-checkout__radio {
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
border: 2px solid #52525b;
flex-shrink: 0;
position: relative;
}
.ck-checkout [data-payment-method][data-selected='true'] .ck-checkout__radio {
border-color: var(--ck-accent);
box-shadow: 0 0 12px rgba(142, 197, 255, 0.35);
}
.ck-checkout [data-payment-method][data-selected='true'] .ck-checkout__radio::after {
content: '';
position: absolute;
inset: 2px;
border-radius: 999px;
background: var(--ck-accent);
}
.ck-checkout__fields { display: grid; gap: 0.65rem; }
@media (min-width: 640px) {
.ck-checkout__fields--2 { grid-template-columns: 1fr 1fr; }
}
.ck-checkout__field label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #71717a;
}
.ck-checkout input:not([type='checkbox']):not([type='radio']),
.ck-checkout select,
.ck-checkout textarea {
width: 100%;
min-height: 2.65rem;
padding: 0.65rem 0.85rem;
border-radius: 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--ck-input);
color: #f4f4f5;
font-size: 0.875rem;
}
.ck-checkout input::placeholder { color: #71717a; }
.ck-checkout input:focus-visible,
.ck-checkout select:focus-visible,
.ck-checkout textarea:focus-visible {
outline: none;
border-color: rgba(142, 197, 255, 0.45);
box-shadow: 0 0 0 3px rgba(142, 197, 255, 0.12);
}
.ck-checkout #phone-field-wrapper .flex.gap-2 {
gap: 0.75rem;
}
.ck-checkout #phone-field-wrapper input[name='client_phone'] {
flex: 1 1 auto;
min-width: 0;
}
.ck-checkout #phone-country-button {
flex-shrink: 0;
background: var(--ck-input);
}
.ck-checkout #discord-login {
width: 100%;
min-height: 2.65rem;
margin-bottom: 0.65rem;
border-radius: 0.7rem;
}
.ck-checkout #creditcard-form .ck-checkout__card-body {
display: grid;
gap: 0.55rem;
}
.ck-checkout__actions {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ck-checkout__terms {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.8125rem;
color: #a1a1aa;
line-height: 1.45;
}
.ck-checkout__terms input {
margin-top: 0.15rem;
accent-color: var(--ck-accent);
}
.ck-checkout__terms a {
color: var(--ck-accent);
font-weight: 600;
text-decoration: none;
}
.ck-checkout__terms a:hover { text-decoration: underline; }

.ck-checkout .btn-primary.pk-cta-btn::before,
.ck-checkout .btn-primary.pk-cta-btn::after {
display: none !important;
animation: none !important;
}
.ck-checkout #pay-button.pk-buy-primary {
--ck-pay-blue: var(--ck-accent);
--ck-pay-blue-hover: #b9dbff;
width: 100%;
flex: 1;
min-width: 0;
min-height: 3.25rem;
border-radius: 0.85rem;
font-size: 1rem;
font-weight: 700;
border: none;
padding: 0 1rem;
background-color: var(--ck-pay-blue);
color: #0a0f18;
}
.ck-checkout .pk-cta-btn {
transition:
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.22s ease,
filter 0.2s ease,
background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
.ck-checkout #pay-button.pk-buy-primary:hover:not(:disabled),
.ck-checkout #pay-button.pk-buy-primary:focus-visible:not(:disabled) {
background-color: var(--ck-pay-blue-hover);
}
.ck-checkout .pk-cta-btn:hover:not(:disabled),
.ck-checkout .pk-cta-btn:active:not(:disabled) {
transform: scale(1.08);
}
}
.ck-checkout .pk-cta-btn:disabled {
transform: none;
filter: grayscale(0.08);
}
@media (prefers-reduced-motion: reduce) {
.ck-checkout .pk-cta-btn:hover,
.ck-checkout .pk-cta-btn:active {
transform: none !important;
}
}
.ck-checkout__summary { position: relative; min-width: 0; }
@media (min-width: 960px) {
.ck-checkout__summary { position: sticky; top: 1rem; }
}
.ck-checkout__summary-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.1rem 0.85rem;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1rem 1rem 0 0;
}
.ck-checkout__summary-head h4 {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a1a1aa;
}
.ck-checkout__summary-body { padding: 0 1.1rem 1.1rem; }
.ck-checkout #packages-list {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ck-checkout #empty-packages {
padding: 1rem 0;
text-align: center;
color: #71717a;
font-size: 0.875rem;
}
.ck-cart-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 0.75rem;
align-items: center;
}
.ck-cart-item__thumb {
width: 3.25rem;
height: 3.25rem;
border-radius: 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.35);
overflow: hidden;
display: grid;
place-items: center;
}
.ck-cart-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ck-cart-item__name {
font-size: 0.875rem;
font-weight: 600;
color: #f4f4f5;
line-height: 1.3;
}
.ck-cart-item__price {
margin-top: 0.15rem;
font-size: 0.75rem;
color: #a1a1aa;
}
.ck-cart-item__controls {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
width: auto;
max-width: max-content;
}
.ck-cart-item__stepper {
display: inline-flex;
align-items: center;
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.ck-cart-item__stepper button {
width: 1.75rem;
height: 1.75rem;
border: none;
background: transparent;
color: #d4d4d8;
display: grid;
place-items: center;
flex-shrink: 0;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.ck-cart-item__stepper button:hover {
color: #f4f4f5;
background: rgba(255, 255, 255, 0.06);
}
.ck-cart-item__controls button[data-cart-action='remove'] {
width: 1.75rem;
height: 1.75rem;
border-radius: 0.5rem;
border: 1px solid rgba(248, 113, 113, 0.28);
display: grid;
place-items: center;
flex-shrink: 0;
cursor: pointer;
color: #f87171;
background: rgba(248, 113, 113, 0.08);
transition: border-color 0.2s ease, color 0.2s ease;
}
.ck-cart-item__controls button[data-cart-action='remove']:hover {
border-color: rgba(248, 113, 113, 0.45);
color: #fca5a5;
}
.ck-cart-item__controls button[data-cart-action='remove'].ck-remove--confirm {
width: auto;
min-width: max-content;
height: 1.75rem;
padding: 0 0.6rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.55);
background: rgba(248, 113, 113, 0.14);
white-space: nowrap;
animation: ckRemoveConfirmIn 0.16s ease;
}
@keyframes ckRemoveConfirmIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.ck-checkout .ck-cart-item__qty {
width: 1.25rem !important;
min-width: 1.25rem !important;
max-width: 1.25rem !important;
flex: 0 0 1.25rem !important;
min-height: 1.75rem !important;
height: 1.75rem !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
background: transparent !important;
box-shadow: none !important;
text-align: center;
font-size: 0.8125rem;
font-weight: 500;
color: #d4d4d8;
border-radius: 0 !important;
}
.ck-checkout .ck-cart-item__qty:focus-visible {
outline: none;
box-shadow: none !important;
border: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.ck-cart-item__total {
font-size: 0.9375rem;
font-weight: 700;
color: #fafafa;
white-space: nowrap;
text-align: right;
}
.ck-checkout #coupon { margin-top: 0.85rem; }
.ck-checkout #coupon > .flex {
display: flex;
gap: 0.55rem;
height: auto;
}
.ck-checkout #coupon input { flex: 1; min-height: 2.5rem; }
.ck-checkout #coupon .ck-checkout__coupon-btn {
min-height: 2.5rem;
padding: 0 1rem;
border-radius: 0.75rem;
background: rgba(24, 24, 27, 0.72);
border: 1px solid rgba(63, 63, 70, 0.55);
color: #e4e4e7;
font-weight: 600;
font-size: 0.8125rem;
box-shadow: none;
outline: none;
transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease;
}
.ck-checkout #coupon .ck-checkout__coupon-btn:hover {
background: rgba(24, 24, 27, 0.72);
border-color: rgba(63, 63, 70, 0.55);
}
.ck-checkout #coupon .ck-checkout__coupon-btn:active {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.ck-checkout #coupon .ck-checkout__coupon-btn:active {
transform: none;
}
}
.ck-checkout #pricing {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
list-style: none;
}
.ck-checkout #pricing li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.28rem 0;
font-size: 0.875rem;
color: #d4d4d8;
}
.ck-checkout #pricing li.hidden {
display: none !important;
}
.ck-checkout #pricing li:last-child {
margin-top: 0.35rem;
padding-top: 0.55rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 1.05rem;
font-weight: 800;
color: #86efac;
}
.ck-checkout__trust {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.85rem 1.25rem;
margin-top: 0.85rem;
font-size: 0.72rem;
color: #71717a;
}
.ck-checkout__trust span {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.ck-checkout__trust-item--ssl {
color: #86efac;
}
.ck-checkout__trust-item--fast {
color: #fafafa;
}
.ck-checkout__divider {
height: 1px;
margin: 0.85rem 0;
background: rgba(255, 255, 255, 0.06);
}
.ck-checkout .order-bump-inline { margin-top: 0.85rem; }
.ck-checkout #upsell-recommendations .rounded-cc { border-radius: 0.75rem; }
.ck-checkout #upsell-recommendations .ck-cart-item__controls {
flex-shrink: 0;
}
@media (max-width: 639px) {
.ck-checkout__header {
grid-template-columns: 1fr 1fr;
grid-template-areas: 'back secure' 'brand brand';
}
.ck-checkout__back { grid-area: back; }
.ck-checkout__secure { grid-area: secure; }
.ck-checkout__brand { grid-area: brand; justify-self: center; margin-top: 0.35rem; }
.ck-cart-item {
grid-template-columns: auto 1fr auto;
grid-template-areas: 'thumb info info' 'controls controls total';
}
.ck-cart-item__thumb { grid-area: thumb; }
.ck-cart-item > div:nth-child(2) { grid-area: info; }
.ck-cart-item__controls {
grid-area: controls;
justify-content: flex-start;
margin-top: 0.35rem;
}
.ck-cart-item__total {
grid-area: total;
margin-top: 0.35rem;
align-self: end;
}
}

.order-page {
--ord-blue: 142 197 255;
--ord-green: 110 231 183;
--ord-white: 255 255 255;
--ord-line: 255 255 255 / 0.07;
--ord-surface: 255 255 255 / 0.025;
--ord-radius: 1rem;
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 1.25rem;
padding-top: 1.5rem;
padding-bottom: 3rem;
min-height: 70vh;
}

.order-crumbs {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
color: rgb(var(--muted-foreground));
}
.order-crumbs a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.order-crumbs a:hover {
color: rgb(var(--ord-blue));
}
.order-crumbs svg,
.order-crumbs i {
width: 0.875rem;
height: 0.875rem;
opacity: 0.5;
}
.order-crumbs__current {
color: rgb(var(--foreground));
font-weight: 600;
}

.order-hero {
--hero-accent: var(--ord-blue);
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
padding: 1.35rem 1.5rem;
border: 1px solid rgb(var(--ord-line));
border-radius: var(--ord-radius);
background:
radial-gradient(120% 180% at 0% 0%, rgb(var(--hero-accent) / 0.12) 0%, transparent 60%),
rgb(var(--ord-surface));
isolation: isolate;
}
.order-hero::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, rgb(var(--hero-accent) / 0.9), rgb(var(--hero-accent) / 0.15));
}
.order-hero[data-status='APPROVED'] {
--hero-accent: var(--ord-green);
}
.order-hero[data-status='REJECTED'],
.order-hero[data-status='CANCELED'] {
--hero-accent: 248 113 113;
}
.order-hero[data-status='PENDING'],
.order-hero[data-status='WAITING_PAYMENT'],
.order-hero[data-status='REFUNDED'] {
--hero-accent: 250 204 21;
}
.order-hero[data-status='CHARGEDBACK'] {
--hero-accent: 192 132 252;
}
.order-hero__mark {
display: grid;
place-items: center;
flex: none;
width: 3rem;
height: 3rem;
border-radius: 0.875rem;
color: rgb(var(--hero-accent));
background: rgb(var(--hero-accent) / 0.12);
border: 1px solid rgb(var(--hero-accent) / 0.28);
}
.order-hero__mark svg,
.order-hero__mark i {
width: 1.5rem;
height: 1.5rem;
}
.order-hero__body {
flex: 1 1 16rem;
min-width: 0;
}
.order-hero__title {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
color: rgb(var(--foreground));
}
.order-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0.3rem 0 0;
font-size: 0.8125rem;
color: rgb(var(--muted-foreground));
}
.order-hero__meta b {
color: rgb(var(--foreground) / 0.85);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.order-hero__dot {
width: 3px;
height: 3px;
border-radius: 9999px;
background: currentColor;
opacity: 0.45;
}
.order-hero__total {
flex: none;
margin-left: auto;
text-align: right;
}
.order-hero__total-label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgb(var(--muted-foreground));
}
.order-hero__total-value {
display: block;
margin-top: 0.1rem;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: rgb(var(--foreground));
}

.order-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
align-items: start;
gap: 1.25rem;
}

.order-grid--solo {
grid-template-columns: minmax(0, 1fr);
}
.order-col {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.order-col--side {
position: sticky;
top: 6.5rem;
}

.order-block {
border: 1px solid rgb(var(--ord-line));
border-radius: var(--ord-radius);
background: rgb(var(--ord-surface));
overflow: hidden;
}
.order-block__head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.1rem;
border-bottom: 1px solid rgb(var(--ord-line));
}
.order-block__head svg,
.order-block__head i {
width: 1rem;
height: 1rem;
color: rgb(var(--ord-blue));
flex: none;
}
.order-block__title {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.005em;
color: rgb(var(--foreground));
}
.order-block__count {
margin-left: auto;
padding: 0.1rem 0.45rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: rgb(var(--muted-foreground));
background: rgb(var(--foreground) / 0.05);
}
.order-block__body {
padding: 1.1rem;
}
.order-block__body--flush {
padding: 0;
}

.order-items {
display: flex;
flex-direction: column;
}
.order-item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.1rem;
transition: background-color 0.18s ease;
}
.order-item + .order-item {
border-top: 1px solid rgb(var(--ord-line));
}
.order-item:hover {
background: rgb(var(--foreground) / 0.02);
}
.order-item__thumb {
position: relative;
flex: none;
width: 3.25rem;
height: 3.25rem;
}
.order-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.6rem;
border: 1px solid rgb(var(--ord-line));
background: rgb(var(--background));
}
.order-item__qty {
position: absolute;
top: -0.35rem;
right: -0.35rem;
display: grid;
place-items: center;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.25rem;
border-radius: 9999px;
background: rgb(var(--ord-blue));
color: #0a0f18;
font-size: 0.6875rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px rgb(var(--background));
}
.order-item__info {
flex: 1 1 auto;
min-width: 0;
}
.order-item__name {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
color: rgb(var(--foreground));
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.order-item__price {
margin: 0.15rem 0 0;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: rgb(var(--muted-foreground));
}
.order-item__tag {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.28rem 0.55rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
color: rgb(var(--ord-green));
background: rgb(var(--ord-green) / 0.1);
border: 1px solid rgb(var(--ord-green) / 0.24);
}
.order-item__tag svg,
.order-item__tag i {
width: 0.75rem;
height: 0.75rem;
}
.order-item__redeem {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
height: 2rem;
padding: 0 0.75rem;
border: 1px solid rgb(var(--ord-green) / 0.35);
border-radius: 0.6rem;
background: rgb(var(--ord-green) / 0.12);
color: rgb(var(--ord-green));
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.order-item__redeem:hover {
background: rgb(var(--ord-green) / 0.2);
border-color: rgb(var(--ord-green) / 0.5);
}
.order-item__redeem svg,
.order-item__redeem i {
width: 0.875rem;
height: 0.875rem;
}
.order-empty {
padding: 1.75rem 1.1rem;
text-align: center;
font-size: 0.8125rem;
color: rgb(var(--muted-foreground));
}

.order-steps {
display: flex;
flex-direction: column;
gap: 1rem;
}
.order-step {
display: flex;
gap: 0.85rem;
}
.order-step__num {
display: grid;
place-items: center;
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-top: 0.05rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 700;
color: rgb(var(--ord-blue));
background: rgb(var(--ord-blue) / 0.1);
border: 1px solid rgb(var(--ord-blue) / 0.28);
}
.order-step__content {
flex: 1 1 auto;
min-width: 0;
}
.order-step__title {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
color: rgb(var(--foreground));
}
.order-step__desc {
margin: 0.2rem 0 0;
font-size: 0.78125rem;
line-height: 1.5;
color: rgb(var(--muted-foreground));
}
.order-step__action {
margin-top: 0.7rem;
}

.order-dl-btn {
position: relative;
isolation: isolate;
display: flex;
width: 100%;
min-height: 3.25rem;
align-items: center;
justify-content: center;
padding: 0 1.25rem;
border-radius: 999px;
border: none;
outline: none;
font-weight: 700;
background: transparent;
cursor: pointer;
}
.order-dl-btn__label {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #052e21;
}
.order-dl-btn__inner {
z-index: 1;
overflow: hidden;
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(100deg, #6ee7b7 0%, #8ec5ff 100%);
}

.order-dl-goo-defs {
position: absolute;
width: 0;
height: 0;
}

.order-dl-btn__blobs {
position: relative;
display: block;
height: 100%;
}
@media (hover: hover) and (pointer: fine) {
.order-dl-btn__blobs {
filter: url('#order-dl-goo');
}
}
.order-dl-btn__blob {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
border-radius: 100%;
background: #6ee7b7;
transform: translate3d(0, 150%, 0) scale(1.4);
transition: transform 0.45s;
}
.order-dl-btn__blob:nth-child(1) { left: 0%; transition-delay: 0s; }
.order-dl-btn__blob:nth-child(2) { left: 30%; transition-delay: 0.08s; }
.order-dl-btn__blob:nth-child(3) { left: 60%; transition-delay: 0.16s; }
.order-dl-btn__blob:nth-child(4) { left: 90%; transition-delay: 0.24s; }
.order-dl-btn:hover .order-dl-btn__blob,
.order-dl-btn:focus-visible .order-dl-btn__blob {
transform: translateZ(0) scale(1.4);
}
.order-dl-btn:focus-visible {
outline: 2px solid rgb(var(--ord-green));
outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
.order-dl-btn:active .order-dl-btn__blob {
transform: translateZ(0) scale(1.4);
}
}
.order-safe-note {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0.55rem 0 0;
font-size: 0.6875rem;
font-weight: 500;
color: rgb(var(--ord-green) / 0.85);
}
.order-safe-note svg,
.order-safe-note i {
width: 0.8125rem;
height: 0.8125rem;
flex: none;
}

.order-video {
position: relative;
display: block;
border-radius: 0.75rem;
overflow: hidden;
aspect-ratio: 16 / 9;
border: 1px solid rgb(var(--ord-line));
background: #0a0a0b;
isolation: isolate;
}
.order-video__trigger {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
display: block;
}
.order-video img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.order-video__trigger:hover img {
transform: scale(1.04);
}
.order-video__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
}
.order-video__play {
position: absolute;
inset: 0;
margin: auto;
width: 3.25rem;
height: 3.25rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.95);
display: grid;
place-items: center;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.order-video__trigger:hover .order-video__play {
transform: scale(1.09);
}
.order-video__play svg,
.order-video__play i {
width: 1.4rem;
height: 1.4rem;
color: #101014;
fill: #101014;
margin-left: 2px;
}
.order-video__duration {
position: absolute;
left: 0.6rem;
bottom: 0.6rem;
padding: 0.15rem 0.4rem;
border-radius: 0.3rem;
background: rgba(0, 0, 0, 0.75);
font-size: 0.6875rem;
font-weight: 600;
color: #fff;
font-variant-numeric: tabular-nums;
}
.order-video__trigger:focus-visible {
outline: 2px solid rgb(var(--ord-blue));
outline-offset: -2px;
}

.order-facts {
display: flex;
flex-direction: column;
}
.order-fact {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 1.1rem;
font-size: 0.8125rem;
}
.order-fact + .order-fact {
border-top: 1px dashed rgb(var(--ord-line));
}
.order-fact__label {
flex: none;
color: rgb(var(--muted-foreground));
}
.order-fact__value {
min-width: 0;
text-align: right;
font-weight: 600;
color: rgb(var(--foreground));
overflow-wrap: anywhere;
}
.order-fact__value--mono {
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.order-fact--total {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
border-top: 1px solid rgb(var(--ord-line)) !important;
background:
linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
linear-gradient(100deg, rgb(var(--ord-green) / 0.16) 0%, rgb(var(--ord-green) / 0.03) 100%);
}
.order-fact--total .order-fact__label {
font-weight: 600;
color: rgb(var(--foreground));
}
.order-fact--total .order-fact__value {
font-size: 1rem;
color: rgb(var(--ord-green));
}
.order-copy {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: color 0.15s ease;
}
.order-copy svg,
.order-copy i {
width: 0.8125rem;
height: 0.8125rem;
opacity: 0.5;
transition: opacity 0.15s ease, color 0.15s ease;
}
.order-copy:hover {
color: rgb(var(--ord-blue));
}
.order-copy:hover svg,
.order-copy:hover i {
opacity: 1;
}
.order-copy.is-copied {
color: rgb(var(--ord-green));
}
.order-copy.is-copied svg,
.order-copy.is-copied i {
opacity: 1;
color: rgb(var(--ord-green));
}

.order-chat-slot > * {
margin: 0;
}

#post-sale-upsells:empty {
display: none;
}

.order-page .order-post-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.order-page .order-post-actions-lead {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.35;
color: rgb(var(--foreground));
}
.order-page .order-post-actions-lead svg,
.order-page .order-post-actions-lead i {
flex: none;
}
.order-page .order-post-actions-hint {
margin: -0.3rem 0 0.15rem;
font-size: 0.78125rem;
line-height: 1.5;
color: rgb(var(--muted-foreground));
}
.order-page .order-post-actions-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.order-page .order-post-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 2.6rem;
padding: 0.6rem 0.9rem;
border-radius: 0.7rem;
border: 1px solid transparent;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
filter 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
-webkit-tap-highlight-color: transparent;
}
.order-page .order-post-btn svg,
.order-page .order-post-btn i {
width: 1rem;
height: 1rem;
flex: none;
}
.order-page .order-post-btn:focus-visible {
outline: 2px solid rgb(var(--ord-blue, 142 197 255));
outline-offset: 2px;
}

.order-page .order-post-btn--home {
background: #ffffff;
color: #101014;
border-color: #ffffff;
box-shadow: none;
}
.order-page .order-post-btn--home:hover {
background: #e8ebef;
border-color: #e8ebef;
box-shadow: none;
}

.order-page .order-post-btn--review {
position: relative;
overflow: hidden;
width: 100%;
color: #052033;
border-color: transparent;
background: rgb(var(--ord-blue, 142 197 255));
box-shadow: none;
}
.order-page .order-post-btn--review::after {
content: '';
position: absolute;
inset: 0;
background: #ffffff;
opacity: 0;
transition: opacity 0.18s ease;
pointer-events: none;
}
.order-page .order-post-btn--review:hover {
box-shadow: none;
}
.order-page .order-post-btn--review:hover::after {
opacity: 0.12;
}

@media (hover: hover) and (pointer: fine) {
.order-page .order-post-btn--home:hover,
.order-page .order-post-btn--review:hover {
transform: scale(1.045);
}
.order-page .order-post-btn--home:active,
.order-page .order-post-btn--review:active {
transform: scale(0.965);
transition-duration: 0.08s;
}
}

@media (hover: none), (pointer: coarse) {
.order-page .order-post-btn--home:hover,
.order-page .order-post-btn--review:hover,
.order-page .order-post-btn--home:active,
.order-page .order-post-btn--review:active {
transform: none;
}
}

.order-page .order-post-btn--feedbacks {
background: rgb(var(--ord-blue, 142 197 255) / 0.08);
color: rgb(var(--ord-blue, 142 197 255));
border-color: rgb(var(--ord-blue, 142 197 255) / 0.35);
box-shadow: none;
}
.order-page .order-post-btn--feedbacks::before {
content: none;
}
.order-page .order-post-btn--feedbacks:hover {
background: rgb(var(--ord-blue, 142 197 255) / 0.16);
border-color: rgb(var(--ord-blue, 142 197 255) / 0.55);
transform: none;
box-shadow: none;
}
.order-page .order-post-actions--reviewed .order-post-actions-lead,
.order-page .order-post-actions--reviewed .order-post-actions-hint,
.order-page .order-post-actions--reviewed #kaysto-open-review {
display: none;
}
.order-page .order-post-actions--reviewed .order-post-actions-row {
grid-template-columns: 1fr;
}

@media (max-width: 900px) {
.order-grid {
grid-template-columns: minmax(0, 1fr);
}
.order-col--side {
position: static;
}
}
@media (max-width: 560px) {
.order-hero {
padding: 1.15rem 1.15rem 1.25rem;
gap: 0.9rem;
}
.order-hero__total {
margin-left: 0;
width: 100%;
text-align: left;
padding-top: 0.75rem;
border-top: 1px dashed rgb(var(--ord-line));
}
.order-item {
flex-wrap: wrap;
}

.order-item__info {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem;
}
.order-item__name {
font-size: 0.7rem;
line-height: 1.3;
flex: 1 1 auto;
min-width: 0;
}
.order-item__price {
margin: 0;
flex: 0 0 auto;
font-size: 0.7rem;
font-weight: 700;
color: rgb(var(--foreground));
white-space: nowrap;
}
.order-item__tag,
.order-item__redeem {
margin-left: auto;
}
.order-page .order-post-actions-row {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.order-page .order-post-btn,
.order-video img,
.order-video__play,
.order-item,
.order-dl-btn__blob {
transition: none;
}
.order-video__trigger:hover img,
.order-video__trigger:hover .order-video__play {
transform: none;
}
.order-page .order-post-btn--home:hover,
.order-page .order-post-btn--review:hover,
.order-page .order-post-btn--home:active,
.order-page .order-post-btn--review:active {
transform: none;
}
}

:root {
--pack-accent: #8ec5ff;
--pack-accent-strong: #b9dbff;
--pack-ink: #0a0f18;
--pack-radius: 1.15rem;
}

.pack-band {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.pack-hero {
position: relative;
display: grid;
overflow: hidden;
padding: clamp(1.1rem, 2.4vw, 1.85rem);
border-radius: var(--pack-radius);
background: #0b0d13;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
text-decoration: none;
color: inherit;
}
.pack-hero-slides {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.pack-hero-slides::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(6, 7, 11, 0.82) 0%, rgba(6, 7, 11, 0.62) 42%, rgba(6, 7, 11, 0.3) 75%, rgba(6, 7, 11, 0.42) 100%),
linear-gradient(0deg, rgba(6, 7, 11, 0.35) 0%, transparent 45%),
rgba(6, 7, 11, 0.18);
}
.pack-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.4s ease;
}
.pack-hero-bg--active { opacity: 1; }
.pack-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
max-width: 34rem;
}
.pack-hero__badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.28rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(142, 197, 255, 0.4);
background: rgba(142, 197, 255, 0.1);
color: var(--pack-accent-strong);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.pack-hero__badge svg { width: 0.85rem; height: 0.85rem; }
.pack-hero__title {
margin: 0.1rem 0 0;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.01em;
font-size: clamp(1.3rem, 2.3vw, 1.85rem);
color: #fff;
}
.pack-hero__desc {
margin: 0;
max-width: 30rem;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 639px) {
.pack-hero__desc { display: none; }
}
.pack-hero__meter {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 0.8rem;
margin-top: 0.1rem;
}
.pack-hero__meter-price {
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
font-weight: 800;
color: #fff;
line-height: 1;
}
.pack-hero__meter-price .pack-hero__price { color: var(--pack-accent); }
.pack-hero__meter-note {
font-size: 0.78rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
}
.pack-hero__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.3rem;
padding: 0.62rem 1.3rem;
border-radius: 0.85rem;
background: var(--pack-accent);
color: var(--pack-ink);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: filter 0.24s ease;
}
.pack-hero__cta svg { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) { .pack-hero__cta:hover { filter: brightness(1.05); } }
.pack-hero__trust {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.2rem;
margin-top: 0.35rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.pack-hero__trust span { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (max-width: 639px) {
.pack-hero__trust {
flex-wrap: nowrap;
gap: 0.6rem;
font-size: 0.62rem;
}
.pack-hero__trust span { gap: 0.22rem; white-space: nowrap; }
.pack-hero__trust svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
}
.pack-hero__trust strong { color: #fff; font-weight: 700; }
.pack-hero__trust svg { width: 0.9rem; height: 0.9rem; }
.pack-hero__trust .i-star { color: #facc15; }
.pack-hero__trust .i-zap { color: var(--pack-accent); }
.pack-hero__trust .i-shield { color: #34d399; }

.pack-quick {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.7rem;
}
.pack-quick__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.6rem;
padding: 0.5rem 0.8rem;
border-radius: 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.035);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pack-quick__btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 0.4rem;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: inherit;
flex-shrink: 0;
}
.pack-quick__btn-icon svg { width: 0.9rem; height: 0.9rem; color: inherit; }
@media (hover: hover) {
.pack-quick__btn:hover { transform: scale(1.045); }
.pack-quick__btn:active { transform: scale(0.95); }
}
.pack-quick__btn--pontos {
border-color: #4ade80;
background: linear-gradient(135deg, #bbf7d0 0%, #34d399 100%);
color: #052e12;
}
.pack-quick__btn--pontos .pack-quick__btn-icon {
background: rgba(5, 46, 18, 0.16);
border-color: rgba(5, 46, 18, 0.24);
}
.pack-quick__btn--white {
border-color: #cfd3da;
background: linear-gradient(135deg, #ffffff 0%, #e4e5e9 55%, #b9bcc4 100%);
color: #0b0d12;
}
.pack-quick__btn--white .pack-quick__btn-icon {
background: rgba(10, 15, 24, 0.08);
border-color: rgba(10, 15, 24, 0.14);
}
.pack-quick__btn--solicite {
border-color: hsl(var(--primary));
background: linear-gradient(135deg, #bcdcff 0%, hsl(var(--primary)) 100%);
color: #05131f;
}
.pack-quick__btn--solicite .pack-quick__btn-icon {
background: rgba(5, 19, 31, 0.14);
border-color: rgba(5, 19, 31, 0.22);
}
@media (max-width: 560px) {
.pack-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.pack-quick__btn {
min-height: 1.9rem;
padding: 0.38rem 0.6rem;
gap: 0.35rem;
font-size: 0.68rem;
}
.pack-quick__btn-icon { width: 1.3rem; height: 1.3rem; }
.pack-quick__btn-icon svg { width: 0.75rem; height: 0.75rem; }
.pack-quick__btn--solicite { grid-column: 1 / -1; }
}

.combo-checkout-flag {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
border-radius: 0.7rem;
border: 1px solid rgba(251, 141, 43, 0.35);
background: rgba(251, 141, 43, 0.1);
color: #fb8d2b;
font-size: 0.82rem;
font-weight: 600;
}
.combo-checkout-flag svg { width: 1rem; height: 1rem; }
.combo-checkout-flag[data-state="error"] {
border-color: rgba(248, 113, 113, 0.4);
background: rgba(248, 113, 113, 0.08);
color: #fca5a5;
}

.combo-checkout-flag[data-state="warn"] {
border-color: rgba(251, 146, 60, 0.45);
background: rgba(251, 146, 60, 0.1);
color: #fdba74;
}
.combo-checkout-flag[data-state="ok"] {
border-color: rgba(74, 222, 128, 0.4);
background: rgba(74, 222, 128, 0.1);
color: #4ade80;
}

.pack-band--hero { margin-top: 0.25rem; }
.pack-band--hero .pack-hero {
min-height: 0;
padding: clamp(1.3rem, 2.8vw, 2.1rem);
border-radius: 1.4rem;
}
.pack-band--hero .pack-hero__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.pack-band--hero .pack-hero__desc { font-size: 0.88rem; max-width: 30rem; }
@media (max-width: 860px) {
.pack-band--hero .pack-hero { min-height: 0; }
}

.pk-sim { display: none; }
@media (min-width: 1000px) {
.pack-band--hero .pack-hero { grid-template-columns: minmax(0, 1fr) 344px; align-items: center; column-gap: 1.7rem; }
.pk-sim { display: block; position: relative; z-index: 3; justify-self: end; width: 344px; }
}
.pk-sim__win { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #12141a 0%, #0a0b0f 100%); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 34px 80px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.pk-sim__view { position: relative; min-height: 404px; padding: 0; }
.pk-sim__steps { display: flex; gap: 5px; justify-content: center; padding: .55rem 0 .8rem; }
.pk-sim__steps span { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); transition: background .3s ease; }
.pk-sim__steps span.is-active { background: linear-gradient(90deg, #8ec5ff, #5b9dff); }
.pk-sim__cursor { position: absolute; top: 0; left: 0; width: 26px; height: 26px; z-index: 30; pointer-events: none; transform: translate(80px, 90px); transition: transform .62s cubic-bezier(.45,.5,.15,1); opacity: 0; }
.pk-sim__cursor.is-on { opacity: 1; }
.pk-sim__cursor-tip { display: block; width: 100%; height: 100%; transform-origin: top left; transition: transform .12s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.pk-sim__cursor-tip svg { width: 100%; height: 100%; display: block; }
.pk-sim__cursor.is-click .pk-sim__cursor-tip { transform: scale(.78); }
.pk-sim__cursor.is-click::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(142,197,255,.9); animation: pkSimRipple .42s ease-out; }
@keyframes pkSimRipple { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
.pk-sim-scr { position: absolute; inset: 0; padding: .9rem; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); animation: pkSimIn .35s ease forwards; }
@keyframes pkSimIn { to { opacity: 1; transform: none; } }
.pk-sim-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.pk-sim-h-title { font-size: .92rem; font-weight: 800; color: #fff; }
.pk-sim-h-count { margin-left: auto; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.6); }
.pk-sim-h-count b { color: #8ec5ff; }
.pk-sim-chip { margin-left: auto; font-size: .58rem; font-weight: 800; letter-spacing: .06em; padding: .2rem .5rem; border-radius: 999px; color: #8ec5ff; background: rgba(142,197,255,.12); border: 1px solid rgba(142,197,255,.28); }
.pk-sim-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: .7rem; }
.pk-sim-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8ec5ff, #5b9dff); transition: width .45s cubic-bezier(.25,1,.5,1); }
.pk-sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pk-sim-tile { position: relative; border: 0; padding: 0; background: transparent; text-align: left; border-radius: 8px; transition: transform .2s ease; }
.pk-sim-tile-cover { display: block; aspect-ratio: 3 / 3.5; background-size: cover, cover; background-position: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); }
.pk-sim-tile-name { display: block; font-size: .57rem; font-weight: 700; color: rgba(255,255,255,.82); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-sim-tile-price { display: block; font-size: .56rem; font-weight: 700; color: #8ec5ff; }
.pk-sim-check { position: absolute; top: 4px; right: 4px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: #04140a; background: #22c55e; transform: scale(0); transition: transform .22s cubic-bezier(.34,1.5,.6,1); }
.pk-sim-check svg { width: 12px; height: 12px; }
.pk-sim-tile.is-sel { transform: translateY(-2px); }
.pk-sim-tile.is-sel .pk-sim-tile-cover { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34,197,94,.55); }
.pk-sim-tile.is-sel .pk-sim-check { transform: scale(1); }
.pk-sim-foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: baseline; gap: .5rem; }
.pk-sim-price { font-size: .9rem; font-weight: 800; color: #34d399; }
.pk-sim-price s { font-size: .7rem; color: rgba(255,255,255,.4); font-weight: 600; }
.pk-sim-list { display: flex; flex-direction: column; gap: 6px; }
.pk-sim-li { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.pk-sim-li-cover { width: 30px; height: 38px; border-radius: 5px; background-size: cover, cover; background-position: center; flex: none; border: 1px solid rgba(255,255,255,.08); }
.pk-sim-li-name { font-size: .72rem; font-weight: 700; color: #fff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-sim-li-price { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.55); }
.pk-sim-sum { margin-top: .7rem; padding: .6rem .7rem; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.pk-sim-sum .row { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; color: rgba(255,255,255,.6); }
.pk-sim-sum .row s { color: rgba(255,255,255,.4); }
.pk-sim-sum .row.big { margin-top: .35rem; font-size: .95rem; color: #fff; font-weight: 800; }
.pk-sim-sum .row.big b { color: #34d399; }
.pk-sim-save { margin-top: .4rem; font-size: .66rem; font-weight: 700; color: #34d399; text-align: center; }
.pk-sim-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .4rem; height: 2.5rem; border: 0; border-radius: 11px; font-size: .8rem; font-weight: 800; color: #04121f; background: linear-gradient(120deg, #8ec5ff, #5b9dff); transition: transform .15s ease, filter .2s ease; }
.pk-sim-cta svg { width: 16px; height: 16px; }
.pk-sim-cta.is-press { transform: scale(.96); filter: brightness(1.08); }
.pk-sim-lbl { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: .55rem 0 .28rem; }
.pk-sim-field { display: flex; align-items: center; min-height: 2.15rem; padding: 0 .6rem; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: .78rem; color: #fff; }
.pk-sim-field .caret { width: 1.5px; height: 15px; background: #8ec5ff; margin-left: 1px; opacity: 0; flex: none; }
.pk-sim-field.is-typing .caret { opacity: 1; animation: pkSimCaret .8s steps(1) infinite; }
@keyframes pkSimCaret { 50% { opacity: 0; } }
.pk-sim-cpn { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 10px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.28); opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.pk-sim-cpn.is-on { opacity: 1; transform: none; }
.pk-sim-cpn-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #04140a; background: #22c55e; }
.pk-sim-cpn-ico svg { width: 13px; height: 13px; }
.pk-sim-cpn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pk-sim-cpn-txt b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: #dcffe8; }
.pk-sim-cpn-txt small { font-size: .55rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(52,211,153,.85); }
.pk-sim-cpn-off { flex: none; font-size: .78rem; font-weight: 800; color: #34d399; }
.pk-sim-scr[data-scr="done"] { align-items: center; text-align: center; justify-content: center; }
.pk-sim-done-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #04140a; background: linear-gradient(120deg, #8ec5ff, #34d399); box-shadow: 0 0 0 6px rgba(52,211,153,.14); animation: pkSimPop .4s cubic-bezier(.34,1.5,.6,1); }
.pk-sim-done-ico svg { width: 26px; height: 26px; }
@keyframes pkSimPop { from { transform: scale(0); } }
.pk-sim-done-title { margin-top: .7rem; font-size: 1.05rem; font-weight: 800; color: #fff; }
.pk-sim-done-sub { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: .15rem; }
.pk-sim-code { position: relative; width: 100%; margin-top: .9rem; padding: .8rem .85rem; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, rgba(142,197,255,.14), rgba(91,157,255,.05) 55%, rgba(10,15,24,.4)); border: 1px solid rgba(142,197,255,.28); }
.pk-sim-code-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.pk-sim-code-top > span:first-child { display: inline-flex; align-items: center; gap: .32rem; font-size: .56rem; font-weight: 800; letter-spacing: .14em; color: rgba(190,214,255,.72); }
.pk-sim-code-top > span:first-child::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8ec5ff; }
.pk-sim-code-badge { font-size: .52rem; font-weight: 800; letter-spacing: .1em; padding: .16rem .44rem; border-radius: 6px; color: #cfe4ff; background: rgba(142,197,255,.16); border: 1px solid rgba(142,197,255,.34); }
.pk-sim-code-row { position: relative; display: flex; align-items: center; gap: 8px; }
.pk-sim-code-val { flex: 1; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.12rem; font-weight: 700; letter-spacing: .16em; color: #dcebff; text-align: left; }
.pk-sim-copy { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .48rem .74rem; border: 0; border-radius: 10px; background: linear-gradient(120deg, #8ec5ff, #5b9dff); color: #04121f; font-size: .7rem; font-weight: 800; transition: transform .15s ease, filter .2s ease, background .2s ease; }
.pk-sim-copy svg { width: 13px; height: 13px; }
.pk-sim-copy.is-copied { background: linear-gradient(120deg, #5b9dff, #3f7fe0); filter: brightness(1.05); }
.pk-sim-copy.is-press { transform: scale(.94); }
.pk-sim-done-note { margin-top: .8rem; font-size: .61rem; color: rgba(255,255,255,.4); }
@media (prefers-reduced-motion: reduce) {
.pk-sim__cursor, .pk-sim-bar span, .pk-sim-check, .pk-sim-cta, .pk-sim-tile { transition: none !important; }
}