/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* ------------------------------------------------------------------ */
/* Theme identity: "brass key" — a vault/access-key concept for a      */
/* store that sells unlock keys & scripts. Core colors, fonts, radii   */
/* and shadows are already set in Theme Settings → Global; this file   */
/* only adds the details the settings panel can't express.             */
/* ------------------------------------------------------------------ */

/* Product page buy box: transparent background, no card/border/shadow */
.sa-buybox {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Discord nav button: one quick hop every 2s, then it sits still */
.sa-navbar-link-discord {
  animation: sa-discord-hop 2s ease-in-out infinite;
}

@keyframes sa-discord-hop {
  0%, 80%, 100% { transform: translateY(0); }
  88% { transform: translateY(-6px); }
  94% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sa-navbar-link-discord {
    animation: none;
  }
}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&display=swap');

/* Signature detail: anything that reads as a *code* — a price, a plan
   stat, a license/order number — sets in a monospace face. It's the one
   place the "key" concept shows up directly, so it stays limited to
   these spots rather than spreading into decoration. */
.sa-product-card-price,
.sa-page-cart-price,
.sa-page-product-price,
.sa-stats-item .font-heading,
.sa-product-card-price *,
[class*="license"],
[class*="order-id"],
[class*="ticket-id"] {
  font-family: 'JetBrains Mono', var(--ff-body), monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Fix: section background effects (.sfx — the grid/dots pattern set   */
/* via each section's "Background effect" property) were invisible.   */
/* .sfx sits at z-index:-1 so it paints behind its own section, but    */
/* the section itself only had `position:relative` with no z-index —  */
/* that does NOT create a stacking context of its own, so the -1 layer */
/* escaped upward to the nearest ancestor that does (the #app wrapper),*/
/* landing behind that wrapper's own normal content instead of just    */
/* behind its own section. `isolation:isolate` forces every section to */
/* own its stacking context so its background effect is contained and  */
/* renders correctly again. */
.component {
  isolation: isolate;
}

/* ------------------------------------------------------------------ */
/* Product hover feedback — lift + accent border + soft brass glow,    */
/* plus a cursor-following tilt (rotateX/rotateY) on product cards.    */
/* --tilt-x/--tilt-y are set by custom.js on mousemove and reset to 0  */
/* on mouseleave; kept restrained, not a neon effect.                  */
/* ------------------------------------------------------------------ */

.sa-product-card,
.sa-categories-item,
.sa-blog-post-card,
.rounded-btn,
.sa-btn {
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sa-product-card,
.sa-categories-item,
.sa-blog-post-card {
  position: relative;
}

.sa-product-card,
.sa-categories-item {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  will-change: transform;
}

.sa-product-card.sa-tilting,
.sa-categories-item.sa-tilting {
  transition:
    border-color 0.25s ease,
    transform 0.08s ease-out,
    box-shadow 0.25s ease;
}

.sa-product-card:hover,
.sa-categories-item:hover {
  border-color: rgba(var(--cl-accent), 0.5);
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);
  box-shadow:
    var(--shadow-card),
    0 18px 34px -18px rgba(var(--cl-accent), 0.35);
}

.sa-blog-post-card:hover {
  border-color: rgba(var(--cl-accent), 0.5);
  transform: translateY(-3px);
  box-shadow:
    var(--shadow-card),
    0 18px 34px -18px rgba(var(--cl-accent), 0.35);
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .sa-product-card,
  .sa-categories-item {
    transform: none !important;
  }
}

.sa-product-card:hover .sa-product-card-title {
  color: rgb(var(--cl-accent));
}

/* Price glow-up: flat brass text becomes a warm brass-to-champagne
   gradient with a soft glow, plus a subtle "digits ticking into place"
   feel on load. Still monospace (see rule above), just richer. */
.sa-product-card-price,
.sa-page-cart-price,
.sa-page-product-price {
  display: inline-block;
  position: relative;
  text-shadow: 0 0 22px rgba(var(--cl-accent), 0.28);
  transition: filter 0.25s ease, transform 0.25s ease;
  animation: sa-price-in 0.5s ease both;
}

/* The gradient/clip has to live on whatever element actually contains the
   digits — here that's the inner x-text spans, not the wrapper — otherwise
   the text inherits color:transparent from the wrapper and disappears. */
.sa-product-card-price > span,
.sa-page-cart-price,
.sa-page-product-price {
  background-image: linear-gradient(100deg, #F4DFAE 0%, rgb(var(--cl-accent)) 45%, #B9832E 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 0.5s ease;
}

.sa-product-card:hover .sa-product-card-price {
  filter: drop-shadow(0 0 10px rgba(var(--cl-accent), 0.45));
  transform: translateX(1px);
}

.sa-product-card:hover .sa-product-card-price > span {
  background-position: 100% 50%;
}

@keyframes sa-price-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sa-product-card-price { animation: none; }
}

.sa-product-card-media img {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}

.sa-product-card:hover .sa-product-card-media img {
  filter: brightness(1.06) saturate(1.1);
}

/* Cursor-follow brass spotlight: a soft light that tracks the pointer
   across the card, plus a thin glowing ring traced along the border.
   --mx/--my are set by custom.js on mousemove; fall back to centered. */

.sa-product-card::before,
.sa-categories-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--cl-accent), 0.1), transparent 72%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.sa-product-card::after,
.sa-categories-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--cl-accent), 0.75), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.sa-product-card:hover::before,
.sa-product-card:hover::after,
.sa-categories-item:hover::before,
.sa-categories-item:hover::after {
  opacity: 1;
}

