/*
 * Storefront design layer
 * A token-driven editorial commerce system shared by every SellAuth component.
 */

:root {
  --store-font-display: var(--bs-font-sans-serif);
  --store-font-body: var(--bs-font-sans-serif);
  --store-shadow-sm: 0 1px 0 rgb(255 255 255 / .035), 0 12px 32px rgb(0 0 0 / .14);
  --store-shadow-md: 0 1px 0 rgb(255 255 255 / .04), 0 24px 64px rgb(0 0 0 / .2);
  --store-line: rgba(var(--cl-border-rgb), .78);
  --store-line-soft: rgba(var(--cl-border-rgb), .46);
  --store-accent-soft: rgba(var(--cl-theme-rgb), .11);
  --store-accent-line: rgba(var(--cl-theme-rgb), .4);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
}

.store-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1205;
  height: 2px;
  pointer-events: none;
  background: rgba(var(--cl-border-rgb), .4);
}
.store-scroll-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--store-scroll-progress, 0));
  transform-origin: left center;
  background: var(--cl-accent);
  box-shadow: 0 0 10px rgba(var(--cl-accent-rgb), .5);
  transition: transform 80ms linear;
}
@media (prefers-reduced-motion: reduce) { .store-scroll-progress > span { transition: none; } }

body.storefront-shell {
  background: var(--cl-primary-background) !important;
  color: var(--cl-primary-text);
  font-family: var(--store-font-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.storefront-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - .5px), rgba(var(--cl-border-rgb), .12) 50%, transparent calc(50% + .5px)),
    linear-gradient(180deg, rgba(var(--cl-theme-rgb), .035), transparent 28rem);
  background-size: min(100%, var(--store-content-width)) 100%, 100% 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

::selection {
  color: var(--cl-button-text);
  background: var(--cl-theme);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cl-theme) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--cl-theme-rgb), .14) !important;
}

body.modal-open .scroll-up-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

a,
button,
.btn {
  transition: color var(--store-motion-fast) ease, background-color var(--store-motion-fast) ease, border-color var(--store-motion-fast) ease, transform var(--store-motion-fast) ease, box-shadow var(--store-motion-fast) ease, opacity var(--store-motion-fast) ease;
}

.container {
  width: min(calc(100% - 2rem), var(--store-content-width)) !important;
  max-width: var(--store-content-width) !important;
  padding-inline: 0 !important;
}

.component:not(.announcement):not(.storefront-nav) {
  position: relative;
}

.py-20,
.premium-section,
.games-section,
.features,
.products,
.easy-section,
.text-block-section,
.text-image-section,
.text-video-section,
.pc-section,
.pm-section,
.cta-discord-section,
.faq {
  padding-block: var(--store-section-space) !important;
}

.section-title,
.section-heading h2,
.section-header h2,
.easy-main-title,
.pc-main-title,
.pm-main-title,
.cta-main-title,
.faq-title {
  color: var(--cl-primary-text) !important;
  font-family: var(--store-font-display);
  font-size: clamp(2rem, 4.7vw, 4.5rem) !important;
  font-weight: 720 !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
  text-wrap: balance;
}

.section-subtitle,
.section-heading p,
.section-header p,
.easy-main-subtitle,
.pc-main-subtitle,
.pm-main-subtitle,
.cta-main-subtitle,
.faq-subtitle {
  max-width: 42rem;
  color: var(--cl-secondary-text) !important;
  font-size: clamp(.98rem, 1.3vw, 1.12rem) !important;
  line-height: 1.7 !important;
  text-wrap: pretty;
}

.section-kicker,
.section-badge,
.hero-badge,
.easy-badge,
.pc-badge,
.pm-badge {
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cl-theme) !important;
  font-size: .72rem !important;
  font-weight: 760 !important;
  letter-spacing: .13em !important;
  line-height: 1.4;
  text-transform: uppercase;
  box-shadow: none !important;
}

.section-kicker::before,
.section-badge::before,
.hero-badge::before,
.easy-badge::before,
.pc-badge::before,
.pm-badge::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--cl-theme);
}

/* Announcement */
.announcement {
  position: relative;
  z-index: 1040;
  min-height: 34px;
  padding: .5rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(var(--cl-theme-rgb), .28) !important;
  background: var(--cl-theme) !important;
  color: var(--cl-button-text) !important;
  font-size: .76rem;
  font-weight: 690;
  letter-spacing: .045em;
  text-align: center;
}

/* Header and navigation */
#app > div > header {
  position: sticky !important;
  top: 0;
  z-index: 1035 !important;
  width: 100%;
  height: auto !important;
  padding: 0;
  pointer-events: none;
}

#app > div > header.storefront-header--static {
  position: relative !important;
}

.storefront-header {
  width: min(calc(100% - 2rem), var(--store-content-width));
  margin: .75rem auto 0;
  pointer-events: auto;
}

.announcement { pointer-events: auto; }

.storefront-nav {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 70px;
  padding: 0 !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius-lg) !important;
  background: rgba(var(--cl-navigation-rgb), .92) !important;
  box-shadow: var(--store-shadow-sm) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  transition: min-height var(--store-motion-base) ease, background-color var(--store-motion-base) ease, border-color var(--store-motion-base) ease, transform var(--store-motion-base) ease, box-shadow var(--store-motion-base) ease;
}

.storefront-header.is-scrolled .storefront-nav {
  min-height: 60px;
  border-color: rgba(var(--cl-border-rgb), .92) !important;
  background: rgba(var(--cl-navigation-rgb), .975) !important;
  box-shadow: 0 18px 50px rgb(0 0 0 / .24) !important;
}

.storefront-nav__inner {
  display: flex;
  min-height: inherit;
  padding: .55rem .65rem .55rem 1rem !important;
  gap: 1rem;
}

.storefront-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .72rem;
  min-height: 44px;
  color: var(--cl-primary-text) !important;
  text-decoration: none !important;
}

.storefront-brand img {
  width: var(--nav-logo-size);
  height: var(--nav-logo-size);
  max-width: 54px;
  max-height: 54px;
  border: 0 !important;
  border-radius: calc(var(--store-radius-sm) - 2px);
  object-fit: contain;
  box-shadow: none !important;
}

.storefront-brand__copy {
  display: grid;
  line-height: 1.1;
}

.storefront-brand__copy strong {
  color: inherit;
  font-size: .97rem;
  font-weight: 720;
  letter-spacing: -.02em;
}

.storefront-brand__copy small {
  margin-top: .24rem;
  color: var(--cl-muted-text);
  font-size: .64rem;
  font-weight: 620;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.storefront-nav__collapse {
  min-width: 0;
  gap: 1rem;
}

.storefront-nav__links {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: .15rem;
}

.storefront-nav__link,
.storefront-nav__action,
.storefront-nav__icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem .76rem;
  border: 1px solid transparent;
  border-radius: var(--store-radius-sm);
  background: transparent;
  color: var(--cl-secondary-text) !important;
  font-size: .83rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.storefront-nav__link::after {
  content: "";
  position: absolute;
  right: .75rem;
  bottom: .38rem;
  left: .75rem;
  height: 1px;
  background: var(--cl-theme);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--store-motion-fast) ease;
}

