:root {
  --ks-bg: #050913;
  --ks-bg-soft: #080e18;
  --ks-panel: #0b1220;
  --ks-panel-2: #0e1727;
  --ks-line: rgba(255,255,255,.075);
  --ks-line-strong: rgba(255,255,255,.13);
  --ks-text: #f5f7fb;
  --ks-muted: #91a0b2;
  --ks-muted-2: #677489;
  --ks-teal: #00d9ad;
  --ks-pink: #fb2b5e;
  --ks-gold: #f7c95c;
  --ks-radius: 18px;
  --ks-max: 1240px;
  --ks-shadow: 0 28px 80px rgba(0,0,0,.34);

  /* Official Tebex legal / Merchant of Record footer styling */
  --tebex-legal-footer-background-color: #050913;
  --tebex-legal-footer-text-color: #748196;
  --tebex-legal-footer-border-color: rgba(255,255,255,.075);
  --tebex-legal-footer-max-width: 1240px;
  --tebex-legal-footer-logo-color: #9aa7b8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0 !important;
  min-height: 100vh;
  color: var(--ks-text) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(0,217,173,.075), transparent 28%),
    radial-gradient(circle at 88% 2%, rgba(251,43,94,.065), transparent 28%),
    linear-gradient(180deg, #050913 0%, #060b15 50%, #050811 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.ks-container { width: min(var(--ks-max), calc(100% - 44px)); margin: 0 auto; }

.ks-topbar { border-bottom: 1px solid var(--ks-line); background: #040711; }
.ks-topbar-inner {
  min-height: 36px; display: flex; align-items: center; justify-content: center;
  gap: 8px; color: #98a5b7; font-size: 10px;
}
.ks-live { width: 6px; height: 6px; border-radius: 50%; background: var(--ks-teal); box-shadow: 0 0 12px rgba(0,217,173,.7); }

.ks-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--ks-line);
  background: rgba(5,9,19,.88);
  backdrop-filter: blur(20px);
}
.ks-nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ks-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 820; letter-spacing: -.03em; }
.ks-brand img { width: 42px; height: 42px; object-fit: contain; }
.ks-brand-fallback {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--ks-line); background: #0d1524; font-size: 11px;
}
.ks-links { display: flex; align-items: center; gap: 25px; color: #99a7b8; font-size: 11px; }
.ks-links a:hover { color: #fff; }
.ks-actions { display: flex; align-items: center; gap: 8px; }

.ks-icon-link, .ks-cart-link {
  min-width: 38px; height: 38px; padding: 0 9px; border-radius: 9px;
  border: 1px solid var(--ks-line); background: rgba(255,255,255,.025);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: #aab6c5; font-size: 10px; font-weight: 760;
  transition: .18s ease;
}
.ks-icon-link:hover, .ks-cart-link:hover {
  color: #fff; background: rgba(255,255,255,.045);
  border-color: var(--ks-line-strong); transform: translateY(-1px);
}
.ks-icon-link svg, .ks-cart-link svg { width: 16px; height: 16px; display: block; }
.ks-icon-label { display: inline; }
.ks-nav-separator {
  width: 1px; height: 24px; margin: 0 2px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.16), transparent);
}
.ks-cart-link { position: relative; padding: 0; width: 38px; }
.ks-cart-count {
  position: absolute; right: -5px; top: -5px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--ks-pink);
  color: #fff; font-size: 8px; font-weight: 850;
  border: 2px solid #050913;
}

.ks-coupon-bar {
  display: none; border-bottom: 1px solid var(--ks-line);
  background: linear-gradient(90deg, rgba(0,217,173,.045), rgba(251,43,94,.04));
}
.ks-coupon-bar.is-visible { display: block; }
.ks-coupon-inner {
  min-height: 41px; display: flex; align-items: center; justify-content: center;
  gap: 9px; flex-wrap: wrap; padding: 6px 0;
}
.ks-coupon-copy { color: #9ca9bb; font-size: 9px; }
.ks-coupon-copy strong { color: #eef3f8; }
.ks-coupon-code {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 7px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.025);
  color: #fff; font-size: 9px; font-weight: 850; letter-spacing: .06em;
}
.ks-copy-code {
  border: 0; background: transparent; color: var(--ks-teal);
  padding: 0; cursor: pointer; font-size: 8px; font-weight: 850;
}

.ks-main { min-height: 64vh; }
.ks-hero { padding: 82px 0 54px; }
.ks-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.ks-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: #bdc8d7; font-size: 9px; font-weight: 850;
  letter-spacing: .14em; text-transform: uppercase;
}
.ks-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ks-teal), var(--ks-pink));
}
.ks-hero h1 { margin: 16px 0 0; max-width: 700px; font-size: clamp(46px,5.3vw,74px); line-height: .98; letter-spacing: -.058em; }
.ks-hero-copy { max-width: 600px; margin: 22px 0 0; color: #93a0b2; font-size: 15px; line-height: 1.78; }
.ks-hero-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 28px; }
.ks-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 24px; color: #738196; font-size: 10px; }
.ks-trust span::before { content: "✓"; color: var(--ks-teal); margin-right: 6px; }