@media (hover: none) {
  .sa-product-card::before,
  .sa-product-card::after,
  .sa-categories-item::before,
  .sa-categories-item::after {
    display: none;
  }
}

/* Stock/status pill: a touch more presence on hover, echoing the      */
/* pulsing dot it already carries.                                     */
.sa-product-card:hover .sa-product-card-status {
  filter: brightness(1.08);
}

.input:focus,
.input:hover {
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.15);
}

/* ------------------------------------------------------------------ */
/* Buttons — tactile press + warm glow on primary actions, so the      */
/* main "buy" / "unlock" actions feel like the premium moment they are.*/
/* ------------------------------------------------------------------ */

.sa-btn,
.sa-add-to-cart,
button,
a.rounded-btn,
[role="button"] {
  transition: transform 0.15s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.bg-accent-500:hover {
  box-shadow: 0 10px 26px -10px rgba(var(--cl-accent), 0.55);
}

.sa-btn:active,
.sa-add-to-cart:enabled:active,
button:not(:disabled):active,
a.rounded-btn:active,
[role="button"]:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .sa-btn:active,
  .sa-add-to-cart:enabled:active,
  button:not(:disabled):active,
  a.rounded-btn:active,
  [role="button"]:active {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Global polish: gold text selection, thin brass scrollbar, and a     */
/* warm focus ring — the small, felt-everywhere details.               */
/* ------------------------------------------------------------------ */

::selection {
  background: rgba(var(--cl-accent), 0.28);
  color: rgb(var(--cl-t-primary));
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cl-accent), 0.45) transparent;
}

.overflow-y-auto,
.overflow-x-auto,
.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cl-accent), 0.4) transparent;
}

html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

html::-webkit-scrollbar-thumb {
  background-color: rgba(var(--cl-accent), 0.35);
  border-radius: 999px;
  border: 2px solid rgb(var(--cl-background));
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--cl-accent), 0.6);
}

a:focus-visible,
button:focus-visible,
.sa-btn:focus-visible,
.sa-product-card:focus-visible {
  outline: 2px solid rgba(var(--cl-accent), 0.65);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll-reveal: cards ease up into place as they enter the viewport. */
/* Class is added only by JS, so with JS disabled everything stays     */
/* fully visible by default — this is progressive enhancement only.    */

.sa-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sa-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sa-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Sticky buy bar — shown once the main Add to Cart / Buy Now buttons  */
/* scroll out of view, so the purchase action stays one tap away.      */
/* Visibility is toggled by custom.js; the bar itself keeps reading    */
/* live Alpine state, so price/stock can never fall out of sync.       */
/* ------------------------------------------------------------------ */

.sa-sticky-buybar {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.sa-sticky-buybar.sa-buybar-visible {
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sa-sticky-buybar {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Checkout CTA — a slow, warm breathing glow so "Buy Now" reads as    */
/* the obvious next step without feeling like a flashing banner ad.    */
/* ------------------------------------------------------------------ */

.sa-checkout-btn {
  animation: sa-buy-breathe 2.8s ease-in-out infinite;
}

.sa-checkout-btn svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  flex-shrink: 0;
}

.sa-checkout-btn:hover,
.sa-checkout-btn:focus-visible {
  animation-play-state: paused;
}

@keyframes sa-buy-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cl-accent), 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(var(--cl-accent), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sa-checkout-btn {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Cart icon halo — a quiet, steady ring while the cart holds items,   */
/* separate from the bump animation which only fires on add.           */
/* ------------------------------------------------------------------ */

.sa-navbar-cart.sa-cart-has-items::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-button, 10px);
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.35);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Copy-to-clipboard feedback — license keys, order IDs, ticket IDs.   */
/* The click handling lives in custom.js; this just styles the state.  */
/* ------------------------------------------------------------------ */

.sa-copyable {
  cursor: pointer;
  border-radius: 4px;
  padding: 0.05em 0.3em;
  margin: -0.05em -0.3em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sa-copyable:hover {
  background-color: rgba(var(--cl-accent), 0.1);
  color: rgb(var(--cl-accent));
}

.sa-copy-toast {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-badge, 8px);
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-on-accent));
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: var(--shadow-modal, 0 8px 24px rgba(0, 0, 0, 0.2));
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sa-copy-toast.sa-copy-toast-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ------------------------------------------------------------------ */
/* Image skeleton shimmer — while a product/category image is still    */
/* loading, a soft moving highlight instead of empty surface color.    */
/* ------------------------------------------------------------------ */

.sa-img-loading {
  position: relative;
  background-color: rgba(var(--cl-t-primary), 0.04);
  overflow: hidden;
}

.sa-img-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(var(--cl-accent), 0.14) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: sa-shimmer 1.6s ease-in-out infinite;
}