.storefront-nav__link:hover,
.storefront-nav__link.is-active,
.storefront-nav__action:hover,
.storefront-nav__icon-button:hover {
  color: var(--cl-primary-text) !important;
  background: rgba(var(--cl-surface-rgb), .72);
}

.storefront-nav__link:hover::after,
.storefront-nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.storefront-nav__link--button {
  border-color: var(--store-accent-line);
  color: var(--cl-theme) !important;
}

.storefront-nav__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
}

.storefront-nav__action {
  border-color: var(--store-line-soft);
  background: rgba(var(--cl-surface-rgb), .55);
}

.storefront-nav__action:hover {
  border-color: var(--store-accent-line);
  transform: translateY(-1px);
}

.storefront-nav__currency {
  position: relative;
}

.storefront-nav__currency::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: .72rem;
  color: var(--cl-muted-text);
  font-size: .75rem;
  pointer-events: none;
  transform: translateY(-56%);
}

.storefront-nav__currency select {
  min-width: 76px;
  min-height: 44px;
  padding: .55rem 1.8rem .55rem .75rem !important;
  border: 1px solid var(--store-line-soft) !important;
  border-radius: var(--store-radius-sm) !important;
  background: rgba(var(--cl-surface-rgb), .55) !important;
  color: var(--cl-primary-text) !important;
  font-size: .8rem;
  font-weight: 700;
  appearance: none;
}

.storefront-cart-button {
  position: relative;
}

.storefront-cart-count {
  display: inline-grid;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .24rem;
  place-items: center;
  border-radius: 999px;
  background: var(--cl-theme);
  color: var(--cl-button-text);
  font-size: .62rem;
  font-weight: 800;
}

.storefront-nav__mobile-actions {
  align-items: center;
  margin-left: auto;
  gap: .3rem;
}

.storefront-nav__icon-button,
.storefront-nav__toggle {
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border: 1px solid var(--store-line-soft) !important;
  border-radius: var(--store-radius-sm) !important;
  background: rgba(var(--cl-surface-rgb), .55) !important;
}

.storefront-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: none !important;
}

.storefront-nav__toggle span {
  display: block;
  width: 17px;
  height: 1px;
  background: var(--cl-primary-text);
  transition: transform var(--store-motion-fast) ease, opacity var(--store-motion-fast) ease;
}

.storefront-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.storefront-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.storefront-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Hero: editorial split layout */
.hero {
  min-height: auto !important;
  padding: clamp(5rem, 10vw, 9.5rem) 0 var(--store-section-space) !important;
  background: transparent !important;
  overflow: clip;
}

.aurora-container {
  display: none !important;
}

.hero::before {
  content: "";
  position: absolute;
  top: 3rem;
  right: max(1rem, calc((100vw - var(--store-content-width)) / 2));
  width: min(39vw, 34rem);
  aspect-ratio: 1;
  border: 1px solid var(--store-line-soft);
  background:
    linear-gradient(var(--store-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--store-line-soft) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  opacity: .34;
  transform: translate3d(0, calc(var(--store-scroll, 0) * -.03px), 0) rotate(4deg);
  -webkit-mask-image: linear-gradient(135deg, black, transparent 74%);
  mask-image: linear-gradient(135deg, black, transparent 74%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  top: 4.5rem;
  right: max(1rem, calc((100vw - var(--store-content-width)) / 2));
  width: clamp(8rem, 17vw, 15rem);
  height: 2px;
  background: var(--cl-theme);
  transform: rotate(-8deg);
  transform-origin: right;
  pointer-events: none;
}

.hero .container,
.hero-container {
  position: relative;
  z-index: 1;
}

.hero .content > * {
  filter: none !important;
}

.hero .content > :not(.hero-bg-image) {
  animation: none !important;
}

.hero .content,
.hero-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .65fr);
  grid-template-areas:
    "badge stats"
    "title stats"
    "copy stats"
    "search stats"
    "actions stats";
  align-items: end;
  justify-content: stretch !important;
  gap: 1.15rem clamp(2.5rem, 7vw, 7rem);
  max-width: none !important;
  padding: 0 !important;
  text-align: left !important;
}

.hero-badge { grid-area: badge; justify-self: start; }
.hero h1,
.hero-title { grid-area: title; }
.hero p,
.hero-subtitle { grid-area: copy; }
.hero .search-container,
.hero .hero-search,
.hero .hero-searchbar { grid-area: search; }
.hero .hero-buttons,
.hero .buttons,
.hero .hero-cta-buttons { grid-area: actions; }
.hero .stats-wrapper,
.hero .hero-stats { grid-area: stats; }

.hero h1,
.hero-title {
  max-width: 850px !important;
  margin: 0 !important;
  color: var(--cl-primary-text) !important;
  font-family: var(--store-font-display);
  font-size: clamp(3.25rem, 7.8vw, 7.8rem) !important;
  font-weight: 760 !important;
  letter-spacing: -.075em !important;
  line-height: .86 !important;
  text-wrap: balance;
}