.ks-hero-card {
  position: relative; overflow: hidden; min-height: 390px;
  border: 1px solid var(--ks-line-strong); border-radius: 22px;
  background:
    radial-gradient(circle at 25% 20%, rgba(0,217,173,.11), transparent 28%),
    radial-gradient(circle at 78% 80%, rgba(251,43,94,.08), transparent 32%),
    linear-gradient(145deg,#0e1726,#080d16);
  box-shadow: var(--ks-shadow);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 26px;
}
.ks-hero-card::before {
  content: "KS"; position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%,-55%); font-size: 96px; font-weight: 900;
  color: rgba(255,255,255,.035); letter-spacing: -.08em;
}
.ks-hero-card h3 { position: relative; margin: 0; font-size: 24px; letter-spacing: -.04em; }
.ks-hero-card p { position: relative; margin: 8px 0 0; color: #7d8a9e; font-size: 11px; line-height: 1.65; }

.ks-btn, .btn {
  min-height: 42px !important; padding: 0 15px !important; border-radius: 10px !important;
  border: 1px solid var(--ks-line) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 7px !important; font-size: 11px !important; font-weight: 780 !important;
  text-decoration: none !important; cursor: pointer; transition: .18s ease !important;
}
.ks-btn:hover, .btn:hover { transform: translateY(-1px); }
.ks-btn-primary, .btn-primary { background: #f6f8fb !important; color: #08101d !important; border-color: #fff !important; }
.ks-btn-secondary, .btn-secondary, .btn-tertiary { background: rgba(255,255,255,.03) !important; color: #e7edf4 !important; }

.ks-section { padding: 55px 0; }
.ks-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.ks-section-head h1, .ks-section-head h2 { margin: 0; font-size: 30px; letter-spacing: -.043em; }
.ks-section-head p { margin: 6px 0 0; color: #758297; font-size: 12px; line-height: 1.65; }

.ks-panel {
  border: 1px solid var(--ks-line); border-radius: 18px;
  background: linear-gradient(180deg,rgba(12,18,30,.94),rgba(8,13,22,.94));
  padding: 22px;
}
.ks-cms { max-width: 920px; margin: 0 auto; }
.ks-cms p, .ks-cms li { color: #a0adbd; line-height: 1.8; }
.ks-cms h1, .ks-cms h2, .ks-cms h3 { letter-spacing: -.03em; }

.ks-category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.ks-category {
  min-height: 174px; padding: 18px; border: 1px solid var(--ks-line);
  border-radius: 16px; background: rgba(255,255,255,.016);
  display: flex; flex-direction: column; transition: .18s ease;
}
.ks-category:hover { transform: translateY(-2px); border-color: var(--ks-line-strong); background: rgba(255,255,255,.028); }
.ks-category-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; border: 1px solid var(--ks-line); background: #0d1524;
}
.ks-category-copy { margin-top: auto; padding-top: 24px; }
.ks-category-copy strong { display: block; font-size: 12px; }
.ks-category-copy small { display: block; margin-top: 5px; color: #6d7a8e; font-size: 9px; line-height: 1.5; }
.ks-category-cta {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--ks-line);
  display: flex; align-items: center; justify-content: space-between;
  color: #aeb9c7; font-size: 9px; font-weight: 800;
}
.ks-category-arrow {
  width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--ks-line); background: rgba(255,255,255,.025); transition: .18s ease;
}
.ks-category:hover .ks-category-arrow { transform: translateX(2px); color: var(--ks-teal); border-color: rgba(0,217,173,.24); }

.ks-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.ks-card {
  height: 100%; overflow: hidden; border: 1px solid var(--ks-line);
  border-radius: 17px; background: linear-gradient(180deg,rgba(13,20,34,.9),rgba(8,13,22,.92));
  display: flex; flex-direction: column; transition: .2s ease;
}
.ks-card:hover { transform: translateY(-3px); border-color: var(--ks-line-strong); box-shadow: 0 22px 55px rgba(0,0,0,.25); }
.ks-card-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0b111d; }
.ks-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-card-type, .ks-sale-badge {
  position: absolute; z-index: 3; top: 11px; padding: 5px 8px; border-radius: 6px;
  font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .11em;
}
.ks-card-type { left: 11px; background: rgba(5,8,14,.82); border: 1px solid rgba(255,255,255,.1); }
.ks-sale-badge { right: 11px; background: var(--ks-pink); color: #fff; box-shadow: 0 8px 24px rgba(251,43,94,.22); }
.ks-card-body { flex: 1; padding: 16px; display: flex; flex-direction: column; }
.ks-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ks-card-title { font-size: 14px; font-weight: 820; letter-spacing: -.015em; }
.ks-card-price { white-space: nowrap; font-size: 11px; font-weight: 820; }
.ks-old-price { color: #68768a; text-decoration: line-through; font-size: 9px; margin-right: 5px; }
.ks-card-desc { margin: 8px 0 0; color: #707d90; font-size: 10px; line-height: 1.65; max-height: 3.3em; overflow: hidden; }
.ks-meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ks-line); }
.ks-meta-group + .ks-meta-group { margin-top: 9px; }
.ks-meta-label { display: block; margin-bottom: 6px; color: #657386; font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ks-pill-row { display: flex; gap: 5px; flex-wrap: wrap; }
.ks-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 7px; border: 1px solid var(--ks-line); border-radius: 6px;
  background: rgba(255,255,255,.018); color: #aeb9c8; font-size: 8px; font-weight: 700;
}
.ks-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ks-teal); }
.ks-code-access {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  padding: 6px 8px; border-radius: 7px; border: 1px solid var(--ks-line);
  background: rgba(255,255,255,.02); font-size: 8px; font-weight: 820;
}
.ks-code-access.source { color: #d7fff6; border-color: rgba(0,217,173,.22); background: rgba(0,217,173,.04); }
.ks-code-access.escrowed { color: #ffd9e3; border-color: rgba(251,43,94,.22); background: rgba(251,43,94,.04); }
.ks-media-links { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.ks-media-btn {
  min-height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--ks-line); background: rgba(255,255,255,.02);
  display: inline-flex; align-items: center; gap: 6px; color: #d9e1ea; font-size: 9px; font-weight: 760;
}
.ks-media-btn:hover { border-color: var(--ks-line-strong); background: rgba(255,255,255,.04); }
.ks-card-actions { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; }
.ks-card-actions > * { flex: 1; }

.ks-package-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(340px,.88fr); gap: 26px; align-items: start; }
.ks-package-info { position: sticky; top: 98px; }
.ks-package-info h1 { margin: 11px 0 0; font-size: 40px; line-height: 1.04; letter-spacing: -.048em; }
.ks-package-price { margin-top: 17px; font-size: 27px; font-weight: 860; letter-spacing: -.03em; }
.ks-package-description { color: #a0adbd; font-size: 12px; line-height: 1.78; }
.ks-package-description iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 13px; }

.ks-gallery { display: grid; gap: 9px; }
.ks-gallery-stage {
  position: relative; overflow: hidden; min-height: 280px;
  border: 1px solid var(--ks-line); border-radius: 20px; background: #080e18;
}
.ks-gallery-slide { display: none; aspect-ratio: 16/9; }
.ks-gallery-slide.active { display: block; }
.ks-gallery-slide img, .ks-gallery-slide iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.ks-gallery-slide img { cursor: zoom-in; }
.ks-gallery-nav {
  position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,8,14,.72); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.ks-gallery-nav.prev { left: 12px; } .ks-gallery-nav.next { right: 12px; }
.ks-gallery-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  min-height: 27px; padding: 0 9px; border-radius: 8px;
  display: flex; align-items: center; background: rgba(5,8,14,.78);
  border: 1px solid rgba(255,255,255,.1); color: #c8d1dc; font-size: 8px; font-weight: 820;
}
.ks-gallery-thumbs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.ks-gallery-thumb {
  padding: 0; aspect-ratio: 16/9; overflow: hidden; border-radius: 9px;
  border: 1px solid var(--ks-line); background: #09101a; opacity: .58; cursor: pointer;
}
.ks-gallery-thumb.active { opacity: 1; border-color: rgba(0,217,173,.34); }
.ks-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ks-gallery-thumb.video { display: grid; place-items: center; color: #fff; font-size: 12px; }

.ks-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 30px;
  background: rgba(2,4,9,.92); backdrop-filter: blur(12px);
}
.ks-lightbox.open { display: flex; }
.ks-lightbox img { max-width: 100%; max-height: calc(100vh - 60px); object-fit: contain; border-radius: 12px; }
.ks-lightbox-close {
  position: fixed; right: 18px; top: 18px; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 11px;
  background: #0b1320; color: #fff; cursor: pointer;
}

.ks-package-coupon {
  display: none; margin-top: 14px; padding: 11px 12px; border-radius: 11px;
  border: 1px solid rgba(0,217,173,.14); background: rgba(0,217,173,.035);
}
.ks-package-coupon.is-visible { display: block; }
.ks-package-coupon strong { display: block; font-size: 9px; }
.ks-package-coupon small { display: block; margin-top: 3px; color: #788699; font-size: 8px; }
.ks-package-coupon-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }

.ks-add-cart { position: relative; overflow: hidden; isolation: isolate; }
.ks-add-label { transition: opacity .14s ease, transform .18s ease; }
.ks-box-animation {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.ks-box { position: relative; width: 28px; height: 22px; perspective: 100px; }
.ks-box-body {
  position: absolute; left: 4px; top: 8px; width: 20px; height: 13px;
  border: 1.7px solid currentColor; border-radius: 2px; opacity: 0; transform: scale(.7) translateY(5px);
}
.ks-box-flap {
  position: absolute; top: 3px; width: 13px; height: 9px;
  border: 1.7px solid currentColor; opacity: 0; transform-origin: bottom center;
}
.ks-box-flap.left { left: 2px; transform: rotateX(-82deg) rotateZ(10deg); }
.ks-box-flap.right { right: 2px; transform: rotateX(-82deg) rotateZ(-10deg); }
.ks-add-cart.is-packing { background: rgba(0,217,173,.07)!important; border-color: rgba(0,217,173,.22)!important; color: #d8fff7!important; }
.ks-add-cart.is-packing .ks-add-label { opacity: 0; transform: translateY(5px); }
.ks-add-cart.is-packing .ks-box-animation { opacity: 1; }
.ks-add-cart.is-packing .ks-box-body { animation: ks-box-body .52s ease forwards; }
.ks-add-cart.is-packing .ks-box-flap.left { animation: ks-box-left .52s ease .08s forwards; }
.ks-add-cart.is-packing .ks-box-flap.right { animation: ks-box-right .52s ease .13s forwards; }
.ks-add-cart.is-added { background: rgba(0,217,173,.12)!important; border-color: rgba(0,217,173,.25)!important; color: #d8fff7!important; }
.ks-add-cart.is-added .ks-box-animation { opacity: 0; }
@keyframes ks-box-body { 0%{opacity:0;transform:scale(.65) translateY(5px)} 45%{opacity:1;transform:scale(1.05)} 100%{opacity:1;transform:scale(1)} }
@keyframes ks-box-left { 0%{opacity:0;transform:rotateX(-82deg) rotateZ(10deg)} 35%{opacity:1} 100%{opacity:1;transform:rotateX(0) rotateZ(0)} }
@keyframes ks-box-right { 0%{opacity:0;transform:rotateX(-82deg) rotateZ(-10deg)} 35%{opacity:1} 100%{opacity:1;transform:rotateX(0) rotateZ(0)} }

.ks-reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ks-reviews-title { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.ks-reviews-subtitle { margin: 5px 0 0; color: #6f7d90; font-size: 9px; }
.ks-rating-summary { display: flex; align-items: center; gap: 9px; }
.ks-rating-number { font-size: 22px; font-weight: 860; }
.ks-stars { color: var(--ks-gold); font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.ks-rating-count { display: block; color: #6f7d90; font-size: 8px; margin-top: 2px; }
.ks-review-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.ks-review-card {
  min-height: 168px; padding: 15px; border: 1px solid var(--ks-line); border-radius: 14px;
  background: linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.012));
  display: flex; flex-direction: column;
}
.ks-review-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 9px; }
.ks-review-user { display: flex; align-items: center; gap: 8px; }
.ks-review-avatar {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--ks-line); background: rgba(255,255,255,.035); font-size: 9px; font-weight: 850;
}
.ks-review-name { display: block; font-size: 9px; font-weight: 820; }
.ks-review-role { display: block; margin-top: 3px; color: #68778a; font-size: 8px; }
.ks-review-body { margin: 13px 0 0; color: #aeb9c7; font-size: 9px; line-height: 1.7; }
.ks-review-footer { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; gap: 8px; color: #68778a; font-size: 8px; }
.ks-verified { color: #7ee8cf; font-weight: 760; }

.ks-form { max-width: 720px; margin: 0 auto; }
.ks-form label { display: block; margin: 14px 0 7px; color: #a6b2c2; font-size: 10px; }
.ks-form input, .ks-form select, .ks-form textarea,
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  width: 100%; padding: 12px 13px !important; border-radius: 10px !important;
  border: 1px solid var(--ks-line-strong) !important; outline: none !important;
  background: #080e19 !important; color: #eef3f8 !important;
}
.ks-form input:focus, .ks-form select:focus, .ks-form textarea:focus { border-color: rgba(0,217,173,.45) !important; }

.ks-alert {
  margin: 16px 0; padding: 12px 14px; border: 1px solid var(--ks-line);
  border-radius: 11px; background: rgba(255,255,255,.025); color: #a8b4c5; font-size: 10px;
}
.ks-empty { padding: 45px 20px; text-align: center; border: 1px dashed var(--ks-line-strong); border-radius: 16px; color: #718095; font-size: 11px; }

.ks-footer {
  margin-top: 28px; border-top: 1px solid var(--ks-line);
  background: rgba(4,7,15,.65); padding: 34px 0 38px;
}
.ks-footer-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; }
.ks-footer-brand { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; }
.ks-footer-brand img { width: 32px; height: 32px; object-fit: contain; }
.ks-footer-copy { max-width: 520px; margin-top: 11px; color: #6f7c90; font-size: 9px; line-height: 1.7; }
.ks-footer-links { display: flex; justify-content: flex-end; gap: 15px; flex-wrap: wrap; color: #7d8a9d; font-size: 9px; }
.ks-footer-links a:hover { color: #fff; }
.ks-footer-bottom {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ks-line);
  display: flex; justify-content: space-between; gap: 16px; color: #5f6c7f; font-size: 8px;
}

.ks-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 1200;
  transform: translate(-50%,12px); opacity: 0; pointer-events: none;
  padding: 10px 13px; border-radius: 9px; border: 1px solid var(--ks-line-strong);
  background: #0b1421; color: #e7eef5; font-size: 9px; transition: .18s ease;
}
.ks-toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1040px) {
  .ks-hero-grid, .ks-package-layout { grid-template-columns: 1fr; }
  .ks-package-info { position: static; }
  .ks-grid { grid-template-columns: 1fr 1fr; }
  .ks-category-grid { grid-template-columns: 1fr 1fr; }
  .ks-review-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ks-links { display: none; }
  .ks-icon-label { display: none; }
  .ks-icon-link { width: 38px; padding: 0; }
  .ks-nav-separator { height: 18px; }
}
@media (max-width: 640px) {
  .ks-container { width: calc(100% - 26px); }
  .ks-nav { min-height: 66px; }
  .ks-brand-name { display: none; }
  .ks-hero { padding: 52px 0 39px; }
  .ks-hero h1 { font-size: 43px; }
  .ks-hero-copy { font-size: 13px; }
  .ks-section { padding: 42px 0; }
  .ks-section-head, .ks-reviews-head { align-items: flex-start; flex-direction: column; }
  .ks-grid, .ks-category-grid, .ks-review-grid { grid-template-columns: 1fr; }
  .ks-gallery-thumbs { grid-template-columns: repeat(4,1fr); }
  .ks-footer-grid { grid-template-columns: 1fr; }
  .ks-footer-links { justify-content: flex-start; }
  .ks-footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Live review submission */
.ks-review-actions{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap
}
.ks-review-submit-btn{white-space:nowrap}
.ks-review-modal{
  position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(2,4,9,.82);backdrop-filter:blur(12px)
}
.ks-review-modal.open{display:flex}
.ks-review-dialog{
  width:min(600px,100%);max-height:min(760px,calc(100vh - 48px));overflow:auto;
  border:1px solid var(--ks-line-strong);border-radius:19px;
  background:linear-gradient(180deg,#0d1625,#080e18);box-shadow:0 32px 90px rgba(0,0,0,.5);
  padding:22px
}
.ks-review-dialog-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.ks-review-dialog h2{margin:7px 0 0;font-size:24px;letter-spacing:-.04em}
.ks-review-close{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--ks-line);
  background:rgba(255,255,255,.025);color:#fff;cursor:pointer
}
.ks-review-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.ks-review-field.full{grid-column:1/-1}
.ks-review-field label{
  display:block;margin-bottom:7px;color:#909daf;font-size:9px;font-weight:760
}
.ks-review-field input,.ks-review-field textarea{
  width:100%;border:1px solid var(--ks-line-strong);border-radius:10px;
  background:#070d17;color:#f4f7fb;padding:11px 12px;outline:none
}
.ks-review-field textarea{min-height:120px;resize:vertical;line-height:1.6}
.ks-review-field input:focus,.ks-review-field textarea:focus{border-color:rgba(0,217,173,.4)}
.ks-review-help{margin-top:5px;color:#657386;font-size:8px;line-height:1.5}
.ks-star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.ks-star-input input{position:absolute;opacity:0;pointer-events:none}
.ks-star-input label{
  margin:0;cursor:pointer;font-size:25px;color:#364154;line-height:1;transition:.15s ease
}
.ks-star-input label:hover,.ks-star-input label:hover~label,
.ks-star-input input:checked~label{color:var(--ks-gold)}
.ks-review-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.ks-review-status{
  display:none;margin-top:14px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--ks-line);background:rgba(255,255,255,.02);
  color:#a8b5c5;font-size:9px;line-height:1.55
}
.ks-review-status.show{display:block}
.ks-review-status.success{border-color:rgba(0,217,173,.22);background:rgba(0,217,173,.045);color:#b9f8e9}
.ks-review-status.error{border-color:rgba(251,43,94,.24);background:rgba(251,43,94,.045);color:#ffd0dc}
.ks-review-honeypot{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;opacity:0!important}
.ks-verified-explainer{
  margin-top:13px;padding:10px 11px;border:1px solid rgba(0,217,173,.12);border-radius:10px;
  background:rgba(0,217,173,.025);color:#78879b;font-size:8px;line-height:1.6
}
@media(max-width:620px){
  .ks-review-form-grid{grid-template-columns:1fr}
  .ks-review-field.full{grid-column:auto}
  .ks-review-dialog{padding:17px}
}


.ks-card-desc p,
.ks-card-desc ul,
.ks-card-desc ol,
.ks-card-desc h1,
.ks-card-desc h2,
.ks-card-desc h3,
.ks-card-desc h4 {
  margin: 0;
}
.ks-card-desc br + br {
  display: none;
}
.ks-card-desc img,
.ks-card-desc iframe,
.ks-card-desc video,
.ks-card-desc table {
  display: none !important;
}

.ks-card-price-loading,
.ks-card-desc-loading {
  color: #667489;
}
.ks-card-price-loading {
  font-size: 9px;
  font-weight: 700;
}
.ks-card-desc-loading {
  opacity: .72;
}

.ks-package-unavailable-reason {
  margin-top: 8px;
  color: #77869a;
  font-size: 9px;
  line-height: 1.55;
  text-align: center;
}

[data-featured-resources][hidden] {
  display: none !important;
}
[data-featured-resources] .ks-grid {
  align-items: stretch;
}


/* Kevin Scripts basket / checkout */
.ks-checkout-page {
  padding-top: 48px;
  padding-bottom: 72px;
}
.ks-checkout-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 23px;
}
.ks-checkout-heading h1 {
  margin: 8px 0 0;
  font-size: 36px;
  letter-spacing: -.045em;
}
.ks-checkout-heading p {
  max-width: 620px;
  margin: 8px 0 0;
  color: #738196;
  font-size: 11px;
  line-height: 1.65;
}
.ks-basket-user {
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ks-line);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.ks-basket-user-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(0,217,173,.07);
  border: 1px solid rgba(0,217,173,.15);
  color: #cafff3;
  font-size: 10px;
  font-weight: 850;
}
.ks-basket-user small,
.ks-basket-user strong {
  display: block;
}
.ks-basket-user small {
  color: #637185;
  font-size: 8px;
}
.ks-basket-user strong {
  margin-top: 2px;
  font-size: 10px;
}
.ks-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(320px,.65fr);
  gap: 18px;
  align-items: start;
}
.ks-checkout-main {
  display: grid;
  gap: 14px;
}
.ks-cart-panel,
.ks-coupon-panel,
.ks-order-summary {
  padding: 0;
  overflow: hidden;
}
.ks-cart-panel-head {
  min-height: 66px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ks-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.ks-cart-panel-head strong,
.ks-cart-panel-head span {
  display: block;
}
.ks-cart-panel-head strong {
  font-size: 11px;
}
.ks-cart-panel-head span {
  margin-top: 3px;
  color: #667489;
  font-size: 8px;
}
.ks-cart-continue {
  color: #8e9bad;
  font-size: 9px;
  font-weight: 760;
}
.ks-cart-continue:hover {
  color: var(--ks-teal);
}
.ks-cart-items {
  padding: 0 18px;
}
.ks-cart-item {
  display: grid;
  grid-template-columns: 116px minmax(0,1fr);
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ks-line);
}
.ks-cart-item:last-child {
  border-bottom: 0;
}
.ks-cart-item-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid var(--ks-line);
  background:
    radial-gradient(circle at 25% 20%, rgba(0,217,173,.08), transparent 35%),
    #080e18;
  display: grid;
  place-items: center;
}
.ks-cart-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ks-cart-item-media span {
  color: #77869a;
  font-size: 11px;
  font-weight: 850;
}
.ks-cart-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ks-cart-item-top,
.ks-cart-item-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.ks-cart-item-name {
  display: inline-block;
  color: #f1f4f8;
  font-size: 12px;
  font-weight: 820;
}
.ks-cart-item-name:hover {
  color: var(--ks-teal);
}
.ks-cart-gift {
  display: block;
  margin-top: 5px;
  color: #6c7a8e;
  font-size: 8px;
}
.ks-cart-item-price {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
}
.ks-cart-item-price small {
  color: #657386;
  font-size: 7px;
}
.ks-cart-item-bottom {
  align-items: flex-end;
}
.ks-qty-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ks-qty-label {
  color: #647286;
  font-size: 8px;
}
.ks-qty-control {
  height: 32px;
  display: grid;
  grid-template-columns: 31px 44px 31px;
  border: 1px solid var(--ks-line-strong);
  border-radius: 8px;
  overflow: hidden;
}
.ks-qty-control button {
  border: 0;
  background: rgba(255,255,255,.025);
  color: #b5c0ce;
  cursor: pointer;
}
.ks-qty-control button:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.ks-qty-control input {
  width: 44px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--ks-line) !important;
  border-right: 1px solid var(--ks-line) !important;
  border-radius: 0 !important;
  text-align: center;
  background: transparent !important;
  color: #fff !important;
  appearance: textfield;
}
.ks-qty-control input::-webkit-outer-spin-button,
.ks-qty-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ks-qty-static {
  min-width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--ks-line);
  color: #aeb9c8;
  font-size: 9px;
}
.ks-cart-item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 8px;
  font-weight: 760;
}
.ks-cart-details {
  color: #8e9bad;
}
.ks-cart-details:hover {
  color: #fff;
}
.ks-cart-remove {
  color: #f57998;
}
.ks-cart-remove:hover {
  color: #ff9ab2;
}
.ks-cart-panel-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--ks-line);
  display: flex;
  justify-content: flex-end;
}
.ks-coupon-panel {
  padding: 18px;
}
.ks-coupon-panel-head h2 {
  margin: 7px 0 0;
  font-size: 17px;
  letter-spacing: -.03em;
}
.ks-redeem-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 14px;
}
.ks-redeem-form input {
  min-height: 42px;
}
.ks-applied-coupons {
  margin-top: 12px;
  display: grid;
  gap: 7px;
}
.ks-applied-coupon {
  padding: 10px 11px;
  border: 1px solid rgba(0,217,173,.14);
  border-radius: 9px;
  background: rgba(0,217,173,.03);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ks-applied-coupon strong,
.ks-applied-coupon span {
  display: block;
}
.ks-applied-coupon strong {
  font-size: 9px;
}
.ks-applied-coupon span {
  margin-top: 3px;
  color: #718095;
  font-size: 8px;
}
.ks-applied-coupon a {
  color: #f57998;
  font-size: 8px;
  font-weight: 760;
}
.ks-order-summary {
  position: sticky;
  top: 98px;
  padding: 20px;
}
.ks-order-summary h2 {
  margin: 8px 0 0;
  font-size: 22px;
  letter-spacing: -.035em;
}
.ks-summary-rows {
  margin-top: 18px;
  border-top: 1px solid var(--ks-line);
}
.ks-summary-row {
  min-height: 45px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--ks-line);
  color: #7e8b9e;
  font-size: 9px;
}
.ks-summary-row strong {
  color: #dfe6ee;
  font-size: 10px;
}
.ks-summary-total {
  min-height: 62px;
}
.ks-summary-total span {
  color: #c5ced9;
  font-size: 10px;
  font-weight: 800;
}
.ks-summary-total strong {
  color: #fff;
  font-size: 21px;
  letter-spacing: -.03em;
}
.ks-summary-total small {
  color: #647286;
  font-size: 8px;
}
.ks-checkout-button {
  width: 100%;
  min-height: 48px !important;
  margin-top: 17px;
}
.ks-checkout-button:disabled {
  opacity: .72;
  cursor: wait;
}
.ks-checkout-security {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: #6d7b8f;
  font-size: 8px;
}
.ks-checkout-security span::first-letter {
  color: var(--ks-teal);
}
.ks-checkout-help {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ks-line);
  color: #69778a;
  font-size: 8px;
  line-height: 1.6;
}
.ks-checkout-help a {
  color: #aab6c6;
  font-weight: 760;
}
.ks-empty-basket {
  max-width: 620px;
  margin: 25px auto 80px;
  padding: 48px 28px;
  text-align: center;
}
.ks-empty-basket-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border: 1px solid var(--ks-line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  display: grid;
  place-items: center;
  color: #8795a8;
}
.ks-empty-basket-icon svg {
  width: 22px;
  height: 22px;
}
.ks-empty-basket h1 {
  margin: 18px 0 0;
  font-size: 27px;
  letter-spacing: -.04em;
}
.ks-empty-basket p {
  max-width: 420px;
  margin: 9px auto 18px;
  color: #718095;
  font-size: 10px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .ks-checkout-layout {
    grid-template-columns: 1fr;
  }
  .ks-order-summary {
    position: static;
  }
}
@media (max-width: 650px) {
  .ks-checkout-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .ks-basket-user {
    width: 100%;
  }
  .ks-cart-panel-head {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .ks-cart-item {
    grid-template-columns: 88px minmax(0,1fr);
  }
  .ks-cart-item-top,
  .ks-cart-item-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .ks-cart-item-price {
    order: 2;
  }
  .ks-redeem-form {
    grid-template-columns: 1fr;
  }
  .ks-redeem-form .ks-btn {
    width: 100%;
  }
}


.ks-cart-delete {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid rgba(251,43,94,.18);
  background: rgba(251,43,94,.045);
  color: #f58aa5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .16s ease;
}
.ks-cart-delete:hover {
  color: #ffd6e0;
  border-color: rgba(251,43,94,.34);
  background: rgba(251,43,94,.09);
  transform: translateY(-1px);
}
.ks-cart-delete svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}


