.tx-body { --tx-pix: 4px; --tx-card-ratio: 1 / 1; }

.tx-hero-title { font-size: clamp(2.4em, 7vw, 5.2em); line-height: 1.02; letter-spacing: 0; text-shadow: var(--tx-pix) var(--tx-pix) 0 color-mix(in srgb, var(--tx-accent) 70%, transparent); }
.tx-hero-centered.has-image .tx-hero-bg img { image-rendering: pixelated; filter: saturate(1.2); }
.tx-eyebrow { font-family: var(--tx-font-head); letter-spacing: .12em; color: var(--tx-accent); }
.tx-eyebrow::after { content: "_"; animation: tx-blink 1s steps(1) infinite; }
@keyframes tx-blink { 50% { opacity: 0; } }

.tx-section-title, .tx-page-title, .tx-product-title, .tx-cta-title { letter-spacing: 0; line-height: 1.1; }
.tx-section-title { font-size: clamp(1.4em, 2.6vw, 2em); }
.tx-section-title::before { content: "> "; color: var(--tx-accent); }

.tx-btn, .tx-basket-btn {
  font-family: var(--tx-font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: var(--tx-pix) var(--tx-pix) 0 #000000;
  transition: transform .06s, box-shadow .06s, background-color .12s;
}
.tx-btn:hover, .tx-basket-btn:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--tx-pix) + 2px) calc(var(--tx-pix) + 2px) 0 #000000; }
.tx-btn:active, .tx-basket-btn:active { transform: translate(var(--tx-pix), var(--tx-pix)); box-shadow: 0 0 0 #000000; }
.tx-btn-secondary, .tx-btn-ghost { border: 2px solid var(--tx-text); background: var(--tx-surface); }

.tx-card, .tx-cat, .tx-panel, .tx-widget, .tx-feature, .tx-buybox, .tx-summary, .tx-stats, .tx-line, .tx-gallery-stage, .tx-cta {
  border: 2px solid var(--tx-border);
  box-shadow: 6px 6px 0 #000000;
}
.tx-card:hover, .tx-cat:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--tx-accent); border-color: var(--tx-accent); }
.tx-card-media, .tx-cats-cards .tx-cat-media {
  background:
    linear-gradient(45deg, var(--tx-surface-2) 25%, transparent 25%, transparent 75%, var(--tx-surface-2) 75%),
    linear-gradient(45deg, var(--tx-surface-2) 25%, var(--tx-surface) 25%, var(--tx-surface) 75%, var(--tx-surface-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border-bottom: 2px solid var(--tx-border);
}
.tx-card-img, .tx-cat-media img, .tx-slide img, .tx-thumb img, .tx-line-media img { image-rendering: pixelated; }
.tx-card-title, .tx-cat-name { font-family: var(--tx-font-head); font-weight: 400; letter-spacing: .02em; font-size: .95em; }

.tx-tag { border-radius: 0; font-family: var(--tx-font-head); font-weight: 400; }
.tx-tag-sale { background: var(--tx-sale); box-shadow: 2px 2px 0 #000000; }

.tx-stats { background: var(--tx-surface); }
.tx-stat dd { color: var(--tx-accent); font-weight: 400; }
.tx-stat { border-right-width: 2px; }

.tx-feature-icon { border-radius: 0; background: var(--tx-accent); color: var(--tx-accent-ink); box-shadow: 3px 3px 0 #000000; }
.tx-feature-title { font-size: .95em; font-weight: 400; }

.tx-cta { background: var(--tx-accent); color: var(--tx-accent-ink); border-color: #000000; }
.tx-cta .tx-cta-text { color: color-mix(in srgb, var(--tx-accent-ink) 75%, transparent); }
.tx-cta .tx-btn-primary { background: var(--tx-accent-ink); color: var(--tx-accent); }

.tx-price { font-family: var(--tx-font-head); font-weight: 400; color: var(--tx-accent); }
.tx-price-old { font-family: var(--tx-font-body); }
.tx-progress { height: 16px; border: 2px solid var(--tx-text); border-radius: 0; }
.tx-progress > span { border-radius: 0; background: repeating-linear-gradient(90deg, var(--tx-accent) 0 8px, color-mix(in srgb, var(--tx-accent) 70%, #000000) 8px 10px); }
.tx-nav-bar > .tx-nav-item > .tx-nav-link { font-family: var(--tx-font-head); font-size: .8em; letter-spacing: .04em; }
.tx-nav-bar > .tx-nav-item.is-active > .tx-nav-link { background: var(--tx-accent); color: var(--tx-accent-ink); }
.tx-nav-bar > .tx-nav-item.is-active > .tx-nav-link::after { display: none; }
.tx-brand-name { font-size: 1.15em; letter-spacing: .04em; }
.tx-pill.is-active { background: var(--tx-accent); border-color: var(--tx-accent); color: var(--tx-accent-ink); }
.tx-pill, .tx-chip, .tx-socials a { border-radius: 0; }
.tx-tabbar .tx-tab { font-family: var(--tx-font-head); font-size: 9px; font-weight: 400; }
.tx-tab::before { border-radius: 0; }
.tx-panel-sheet { border: 2px solid var(--tx-text); }
.tx-toast { border: 2px solid var(--tx-text); box-shadow: 4px 4px 0 #000000; border-radius: 0; }

@media (max-width: 899px) {
  .tx-card, .tx-cat, .tx-line { box-shadow: 4px 4px 0 #000000; }
  .tx-hero-title { font-size: clamp(2em, 11vw, 3em); }
}