.sa-img-loading img {
  opacity: 0;
}

.sa-img-fade-in {
  animation: sa-img-fade-in 0.4s ease both;
}

@keyframes sa-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@keyframes sa-img-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-img-loading::after {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Cart icon bump — a quick, warm acknowledgement when something is    */
/* added, so the cart icon itself confirms the action.                 */
/* ------------------------------------------------------------------ */

.sa-navbar-cart.sa-cart-bump {
  animation: sa-cart-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sa-cart-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); color: rgb(var(--cl-accent)); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Scheme toggle — a satisfying quarter-spin on click, layered on top  */
/* of the existing sun/moon swap (which stays instant via x-show).     */
/* ------------------------------------------------------------------ */

.sa-scheme-toggle.sa-scheme-spin {
  animation: sa-scheme-spin 0.4s ease;
}

@keyframes sa-scheme-spin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(140deg) scale(0.85); }
  to { transform: rotate(180deg) scale(1); }
}

/* ------------------------------------------------------------------ */
/* Stats count-up — keep digit width stable while the number animates. */
/* ------------------------------------------------------------------ */

.sa-stats-item .font-heading.sa-counting {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Quiet page-load: a short fade/rise on the content and a thin        */
/* accent-colored progress bar across the top, like a browser tab.     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: sa-page-fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  @keyframes sa-page-fade-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

#sa-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: rgb(var(--cl-accent));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
}

#sa-page-progress.sa-progress-loading {
  animation: sa-progress-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

#sa-page-progress.sa-progress-done {
  transform: scaleX(1);
  transition: transform 0.25s ease-out;
}

#sa-page-progress.sa-progress-fade {
  transition: opacity 0.35s ease-in;
  opacity: 0;
}

@keyframes sa-progress-grow {
  0% { transform: scaleX(0); }
  80% { transform: scaleX(0.85); }
  100% { transform: scaleX(0.9); }
}

/* ------------------------------------------------------------------ */
/* Back to top button — hidden until the visitor has scrolled past the */
/* hero, then fades/lifts in. Same tactile press as other buttons.     */
/* ------------------------------------------------------------------ */

#sa-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-badge, 9999px);
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-on-accent));
  box-shadow: 0 10px 26px -10px rgba(var(--cl-accent), 0.55);
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

#sa-back-to-top svg {
  width: 18px;
  height: 18px;
}

#sa-back-to-top.sa-back-to-top-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#sa-back-to-top:hover {
  box-shadow: 0 14px 30px -10px rgba(var(--cl-accent), 0.7);
  transform: translateY(-2px) scale(1);
}

#sa-back-to-top:active {
  transform: translateY(0) scale(0.94);
}

@media (max-width: 640px) {
  #sa-back-to-top {
    right: 14px;
    bottom: 14px;
  }
}

/* ------------------------------------------------------------------ */
/* FAQ live filter — small search field injected above longer FAQ      */
/* lists. Matches the input styling already used across the theme.     */
/* ------------------------------------------------------------------ */

.sa-faq-filter {
  position: relative;
  max-width: 420px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
}

.sa-faq-filter svg {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: rgb(var(--cl-t-muted));
  pointer-events: none;
}

.sa-faq-filter input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border-radius: var(--radius-input, 10px);
  border: var(--border-w, 1px) solid rgba(var(--cl-border), var(--border-o, 0.1));
  background: rgb(var(--cl-surface));
  color: rgb(var(--cl-t-primary));
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sa-faq-filter input:focus {
  outline: none;
  border-color: rgba(var(--cl-accent), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.15);
}

.sa-faq-filter-empty {
  text-align: center;
  color: rgb(var(--cl-t-muted));
  font-size: 0.9rem;
  padding: 12px 0 4px;
}

/* ------------------------------------------------------------------ */
/* Recently viewed strip — horizontal scroll row of small cards above  */
/* the footer, built from the visitor's own product-page history.      */
/* ------------------------------------------------------------------ */

.sa-recently-viewed-title {
  font-family: var(--ff-heading);
  font-weight: var(--fw-heading, 700);
  font-size: 1.25rem;
  color: rgb(var(--cl-t-primary));
  margin-bottom: 16px;
}

.sa-recently-viewed-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.sa-recently-viewed-card {
  flex: 0 0 auto;
  width: 168px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-card, 14px);
  border: var(--border-w, 1px) solid rgba(var(--cl-border), var(--border-o, 0.1));
  background: rgb(var(--cl-surface));
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sa-recently-viewed-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--cl-accent), 0.4);
  box-shadow: 0 14px 28px -16px rgba(var(--cl-accent), 0.4);
}

.sa-recently-viewed-card img,
.sa-recently-viewed-noimg {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-input, 10px);
  background: rgba(var(--cl-t-primary), 0.04);
}

.sa-recently-viewed-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgb(var(--cl-t-primary));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.sa-recently-viewed-price {
  font-family: 'JetBrains Mono', var(--ff-body), monospace;
  font-weight: 600;
  font-size: 0.82rem;
  color: rgb(var(--cl-accent));
}