.hero h1 span,
.hero-title span,
.easy-highlight,
.gradient-text {
  color: var(--cl-theme) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.hero p,
.hero-subtitle {
  max-width: 42rem !important;
  margin: .4rem 0 0 !important;
  color: var(--cl-secondary-text) !important;
  font-size: clamp(1rem, 1.5vw, 1.22rem) !important;
  line-height: 1.68 !important;
}

.hero .stats-wrapper,
.hero .hero-stats {
  display: grid !important;
  width: 100% !important;
  align-self: stretch;
  min-width: 0;
  margin: 0 !important;
  padding: 1.25rem 0 1.25rem 1.5rem !important;
  border: 0 !important;
  border-left: 1px solid var(--store-accent-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero .stats-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: stretch;
  gap: 0 !important;
}

.hero .stat-item,
.hero .stat-card {
  display: grid !important;
  align-content: center;
  justify-items: start;
  min-height: 5.75rem;
  padding: 1rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--store-line-soft) !important;
  background: transparent !important;
  text-align: left !important;
  backdrop-filter: none !important;
  overflow: hidden;
}

.hero .stat-item:last-child,
.hero .stat-card:last-child { border-bottom: 0 !important; }

.hero .stat-card:hover { transform: none !important; }
.hero .stat-glow,
.hero .stat-icon-wrapper { display: none !important; }
.hero .stat-content { align-items: flex-start !important; gap: 0 !important; }
.hero .stat-info { min-width: 0; }
.hero .stat-value { white-space: nowrap; }

.hero .stat-value {
  color: var(--cl-primary-text) !important;
  font-size: clamp(1.8rem, 3vw, 3rem) !important;
  font-weight: 720 !important;
  letter-spacing: -.06em;
  line-height: 1;
}

.hero .stat-label {
  margin-top: .42rem;
  color: var(--cl-muted-text) !important;
  font-size: .68rem !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero .search-container,
.hero .hero-search,
.hero .hero-searchbar {
  width: min(100%, 39rem) !important;
  margin: .6rem 0 0 !important;
  padding: .2rem .35rem .2rem 1rem !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero .search-container input,
.hero .hero-search input,
.form-control,
.form-select,
select,
textarea {
  min-height: 48px;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-surface) !important;
  color: var(--cl-primary-text) !important;
  box-shadow: none !important;
}

.hero .search-container input:hover,
.hero .hero-search input:hover,
.form-control:hover,
.form-select:hover,
select:hover,
textarea:hover {
  border-color: rgba(var(--cl-border-rgb), 1) !important;
}

.hero .search-container input:focus,
.hero .hero-search input:focus,
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus {
  border-color: var(--cl-theme) !important;
  box-shadow: 0 0 0 4px rgba(var(--cl-theme-rgb), .12) !important;
}

.hero .hero-buttons,
.hero .buttons,
.hero .hero-cta-buttons {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: .7rem !important;
}

.btn,
.premium-button,
.hero-button,
.cta-btn,
.discord-widget-btn {
  min-height: 46px;
  padding: .72rem 1.05rem !important;
  border-radius: var(--store-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  box-shadow: none !important;
}

.btn-primary,
.premium-button,
.hero-button-primary,
.cta-btn-primary {
  border: 1px solid var(--cl-theme) !important;
  background: var(--cl-theme) !important;
  color: var(--cl-button-text) !important;
}

.btn-primary:hover,
.premium-button:hover,
.hero-button-primary:hover,
.cta-btn-primary:hover {
  border-color: var(--cl-accent-hover) !important;
  background: var(--cl-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(var(--cl-theme-rgb), .2) !important;
}

.btn-outline-primary,
.hero-button-secondary {
  border: 1px solid var(--store-line) !important;
  background: transparent !important;
  color: var(--cl-primary-text) !important;
}

.btn-outline-primary:hover,
.hero-button-secondary:hover {
  border-color: var(--store-accent-line) !important;
  background: var(--store-accent-soft) !important;
  color: var(--cl-primary-text) !important;
}

/* Shared section framing */
.pc-reveal-content,
.easy-reveal-content,
.product-image-section,
.product-tabs-section,
.product-info-section,
.upsells-section {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.section-heading,
.section-header,
.easy-header,
.pc-header,
.pm-header {
  display: grid !important;
  justify-items: start !important;
  max-width: none !important;
  margin: 0 0 clamp(2.2rem, 5vw, 4rem) !important;
  text-align: left !important;
}

.section-heading::after,
.section-header::after,
.easy-header::after,
.pc-header::after,
.pm-header::after {
  content: "";
  width: 100%;
  height: 1px;
  margin-top: 1.75rem;
  background: linear-gradient(90deg, var(--store-line), transparent 78%);
}

/* Product, category, game, feedback and blog cards */
.product-neo-card,
.product-card,
.game-card,
.feature-frame,
.feedback-card,
.blog-card,
.image-gallery .list > div,
.categories a,
.cart-item-bg,
.form,
.bg-gray {
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
}

.product-neo-card,
.product-card,
.game-card,
.feature-frame,
.blog-card,
.categories a {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: border-color var(--store-motion-base) ease, background-color var(--store-motion-base) ease, transform var(--store-motion-base) cubic-bezier(.2,.75,.25,1), box-shadow var(--store-motion-base) ease !important;
}

.product-card::before,
.game-card::before,
.feature-frame::before,
.blog-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--cl-theme);
  transition: width var(--store-motion-base) ease;
  pointer-events: none;
}

.product-neo-card:hover,
.product-card:hover,
.game-card:hover,
.feature-frame:hover,
.blog-card:hover,
.categories a:hover {
  border-color: var(--store-accent-line) !important;
  background: color-mix(in srgb, var(--cl-surface) 94%, var(--cl-theme)) !important;
  transform: translateY(-5px);
  box-shadow: var(--store-shadow-md) !important;
}

.product-card:hover::before,
.game-card:hover::before,
.feature-frame:hover::before,
.blog-card:hover::before { width: 100%; }

.card-image-wrapper,
.product-card-image,
.game-card .game-image,
.blog-card img,
.categories img {
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--cl-secondary-background) !important;
}

.card-image-wrapper img,
.product-card-image img,
.game-card img,
.blog-card img,
.categories img {
  width: 100%;
  transition: transform var(--store-motion-base) cubic-bezier(.2,.75,.25,1), filter var(--store-motion-base) ease;
}

.object-blog-image {
  object-fit: var(--blog-image-fit, cover) !important;
}

.blog-card-summary,
.blog-card .card-title {
  overflow-wrap: anywhere;
  white-space: normal;
}

.product-neo-card:hover img,
.product-card:hover img,
.game-card:hover img,
.blog-card:hover img,
.categories a:hover img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

.card-details,
.product-card-body,
.game-info {
  padding: 1.2rem !important;
}

.product-name,
.product-title,
.game-title,
.card-title {
  color: var(--cl-primary-text) !important;
  font-size: 1rem !important;
  font-weight: 690 !important;
  letter-spacing: -.025em;
}

.product-price,
.price,
.card-price {
  color: var(--cl-theme) !important;
  font-weight: 760 !important;
}

.category-label,
.product-category,
.card-label {
  color: var(--cl-muted-text) !important;
  font-size: .66rem !important;
  font-weight: 720 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Games and feature grids */
.games-grid,
.features-grid,
.product-grid,
.products-grid,
.easy-bento-grid,
.pc-grid,
.pm-grid {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.game-card {
  aspect-ratio: 4 / 3 !important;
}

.game-card::after {
  background: linear-gradient(180deg, transparent 22%, rgba(var(--cl-primary-bg-rgb), .86) 100%) !important;
}

.game-logo-container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.feature-frame {
  min-height: 100%;
  padding: clamp(1.35rem, 3vw, 2.15rem) !important;
}

.feature-frame .feature-icon,
.easy-icon-circle,
.pc-icon-wrapper {
  display: grid;
  width: 46px !important;
  height: 46px !important;
  margin: 0 0 2rem !important;
  place-items: center;
  border: 1px solid var(--store-accent-line) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--store-accent-soft) !important;
  color: var(--cl-theme) !important;
  box-shadow: none !important;
}

.easy-bg-glows,
.pc-bg-glows,
.pm-bg-glows,
.hero-aurora,
.hero-glow { display: none !important; }

/* Original component signature: offset planes, index marks and accent rails. */
.features-list .list {
  counter-reset: storefront-feature;
}

.features-list .list > div {
  counter-increment: storefront-feature;
}

.features .feature-frame {
  isolation: isolate;
  min-height: 100% !important;
  padding: clamp(1.4rem, 3vw, 2.2rem) !important;
  border: 0 !important;
  border-radius: var(--store-radius) !important;
  background:
    linear-gradient(135deg, rgba(var(--cl-theme-rgb), .075), transparent 42%),
    var(--cl-surface) !important;
  box-shadow: inset 0 0 0 1px var(--store-line-soft), var(--store-shadow-sm) !important;
  overflow: hidden !important;
}

.features .feature-frame::before {
  top: 0;
  bottom: 0;
  width: 3px;
  height: auto;
}

.features .feature-frame::after {
  content: counter(storefront-feature, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  right: 1.15rem;
  color: rgba(var(--cl-text-muted-rgb), .65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.features .feature-content {
  min-height: 100%;
  gap: .8rem !important;
}

.features .feature-icon-wrapper {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 1rem;
  border: 0 !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--store-accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--store-accent-line) !important;
}

.features .feature-title {
  color: var(--cl-primary-text) !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 710 !important;
  letter-spacing: -.035em;
}

.features .feature-description {
  color: var(--cl-secondary-text) !important;
  line-height: 1.7 !important;
}

.text-block-section,
.text-image-section,
.text-video-section,
.menu-cheat-section {
  padding-inline: 1rem !important;
  background: transparent !important;
}

.text-block-container,
.text-image-container,
.text-video-container,
.menu-container {
  width: min(100%, var(--store-content-width)) !important;
  max-width: var(--store-content-width) !important;
  margin-inline: auto !important;
}

.text-block-card,
.text-image-card,
.text-video-card,
.menu-card {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: var(--store-radius-lg) !important;
  background: var(--cl-surface) !important;
  box-shadow: inset 0 0 0 1px var(--store-line-soft), var(--store-shadow-sm) !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

.text-block-section.background-secondary .text-block-card,
.text-image-section.background-secondary .text-image-card,
.text-video-section.background-secondary .text-video-card {
  background: var(--cl-secondary-background) !important;
}

.text-image-section.alignment-center .ti-text-content,
.text-video-section.alignment-center .tv-text-content {
  align-items: center;
  text-align: center;
}

.text-image-section.alignment-right .ti-text-content,
.text-video-section.alignment-right .tv-text-content {
  align-items: flex-end;
  text-align: right;
}

.text-image-section.alignment-center :is(.ti-buttons),
.text-video-section.alignment-center :is(.tv-buttons) { justify-content: center; }

.text-image-section.alignment-right :is(.ti-buttons),
.text-video-section.alignment-right :is(.tv-buttons) { justify-content: flex-end; }

.text-block-card::before,
.text-image-card::before,
.text-video-card::before,
.menu-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Text: editorial rail rather than another centered box. */
.text-block-card {
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.35rem, 7vw, 6rem) !important;
  border-radius: 0 var(--store-radius-lg) var(--store-radius-lg) 0 !important;
}

.text-block-card::before {
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cl-theme);
}

.text-block-content {
  max-width: 48rem;
  margin: 0 !important;
}

.text-block-title,
.ti-title,
.tv-title,
.info-title {
  color: var(--cl-primary-text) !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 730 !important;
  letter-spacing: -.055em !important;
  line-height: 1 !important;
  text-wrap: balance;
}

.text-block-subtitle,
.ti-subtitle,
.tv-subtitle,
.info-subtitle,
.text-block-text,
.ti-text,
.tv-text {
  color: var(--cl-secondary-text) !important;
  line-height: 1.75 !important;
  text-wrap: pretty;
}

/* Text + image: offset media plane with a quiet top keyline. */
.text-image-card {
  background:
    linear-gradient(115deg, rgba(var(--cl-theme-rgb), .055), transparent 44%),
    var(--cl-surface) !important;
}

.text-image-card::before {
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--cl-theme), transparent 42%);
}

.ti-content-wrapper,
.tv-content-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: clamp(1.5rem, 5vw, 5rem) !important;
  align-items: center !important;
  padding: clamp(1.25rem, 4vw, 3.5rem) !important;
}

.ti-image-wrapper {
  position: relative;
  aspect-ratio: var(--ti-aspect-ratio, auto);
  margin: clamp(-.25rem, -1vw, -1rem) clamp(-.25rem, -1vw, -1rem) clamp(-.25rem, -1vw, -1rem) 0;
  border: 0 !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-secondary-background) !important;
  box-shadow: 1rem 1rem 0 rgba(var(--cl-theme-rgb), .08) !important;
  overflow: hidden;
}