/* Package options / Discord requirement */
.ks-options-form {
  max-width: 720px;
  margin: 0 auto;
}
.ks-options-intro {
  margin: 8px 0 20px;
  color: #748297;
  font-size: 10px;
  line-height: 1.65;
}
.ks-option-group {
  margin-top: 15px;
}
.ks-option-group label {
  display: block;
  margin-bottom: 7px;
  color: #95a2b4;
  font-size: 9px;
  font-weight: 760;
}
.ks-discord-option {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid rgba(88,101,242,.22);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(88,101,242,.07), rgba(255,255,255,.015));
  display: flex;
  gap: 12px;
  align-items: center;
}
.ks-discord-option-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 11px;
  border: 1px solid rgba(88,101,242,.24);
  background: rgba(88,101,242,.08);
  display: grid;
  place-items: center;
  color: #aeb5ff;
}
.ks-discord-option-icon svg {
  width: 22px;
  height: 22px;
}
.ks-discord-option-copy {
  min-width: 0;
}
.ks-discord-option-copy span,
.ks-discord-option-copy strong,
.ks-discord-option-copy small {
  display: block;
}
.ks-option-kicker {
  color: #8f9cff;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ks-discord-option-copy strong {
  margin-top: 4px;
  color: #f2f5f9;
  font-size: 12px;
}
.ks-discord-option-copy small {
  margin-top: 4px;
  color: #758397;
  font-size: 8px;
  line-height: 1.55;
}
.ks-options-note {
  margin: 11px 0 0;
  color: #627084;
  font-size: 8px;
  line-height: 1.6;
  text-align: center;
}


