:root {
  /* accent (overridden from dashboard via LXYEngine) */
  --accent-color: #2ECC9A;
  --accent-glow: rgba(46, 204, 154, 0.35);
  --accent-dim: rgba(46, 204, 154, 0.15);
  --accent-border: rgba(46, 204, 154, 0.3);

  /* fluid type */
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --size-base: clamp(14px, 0.4vw + 10px, 18px);
  --size-h1: clamp(2.2rem, 5vw + 1rem, 4.5rem);
  --size-h2: clamp(1.8rem, 4vw + 0.8rem, 3.5rem);
  --size-h3: clamp(1.4rem, 2.5vw + 0.6rem, 2.2rem);

  /* spacing */
  --gap-global: clamp(24px, 5vw, 60px);
  --container-max: 1440px;
  --radius-lg: 20px;
  --radius-md: 12px;

  /* palette */
  --color-bg: #070708;
  --color-bg-alt: #0a0a0c;
  --color-card: rgba(255, 255, 255, 0.03);
  --color-card-hover: rgba(255, 255, 255, 0.06);
  --color-text: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-muted: rgba(255, 255, 255, 0.35);

  /* legacy aliases — keep until refactor
     TODO: half of these aren't even used anymore. audit + nuke whatever isn't referenced. */
  --color-text-darker: var(--color-text-secondary);
  --color-primary: var(--accent-color);
  --color-primary-hover: #fff;
  --color-secondary: var(--color-text-muted);
  --border-color: rgba(255, 255, 255, 0.08);

  --transition-smooth: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (width > 960px) {
  :root {
    --content-padding: calc(var(--widget-padding) * 2);
  }
}

@media (max-width: 900px) {
  :root {
    --tebex-footer-height: 70px;
  }
}

@media (max-width: 600px) {
  :root {
    --tebex-footer-height: 80px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  vertical-align: baseline;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

input[type=submit],
button {
  appearance: none;
  cursor: pointer;
  text-align: left;
}

textarea {
  resize: none;
}

symbol,
use,
svg {
  overflow: visible;
}

svg,
img {
  display: block;
}

li {
  display: block;
}

button {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:root *[hidden] {
  display: none;
}

:focus {
  outline: 0;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
}

@keyframes pageMoveOut {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes pageMoveIn {
  0%, 50% {
    scale: 0.98;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}

::view-transition-old(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveOut;
  transform-origin: center top;
}

::view-transition-new(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveIn;
  transform-origin: center top;
}

::view-transition-group(siteContent) {
  z-index: 2;
}

::view-transition-group(siteHeaderTop),
::view-transition-group(siteHeader),
::view-transition-group(siteNavigation),
::view-transition-group(siteBgImage),
::view-transition-group(siteFooter) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
  z-index: 3;
}

::view-transition-group(siteBgImage) {
  z-index: 1;
}

html,
body {
  min-height: 100vh;
}

html {
  overflow: hidden scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) var(--color-bg);
  scrollbar-gutter: stable;
}

html.no-scroll {
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  overscroll-behavior-y: none;
}

body {
  position: relative;
  max-width: 100%;
  width: 100%;
  line-height: normal;
  color: var(--color-text);
  background: var(--color-bg);
  accent-color: var(--color-primary);
  font-family: sans-serif;
  font-size: 16px;
}

body::before {
  view-transition-name: siteBgImage;
}

::selection {
  color: var(--color-text);
  background-color: var(--color-primary);
  text-shadow: none;
}

select option {
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.text-content {
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
}

.text-content h1:not(:last-child),
.text-content h2:not(:last-child),
.text-content h3:not(:last-child),
.text-content h4:not(:last-child),
.text-content h5:not(:last-child),
.text-content h6:not(:last-child) {
  margin-bottom: 24px;
}

.text-content p:not(:last-child) {
  margin-bottom: 12px;
}

.text-content h1 {
  font-size: 32px;
}

.text-content h2 {
  font-size: 26px;
}

.text-content h3 {
  font-size: 20px;
}

.text-content h4 {
  font-size: 18px;
}

.text-content img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.text-content ol,
.text-content ul {
  margin-left: 1em;
}

.text-content ol:not(:last-child),
.text-content ul:not(:last-child) {
  margin-bottom: 12px;
}

.text-content li {
  display: list-item;
}

.btn-primary,
.btn-secondary {
  --btn-color-text: var(--color-text);
  --btn-color-text-hover: var(--btn-color-text);
  --btn-color-bg: var(--color-bg);
  --btn-color-bg-hover: var(--btn-color-bg);
  display: block;
  width: fit-content;
  height: var(--btn-size);
  padding: 0 10px;
  line-height: var(--btn-size);
  color: var(--btn-color-text);
  background-color: var(--btn-color-bg);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (width > 960px) {
  .btn-primary,
  .btn-secondary {
    padding: 0 14px;
  }
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--btn-color-text-hover);
  background-color: var(--btn-color-bg-hover);
}

.btn-primary {
  --btn-color-text: var(--color-primary-text);
  --btn-color-bg: var(--color-primary);
  --btn-color-text-hover: var(--color-primary-text-hover);
  --btn-color-bg-hover: var(--color-primary-hover);
}

.btn-secondary {
  --btn-color-text: var(--color-secondary-text);
  --btn-color-bg: var(--color-secondary);
  --btn-color-text-hover: var(--color-secondary-text-hover);
  --btn-color-bg-hover: var(--color-secondary-hover);
}

.site {
  display: grid;
  grid-auto-rows: auto 1fr auto;
  grid-template-columns: 100%;
  align-items: start;
  gap: var(--widget-padding);
  min-height: calc(100vh - var(--tebex-footer-height));
  font-size: 14px;
  view-transition-name: site;
}

@media (width > 960px) {
  .site {
    gap: calc(var(--widget-padding) * 2);
  }
}

.site-content {
  margin: 0 auto;
  padding: 0 var(--content-padding);
  width: 100%;
}

@media (width > 960px) {
  .site-content {
    max-width: var(--content-width);
  }
}

.store-text {
  padding: var(--content-padding);
  line-height: 1.375;
  font-size: 16px;
  font-weight: 400;
}

.store-form {
  font-size: 18px;
}

.store-form h1,
.store-form h2,
.store-form h3,
.store-form h4,
.store-form h5,
.store-form h6,
.store-form p {
  margin-bottom: 24px;
}

.store-form input,
.store-form select,
.store-form textarea {
  display: block;
}

.store-form input[type=text],
.store-form input[type=password],
.store-form input[type=email],
.store-form input[type=number],
.store-form input[type=search],
.store-form input[type=url],
.store-form input[type=tel],
.store-form input[type=date],
.store-form input[type=time],
.store-form input[type=datetime-local],
.store-form input[type=file],
.store-form input[type=month],
.store-form input[type=week],
.store-form select,
.store-form textarea {
  margin-bottom: 12px;
  width: 100%;
  padding: 14px 12px;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  font-size: 14px;
}

.popup .store-form input[type=text],
.popup .store-form input[type=password],
.popup .store-form input[type=email],
.popup .store-form input[type=number],
.popup .store-form input[type=search],
.popup .store-form input[type=url],
.popup .store-form input[type=tel],
.popup .store-form input[type=date],
.popup .store-form input[type=time],
.popup .store-form input[type=datetime-local],
.popup .store-form input[type=file],
.popup .store-form input[type=month],
.popup .store-form input[type=week],
.popup .store-form select,
.popup .store-form textarea {
  background: #242424;
}

.popup.drawer .store-form input[type=text],
.popup.drawer .store-form input[type=password],
.popup.drawer .store-form input[type=email],
.popup.drawer .store-form input[type=number],
.popup.drawer .store-form input[type=search],
.popup.drawer .store-form input[type=url],
.popup.drawer .store-form input[type=tel],
.popup.drawer .store-form input[type=date],
.popup.drawer .store-form input[type=time],
.popup.drawer .store-form input[type=datetime-local],
.popup.drawer .store-form input[type=file],
.popup.drawer .store-form input[type=month],
.popup.drawer .store-form input[type=week],
.popup.drawer .store-form select,
.popup.drawer .store-form textarea {
  user-select: auto;
}

@media (width > 960px) {
  .store-form input[type=text],
  .store-form input[type=password],
  .store-form input[type=email],
  .store-form input[type=number],
  .store-form input[type=search],
  .store-form input[type=url],
  .store-form input[type=tel],
  .store-form input[type=date],
  .store-form input[type=time],
  .store-form input[type=datetime-local],
  .store-form input[type=file],
  .store-form input[type=month],
  .store-form input[type=week],
  .store-form select,
  .store-form textarea {
    padding: 12px;
    font-size: 16px;
  }
}

.store-form .actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@keyframes progressBarAnimation {
  to {
    background-position: 100% 0;
  }
}

.popup {
  --fade-duration: 300ms;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 1000;
  overflow: hidden scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) transparent;
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color var(--fade-duration) ease, opacity var(--fade-duration) ease-in-out, display var(--fade-duration) allow-discrete;
}

@starting-style {
  .popup {
    opacity: 0;
  }
}

.popup.drawer {
  user-select: none;
}

.popup[hidden] {
  opacity: 0;
  display: none;
}

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: all 0.15s ease-in-out;
}

.popup-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/close.svg") center center/20px no-repeat;
}

@media (width <= 600px) {
  .popup-close {
    width: 50px;
    height: 50px;
  }

  .popup-close::before {
    mask-size: 24px;
  }
}

.popup-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.login-popup {
  z-index: 1002;
}

.basket {
  position: relative;
  z-index: 1001;
}

.site-content .basket {
  display: none;
}

.basket .basket-empty {
  margin: auto;
  text-align: center;
  font-size: 18px;
}

.basket .basket-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.basket .basket-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: var(--widget-padding);
  background: var(--color-brighter-bg);
}

.basket .basket-item .info {
  margin-right: auto;
}

.basket .basket-item .title {
  font-size: 20px;
  font-weight: 600;
}

.basket .basket-item .price {
  color: var(--color-primary);
  font-size: 14px;
}

.basket .basket-item .price strong {
  font-size: 18px;
  font-weight: inherit;
}

.basket .basket-item .remove {
  --btn-size: 40px;
  --btn-icon: url("https://template-assets.tebex.io/images/delete.svg");
  --btn-icon-size: 24px;
  flex: none;
}

.basket .basket-checkout {
  margin-top: auto;
  padding: 0 var(--content-padding) 50px;
}

@media (width > 960px) {
  .basket .basket-checkout {
    padding-bottom: 100px;
  }
}

.basket .basket-checkout h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--widget-padding);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