.ti-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--store-line-soft);
  border-radius: inherit;
  pointer-events: none;
}

.ti-image {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}

/* Text + video: dark media stage with a floating accent marker. */
.text-video-card {
  background: var(--cl-secondary-background) !important;
}

.text-video-card::before {
  top: 1.25rem;
  right: 1.25rem;
  width: .55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cl-theme);
  box-shadow: 0 0 0 .4rem rgba(var(--cl-theme-rgb), .1);
}

.tv-video-wrapper {
  position: relative;
  padding: .45rem !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-primary-background) !important;
  box-shadow: var(--store-shadow-md) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tv-video-wrapper iframe {
  position: static !important;
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(var(--store-radius) - .3rem) !important;
  box-shadow: none !important;
}

/* Menu: a focused feature index rather than a decorative empty frame. */
.menu-card {
  max-width: 68rem;
  margin-inline: auto;
  background:
    linear-gradient(180deg, rgba(var(--cl-theme-rgb), .045), transparent 45%),
    var(--cl-surface) !important;
}

.menu-card::before {
  inset: auto 1.5rem 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cl-theme), transparent);
}

.menu-content-wrapper {
  max-width: none !important;
  padding: clamp(1.5rem, 6vw, 5rem) !important;
  text-align: left !important;
}

.menu-info-section {
  width: 100%;
  align-items: stretch !important;
}

.menu-cheat-section .features-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem !important;
  width: 100%;
  margin-block: 1.5rem !important;
}

.menu-cheat-section .feature-item {
  min-width: 0;
  padding: 1rem !important;
  border: 0 !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-secondary-background) !important;
  box-shadow: inset 0 0 0 1px var(--store-line-soft);
  text-align: left;
}

.menu-cheat-section .action-buttons {
  justify-content: flex-start !important;
}

.text-btn,
.ti-btn,
.tv-btn,
.action-btn {
  min-height: 46px;
  border-radius: var(--store-radius-sm) !important;
}

/* Flexible media/card sizing: content controls the layout, never a fixed crop. */
.game-card {
  height: auto !important;
  min-height: clamp(12rem, 22vw, 17rem) !important;
}

.easy-bento-card {
  min-height: clamp(14rem, 28vw, 20rem) !important;
  height: auto !important;
}

/* Easy/bento feature component */
.easy-section,
.pc-section,
.pm-section,
.cta-discord-section {
  background: transparent !important;
}

.easy-container,
.pc-container,
.pm-container,
.cta-discord-container {
  width: min(calc(100% - 2rem), var(--store-content-width)) !important;
  max-width: var(--store-content-width) !important;
  margin-inline: auto !important;
}

.easy-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

.easy-bento-card {
  grid-column: span 4;
  min-height: 18rem !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.easy-bento-card.easy-card-wide { grid-column: span 6; }

.easy-bento-card:hover {
  border-color: var(--store-accent-line) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--store-shadow-md) !important;
}

.easy-card-inner,
.easy-card-split {
  height: 100%;
  padding: clamp(1.35rem, 3vw, 2rem) !important;
  background: transparent !important;
}

.easy-browser-mockup,
.easy-users-placeholder,
.easy-chart-wrapper {
  border: 1px solid var(--store-line-soft) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-secondary-background) !important;
  box-shadow: none !important;
}

/* Text, media and menu components */
.text-block-section .container,
.text-image-section .container,
.text-video-section .container,
.menu-cheat-section .container {
  position: relative;
}

.text-block-section .container::before,
.text-image-section .container::before,
.text-video-section .container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--store-accent-line);
}

.text-block-section .container > *,
.text-image-section .container > *,
.text-video-section .container > * {
  margin-left: clamp(1.25rem, 4vw, 4rem);
}

.text-image-section img,
.text-video-section video,
.text-video-section iframe,
.image-gallery img {
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  box-shadow: var(--store-shadow-sm) !important;
}

.menu-cheat-section .menu-card,
.menu-cheat-section .menu-item {
  border-color: var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
}