.ks-option-help {
  display: block;
  margin-top: 7px;
  color: #66758a;
  font-size: 8px;
  line-height: 1.55;
}
.ks-discord-id-entry input {
  letter-spacing: .02em;
}


.ks-option-actions {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}
.ks-option-actions .ks-btn {
  width: 100%;
}
.ks-btn-discord {
  min-height: 44px;
  border: 1px solid rgba(88,101,242,.34);
  background: rgba(88,101,242,.14);
  color: #dfe2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ks-btn-discord:hover {
  background: rgba(88,101,242,.22);
  border-color: rgba(88,101,242,.5);
  color: #fff;
}
.ks-btn-discord svg {
  width: 17px;
  height: 17px;
}
.ks-discord-connected {
  border-color: rgba(0,217,173,.18);
  background: linear-gradient(135deg, rgba(0,217,173,.055), rgba(255,255,255,.015));
}


/* Empty cart drawer */
body.ks-cart-open {
  overflow: hidden;
}
.ks-empty-cart-overlay[hidden] {
  display: none !important;
}
.ks-empty-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  justify-content: flex-end;
}
.ks-empty-cart-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2,6,13,.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
  cursor: default;
}
.ks-empty-cart-drawer {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  height: 100%;
  padding: 22px;
  border-left: 1px solid var(--ks-line);
  background:
    radial-gradient(circle at 100% 0%, rgba(251,43,94,.055), transparent 35%),
    radial-gradient(circle at 0% 0%, rgba(0,217,173,.055), transparent 35%),
    #070d17;
  box-shadow: -24px 0 60px rgba(0,0,0,.34);
  transform: translateX(100%);
  transition: transform .2s ease;
  display: flex;
  flex-direction: column;
  outline: 0;
}
.ks-empty-cart-overlay.open .ks-empty-cart-backdrop {
  opacity: 1;
}
.ks-empty-cart-overlay.open .ks-empty-cart-drawer {
  transform: translateX(0);
}
.ks-empty-cart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ks-line);
}
.ks-empty-cart-head h2 {
  margin: 7px 0 0;
  font-size: 24px;
  letter-spacing: -.04em;
}
.ks-empty-cart-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ks-line-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #9ca9ba;
  display: grid;
  place-items: center;
  font-size: 20px;
  cursor: pointer;
}
.ks-empty-cart-close:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}
.ks-empty-cart-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 18px;
}
.ks-empty-cart-icon {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  border: 1px solid rgba(0,217,173,.16);
  background: rgba(0,217,173,.045);
  color: #7f8da1;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.ks-empty-cart-icon svg {
  width: 27px;
  height: 27px;
}
.ks-empty-cart-count {
  color: var(--ks-teal);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ks-empty-cart-body h3 {
  margin: 8px 0 0;
  font-size: 22px;
  letter-spacing: -.035em;
}
.ks-empty-cart-body p {
  max-width: 270px;
  margin: 8px 0 0;
  color: #6f7e92;
  font-size: 9px;
  line-height: 1.65;
}
.ks-empty-cart-actions {
  padding-top: 17px;
  border-top: 1px solid var(--ks-line);
  display: grid;
  gap: 9px;
}
.ks-empty-cart-actions .ks-btn {
  width: 100%;
}
@media (max-width: 520px) {
  .ks-empty-cart-drawer {
    width: 100%;
  }
}


/* Sidebar-controlled Featured Package hero */
.ks-hero-featured-card {
  padding: 0;
  justify-content: initial;
  display: grid;
  grid-template-rows: minmax(205px, 1.15fr) auto;
}
.ks-hero-featured-card::before {
  display: none;
}
.ks-hero-featured-media {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 20%, rgba(0,217,173,.1), transparent 34%),
    #09111d;
}
.ks-hero-featured-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(7,12,21,.74) 100%);
  pointer-events: none;
}
.ks-hero-featured-media img {
  width: 100%;
  height: 100%;
  min-height: 205px;
  object-fit: cover;
  display: block;
}
.ks-hero-featured-fallback {
  font-size: 76px;
  font-weight: 900;
  letter-spacing: -.08em;
  color: rgba(255,255,255,.045);
}
.ks-hero-featured-media .ks-sale-badge {
  top: 14px;
  right: 14px;
}
.ks-hero-featured-content {
  position: relative;
  padding: 19px 21px 21px;
}
.ks-hero-featured-title-row {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ks-hero-featured-card .ks-hero-featured-title-row h3 {
  margin: 0;
  max-width: 72%;
  font-size: 23px;
  line-height: 1.08;
}
.ks-hero-featured-price {
  white-space: nowrap;
  color: #f6f8fb;
  font-size: 12px;
  font-weight: 850;
}
.ks-hero-featured-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ks-hero-featured-meta .ks-code-access {
  margin-top: 11px;
}
.ks-hero-featured-meta .ks-media-links {
  margin-top: 11px;
}
.ks-hero-featured-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  margin-top: 15px;
}
.ks-hero-featured-actions .ks-btn {
  width: 100%;
}
.ks-btn-disabled {
  opacity: .58;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 650px) {
  .ks-hero-featured-title-row {
    flex-direction: column;
    gap: 8px;
  }
  .ks-hero-featured-card .ks-hero-featured-title-row h3 {
    max-width: none;
  }
  .ks-hero-featured-actions {
    grid-template-columns: 1fr;
  }
}