.basket .basket-checkout .total {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 400;
}

.basket .basket-checkout .total strong {
  font-size: 24px;
  font-weight: inherit;
}

.basket .basket-checkout .checkout {
  width: 100%;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  padding: 0 8px 0 24px;
  background: var(--color-brighter-bg);
  font-size: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

@starting-style {
  .toast {
    opacity: 0;
    height: 0;
  }
}

.toast[hidden] {
  display: block;
  opacity: 0;
  height: 0;
}

/* 1080p scaling — only applies between 1200px and 1920px
   above 1920px: full design as built, no scaling
   below 1200px: existing responsive rules kick in */

@media (min-width: 1200px) and (max-width: 1920px) {
/* apex trick — drop root font-size so rem-based stuff shrinks globally */

  html { font-size: 14px; }

/* hero titles + character image scale linearly with viewport */

  .h4-title { font-size: clamp(30px, 2.3vw, 46px) !important; line-height: .95 !important; }

  .h4-title-outline { font-size: clamp(30px, 2.3vw, 46px) !important; line-height: .95 !important; }

  .h4-char-1 { width: clamp(280px, 26.5vw, 520px) !important; }

/* hero (.h4-*) — base CSS in index.html now uses linear vw scaling
       so titles + char images auto-fit any viewport. these rules just
       tighten supporting elements (kicker, desc, buttons, features). */

  .h4-inner-container {
        padding: 40px 32px 50px !important;
        max-width: 1300px !important;
        min-height: 75vh !important;
        gap: 40px !important;
    }

  .h4-kicker { font-size: 11px !important; margin-bottom: 14px !important; gap: 6px !important; }

  .h4-kicker i { width: 13px !important; height: 13px !important; }

  .h4-title-row2 { gap: 12px !important; margin-top: 4px !important; }

  .h4-desc { font-size: 13px !important; max-width: 380px !important; margin: 22px 0 24px !important; line-height: 1.6 !important; }

  .h4-actions { gap: 10px !important; }

  .h4-btn-primary { padding: 12px 26px !important; font-size: 12px !important; gap: 8px !important; }

  .h4-btn-secondary { padding: 12px 22px !important; font-size: 12px !important; gap: 8px !important; }

  .h4-btn-primary svg,
  .h4-btn-secondary svg { width: 13px !important; height: 13px !important; }

/* hero feature row (instant delivery / safe checkout / lightweight) — 1080p matches 2K shape, just smaller */

  .h4-hero-features { gap: 28px !important; margin-top: 36px !important; }

  .h4-hero-feat-item { padding: 0 !important; gap: 14px !important; }

  .h4-feat-icon-box {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

  .h4-hero-feat-item i { width: 20px !important; height: 20px !important; }

  .h4-hero-feat-item span,
  .h4-hero-feat-txt span { font-size: 13px !important; font-weight: 900 !important; }

  .h4-hero-feat-sub { font-size: 12px !important; line-height: 1.45 !important; max-width: 200px !important; }

  .h4-hero-feat-txt { gap: 3px !important; }

/* floating pill tags */

  .h4-float-tag { font-size: 10px !important; padding: 6px 12px !important; gap: 6px !important; }

  .h4-float-tag-icon { width: 12px !important; height: 12px !important; }

  .h4-float-tag-icon svg { width: 11px !important; height: 11px !important; }

/* section titles (v1-*, s3-*, feat-*, lxy-yt-*, lxy-faq-*) */

  .v1-title { font-size: clamp(26px, 3vw, 40px) !important; }

  .v1-sub { font-size: 13px !important; margin-bottom: 40px !important; max-width: 460px !important; }

  .v1-inner { max-width: 1100px !important; }

  .v1-grid { gap: 28px !important; margin-top: 12px !important; }

  .v1-item { padding: 14px !important; }

  .v1-glow { width: 130px !important; height: 130px !important; }

  .v1-num { font-size: clamp(40px, 5vw, 64px) !important; }

  .v1-trend { font-size: 10px !important; padding: 3px 9px !important; margin-bottom: 10px !important; }

  .v1-trend i { width: 10px !important; height: 10px !important; }

/* S3 editorial (contact section) — matches index inline @media override */

  .s3-editorial-wrap {
        max-width: 1100px !important;
        margin: 60px auto 70px !important;
        padding: 60px 32px 70px !important;
        gap: 50px !important;
    }

  .s3-title { font-size: clamp(26px, 2.8vw, 44px) !important; }

  .s3-text { font-size: 13px !important; max-width: 460px !important; margin-top: 14px !important; }

  .s3-btn { padding: 12px 26px !important; font-size: 12px !important; }

  .s3-kicker { font-size: 10px !important; margin-bottom: 10px !important; }

  .s3-note { font-size: 11px !important; margin-top: 14px !important; }

/* Featured section */

  .feat-section { padding: 60px 0 !important; }

  .feat-title { font-size: clamp(22px, 2.8vw, 36px) !important; }

  .feat-sub { font-size: 13px !important; }

/* Featured product cards */

  .f8-card { width: 380px !important; min-width: 380px !important; border-radius: 16px !important; }

  .f8-name { font-size: 15px !important; }

  .f8-price { font-size: 24px !important; }

  .f8-old { font-size: 13px !important; }

  .f8-discount-badge { font-size: 10px !important; padding: 4px 10px !important; }

  .f8-btn { padding: 9px 16px !important; font-size: 12px !important; }

  .f8-body { padding: 14px 16px !important; gap: 10px !important; }

  .f8-badges { gap: 6px !important; }

  .f8-badge { font-size: 9px !important; padding: 3px 8px !important; }

  .f8-sale,
  .f8-tag { font-size: 9px !important; padding: 4px 10px !important; }

/* Bundle banner */

  .bundle-x-right span:last-child { font-size: 48px !important; }

/* YouTube section */

  .lxy-yt-title { font-size: clamp(28px, 3.5vw, 48px) !important; }

/* FAQ */

  .lxy-faq-container { padding: 60px 32px !important; }

  .lxy-faq-h2 { font-size: clamp(22px, 2.8vw, 36px) !important; margin-bottom: 8px !important; }

  .lxy-faq-p { font-size: 13px !important; }

  .lxy-faq-intro { margin-bottom: 32px !important; }

  .lxy-faq-input { padding: 0 16px 0 42px !important; font-size: 13px !important; }

  .lxy-faq-item { border-radius: 12px !important; }

  .lxy-faq-q { padding: 14px 18px !important; }

  .lxy-faq-q-txt { font-size: 14px !important; }

  .lxy-faq-ans-in { font-size: 13px !important; line-height: 1.6 !important; }

/* Reviews section */

  .reviews-section { padding: 60px 0 !important; }

  .r1-card { width: 320px !important; padding: 20px !important; border-radius: 16px !important; }

  .r8-top-row { gap: 30px !important; }

/* category page (cat-*) — apex pattern: aggressive 1080p shrink */

  .cat-hero { padding: 130px 24px 50px !important; }

  .cat-hero-tag { font-size: 10px !important; padding: 5px 12px !important; margin-bottom: 18px !important; }

  .cat-hero-title { font-size: clamp(28px, 3vw, 44px) !important; margin-bottom: 12px !important; }

  .cat-hero-sub { font-size: 13px !important; max-width: 480px !important; margin: 0 auto 28px !important; }

/* search */

  .cat-search-wrap { max-width: 540px !important; margin: 0 auto 16px !important; }

  .cat-search-wrap svg { width: 16px !important; height: 16px !important; left: 18px !important; }

  .cat-search { padding: 14px 20px 14px 44px !important; font-size: 13px !important; }

/* framework filters */

  .cat-filters { gap: 8px !important; margin-top: 12px !important; }

  .cat-filter-btn { padding: 0 18px !important; height: 40px !important; font-size: 12px !important; gap: 7px !important; }

/* products grid */

  .cat-products-wrap { max-width: 1300px !important; padding: 32px 24px 60px !important; }

  .cat-grid { gap: 28px !important; }

/* product cards */

  .pcard { border-radius: 16px !important; }

  .pcard-badge-sale { font-size: 9px !important; padding: 3px 8px !important; top: 8px !important; left: 8px !important; }

  .pcard-tag { font-size: 8px !important; padding: 3px 7px !important; top: 8px !important; right: 8px !important; }

  .pcard-body { padding: 18px !important; gap: 10px !important; }

  .pcard-name { font-size: 15px !important; line-height: 1.25 !important; }

  .pcard-desc { font-size: 12px !important; line-height: 1.5 !important; }

  .pcard-fw { gap: 6px !important; min-height: 28px !important; }

  .fw-badge { padding: 3px 8px !important; font-size: 10px !important; gap: 4px !important; }

  .esx-ico { font-size: 9px !important; }

  .pcard-price-row { gap: 8px !important; }

  .pcard-price { font-size: 22px !important; }

  .pcard-old { font-size: 12px !important; }

  .pcard-disc { font-size: 10px !important; padding: 2px 7px !important; }

  .pcard-btn { padding: 11px !important; font-size: 12px !important; border-radius: 10px !important; }

  .cat-empty { font-size: 13px !important; padding: 60px 24px !important; }

/* promo bar (p3-*) — 1080p compact */

  .p3 { min-height: 36px !important; padding: 0 14px !important; }

  .p3-inner { height: 36px !important; gap: 18px !important; max-width: 1200px !important; }

  .p3-icon svg { width: 16px !important; height: 16px !important; }

  .p3-row-top { gap: 8px !important; }

  .p3-row-bottom { gap: 12px !important; }

  .p3-text { font-size: 11px !important; letter-spacing: 0.04em !important; }

  .p3-code { padding: 3px 10px !important; gap: 7px !important; border-radius: 6px !important; }

  .p3-code-label { font-size: 8px !important; letter-spacing: 0.08em !important; }

  .p3-code-val { font-size: 12px !important; letter-spacing: 0.04em !important; }

  .p3-code svg { width: 11px !important; height: 11px !important; }

  .p3-timer { gap: 4px !important; }

  .p3-timer .t-block { padding: 2px 6px !important; min-width: 30px !important; border-radius: 4px !important; }

  .p3-timer .t-val { font-size: 11px !important; }

  .p3-timer .t-lbl { font-size: 6px !important; letter-spacing: 0.04em !important; }

/* navbar container (n1, n-cont) — 1080p compact */

  .n1 { height: 56px !important; }

  .n-cont { max-width: 1400px !important; padding: 0 28px !important; }

/* navbar (n1-*) — tighter at 1080p */

  .n1-brand { font-size: 13px !important; gap: 8px !important; letter-spacing: 0.06em !important; }

  .n1-brand img { max-height: 26px !important; }

  .n1-brand-div { height: 16px !important; }

  .n1-logo-box { width: 22px !important; height: 22px !important; border-radius: 5px !important; }

  .n1-link { font-size: 11px !important; }

  .n1-menu { gap: 22px !important; }

  .n1-actions { gap: 10px !important; }

  .n1-socials { gap: 11px !important; padding-right: 12px !important; height: 20px !important; }

  .n1-soc svg { width: 16px !important; height: 16px !important; }

  .n1-currency { padding: 4px 10px !important; font-size: 10px !important; gap: 4px !important; border-radius: 30px !important; }

  .n1-currency svg { width: 9px !important; height: 9px !important; }

  .n1-cart svg { width: 16px !important; height: 16px !important; }

  .n1-cart-dot { width: 7px !important; height: 7px !important; }

  .n1-login { padding: 5px 14px !important; font-size: 11px !important; gap: 5px !important; border-radius: 30px !important; }

  .n1-login svg { width: 13px !important; height: 13px !important; }

/* Currency dropdown — 1080p compact */

  .currency-dropdown { min-width: 160px !important; padding: 6px !important; border-radius: 10px !important; top: calc(100% + 8px) !important; }

  .currency-grid { gap: 5px !important; }

  .curr-btn { height: 26px !important; font-size: 9px !important; border-radius: 5px !important; }

/* basket sidebar — 1080p compact */

  .basket-sidebar-custom { width: 340px !important; }

  .basket-sidebar-header { padding: 18px 20px !important; }

  .basket-sidebar-header .header-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; }

  .basket-sidebar-header .header-icon svg,
  .basket-sidebar-header .header-icon i { width: 16px !important; height: 16px !important; }

  .basket-sidebar-header .header-text h3 { font-size: 14px !important; }

  .basket-sidebar-header .header-text .item-count { font-size: 11px !important; }

  .basket-sidebar-header .basket-sidebar-close svg,
  .basket-sidebar-header .basket-sidebar-close i { width: 18px !important; height: 18px !important; }

  .basket-sidebar-content { padding: 14px 18px !important; }

/* login prompt inside basket */

  .basket-login-prompt { padding: 28px 18px !important; }

  .basket-login-prompt > div:first-child { width: 52px !important; height: 52px !important; border-radius: 12px !important; margin: 0 auto 16px !important; }

  .basket-login-prompt > div:first-child svg,
  .basket-login-prompt > div:first-child i { width: 22px !important; height: 22px !important; }

  .basket-login-prompt h3 { font-size: 15px !important; margin-bottom: 6px !important; }

  .basket-login-prompt p { font-size: 12px !important; margin-bottom: 18px !important; }

  .basket-login-prompt .login-fivem-btn { padding: 11px 22px !important; font-size: 12px !important; border-radius: 10px !important; }

/* basket items */

  .basket-sidebar-content .basket-item { padding: 11px !important; gap: 11px !important; border-radius: 11px !important; margin-bottom: 8px !important; }

  .basket-sidebar-content .basket-item img,
  .basket-sidebar-content .basket-item > div:first-child:not(.cart-item-name) { width: 50px !important; height: 50px !important; border-radius: 8px !important; }

  .basket-sidebar-content .cart-item-name { font-size: 12px !important; }

  .basket-sidebar-content .cart-item-price { font-size: 12px !important; }

  .basket-sidebar-content .cart-item-remove { width: 26px !important; height: 26px !important; border-radius: 6px !important; }

  .basket-sidebar-content .cart-item-remove svg { width: 11px !important; height: 11px !important; }

  .basket-empty { padding: 50px 18px !important; }

  .basket-empty svg,
  .basket-empty i { width: 38px !important; height: 38px !important; margin-bottom: 16px !important; }

  .basket-empty h4 { font-size: 14px !important; }

  .basket-empty p { font-size: 12px !important; }

/* basket footer */

  .basket-sidebar-footer { padding: 16px 20px !important; }

  .basket-sidebar-footer .summary-row.total { font-size: 15px !important; padding: 12px 0 !important; }

  .basket-sidebar-footer .checkout-btn { height: 46px !important; font-size: 13px !important; border-radius: 10px !important; }

/* package page — shares .pkg-*, .v1-info-card, .btn-get with apex */

  .pkg-page { padding: 80px 0 60px !important; }

  .pkg-wrap { max-width: 1200px !important; padding: 0 24px !important; }

  .pkg-breadcrumb { font-size: 12px !important; margin-bottom: 20px !important; }

  .pkg-grid { gap: 32px !important; grid-template-columns: 1.4fr 1fr !important; }

  .gallery-col { top: 90px !important; }

  .media-box { border-radius: 16px !important; max-height: 60vh !important; margin-bottom: 14px !important; }

  .media-badge { font-size: 9px !important; padding: 3px 8px !important; top: 10px !important; left: 10px !important; }

  .thumb-row { gap: 10px !important; padding-bottom: 12px !important; }

  .thumb { flex: 0 0 160px !important; width: 160px !important; height: 90px !important; border-radius: 10px !important; }

  .thumb-video { flex: 0 0 140px !important; width: 140px !important; height: 79px !important; }

/* Info card */

  .v1-info-card { padding: 22px !important; border-radius: 18px !important; gap: 16px !important; }

  .v1-info-card .v1-title { font-size: 24px !important; line-height: 1.15 !important; }

  .v1-cat { font-size: 11px !important; }

  .tag { font-size: 10px !important; padding: 4px 10px !important; }

  .tag img { width: 12px !important; height: 12px !important; }

  .price-main { font-size: 30px !important; }

  .price-old { font-size: 15px !important; }

  .price-badge { font-size: 11px !important; padding: 4px 10px !important; }

  .btn-get { height: 50px !important; font-size: 14px !important; border-radius: 16px !important; }

/* Discord button */

  .btn-discord { height: 46px !important; font-size: 13px !important; border-radius: 12px !important; }

  .btn-discord svg { width: 18px !important; height: 18px !important; }

/* Quantity */

/* Accordion */

  .acc-hdr { padding: 14px 18px !important; font-size: 12px !important; }

  .acc-hdr-left svg { width: 14px !important; height: 14px !important; }

  .acc-icon { font-size: 16px !important; }

  .acc-body { padding: 0 18px 18px !important; font-size: 13px !important; line-height: 1.6 !important; }

/* Discount / Gift cards */

  .disc-wrap,
  .gift-wrap { border-radius: 16px !important; margin-top: 10px !important; }

  .disc-header,
  .gift-card { padding: 8px 14px !important; height: 52px !important; gap: 12px !important; }

  .disc-icon,
  .gift-icon { width: 36px !important; height: 36px !important; }

  .disc-icon svg,
  .gift-icon svg { width: 16px !important; height: 16px !important; }

  .disc-title,
  .gift-title { font-size: 13px !important; }

  .gift-sub { font-size: 10px !important; margin-top: 0 !important; line-height: 1.2 !important; }

  .disc-input { padding: 11px 14px !important; font-size: 13px !important; }

  .disc-apply-btn { padding: 11px 18px !important; font-size: 12px !important; }

  .trust-row { gap: 8px !important; margin-top: 8px !important; }

/* Package page payment icons — fit in sidebar at 1080p */

  .pkg-pay-clean { gap: 6px !important; margin: 8px 0 14px !important; }

  .pkg-pay-item { height: 26px !important; padding: 0 9px !important; border-radius: 6px !important; }

  .pkg-pay-item svg { height: 11px !important; }

  .pkg-pay-more-tag { height: 26px !important; padding: 0 9px !important; font-size: 9px !important; border-radius: 6px !important; }

/* Related products on package page */

  .rel-grid { gap: 18px !important; }

  .rel-card { border-radius: 14px !important; }

  .rel-card-body { padding: 14px 16px !important; }

  .rel-card-name { font-size: 14px !important; }

  .rel-card-price { font-size: 22px !important; }

  .rel-card-disc { font-size: 10px !important; padding: 4px 10px !important; }

  .rel-btn { padding: 9px 16px !important; font-size: 12px !important; }

/* login popup (username.html) — 1080p compact */

  .login-popup-custom { width: 380px !important; padding: 36px 28px !important; border-radius: 18px !important; }

  .login-header-logos { margin-bottom: 20px !important; padding-top: 4px !important; }

  .login-logo-img { height: 32px !important; max-height: 32px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; }

  .login-x-icon { font-size: 14px !important; margin: 0 14px !important; }

  .cfx-logo-container svg { height: 22px !important; }

  .cfx-logo-container svg text { font-size: 18px !important; }

  .login-title { font-size: 18px !important; margin-bottom: 8px !important; letter-spacing: 1.5px !important; }

  .login-subtitle { font-size: 12px !important; margin-bottom: 26px !important; line-height: 1.4 !important; }

  .login-btn-cfx { padding: 13px !important; font-size: 13px !important; border-radius: 11px !important; margin-bottom: 22px !important; }

  .login-footer { font-size: 11px !important; padding-top: 20px !important; margin-top: 16px !important; line-height: 1.5 !important; }

  .login-footer a { font-size: 10px !important; letter-spacing: 0.8px !important; }

  .popup-close-custom { width: 32px !important; height: 32px !important; top: 18px !important; right: 18px !important; }

  .popup-close-custom svg { width: 16px !important; height: 16px !important; }

/* site-content main height — let popup fit naturally */

  .site-content main { min-height: 60vh !important; }

/* achievements + faq side characters — bigger at 1080p so they're visible */

  .ach-img-side { max-width: 460px !important; width: 460px !important; }

  .faq-img-side-right { max-width: 460px !important; width: 460px !important; top: 105% !important; }

/* footer (f3-*) — 1080p compact */

  .f3 { padding: 32px 24px 22px !important; }

  .f3-inner { max-width: 1300px !important; }

  .f3-grid { gap: 32px !important; margin-bottom: 44px !important; }

  .f3-brand { gap: 16px !important; }

  .f3-logo { font-size: 20px !important; gap: 10px !important; }

  .f3-logo img { height: 26px !important; }

  .f3-desc { font-size: 12px !important; max-width: 240px !important; line-height: 1.55 !important; }

  .f3-socials { gap: 10px !important; margin-top: 6px !important; }

  .f3-soc { width: 32px !important; height: 32px !important; }

  .f3-soc svg { width: 14px !important; height: 14px !important; }

  .f3-col-title { font-size: 9px !important; margin-bottom: 22px !important; letter-spacing: 0.18em !important; }

  .f3-links { gap: 13px !important; }

  .f3-link { font-size: 12px !important; }

  .f3-bottom { padding-top: 28px !important; gap: 18px !important; }

  .f3-powered { gap: 22px !important; }

  .f3-pow-text { font-size: 10px !important; }

  .f3-pow-logo { height: 18px !important; }

  .f3-copy { font-size: 10px !important; max-width: 720px !important; }

/* footer payments (lxy-pay-*) — 1080p compact */

  .lxy-pay { margin-top: 28px !important; padding-top: 22px !important; padding-bottom: 28px !important; }

  .lxy-pay-label { font-size: 9px !important; margin-bottom: 12px !important; letter-spacing: 0.25em !important; }

  .lxy-pay-row { gap: 8px !important; }

  .lxy-pay-icon { height: 26px !important; min-width: 42px !important; padding: 0 10px !important; border-radius: 6px !important; }

  .lxy-pay-icon svg { height: 13px !important; }

  .lxy-pay-more { height: 26px !important; padding: 0 12px !important; font-size: 10px !important; border-radius: 6px !important; }

/* purchase notifications (pn-*) — 1080p compact */

  .pn-stack { left: 20px !important; bottom: 20px !important; gap: 8px !important; }

  .pn-toast { min-width: 280px !important; max-width: 360px !important; gap: 11px !important; padding: 11px 38px 11px 11px !important; border-radius: 12px !important; }

  .pn-avatar { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 15px !important; }

  .pn-body { gap: 3px !important; line-height: 1.3 !important; }

  .pn-line1 { font-size: 12px !important; }

  .pn-line2 { font-size: 10px !important; }

  .pn-close { width: 18px !important; height: 18px !important; top: 6px !important; right: 6px !important; font-size: 13px !important; }
}