/* Pricing */
.pc-grid,
.pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.pc-card,
.pricing-card {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.1rem) !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.pc-card.featured,
.pc-card.pc-featured,
.pricing-card.featured {
  border-color: var(--store-accent-line) !important;
  transform: none !important;
}

.pc-card.featured::before,
.pc-card.pc-featured::before,
.pricing-card.featured::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cl-theme);
}

.pc-price,
.pricing-price {
  color: var(--cl-primary-text) !important;
  font-size: clamp(2.3rem, 5vw, 4rem) !important;
  font-weight: 720 !important;
  letter-spacing: -.06em;
}

/* FAQ */
.faq .container,
.faq-container {
  display: grid !important;
  grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}

.faq-header {
  position: sticky;
  top: 8rem;
  margin: 0 !important;
  text-align: left !important;
}

.faq-accordion {
  display: grid;
  gap: .65rem;
}

.faq-item,
.accordion-item {
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-surface) !important;
  overflow: clip;
  box-shadow: none !important;
}

.faq-question,
.accordion-button {
  min-height: 58px;
  padding: 1rem 1.15rem !important;
  background: transparent !important;
  color: var(--cl-primary-text) !important;
  font-weight: 670 !important;
  box-shadow: none !important;
}

.faq-question:hover,
.accordion-button:hover,
.accordion-button:not(.collapsed) {
  color: var(--cl-theme) !important;
}

.faq-answer,
.accordion-body {
  padding: 0 1.15rem 1.15rem !important;
  color: var(--cl-secondary-text) !important;
}

/* Payment methods */
.payment-marquee {
  overflow: clip !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.payment-track {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  width: 100% !important;
  gap: .65rem;
  animation: none !important;
  transform: none !important;
}

.payment-track > *:nth-child(n + 7) { display: none !important; }

.payment-pill {
  min-height: 58px;
  padding: .85rem 1rem !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-surface) !important;
  color: var(--cl-secondary-text) !important;
  box-shadow: none !important;
}

.payments-security {
  color: var(--cl-muted-text) !important;
}

/* Discord and community */
.cta-card,
.discord-panel {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, .75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(1.5rem, 5vw, 4.5rem) !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius-lg) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.cta-card::before,
.discord-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cl-theme);
}

.discord-widget {
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-secondary-background) !important;
  box-shadow: none !important;
}

/* Modals, dropdowns, popovers */
.modal {
  z-index: 1065 !important;
}

.modal-backdrop { z-index: 1060 !important; }

.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 2rem);
  margin: 1rem auto !important;
}

.modal-content,
.dropdown-menu,
.popover,
.offcanvas {
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
  color: var(--cl-primary-text) !important;
  box-shadow: var(--store-shadow-md) !important;
}

.modal-content {
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}

.modal-header,
.modal-footer {
  border-color: var(--store-line-soft) !important;
}

.dropdown-menu {
  z-index: 1080 !important;
  padding: .45rem !important;
}

.dropdown-item {
  min-height: 42px;
  border-radius: calc(var(--store-radius-sm) - 3px);
  color: var(--cl-secondary-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: var(--store-accent-soft) !important;
  color: var(--cl-primary-text) !important;
}

/* Cart and account surfaces */
.py-5-nav {
  padding-top: clamp(7rem, 12vw, 10rem) !important;
  padding-bottom: var(--store-section-space) !important;
}

.cart .section-title,
.py-5-nav > .section-title {
  margin-bottom: 2rem;
  text-align: left !important;
}

.cart-item-bg {
  overflow: hidden;
}

.cart-quantity-controls,
.cart-qty-btn,
.cart-qty-input {
  border-color: var(--store-line) !important;
  background: var(--cl-secondary-background) !important;
  color: var(--cl-primary-text) !important;
}

.badge,
.cart-addon-badge {
  border-radius: 999px !important;
  background: var(--store-accent-soft) !important;
  color: var(--cl-theme) !important;
}

.nav-tabs,
.nav-pills {
  gap: .35rem;
  border-color: var(--store-line) !important;
}

.nav-link {
  border-radius: var(--store-radius-sm) !important;
  color: var(--cl-secondary-text) !important;
}

.nav-link.active {
  border-color: var(--store-accent-line) !important;
  background: var(--store-accent-soft) !important;
  color: var(--cl-theme) !important;
}

/* Social, review, gallery and embedded-service components */
.socials .list,
.testimonials,
.image-gallery .list,
.myvouches .row {
  gap: 1rem 0;
}

.social,
.testimonial,
.feedback-card,
.myvouches iframe {
  min-height: 100%;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
}

.myvouches iframe {
  display: block;
  width: 100%;
  height: clamp(20rem, var(--vouches-height, 420px), 50rem);
}

.social {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 1rem !important;
  color: var(--cl-primary-text) !important;
  text-decoration: none !important;
}

.social:hover {
  border-color: var(--store-accent-line) !important;
  background: var(--store-accent-soft) !important;
  transform: translateY(-3px);
}

.social .left,
.social .right {
  position: static !important;
  transform: none !important;
}

.image-gallery .list > div {
  padding: .4rem;
  overflow: hidden;
}

.image-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: none !important;
  transition: transform var(--store-motion-base) ease;
}

.image-gallery a:hover img { transform: scale(1.025); }

/* Product detail page */
.product-wrapper {
  background: transparent !important;
  overflow: clip;
}

.product-bg-glows { display: none !important; }

.product-image-wrapper,
.product-tabs-section,
.product-info-section,
.live-stats-section,
.requirements-section {
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
}

.product-image-wrapper {
  padding: .5rem;
  overflow: hidden;
}

.product-image-wrapper img {
  border-radius: calc(var(--store-radius) - .35rem) !important;
}

.product-tabs-section,
.product-info-section,
.requirements-section {
  padding: clamp(1.2rem, 3vw, 2rem) !important;
}

.product-tab-buttons {
  display: flex;
  gap: .35rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--store-line-soft);
}

.product-tab-btn {
  min-height: 42px;
  padding: .55rem .8rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--store-radius-sm) !important;
  background: transparent !important;
  color: var(--cl-secondary-text) !important;
}

.product-tab-btn.active,
.product-tab-btn:hover {
  border-color: var(--store-accent-line) !important;
  background: var(--store-accent-soft) !important;
  color: var(--cl-theme) !important;
}

.product-info-section .product-title {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  line-height: 1 !important;
  letter-spacing: -.055em;
}

.live-stats-section,
.requirements-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .65rem !important;
  padding: .65rem !important;
}

.live-stat-item,
.requirement-box {
  min-height: 84px;
  padding: .9rem !important;
  border: 1px solid var(--store-line-soft) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-secondary-background) !important;
}

.requirements-background-text { display: none !important; }

.product-thumbnail {
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-surface) !important;
  overflow: hidden;
}

.product-thumbnail.active {
  border-color: var(--cl-theme) !important;
  box-shadow: 0 0 0 2px var(--store-accent-soft) !important;
}

/* Status, legal and editorial pages */
.status-cards,
.status-group {
  display: grid;
  gap: .75rem;
}

.status-group,
.status-card {
  padding: 1rem !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: var(--cl-surface) !important;
  box-shadow: none !important;
}

.editor {
  color: var(--cl-secondary-text) !important;
  font-size: 1rem;
  line-height: 1.8;
}