/* Package resource link icons */
.ks-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ks-media-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* Recent purchases marquee */
.ks-purchase-ticker[hidden] {
  display: none !important;
}
.ks-purchase-ticker {
  min-height: 74px;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
  background:
    linear-gradient(90deg, rgba(0,217,173,.035), transparent 28%, transparent 72%, rgba(251,43,94,.03)),
    #050a12;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: stretch;
  overflow: hidden;
}
.ks-purchase-ticker-label {
  position: relative;
  z-index: 3;
  min-width: 178px;
  padding: 0 22px;
  border-right: 1px solid var(--ks-line);
  background: #070d16;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.ks-purchase-ticker-label strong {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #dce3ec;
}
.ks-purchase-ticker-viewport {
  min-width: 0;
  overflow: hidden;
  cursor: default;
  user-select: none;
  touch-action: pan-y;
}
.ks-purchase-ticker-viewport::-webkit-scrollbar {
  display: none;
}
.ks-purchase-ticker-track {
  width: max-content;
  min-width: 100%;
  min-height: 73px;
  display: flex;
  align-items: stretch;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.ks-purchase-sequence {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}
.ks-purchase-ticker-item {
  width: 265px;
  flex: 0 0 265px;
  padding: 12px 18px;
  border-right: 1px solid var(--ks-line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ks-purchase-copy,
.ks-purchase-topline {
  min-width: 0;
  display: flex;
}
.ks-purchase-copy {
  flex: 1;
  flex-direction: column;
  gap: 4px;
}
.ks-purchase-topline {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ks-purchase-topline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e7edf4;
  font-size: 9px;
}
.ks-purchase-price {
  flex: 0 0 auto;
  color: #dce5ef;
  font-size: 8px;
  font-weight: 800;
}
.ks-purchase-details {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #69788c;
  font-size: 8px;
}
@media (max-width: 700px) {
  .ks-purchase-ticker {
    grid-template-columns: 1fr;
  }
  .ks-purchase-ticker-label {
    min-width: 0;
    min-height: 38px;
    border-right: 0;
    border-bottom: 1px solid var(--ks-line);
  }
  .ks-purchase-ticker-item {
    width: 230px;
    flex-basis: 230px;
  }
}


/* Recent purchase customer profiles */
.ks-purchase-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  border: 1px solid rgba(0,217,173,.2);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.12), transparent 31%),
    linear-gradient(
      calc(115deg + (var(--ks-avatar-shift, 0) * 9deg)),
      rgba(0,217,173,.14),
      rgba(251,43,94,.08)
    );
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.018),
    0 0 18px rgba(0,217,173,.035);
  display: grid;
  place-items: center;
  color: #dffbf5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
}
.ks-purchase-buyer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ks-purchase-buyer strong {
  max-width: 130px;
}
.ks-purchase-buyer-badge {
  color: #66758a;
  font-size: 6px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* Hosting partner / affiliate card */
.ks-partner-section {
  padding-top: 10px;
}
.ks-partner-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,217,173,.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 50%, rgba(0,217,173,.08), transparent 28%),
    radial-gradient(circle at 72% 10%, rgba(251,43,94,.04), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    #08111c;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 34px;
  padding: 28px 30px;
}
.ks-partner-card::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -110px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(0,217,173,.06);
  border-radius: 50%;
  pointer-events: none;
}
.ks-partner-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.ks-partner-logo-wrap {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 16px;
  border: 1px solid rgba(0,217,173,.18);
  background: linear-gradient(145deg, rgba(0,217,173,.1), rgba(251,43,94,.06));
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ks-partner-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.ks-partner-logo-fallback {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.06em;
  color: #e9fff9;
}
.ks-partner-copy {
  min-width: 0;
}
.ks-partner-copy h2 {
  margin: 7px 0 5px;
  font-size: 22px;
  letter-spacing: -.035em;
}
.ks-partner-copy p {
  margin: 0;
  max-width: 650px;
  color: #78869a;
  font-size: 10px;
  line-height: 1.65;
}
.ks-partner-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ks-partner-disclosure {
  color: #617084;
  font-size: 8px;
}
.ks-partner-actions {
  position: relative;
  z-index: 1;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.ks-partner-actions .ks-btn {
  width: 100%;
}
.ks-partner-link-note {
  text-align: center;
  color: #617084;
  font-size: 8px;
}
@media (max-width: 820px) {
  .ks-partner-card {
    grid-template-columns: 1fr;
  }
  .ks-partner-actions {
    min-width: 0;
    max-width: 280px;
  }
}
@media (max-width: 560px) {
  .ks-partner-card {
    padding: 20px;
  }
  .ks-partner-main {
    align-items: flex-start;
  }
  .ks-partner-logo-wrap {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 13px;
  }
  .ks-partner-copy h2 {
    font-size: 19px;
  }
}


/* =========================================================
   v35 — Canonical 1080p desktop scaling
   ========================================================= */

/*
  Desktop layout is authored at 1920 CSS pixels and the entire interface is
  proportionally scaled by JavaScript. Do not add separate 1440p/4K card or
  typography breakpoints: the 1080p composition itself is the source of truth.
*/
html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body.ks-canonical-desktop {
  margin-left: 0;
  margin-right: 0;
  transform-origin: top left;
  overflow-x: hidden;
}

/*
  Keep percentage-based sections predictable inside the fixed canonical
  desktop geometry. The visible result still fills the physical viewport
  because body zoom is viewportWidth / 1920.
*/
body.ks-canonical-desktop .ks-main,
body.ks-canonical-desktop .ks-purchase-ticker,
body.ks-canonical-desktop footer {
  width: 100%;
}

/* Tablet and mobile continue using the original responsive theme. */
@media (max-width: 1099px) {
  body {
    width: auto !important;
    min-width: 0 !important;
    zoom: 1 !important;
  }
}

/* =========================================================
   Premium Kevin Scripts page scrollbar
   ========================================================= */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 217, 173, .76) #050913;
}

/* Chromium / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #050913;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 3px solid #050913;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(0, 217, 173, .96) 0%,
    rgba(0, 217, 173, .70) 54%,
    rgba(251, 43, 94, .82) 100%
  );
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #00ebbc 0%,
    #00cfa6 50%,
    #fb2b5e 100%
  );
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: #050913;
}


/* =========================================================
   v36 — Full-viewport canonical 1080p composition
   ========================================================= */

/*
  Keep 1920px as the desktop master canvas, but remove the old 1240px content
  cap. The canonical layout itself now uses the full width with proportional
  edge gutters, then the whole composition is scaled to the physical viewport.
*/
body.ks-canonical-desktop .ks-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-left: 48px;
  padding-right: 48px;
}

/* Full-width top-level desktop regions. */
body.ks-canonical-desktop .ks-main,
body.ks-canonical-desktop .ks-hero,
body.ks-canonical-desktop .ks-section,
body.ks-canonical-desktop .ks-purchase-ticker,
body.ks-canonical-desktop footer {
  width: 100%;
  max-width: none;
}

/* Preserve the intended 1080p proportions while allowing the hero to occupy
   the full canonical canvas. */
body.ks-canonical-desktop .ks-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
  gap: 52px;
}

/* Product and review layouts use the available master width instead of
   clustering in the center. */
body.ks-canonical-desktop .ks-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body.ks-canonical-desktop .ks-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body.ks-canonical-desktop .ks-review-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.ks-canonical-desktop .ks-package-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
  gap: 28px;
}

/* Make sure full-width cards and partner areas can stretch naturally. */
body.ks-canonical-desktop .ks-panel,
body.ks-canonical-desktop .ks-partner-card,
body.ks-canonical-desktop .ks-hero-card,
body.ks-canonical-desktop .ks-featured-shell,
body.ks-canonical-desktop .ks-review-shell {
  max-width: none;
}

/* Keep desktop edge spacing proportional at larger physical resolutions,
   because the whole 1920px canvas is already being scaled by body zoom. */
body.ks-canonical-desktop {
  box-sizing: border-box;
}

/* On tablet/mobile, hand control back to the original responsive theme. */
@media (max-width: 1099px) {
  .ks-container {
    width: min(1240px, calc(100% - 36px));
    max-width: 1240px;
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   v37 — Checkout-only first buyer offer
   ========================================================= */

.ks-checkout-offer {
  display: none;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(0, 217, 173, .15);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(0,217,173,.055), rgba(251,43,94,.025)),
    rgba(255,255,255,.012);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ks-checkout-offer.is-visible {
  display: flex;
}

.ks-checkout-offer-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.ks-checkout-offer-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  border: 1px solid rgba(0,217,173,.15);
  background: rgba(0,217,173,.045);
  display: grid;
  place-items: center;
  color: var(--ks-teal);
}

.ks-checkout-offer-icon svg {
  width: 17px;
  height: 17px;
}

.ks-checkout-offer-copy strong {
  display: block;
  color: #eef3f8;
  font-size: 10px;
  font-weight: 850;
}

.ks-checkout-offer-copy small {
  display: block;
  margin-top: 3px;
  color: #788699;
  font-size: 8.5px;
}

.ks-checkout-offer-code {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.025);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
}

.ks-checkout-offer-code .ks-copy-code {
  color: var(--ks-teal);
}

@media (max-width: 640px) {
  .ks-checkout-offer {
    align-items: flex-start;
    flex-direction: column;
  }

  .ks-checkout-offer-code {
    margin-left: 45px;
  }
}


/* =========================================================
   v38 — Apple-inspired minimal scrollbar
   ========================================================= */

/*
  Browser CSS cannot reproduce the system-native macOS overlay scrollbar
  exactly, but this closely matches the visual language: slim, neutral,
  rounded, translucent, and nearly invisible until interaction.
*/

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.26) transparent;
}