.editor h1,
.editor h2,
.editor h3,
.editor h4 {
  margin-block: 1.7em .6em;
  color: var(--cl-primary-text) !important;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.editor a { color: var(--cl-theme) !important; }
.editor hr { border-color: var(--store-line) !important; }
.editor blockquote {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--cl-theme);
  background: var(--cl-secondary-background);
  color: var(--cl-primary-text);
}

/* Scroll utility */
.scroll-up-button,
.scroll-up {
  width: 46px !important;
  height: 46px !important;
  right: 1rem !important;
  bottom: 1rem !important;
  border: 1px solid var(--store-accent-line) !important;
  border-radius: var(--store-radius-sm) !important;
  background: var(--cl-surface) !important;
  color: var(--cl-theme) !important;
  box-shadow: var(--store-shadow-sm) !important;
}

/* Footer */
footer,
.footer {
  position: relative;
  margin-top: var(--store-section-space);
  padding: clamp(3rem, 7vw, 6rem) 0 2rem !important;
  border-top: 1px solid var(--store-line) !important;
  background: var(--cl-footer) !important;
  color: var(--cl-secondary-text) !important;
}

footer::before,
.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: max(1rem, calc((100vw - var(--store-content-width)) / 2));
  width: min(8rem, 30vw);
  height: 2px;
  background: var(--cl-theme);
}

.footer-main-container {
  width: min(calc(100% - 2rem), var(--store-content-width));
  max-width: var(--store-content-width) !important;
  height: auto !important;
  margin-inline: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: clip !important;
}

.footer-content-container {
  width: 100% !important;
  max-width: none !important;
}

.footer .logo img {
  border: 0 !important;
  box-shadow: none !important;
}

footer a,
.footer a {
  color: var(--cl-secondary-text) !important;
  text-decoration: none !important;
}

footer a:hover,
.footer a:hover { color: var(--cl-primary-text) !important; }

/* Motion system */
.storefront-reveal {
  opacity: 1;
  transform: none;
}

.storefront-reveal.is-in-view {
  animation: storefront-reveal var(--store-motion-base) cubic-bezier(.2,.75,.25,1) both;
  animation-delay: min(calc(var(--reveal-index, 0) * 55ms), 330ms);
}

.storefront-heading-reveal {
  opacity: 1;
  clip-path: none;
  transform: none;
}

.storefront-heading-reveal.is-in-view {
  animation: storefront-heading-reveal var(--store-motion-base) cubic-bezier(.2,.75,.25,1) both;
}

body.storefront-ready .component {
  animation: storefront-enter var(--store-motion-base) ease both;
}

@keyframes storefront-enter {
  from { opacity: .01; }
  to { opacity: 1; }
}

@keyframes storefront-reveal {
  from { opacity: 0; transform: translate3d(0, var(--store-motion-distance), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes storefront-heading-reveal {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(.35em); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

/* Tablet */
@media (max-width: 1199.98px) {
  .storefront-nav__link,
  .storefront-nav__action { padding-inline: .58rem; }

  .storefront-brand__copy small { display: none; }

  .hero .content,
  .hero-content {
    grid-template-columns: minmax(0, 1.35fr) minmax(13rem, .55fr);
    gap: 1rem 2.5rem;
  }

  .easy-bento-card { grid-column: span 6; }
  .easy-bento-card.easy-card-wide { grid-column: span 6; }
}

/* Purpose-built mobile navigation and component layouts */
@media (max-width: 991.98px) {
  html { scroll-padding-top: 6.5rem; }

  .storefront-header {
    width: min(calc(100% - 1rem), var(--store-content-width));
    margin-top: .55rem;
  }

  .storefront-nav {
    min-height: 62px;
    border-radius: var(--store-radius) !important;
  }

  .storefront-nav__inner {
    min-height: 60px;
    padding: .5rem !important;
    flex-wrap: wrap;
  }

  .storefront-brand img {
    width: min(var(--nav-logo-size), 42px);
    height: min(var(--nav-logo-size), 42px);
  }

  .storefront-nav__collapse {
    flex-basis: 100%;
    margin: .1rem -.5rem -.5rem;
    padding: .65rem;
    border-top: 1px solid var(--store-line-soft);
    border-radius: 0 0 var(--store-radius) var(--store-radius);
    background: var(--cl-navigation);
  }

  .storefront-nav__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: .35rem;
  }

  .storefront-nav__link {
    justify-content: space-between;
    min-height: 48px;
    padding: .75rem !important;
    border-color: var(--store-line-soft);
    background: rgba(var(--cl-surface-rgb), .5);
  }

  .storefront-nav__link::after {
    top: .65rem;
    right: auto;
    bottom: .65rem;
    left: 0;
    width: 2px;
    height: auto;
    transform: scaleY(0);
  }

  .storefront-nav__link:hover::after,
  .storefront-nav__link.is-active::after { transform: scaleY(1); }

  .storefront-nav__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .5rem;
  }

  .storefront-nav__action,
  .storefront-nav__currency select {
    width: 100%;
    justify-content: flex-start;
  }

  .storefront-nav__search { display: none; }

  .hero {
    padding-top: clamp(4rem, 14vw, 6.5rem) !important;
  }

  .hero::before {
    top: 5rem;
    right: -10rem;
    width: 28rem;
    opacity: .2;
  }

  .hero .content,
  .hero-content {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "title" "copy" "search" "actions" "stats";
    gap: 1rem;
  }

  .hero h1,
  .hero-title {
    max-width: 11ch !important;
    font-size: clamp(3.2rem, 14vw, 6.5rem) !important;
  }

  .hero .stats-wrapper,
  .hero .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.5rem 0 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--store-accent-line) !important;
  }

  .hero .stats-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .hero .stat-item,
  .hero .stat-card {
    min-height: 6rem;
    padding: 1rem .75rem 0 0 !important;
    border-right: 1px solid var(--store-line-soft) !important;
    border-bottom: 0 !important;
  }

  .hero .stat-content,
  .hero .stat-info { width: 100%; }

  .hero .stat-item:last-child,
  .hero .stat-card:last-child { border-right: 0 !important; padding-right: 0 !important; }

  .faq .container,
  .faq-container,
  .cta-card,
  .discord-panel {
    grid-template-columns: 1fr !important;
  }

  .faq-header { position: static; }

  .easy-bento-card,
  .easy-bento-card.easy-card-wide { grid-column: span 12; }

  .ti-content-wrapper,
  .tv-content-wrapper {
    grid-template-columns: 1fr !important;
    padding: 1.25rem !important;
  }

  .ti-image-wrapper {
    margin: 0;
    box-shadow: .65rem .65rem 0 rgba(var(--cl-theme-rgb), .075) !important;
  }

  .menu-cheat-section .features-list {
    grid-template-columns: 1fr;
  }

  .easy-card-split { grid-template-columns: 1fr !important; }

  .modal-dialog {
    width: min(calc(100% - 1rem), 44rem);
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  :root { --store-section-space: clamp(3.75rem, 16vw, 5.25rem); }

  .container,
  .easy-container,
  .pc-container,
  .pm-container,
  .cta-discord-container {
    width: min(calc(100% - 1.25rem), var(--store-content-width)) !important;
  }

  .storefront-brand__copy { display: none; }

  .storefront-nav__links,
  .storefront-nav__actions { grid-template-columns: 1fr; }

  .storefront-nav__link { min-height: 46px; }

  .hero h1,
  .hero-title {
    font-size: clamp(3rem, 16vw, 4.75rem) !important;
    letter-spacing: -.07em !important;
  }

  .hero .hero-buttons > *,
  .hero .buttons > * { width: 100%; }

  .hero .stats-wrapper,
  .hero .hero-stats { gap: 0; }

  .hero .stat-value { font-size: clamp(1.4rem, 7vw, 2rem) !important; }
  .hero .stat-label {
    max-width: 100%;
    font-size: .56rem !important;
    letter-spacing: .05em;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .section-title,
  .section-heading h2,
  .section-header h2,
  .easy-main-title,
  .pc-main-title,
  .pm-main-title,
  .cta-main-title,
  .faq-title { font-size: clamp(2.15rem, 12vw, 3.4rem) !important; }

  .games-grid,
  .features-grid,
  .product-grid,
  .products-grid,
  .pc-grid,
  .pm-grid { grid-template-columns: 1fr !important; }

  .payment-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cta-card,
  .discord-panel { padding: 1.25rem !important; }

  .modal-dialog {
    align-items: center;
    width: calc(100% - 1rem);
    min-height: calc(100% - 1rem);
    margin: .5rem auto !important;
  }

  .modal-content {
    width: 100%;
    max-height: calc(100dvh - 1rem);
    border-radius: var(--store-radius-lg) !important;
  }

  .py-5-nav { padding-top: 6.5rem !important; }
}

@media (hover: none) {
  .product-neo-card:hover,
  .product-card:hover,
  .game-card:hover,
  .feature-frame:hover,
  .blog-card:hover,
  .categories a:hover { transform: none; }
}

html:has(body.motion-reduced) { scroll-behavior: auto; }

body.motion-reduced *,
body.motion-reduced *::before,
body.motion-reduced *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

body.motion-reduced .storefront-reveal,
body.motion-reduced .storefront-heading-reveal {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .storefront-reveal,
  .storefront-heading-reveal {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}

/* Product detail rules loaded after legacy global product styling. */
.product-page-shell .product-image-wrapper {
  background: transparent !important;
  border: 1px solid var(--product-line) !important;
  border-radius: clamp(1rem, 2vw, 1.35rem) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22) !important;
}
.product-page-shell .product-tabs-section,
.product-page-shell .product-tab-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.product-page-shell .checkout-panel {
  background: var(--product-panel) !important;
  border: 1px solid var(--product-line) !important;
  border-radius: clamp(1rem, 2vw, 1.25rem) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2) !important;
}
.product-page-shell .live-stats-section {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: .75rem 1.1rem !important;
  padding: .15rem 0 1rem !important;
  margin-bottom: 1rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--product-soft-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.product-page-shell .live-stat-item {
  gap: .38rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.product-page-shell .live-stat-item svg { width: 14px !important; height: 14px !important; }
.product-page-shell .live-stat-item p { font-size: .76rem !important; }
.product-page-shell .product-price-section {
  padding: 0 0 1.15rem !important;
  margin-bottom: 1.15rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--product-soft-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.product-page-shell .product-form .variants { flex-direction: row !important; }
.product-page-shell .product-form .variants .variant {
  width: auto !important;
  background: transparent !important;
  border: 1px solid var(--product-soft-line) !important;
  border-radius: .75rem !important;
  box-shadow: none !important;
}
.product-page-shell .product-form .variants .variant.active {
  background: rgba(var(--cl-accent-rgb), .08) !important;
  border-color: var(--cl-accent) !important;
}
.product-page-shell .product-form .variants .variant .price { background: transparent !important; }
@media (max-width: 575px) {
  .product-page-shell .live-stats-section { gap: .55rem .8rem !important; }
}

/* Footer end-cap: retain its responsive structure after shared component rules load. */
.footer.component {
  padding: clamp(2.5rem, 6vw, 5rem) 1rem 1rem !important;
  margin-top: 0 !important;
  background: var(--cl-background-primary) !important;
}
.footer.component .footer-main-container {
  width: min(100%, var(--store-content-width, 1180px)) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem) 1.25rem !important;
  border-radius: var(--store-radius-lg, 1.35rem) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cl-footer) 94%, var(--cl-surface)), var(--cl-footer)) !important;
}
.footer.component { overflow-x: clip; }
.footer.component .footer-content-container { max-width: none !important; }
.footer.component .footer-content-container > .row { margin-inline: 0 !important; }
.footer.component .footer-bottom { margin-top: 2.25rem !important; padding-top: 1.25rem !important; border-top: 1px solid var(--cl-border) !important; }
.footer.component .footer-payments { display: flex !important; flex-wrap: wrap; align-items: center; gap: .6rem; }
.footer.component .footer-payments i { min-width: 2rem; font-size: 1.4rem; }
.footer.component .footer-payments .fa-paypal { color: #0070e0; }
.footer.component .footer-payments .fa-bitcoin,
.footer.component .footer-payments .fa-btc { color: #f7931a; }
.footer.component .footer-payments .fa-cc-visa { color: #1a1f71; }
.footer.component .footer-payments .fa-cc-mastercard { color: #eb001b; }
.footer.component .footer-payments .fa-stripe,
.footer.component .footer-payments .fa-stripe-s { color: #635bff; }
@media (min-width: 768px) { .footer.component .footer-payments { justify-content: flex-end; } }
@media (max-width: 767px) {
  .footer.component { padding-inline: .75rem !important; }
  .footer.component .footer-main-container { padding: 1.75rem 1.25rem 1rem !important; border-radius: var(--store-radius, 1rem) !important; }
}

/* Cart experience — scoped late rules protect its hierarchy from shared legacy styles. */
.cart-page-shell { overflow-x: clip; }
.cart-page-shell .cart-item-bg {
  background: color-mix(in srgb, var(--cl-surface) 86%, var(--cl-background-primary)) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: var(--store-radius, 1rem) !important;
}
.cart-page-shell .cart-order-summary {
  background: linear-gradient(155deg, color-mix(in srgb, var(--cl-surface) 94%, var(--cl-background-primary)), var(--cl-background-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--cl-border) 72%, var(--cl-accent)) !important;
  border-radius: var(--store-radius, 1rem) !important;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.16) !important;
}
.cart-page-shell .cart-order-summary button[type="submit"] {
  border: 0 !important;
  background: linear-gradient(135deg, var(--cl-accent), var(--cl-accent-deep)) !important;
  color: var(--cl-button-text) !important;
}
.cart-page-shell .cart-quantity-controls { border: 1px solid var(--cl-border) !important; background: var(--cl-background-primary) !important; }
.cart-page-shell .cart-qty-input { background: transparent !important; color: var(--cl-text-primary) !important; }
.cart-page-shell .cart-recommendations { overflow: hidden !important; }
.cart-page-shell .cart-recommendations__marquee { overflow: hidden; }

/* Centered hero composition and Visual Editor statistic variants. */
.hero {
  display: grid;
  place-items: center;
  padding: clamp(5.5rem, 10vw, 8.5rem) 0 clamp(4.5rem, 8vw, 7rem) !important;
}

.hero.height-short { padding-block: clamp(4rem, 7vw, 5.5rem) !important; }
.hero.height-medium { padding-block: clamp(5rem, 9vw, 7rem) !important; }
.hero.height-tall { padding-block: clamp(6rem, 11vw, 9rem) !important; }

.hero .container { width: min(calc(100% - 2rem), var(--store-content-width)); }

.hero .content,
.hero-content {
  display: flex !important;
  width: min(100%, 72rem);
  max-width: 72rem !important;
  margin-inline: auto;
  padding: 0 !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.85rem, 1.7vw, 1.25rem) !important;
  text-align: center !important;
}

.hero .hero-badge {
  justify-self: auto;
  margin: 0 auto .35rem;
}

.hero h1,
.hero-title {
  width: min(100%, 14ch);
  max-width: 14ch !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: clamp(3.25rem, 7.4vw, 7rem) !important;
  line-height: .91 !important;
  text-wrap: balance;
}

.hero p,
.hero-subtitle {
  width: min(100%, 43rem);
  max-width: 43rem !important;
  margin: .25rem auto 0 !important;
  text-align: center !important;
  text-wrap: balance;
}

.hero .search-container,
.hero .hero-search,
.hero .hero-searchbar {
  width: min(100%, 38rem) !important;
  min-height: 3.25rem;
  margin: .65rem auto 0 !important;
  padding: .75rem 1rem !important;
  border-radius: var(--store-radius) !important;
  text-align: left;
}

.hero .hero-buttons,
.hero .buttons,
.hero .hero-cta-buttons {
  justify-content: center !important;
  padding-top: .2rem;
}

.hero .scroll-indicator { margin-top: 1.1rem; }

.hero .stats-wrapper,
.hero .hero-stats {
  display: block !important;
  width: min(100%, 64rem) !important;
  max-width: 64rem !important;
  margin: clamp(1.7rem, 4vw, 2.75rem) auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important;
  gap: .75rem !important;
  align-items: stretch;
}

.hero .stat-card {
  display: grid !important;
  min-width: 0;
  min-height: 0;
  place-items: center;
  align-content: center;
  padding: 1rem !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  backdrop-filter: none !important;
  transition: border-color var(--store-motion-fast), background var(--store-motion-fast), transform var(--store-motion-fast) !important;
}

.hero .stat-card:hover { transform: translateY(-2px) !important; }
.hero .stat-content { width: 100%; align-items: center !important; justify-content: center; gap: .65rem !important; }
.hero .stat-info { width: auto; align-items: center; text-align: center; }
.hero .stat-value { font-size: clamp(1.75rem, 3.6vw, 2.7rem) !important; }
.hero .stat-label { margin-top: .35rem; font-size: .62rem !important; line-height: 1.35; }
.hero .stat-glow { display: none !important; }

.hero-stats--inline .stats-wrapper {
  padding-top: .65rem !important;
  border-top: 1px solid var(--store-accent-line) !important;
}

.hero-stats--inline .stat-card {
  border-right: 1px solid var(--store-line-soft) !important;
}

.hero-stats--inline .stat-card:last-child { border-right: 0 !important; }
.hero-stats--inline .stat-icon-wrapper { display: none !important; }
.hero-stats--inline .stat-content { display: block !important; }

.hero-stats--pills .stats-grid { gap: .65rem !important; }

.hero-stats--pills .stat-card {
  padding: .8rem 1rem !important;
  border: 1px solid var(--store-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--cl-surface) 86%, transparent) !important;
}

.hero-stats--pills .stat-card:hover {
  border-color: color-mix(in srgb, var(--cl-accent) 52%, var(--cl-border)) !important;
  background: color-mix(in srgb, var(--cl-accent) 7%, var(--cl-surface)) !important;
}

.hero-stats--pills .stat-content { flex-direction: row !important; }
.hero-stats--pills .stat-info { align-items: flex-start; text-align: left; }
.hero-stats--pills .stat-value { font-size: clamp(1.25rem, 2.6vw, 1.75rem) !important; }
.hero-stats--pills .stat-label { margin-top: .2rem; font-size: .54rem !important; }
.hero-stats--pills .stat-icon-wrapper {
  display: flex !important;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
}
.hero-stats--pills .stat-icon-bg { border-radius: 50%; transform: none; }
.hero-stats--pills .stat-icon { width: 1rem; height: 1rem; }

.hero-stats--cards .stats-grid { gap: .85rem !important; }

.hero-stats--cards .stat-card {
  padding: 1.25rem !important;
  border: 1px solid var(--store-line) !important;
  border-radius: var(--store-radius) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cl-surface) 94%, transparent), color-mix(in srgb, var(--cl-background-primary) 92%, transparent)) !important;
  box-shadow: 0 18px 45px rgb(0 0 0 / .14) !important;
}