/* Chromium / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.36);
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background: rgba(255,255,255,.48);
  background-clip: padding-box;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: transparent;
}

/* Light-mode fallback if the theme is ever reused on a pale background. */
@media (prefers-color-scheme: light) {
  html {
    scrollbar-color: rgba(0,0,0,.28) transparent;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.22);
    background-clip: padding-box;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.34);
    background-clip: padding-box;
  }

  html::-webkit-scrollbar-thumb:active,
  body::-webkit-scrollbar-thumb:active {
    background: rgba(0,0,0,.44);
    background-clip: padding-box;
  }
}


/* =========================================================
   v39 — macOS-style dark translucent scrollbar fix
   ========================================================= */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,128,.42) transparent;
}

/* Chromium / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(120,120,128,.38);
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(142,142,147,.58);
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background: rgba(174,174,178,.72);
  background-clip: padding-box;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: transparent;
}


/* =========================================================
   v40 — Clean minimal scrollbar
   ========================================================= */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #394454 #0a0f17;
}

/* Chromium / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #0a0f17;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 52px;
  border: 2px solid #0a0f17;
  border-radius: 999px;
  background: #394454;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #4b586a;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background: #5a687c;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: #0a0f17;
}


/* =========================================================
   v41 — Stable checkout quantity updates
   ========================================================= */

/*
  Apply the canonical desktop geometry immediately from the inline head
  bootstrap so basket refreshes never briefly render at the unscaled size.
*/
html.ks-canonical-desktop-root body {
  width: 1920px;
  min-width: 1920px;
  zoom: var(--ks-canonical-scale, 1);
}

/* Keep the Update basket button footprint constant while quantities refresh. */
[data-update-basket] {
  min-width: 132px;
  position: relative;
}

[data-update-basket].is-updating {
  color: transparent !important;
  cursor: wait;
}

[data-update-basket].is-updating::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.82);
  border-radius: 50%;
  animation: ks-basket-update-spin .7s linear infinite;
}

@keyframes ks-basket-update-spin {
  to { transform: rotate(360deg); }
}

/* Prevent controls from changing visual width while an update is queued. */
.ks-qty-control {
  flex: 0 0 auto;
}

.ks-qty-control input {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1099px) {
  html.ks-canonical-desktop-root body {
    width: auto;
    min-width: 0;
    zoom: 1;
  }
}


/* =========================================================
   v42 — Compact centered package options / Discord page
   ========================================================= */

/*
  The full-viewport desktop rules intentionally stretch normal storefront
  panels. Package options should behave more like a focused modal/card, so
  explicitly opt this panel back into a compact centered width.
*/
body.ks-canonical-desktop .ks-options-section .ks-container {
  display: flex;
  justify-content: center;
  padding-left: 64px;
  padding-right: 64px;
}

body.ks-canonical-desktop .ks-panel.ks-options-form {
  width: 760px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  border-radius: 16px;
}

/* Slightly tighter heading/intro rhythm. */
.ks-options-form > .ks-eyebrow {
  margin-bottom: 8px;
}

.ks-options-form > h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.ks-options-intro {
  margin-top: 9px;
  margin-bottom: 16px;
  max-width: 560px;
}

/* Compact the Discord identity card. */
.ks-options-form .ks-discord-option {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 11px;
}

.ks-options-form .ks-discord-option-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 10px;
}

.ks-options-form .ks-discord-option-icon svg {
  width: 20px;
  height: 20px;
}

/* When two Discord actions are present, use a balanced two-column row. */
.ks-options-form .ks-option-actions-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ks-options-form .ks-option-actions {
  margin-top: 14px;
  gap: 8px;
}

.ks-options-form .ks-option-actions .ks-btn {
  min-height: 42px;
}

.ks-options-form .ks-options-note {
  margin-top: 9px;
}

/* Normal desktop/laptop sizes stay centered without touching the footer/ticker. */
@media (min-width: 1100px) and (max-width: 1919px) {
  body.ks-canonical-desktop .ks-panel.ks-options-form {
    width: 720px;
    max-width: 720px;
  }
}

/* Tablet/mobile: retain a compact card with safe side spacing. */
@media (max-width: 1099px) {
  .ks-options-section .ks-container {
    display: block;
  }

  .ks-panel.ks-options-form {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .ks-panel.ks-options-form {
    padding: 18px;
    border-radius: 14px;
  }

  .ks-options-form > h1 {
    font-size: 24px;
  }

  .ks-options-form .ks-option-actions-split {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v43 — Compact optimized package cards
   ========================================================= */

/*
  Package cards should size to their own content rather than stretching to
  match the tallest card in a grid row. This removes the large empty region
  above the action buttons when a package has fewer metadata/resource rows.
*/
.ks-grid {
  align-items: start;
}

.ks-card {
  height: auto;
  align-self: start;
}

.ks-card-body {
  flex: 0 0 auto;
  padding: 14px;
  gap: 0;
}

.ks-card-row {
  align-items: center;
  gap: 10px;
}

.ks-card-title {
  min-width: 0;
  line-height: 1.25;
}

.ks-card-price {
  flex: 0 0 auto;
}

/* Metadata stays visually separated but uses less vertical room. */
.ks-meta:not(:empty) {
  margin-top: 10px;
  padding-top: 10px;
}

.ks-meta:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.ks-meta-group + .ks-meta-group {
  margin-top: 7px;
}

.ks-meta-label {
  margin-bottom: 5px;
}

.ks-pill-row {
  gap: 4px;
}

.ks-pill {
  padding: 4px 6px;
}

/* Empty JS hydration targets must not reserve space. */
[data-code-access]:empty,
[data-package-links]:empty {
  display: none;
}

.ks-code-access {
  margin-top: 9px;
  padding: 5px 7px;
}

.ks-media-links {
  margin-top: 9px;
  gap: 6px;
}

.ks-media-btn {
  min-height: 31px;
  padding: 0 9px;
}

/*
  Actions now follow the actual content instead of being pushed to a shared
  artificial bottom edge.
*/
.ks-card-actions {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--ks-line);
  gap: 7px;
}

.ks-card-actions .ks-btn {
  min-height: 38px;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Keep cards compact even when hydrated metadata is absent. */
.ks-card-body > .ks-card-row + .ks-card-actions {
  margin-top: 11px;
}

/* On larger screens, preserve the compact card proportions rather than
   allowing global full-viewport rules to make the internals feel sparse. */
body.ks-canonical-desktop .ks-card-body {
  padding: 14px;
}

body.ks-canonical-desktop .ks-card-actions .ks-btn {
  min-height: 38px;
}

/* Mobile gets a touch more breathing room for finger targets. */
@media (max-width: 640px) {
  .ks-card-body,
  body.ks-canonical-desktop .ks-card-body {
    padding: 13px;
  }

  .ks-card-actions {
    margin-top: 11px;
    padding-top: 10px;
  }

  .ks-card-actions .ks-btn,
  body.ks-canonical-desktop .ks-card-actions .ks-btn {
    min-height: 42px;
  }
}


/* =========================================================
   v44 — Optimized package card information layout
   ========================================================= */

/*
  Never equal-height stretch package cards. This explicitly overrides the
  older Featured Resources rule as well as normal category grids.
*/
.ks-grid,
[data-featured-resources] .ks-grid {
  align-items: start;
}

.ks-grid > .ks-card,
[data-featured-resources] .ks-grid > .ks-card {
  height: max-content !important;
  min-height: 0;
  align-self: start !important;
}

/*
  Use the available card width instead of stacking every compatibility group
  down the left side. At normal desktop card widths this becomes three compact
  columns; narrower cards automatically fall back to two or one.
*/
.ks-card .ks-meta:not(:empty) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px 12px;
  align-items: start;
  margin-top: 10px;
  padding-top: 10px;
}

.ks-card .ks-meta-group,
.ks-card .ks-meta-group + .ks-meta-group {
  min-width: 0;
  margin-top: 0;
}

.ks-card .ks-meta-label {
  margin-bottom: 5px;
  line-height: 1.2;
}

.ks-card .ks-pill-row {
  align-content: flex-start;
  gap: 4px;
}

/*
  Body becomes a small two-column utility layout:
  - title and metadata span the full card
  - Source/Escrow sits beside resource links
  - actions span the full card immediately underneath
*/
.ks-card .ks-card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 9px;
  row-gap: 0;
  height: auto;
  min-height: 0;
}

.ks-card .ks-card-row,
.ks-card .ks-meta,
.ks-card .ks-card-actions {
  grid-column: 1 / -1;
}

.ks-card [data-code-access]:not([hidden]):not(:empty) {
  grid-column: 1;
  align-self: center;
  margin-top: 9px;
}

.ks-card [data-package-links]:not([hidden]):not(:empty) {
  grid-column: 2;
  align-self: center;
  justify-self: start;
}

/* The actual badges/buttons no longer add separate vertical rows. */
.ks-card .ks-code-access {
  margin-top: 0;
  white-space: nowrap;
}

.ks-card .ks-media-links {
  margin-top: 9px;
  min-width: 0;
  align-items: center;
}

/* Actions sit directly after the information shelf. */
.ks-card .ks-card-actions {
  margin-top: 11px;
  padding-top: 10px;
}

/*
  If there are no metadata badges at all, collapse the metadata slot entirely.
  Hidden hydration wrappers also contribute zero geometry.
*/
.ks-card .ks-meta[hidden],
.ks-card [data-code-access][hidden],
.ks-card [data-package-links][hidden],
.ks-card [data-code-access]:empty,
.ks-card [data-package-links]:empty {
  display: none !important;
}

/* Keep the optimized layout dense at the canonical desktop width. */
body.ks-canonical-desktop .ks-card .ks-card-body {
  height: auto;
  min-height: 0;
}

/* Narrow card / tablet fallback. */
@media (max-width: 1180px) {
  .ks-card .ks-meta:not(:empty) {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* Mobile: utilities wrap naturally and metadata remains easy to scan. */
@media (max-width: 640px) {
  .ks-card .ks-meta:not(:empty) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .ks-card .ks-card-body {
    grid-template-columns: 1fr;
  }

  .ks-card .ks-card-row,
  .ks-card .ks-meta,
  .ks-card [data-code-access]:not([hidden]):not(:empty),
  .ks-card [data-package-links]:not([hidden]):not(:empty),
  .ks-card .ks-card-actions {
    grid-column: 1;
  }

  .ks-card .ks-media-links {
    margin-top: 7px;
  }
}

@media (max-width: 390px) {
  .ks-card .ks-meta:not(:empty) {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v45 — Package access badge on product image
   ========================================================= */

/*
  Listing-card Source Code / Escrowed access now lives on the artwork instead
  of consuming a utility row below the compatibility information.
*/
.ks-card-media .ks-card-image-access {
  position: absolute;
  z-index: 4;
  top: 11px;
  right: 11px;
  margin: 0 !important;
  pointer-events: none;
}

.ks-card-media .ks-card-image-access[hidden],
.ks-card-media .ks-card-image-access:empty {
  display: none !important;
}

.ks-card-media .ks-card-image-access .ks-code-access {
  margin: 0;
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 6px;
  border-color: rgba(255,255,255,.12);
  background: rgba(5,8,14,.84);
  box-shadow: 0 7px 22px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #eef5f7;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ks-card-media .ks-card-image-access .ks-code-access.source {
  color: #d7fff6;
  border-color: rgba(0,217,173,.24);
  background: rgba(5,18,18,.86);
}

.ks-card-media .ks-card-image-access .ks-code-access.escrowed {
  color: #ffd9e3;
  border-color: rgba(251,43,94,.24);
  background: rgba(20,8,15,.86);
}

/* If a Tebex sale badge is also present, keep it below the access badge so
   Source Code/Escrowed retains the requested top-right position. */
.ks-card-media .ks-card-image-access:not([hidden]) ~ .ks-sale-badge {
  top: 43px;
}

/*
  Older v44 utility-grid selectors also match data-code-access. Reset those
  properties in the image context so the overlay has zero impact on card flow.
*/
.ks-card-media [data-code-access]:not([hidden]):not(:empty) {
  grid-column: auto;
  align-self: auto;
  margin-top: 0;
}

/* Resource links now use the full utility width because access moved away. */
.ks-card .ks-media-links {
  grid-column: 1 / -1;
}

/* On mobile keep the overlay readable without making it oversized. */
@media (max-width: 640px) {
  .ks-card-media .ks-card-image-access {
    top: 9px;
    right: 9px;
  }

  .ks-card-media .ks-card-image-access .ks-code-access {
    min-height: 23px;
    padding: 5px 7px;
  }
}


/* Hide duplicate category/access labels cleanly when JS marks the category badge hidden. */
.ks-card-type[hidden] {
  display: none !important;
}


/* =========================================================
   v46 — Left-aligned inline package resource links
   ========================================================= */

/*
  Source/Escrowed moved onto the artwork in v45, so the old two-column utility
  wrapper is no longer needed. Let YouTube / Docs / GitHub / TikTok begin at
  the same left edge as Framework Support and remain inline.
*/
.ks-card [data-package-links]:not([hidden]):not(:empty) {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  margin-left: 0;
}

.ks-card .ks-media-links {
  grid-column: 1 / -1;
  justify-content: flex-start;
  justify-self: start;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}


/* =========================================================
   v47 — Package detail access badge on gallery image
   ========================================================= */

/* Match listing cards: Source Code / Escrowed sits at the top-right of the
   main package artwork instead of taking up a row in the details panel. */
.ks-gallery-stage .ks-package-image-access {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  margin: 0;
  pointer-events: none;
}

.ks-gallery-stage .ks-package-image-access[hidden],
.ks-gallery-stage .ks-package-image-access:empty {
  display: none !important;
}

.ks-gallery-stage .ks-package-image-access .ks-code-access {
  margin: 0;
  min-height: 27px;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,8,14,.84);
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #eef5f7;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ks-gallery-stage .ks-package-image-access .ks-code-access.source {
  color: #d7fff6;
  border-color: rgba(0,217,173,.28);
  background: rgba(5,18,18,.88);
}

.ks-gallery-stage .ks-package-image-access .ks-code-access.escrowed {
  color: #ffd9e3;
  border-color: rgba(251,43,94,.28);
  background: rgba(20,8,15,.88);
}

/* When a package is also discounted, keep the sale marker visible directly
   beneath the access badge instead of overlapping it. */
.ks-gallery-stage .ks-package-image-access:not([hidden]) ~ .ks-sale-badge {
  top: 51px;
}

/* Keep package-detail resource buttons aligned with the left edge of the
   compatibility groups and inline with one another. */
.ks-package-info [data-package-links]:not([hidden]):not(:empty),
.ks-package-info .ks-media-links {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
  justify-self: start;
}

/* Removing access from the information column should leave no phantom space. */
.ks-package-info > [data-code-access]:empty {
  display: none !important;
}

@media (max-width: 640px) {
  .ks-gallery-stage .ks-package-image-access {
    top: 10px;
    right: 10px;
  }

  .ks-gallery-stage .ks-package-image-access .ks-code-access {
    min-height: 24px;
    padding: 5px 8px;
  }

  .ks-gallery-stage .ks-package-image-access:not([hidden]) ~ .ks-sale-badge {
    top: 44px;
  }
}


/* =========================================================
   v48 — Compact package detail grid
   ========================================================= */

/*
  Use the full width of the package information panel instead of stacking
  compatibility groups down the left side.
*/
.ks-package-info .ks-meta:not(:empty) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
  margin-top: 14px;
  padding-top: 12px;
}

.ks-package-info .ks-meta-group,
.ks-package-info .ks-meta-group + .ks-meta-group {
  min-width: 0;
  margin-top: 0;
}

.ks-package-info .ks-meta-label {
  margin-bottom: 6px;
}

.ks-package-info .ks-pill-row {
  align-content: flex-start;
  gap: 5px;
}

/* Keep package resource links compact and directly under the metadata grid. */
.ks-package-info [data-package-links]:not([hidden]):not(:empty) {
  margin-top: 11px;
}

.ks-package-info .ks-media-links {
  margin-top: 0;
  gap: 7px;
}

/* Review action follows the resource row without a large vertical break. */
.ks-package-info .ks-review-actions {
  margin-top: 11px !important;
}

/* Keep purchase action close to the utility controls. */
.ks-package-info .ks-review-actions + div {
  margin-top: 9px !important;
}

/*
  The three confidence/trust notes were previously a vertical list that left
  most of the panel width empty. Present them as a compact three-column row.
*/
.ks-package-info .ks-trust {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px !important;
  margin-top: 13px !important;
  padding-top: 12px;
  border-top: 1px solid var(--ks-line);
}

.ks-package-info .ks-trust span {
  min-width: 0;
  line-height: 1.45;
}

/* Slightly tighten the overall detail panel now that content uses its width. */
.ks-package-info {
  padding: 20px;
}

.ks-package-info .ks-package-price {
  margin-top: 14px;
}

/* Medium widths: two compatibility columns so labels never feel cramped. */
@media (max-width: 1450px) and (min-width: 901px) {
  .ks-package-info .ks-meta:not(:empty) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ks-package-info .ks-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Once the package layout stacks, there is enough horizontal room for 3 cols. */
@media (max-width: 1099px) and (min-width: 641px) {
  .ks-package-info .ks-meta:not(:empty),
  .ks-package-info .ks-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile remains compact and readable. */
@media (max-width: 640px) {
  .ks-package-info {
    padding: 17px;
  }

  .ks-package-info .ks-meta:not(:empty) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ks-package-info .ks-trust {
    grid-template-columns: 1fr;
    gap: 7px !important;
  }
}

@media (max-width: 390px) {
  .ks-package-info .ks-meta:not(:empty) {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v51 — Readable 1080p typography baseline
   ========================================================= */

/*
  1920×1080 remains the canonical desktop composition. These values improve
  the BASE typography at that resolution rather than introducing a separate
  1440p/4K layout. Higher resolutions still scale this same interface as one
  proportional unit.
*/

/* Header / navigation */
.ks-links,
.ks-nav-link {
  font-size: 12px;
}

.ks-brand-name {
  font-size: 14px;
}

.ks-eyebrow {
  font-size: 10px;
  line-height: 1.35;
}

/* General supporting copy */
.ks-hero-copy,
.ks-section-head p,
.ks-package-description,
.ks-options-intro {
  font-size: 13px;
  line-height: 1.65;
}

.ks-trust,
.ks-empty {
  font-size: 11px;
}

/* Package listing cards */
.ks-card-title {
  font-size: 15px;
}

.ks-card-price {
  font-size: 12px;
}

.ks-card-desc {
  font-size: 11px;
  line-height: 1.55;
}

.ks-meta-label {
  font-size: 9px;
  line-height: 1.3;
}

.ks-pill,
.ks-tag,
.ks-compat-chip,
.ks-access-badge {
  font-size: 9px;
  line-height: 1.2;
}

.ks-media-btn {
  font-size: 10px;
}

.ks-card-actions .ks-btn {
  font-size: 11px !important;
}

/* Access badges over artwork */
.ks-card-media .ks-card-image-access .ks-code-access,
.ks-gallery-stage .ks-package-image-access .ks-code-access {
  font-size: 9px;
}

/* Package detail panel */
.ks-package-info .ks-meta-label {
  font-size: 9px;
}

.ks-package-info .ks-pill {
  font-size: 9px;
}

.ks-package-price {
  font-size: 29px;
}

.ks-package-info .ks-btn {
  font-size: 11px !important;
}

.ks-package-info .ks-trust {
  font-size: 10px;
}

/* Reviews */
.ks-reviews-subtitle,
.ks-rating-count,
.ks-review-role,
.ks-review-footer {
  font-size: 9px;
}

.ks-review-name,
.ks-review-body {
  font-size: 10px;
  line-height: 1.55;
}

/* Checkout / options */
.ks-form label,
.ks-option-label {
  font-size: 10px;
}

.ks-options-note,
.ks-checkout-offer-copy small {
  font-size: 9px;
}

.ks-checkout-offer-copy strong {
  font-size: 10px;
}

/* Hosting partner */
.ks-partner-copy p {
  font-size: 11px;
  line-height: 1.6;
}

.ks-partner-disclosure,
.ks-partner-link-note {
  font-size: 9px;
}

/* Recent payments ticker */
.ks-purchase-ticker-label strong,
.ks-purchase-topline strong {
  font-size: 10px;
}

.ks-purchase-price,
.ks-purchase-details {
  font-size: 9px;
}

.ks-purchase-buyer-badge {
  font-size: 8px;
}

/* Footer */
.ks-footer-brand {
  font-size: 12px;
}

.ks-footer-copy,
.ks-footer-links {
  font-size: 10px;
  line-height: 1.55;
}

/*
  Prevent legacy micro-type from dropping below a comfortable desktop floor
  inside the main storefront UI. This targets only known secondary labels,
  not decorative artwork or third-party widgets.
*/
@media (min-width: 1100px) {
  .ks-card .ks-meta-label,
  .ks-package-info .ks-meta-label,
  .ks-card .ks-pill,
  .ks-package-info .ks-pill,
  .ks-media-btn,
  .ks-purchase-price,
  .ks-purchase-details,
  .ks-footer-copy,
  .ks-footer-links {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}


/* =========================================================
   v52 — Sidebar-powered homepage FAQ
   ========================================================= */

.ks-faq-section[hidden] {
  display: none !important;
}

.ks-faq-shell {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  padding: 28px;
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(0,217,173,.045), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(251,43,94,.035), transparent 34%),
    rgba(8,15,26,.72);
}

.ks-faq-heading {
  position: sticky;
  top: 92px;
}

.ks-faq-heading h2 {
  margin: 8px 0 0;
  max-width: 440px;
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.ks-faq-heading p {
  margin: 11px 0 0;
  max-width: 430px;
  color: var(--ks-muted);
  font-size: 12px;
  line-height: 1.65;
}

.ks-faq-list {
  display: grid;
  gap: 8px;
}

.ks-faq-item {
  overflow: hidden;
  border: 1px solid var(--ks-line);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.ks-faq-item:hover {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.026);
}

.ks-faq-item[open] {
  border-color: rgba(0,217,173,.17);
  background: rgba(0,217,173,.025);
}

.ks-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 0 15px;
  color: var(--ks-text);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.ks-faq-question::-webkit-details-marker {
  display: none;
}

.ks-faq-question::marker {
  content: "";
}

.ks-faq-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--ks-line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--ks-muted);
  transition:
    transform .2s ease,
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.ks-faq-icon svg {
  width: 15px;
  height: 15px;
}

.ks-faq-item[open] .ks-faq-icon {
  transform: rotate(180deg);
  color: var(--ks-accent);
  border-color: rgba(0,217,173,.2);
  background: rgba(0,217,173,.055);
}

.ks-faq-answer {
  padding: 0 15px 15px;
  color: var(--ks-muted);
  font-size: 11px;
  line-height: 1.7;
}

.ks-faq-answer > :first-child {
  margin-top: 0;
}

.ks-faq-answer > :last-child {
  margin-bottom: 0;
}

.ks-faq-answer p,
.ks-faq-answer ul,
.ks-faq-answer ol {
  margin: 0 0 9px;
}

.ks-faq-answer a {
  color: var(--ks-accent);
  text-decoration: none;
}

.ks-faq-answer a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .ks-faq-shell {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
  }

  .ks-faq-heading {
    position: static;
  }

  .ks-faq-heading p {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .ks-faq-shell {
    padding: 15px;
    border-radius: 15px;
  }

  .ks-faq-question {
    min-height: 52px;
    padding: 0 12px;
    font-size: 11px;
  }

  .ks-faq-answer {
    padding: 0 12px 13px;
  }
}


/* =========================================================
   v53 — Compact full-width FAQ grid
   ========================================================= */

/* Heading spans the section; dropdowns use the space below it. */
.ks-faq-shell {
  display: block;
  padding: 26px 28px 28px;
}

.ks-faq-heading {
  position: static;
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--ks-line);
}

.ks-faq-heading h2 {
  max-width: none;
  margin-top: 8px;
}

.ks-faq-heading p {
  max-width: 720px;
  margin-top: 9px;
}

.ks-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.ks-faq-item {
  align-self: start;
  min-width: 0;
}

.ks-faq-question {
  min-height: 56px;
  padding: 0 14px 0 16px;
}

.ks-faq-answer {
  padding: 0 16px 16px;
}

@media (max-width: 760px) {
  .ks-faq-shell {
    padding: 20px;
  }

  .ks-faq-heading {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  .ks-faq-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .ks-faq-shell {
    padding: 15px;
  }

  .ks-faq-question {
    min-height: 52px;
    padding: 0 12px;
  }

  .ks-faq-answer {
    padding: 0 12px 13px;
  }
}


/* =========================================================
   v54 — Centered FAQ heading
   ========================================================= */
.ks-faq-heading {
  text-align: center;
}
.ks-faq-heading .ks-eyebrow {
  justify-content: center;
}
.ks-faq-heading h2,
.ks-faq-heading p {
  margin-left: auto;
  margin-right: auto;
}
.ks-faq-heading p {
  max-width: 720px;
}


/* =========================================================
   v56 — Reliable smooth accordion + hover motion
   ========================================================= */

:root {
  --ks-motion-fast: 180ms;
  --ks-motion-base: 300ms;
  --ks-motion-slow: 420ms;
  --ks-motion-ease: cubic-bezier(.2,.75,.2,1);
}

/*
  FAQ no longer relies on native <details>. The collapsing area animates
  between a 0fr and 1fr grid row, which works reliably inside Tebex Preview.
*/
.ks-faq-item {
  overflow: hidden;
  transform: translateZ(0);
  transition:
    border-color var(--ks-motion-base) var(--ks-motion-ease),
    background-color var(--ks-motion-base) var(--ks-motion-ease),
    box-shadow var(--ks-motion-base) var(--ks-motion-ease),
    transform var(--ks-motion-base) var(--ks-motion-ease);
}

.ks-faq-question {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  transition:
    color var(--ks-motion-base) var(--ks-motion-ease),
    background-color var(--ks-motion-base) var(--ks-motion-ease);
}

.ks-faq-question-text {
  min-width: 0;
}

.ks-faq-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--ks-motion-slow) var(--ks-motion-ease),
    opacity 280ms var(--ks-motion-ease),
    visibility 0s linear var(--ks-motion-slow);
}

.ks-faq-collapse-inner {
  min-height: 0;
  overflow: hidden;
}

.ks-faq-answer {
  padding: 0 16px 16px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 300ms var(--ks-motion-ease),
    transform var(--ks-motion-slow) var(--ks-motion-ease);
}

.ks-faq-icon {
  transition:
    transform var(--ks-motion-slow) var(--ks-motion-ease),
    color var(--ks-motion-base) var(--ks-motion-ease),
    border-color var(--ks-motion-base) var(--ks-motion-ease),
    background-color var(--ks-motion-base) var(--ks-motion-ease),
    box-shadow var(--ks-motion-base) var(--ks-motion-ease);
}

.ks-faq-item:hover {
  transform: translateY(-1px);
}

.ks-faq-item:hover .ks-faq-icon {
  border-color: rgba(255,255,255,.17);
  color: #d7e0ea;
}

.ks-faq-item.is-open {
  border-color: rgba(0,217,173,.2);
  background: rgba(0,217,173,.028);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.ks-faq-item.is-open .ks-faq-collapse {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--ks-motion-slow) var(--ks-motion-ease),
    opacity 320ms var(--ks-motion-ease),
    visibility 0s linear 0s;
}

.ks-faq-item.is-open .ks-faq-answer {
  opacity: 1;
  transform: translateY(0);
}

.ks-faq-item.is-open .ks-faq-icon {
  transform: rotate(180deg);
  color: var(--ks-accent);
  border-color: rgba(0,217,173,.25);
  background: rgba(0,217,173,.065);
  box-shadow: 0 0 0 3px rgba(0,217,173,.025);
}

.ks-faq-question:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0,217,173,.3);
}

/*
  Cover the selectors that actually have hover states in this theme.
  v55 missed several of these, so the visual change could still feel instant.
*/
.ks-links a,
.ks-icon-link,
.ks-cart-link,
.ks-btn,
.btn,
.ks-category,
.ks-category-arrow,
.ks-card,
.ks-card-media img,
.ks-media-btn,
.ks-footer-links a,
.ks-star-input label,
.ks-cart-continue,
.ks-cart-item-name,
.ks-qty-control button,
.ks-cart-details,
.ks-cart-remove,
.ks-cart-delete,
.ks-btn-discord,
.ks-empty-cart-close,
.ks-faq-answer a {
  transition:
    color var(--ks-motion-base) var(--ks-motion-ease),
    background-color var(--ks-motion-base) var(--ks-motion-ease),
    border-color var(--ks-motion-base) var(--ks-motion-ease),
    box-shadow var(--ks-motion-base) var(--ks-motion-ease),
    opacity var(--ks-motion-base) var(--ks-motion-ease),
    transform var(--ks-motion-base) var(--ks-motion-ease),
    filter var(--ks-motion-base) var(--ks-motion-ease);
}

/* Slight visual motion makes card hover feel intentional rather than abrupt. */
.ks-card:hover .ks-card-media img {
  transform: scale(1.018);
}

/* Header/footer links get a softer fade instead of an instant color swap. */
.ks-links a,
.ks-footer-links a,
.ks-cart-continue,
.ks-cart-item-name,
.ks-cart-details,
.ks-cart-remove,
.ks-faq-answer a {
  transition-duration: 240ms;
}

/* Quantity and compact icon controls should react a little quicker. */
.ks-qty-control button,
.ks-icon-link,
.ks-cart-link,
.ks-empty-cart-close,
.ks-media-btn {
  transition-duration: 220ms;
}

@media (max-width: 760px) {
  .ks-faq-answer {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 13px;
  }
}