.hero-stats--cards .stat-card:hover {
  border-color: color-mix(in srgb, var(--cl-accent) 48%, var(--cl-border)) !important;
  box-shadow: 0 22px 55px rgb(0 0 0 / .22), 0 0 0 4px rgba(var(--cl-accent-rgb), .045) !important;
}

.hero-stats--cards .stat-icon-wrapper {
  display: flex !important;
  width: 2.75rem;
  height: 2.75rem;
}
.hero-stats--cards .stat-icon-bg { border-radius: var(--store-radius-sm); transform: rotate(45deg) scale(.72); }
.hero-stats--cards .stat-icon { width: 1.15rem; height: 1.15rem; }
.hero-stats--cards .stat-value { font-size: clamp(1.55rem, 3vw, 2.15rem) !important; }

@media (max-width: 767.98px) {
  .hero { padding-inline: 0 !important; }
  .hero::after { opacity: .5; }
  .hero .container { width: min(calc(100% - 1.25rem), var(--store-content-width)); }
  .hero h1,
  .hero-title { width: min(100%, 11ch); max-width: 11ch !important; font-size: clamp(3rem, 15vw, 5.3rem) !important; }
  .hero .stats-wrapper,
  .hero .hero-stats { margin-top: 1.35rem !important; }
  .hero-stats--inline .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; }
  .hero-stats--inline .stat-card { padding: .85rem .35rem !important; }
  .hero-stats--inline .stat-value { font-size: clamp(1.3rem, 7vw, 1.9rem) !important; }
  .hero-stats--inline .stat-label { max-width: 11ch; font-size: .5rem !important; letter-spacing: .04em; overflow-wrap: normal; }
  .hero-stats--pills .stats-grid,
  .hero-stats--cards .stats-grid { grid-template-columns: 1fr !important; }
  .hero-stats--pills .stat-card { width: min(100%, 24rem); margin-inline: auto; }
}

@media (max-width: 420px) {
  .hero .hero-cta-buttons { width: 100%; }
  .hero .hero-cta-buttons > * { flex: 1 1 0; justify-content: center; min-width: 0; }
  .hero .stat-label { letter-spacing: .03em !important; }
}

body.motion-reduced .hero .stat-card,
body.motion-reduced .hero .stat-icon-bg,
body.motion-reduced .hero .stat-icon,
body.motion-reduced .hero .hero-searchbar,
body.motion-reduced .hero .hero-cta-buttons > * {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero .stat-card,
  .hero .stat-icon-bg,
  .hero .stat-icon,
  .hero .hero-searchbar,
  .hero .hero-cta-buttons > * {
    animation: none !important;
    transition: none !important;
  }
}