/*
 * 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
 *              body.sa-no-product-images / .sa-no-category-images when the
 *              matching theme setting is off
 * 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 / -badges),
 *              .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; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* ══════════════════════════════════════════════════════════════════════════
   SLATE — a quiet, flat storefront theme. Colors, fonts, radii and layout
   come from the theme settings; this file only adds typographic polish.
   No gradients, glows, blur or animation.
   ══════════════════════════════════════════════════════════════════════════ */

body { line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* Type: tight headlines, small quiet labels */
h1, h2, h3, h4 { letter-spacing: -0.02em; }
.sa-hero-title { letter-spacing: -0.035em; line-height: 1.05; }
.sa-hero-subtitle { max-width: 36rem; }
.sa-section-header.text-center .sa-section-subtitle { margin-inline: auto; }
.sa-section-header.text-right .sa-section-subtitle { margin-left: auto; }
.sa-section-eyebrow, .sa-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Prices and buttons: confident weight, nothing more */
.sa-product-card-price, .sa-page-product-price, .sa-page-cart-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.sa-btn, .sa-add-to-cart { font-weight: 600; }

/* One consistent focus style */
:focus-visible { outline: 2px solid rgb(var(--cl-accent)); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: rgb(var(--cl-accent)); }

/* Terms, privacy and other legal pages: comfortable reading column */
.sa-page-terms-body { font-size: 1rem; line-height: 1.75; }
.sa-page-terms-body .e-paragraph { color: rgba(var(--cl-t-primary), 0.85); }
.sa-page-terms-body .e-heading-h1,
.sa-page-terms-body .e-heading-h2,
.sa-page-terms-body .e-heading-h3 { margin-top: 2.25rem; margin-bottom: 0.625rem; letter-spacing: -0.015em; }

/* Reviews, status, FAQ: even rhythm */
.sa-page-feedback-items, .sa-page-products-items { gap: 1rem; }

/* Footer: simple top rule, quieter links */
.sa-footer-link { font-size: 0.875rem; }

/* Structure: tinted bands between sections, accent edge on reviews, bolder stats */
.sa-steps, .sa-faq { background: rgba(var(--cl-t-primary), 0.025); border-block: 1px solid var(--cl-border); }
.sa-feedback-card--classic { border-top: 2px solid rgb(var(--cl-accent)); }
.sa-stats--row .text-h2, .sa-stats--cards .text-h2, .sa-stats--inline .text-h2 { display: block; font-weight: 700; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.sa-stats--row .sa-stat-hero .text-h2 { font-size: clamp(3rem, 6.5vw, 4.5rem); color: rgb(var(--cl-accent)); }

/* Buy box, cart summary and login panel share one accent top edge */
.sa-buybox { border-top: 2px solid rgb(var(--cl-accent)); }

/* ── Small touches ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
.sa-product-card-media img { transition: transform 0.5s ease; }
.sa-product-card:hover .sa-product-card-media img { transform: scale(1.04); }
.sa-btn:active, .sa-add-to-cart:active { transform: translateY(1px); }

/* Hero eyebrow: a quiet "live" pulse on the dot */
@keyframes sl-ping {
  0%   { box-shadow: 0 0 0 0 rgba(var(--cl-accent), 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(var(--cl-accent), 0); }
}
.sa-hero-eyebrow > span:first-child { animation: sl-ping 2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sa-hero-eyebrow > span:first-child { animation: none; }
  .sa-product-card:hover .sa-product-card-media img { transform: none; }
}

/* Navbar: underline-style links */
.sa-navbar-link { position: relative; }
.sa-navbar-link::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.2rem;
  height: 2px;
  background: rgb(var(--cl-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.sa-navbar-link:hover::after, .sa-navbar-link--active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .sa-navbar-link::after { transition: none; } }

/* Segmented navbar: links live in a pill; the current page is a filled pill */
.sa-navbar-seg .sa-navbar-link { padding: 0.45rem 1rem; }
.sa-navbar-seg .sa-navbar-link::after { display: none; }
.sa-navbar-seg .sa-navbar-link:hover { background: rgba(var(--cl-t-primary), 0.06); }
.sa-navbar-seg .sa-navbar-link--active,
.sa-navbar-seg .sa-navbar-link--active:hover { background: rgb(var(--cl-accent)); color: rgb(var(--cl-on-accent)); }

/* Shop background image follows the light/dark scheme instead of staying dark */
.sa-bg-scrim { opacity: 0.55; transition: opacity 0.2s ease; }
[data-scheme="light"] .sa-bg-scrim { opacity: 0.92; }

/* Mobile menu: big rows with an arrow, accent for the current page */
.sa-mobile-links .sa-navbar-link::after {
  content: "\2192";
  position: static;
  display: inline-block;
  width: auto; height: auto;
  background: none;
  transform: none;
  color: rgb(var(--cl-t-muted));
  transition: transform 0.2s ease;
}
.sa-mobile-links .sa-navbar-link:hover::after { transform: translateX(3px); }
.sa-mobile-links .sa-navbar-link--active, .sa-mobile-links .sa-navbar-link--active::after { color: rgb(var(--cl-accent)); }
.sa-mobile-links .sa-navbar-link--active::after { transform: none; }
.sa-mobile-links .sa-navbar-link:last-child { border-bottom: 0; }

/* Reviews: three vertical columns that drift up and down, soft fade top and bottom */
@keyframes sl-vmarquee { to { transform: translateY(var(--mq-shift, -50%)); } }
.sa-vmarquee-col {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%);
}
.sa-vmarquee-track { animation: sl-vmarquee var(--mq-dur, 64s) linear infinite; will-change: transform; }
.sa-vmarquee-track--reverse { animation-direction: reverse; }
.sa-vmarquee-col:hover .sa-vmarquee-track { animation-play-state: paused; }
.sa-trust-badges-items { justify-content: center; }

/* Trust bar: payments on the right, login inputs a touch larger */
.sa-trust-bar .sa-trust-badges-items { justify-content: center; }
@media (min-width: 640px) { .sa-trust-bar .sa-trust-badges-items { justify-content: flex-end; } }
.sa-login-form .input { min-height: 3rem; font-size: 1rem; }

/* Stats sparklines draw in when the card scrolls into view */
.sa-spark { clip-path: inset(0 0 0 0); transition: clip-path 1.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sa-spark .line { stroke-dasharray: none; }
.sa-spark .area { fill-opacity: 0.1; transition: fill-opacity 1.2s ease 0.5s; }
.sa-stats-item.sa-pre .sa-spark { clip-path: inset(0 100% 0 0); }
.sa-stats-item.sa-pre .sa-spark .area { fill-opacity: 0; }

/* Trust section: faint dot grid behind the tiles */
.sa-trust-badges--inline { position: relative; isolation: isolate; }
.sa-trust-badges--inline::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(var(--cl-t-primary), 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000, transparent);
}

/* Login: dotted panel with a soft accent corner, floating stat cards */
.sa-login-aside {
  background-image: radial-gradient(70% 55% at 0% 0%, rgba(var(--cl-accent), 0.16), transparent 70%), radial-gradient(rgba(var(--cl-t-primary), 0.09) 1px, transparent 1px);
  background-size: auto, 22px 22px;
}
@keyframes sl-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.sa-float { animation: sl-float 4.5s ease-in-out infinite alternate; }

/* Stats: equalizer, endpoint dot, cursor spotlight, dot-grid backdrop */
.sa-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 1rem; }
.sa-eq i { width: 3px; height: 100%; border-radius: 2px; background: rgb(var(--cl-accent)); transform-origin: bottom; animation: sl-eq 1.1s ease-in-out infinite alternate; }
.sa-eq i:nth-child(1) { animation-delay: -0.9s; } .sa-eq i:nth-child(2) { animation-delay: -0.3s; }
.sa-eq i:nth-child(3) { animation-delay: -0.7s; } .sa-eq i:nth-child(4) { animation-delay: -0.1s; }
.sa-eq i:nth-child(5) { animation-delay: -0.5s; } .sa-eq i:nth-child(6) { animation-delay: -0.8s; }
.sa-eq i:nth-child(7) { animation-delay: -0.2s; }
@keyframes sl-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.sa-spark-dot { transition: opacity 0.4s ease 1.7s; }
.sa-stats-item.sa-pre .sa-spark-dot { opacity: 0; }

.sa-stats-item, .sa-trust-item, .sa-features-item, .sa-steps-item, .sa-faq-item, .sa-status-card, .sa-dash-card { isolation: isolate; }
.sa-footer-panel { isolation: isolate; }
.sa-stats-item::before, .sa-trust-item::before, .sa-features-item::before, .sa-steps-item::before, .sa-faq-item::before, .sa-status-card::before, .sa-dash-card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity 0.25s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--cl-accent), 0.13), transparent 60%);
}
.sa-stats-item:hover::before, .sa-trust-item:hover::before, .sa-features-item:hover::before, .sa-steps-item:hover::before, .sa-faq-item:hover::before, .sa-status-card:hover::before, .sa-dash-card:hover::before { opacity: 1; }


/* How it works / Why us / FAQ: pulsing rings, animated connectors, login order preview */
@keyframes sl-ring { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
.sa-pulse-ring { animation: sl-ring 3.6s ease-out infinite; }

.sa-steps-item.sa-conn { z-index: 1; }
.sa-conn::after {
  content: "";
  display: none;
  position: absolute;
  top: calc(2.625rem - 1px);
  left: 4.25rem;
  width: calc(100% - 2.25rem);
  height: 2px;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(var(--cl-accent), 0.6) 50%, transparent 0);
  background-size: 12px 2px;
  animation: sl-dash 1s linear infinite;
}
@keyframes sl-dash { to { background-position-x: 12px; } }
@media (min-width: 640px) { .sa-steps-items--2 .sa-conn::after, .sa-steps-items--3 .sa-conn::after { display: block; } }
@media (min-width: 1024px) { .sa-steps-items--4 .sa-conn::after { display: block; } }

@keyframes sl-tick {
  0% { transform: scale(0.55); opacity: 0.25; }
  10%, 80% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0.55); opacity: 0.25; }
}
.sa-step-check { animation: sl-tick 6.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.9s); }

/* Leftover pages: dashed empty states, maintenance backdrop */
.sa-empty { background-image: radial-gradient(rgba(var(--cl-t-primary), 0.08) 1px, transparent 1px); background-size: 20px 20px; }
.sa-maint::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(var(--cl-t-primary), 0.1) 1px, transparent 1px), radial-gradient(60% 45% at 50% 0%, rgba(var(--cl-accent), 0.14), transparent 70%);
  background-size: 22px 22px, auto;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000, transparent);
}

/* Mobile drawer: numbered rows, dotted panel, sits above page content while open */
.sa-mobile-links { counter-reset: nav; }
.sa-mobile-links .sa-navbar-link { display: flex; align-items: center; gap: 1rem; counter-increment: nav; }
.sa-mobile-links .sa-navbar-link::before {
  content: counter(nav, decimal-leading-zero);
  width: 1.75rem; flex-shrink: 0;
  font-family: inherit; font-size: 0.75rem; font-weight: 600;
  color: rgba(var(--cl-t-muted), 0.7);
  font-variant-numeric: tabular-nums;
}
.sa-mobile-links .sa-navbar-link::after { margin-left: auto; }
.sa-mobile-links .sa-navbar-link--active::before { color: rgb(var(--cl-accent)); }
.sa-mobile-aside {
  background-image: radial-gradient(70% 40% at 100% 0%, rgba(var(--cl-accent), 0.12), transparent 70%), radial-gradient(rgba(var(--cl-t-primary), 0.07) 1px, transparent 1px);
  background-size: auto, 22px 22px;
}
.sa-header:has(.sa-mobile-menu:not(.pointer-events-none)) { z-index: 70; }

/* Footer: a barely-there grey divider where the page meets the footer */
.sa-footer--columns { position: relative; }
.sa-footer--columns::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(var(--cl-t-primary), 0.08);
}

/* Join Discord section */
.sa-discord::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(var(--cl-t-primary), 0.08) 1px, transparent 1px), radial-gradient(60% 50% at 50% 0%, rgba(var(--cl-accent), 0.12), transparent 70%);
  background-size: 22px 22px, auto;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 85% 85% at 50% 40%, #000, transparent);
}

/* Product header + status summary: same dotted panel as the Discord and maintenance pages */
.sa-product-head::before, .sa-status-summary::before, .sa-dash-hero::before, .sa-promo-card::before, .sa-coupon-card::before, .sa-locale-card::before, .sa-maint-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(var(--cl-t-primary), 0.08) 1px, transparent 1px), radial-gradient(60% 55% at 50% 0%, rgba(var(--cl-accent), 0.12), transparent 70%);
  background-size: 22px 22px, auto;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 35%, #000, transparent);
  mask-image: radial-gradient(ellipse 85% 90% at 50% 35%, #000, transparent);
}

/* Legal pages: numbered sections, accent links, a panel for the table of contents */
.sa-page-terms-body { counter-reset: lg; }
.sa-page-terms-body .e-heading-h2 { counter-increment: lg; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--cl-border); }
.sa-page-terms-body .e-heading-h2::before {
  content: counter(lg, decimal-leading-zero);
  display: block; margin-bottom: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  color: rgb(var(--cl-accent)); font-variant-numeric: tabular-nums;
}
.sa-page-terms-body a { color: rgb(var(--cl-accent)); text-underline-offset: 3px; }
@media (min-width: 1280px) {
  .sa-page-terms .post-toc-inner { padding: 1rem; border: 1px solid var(--cl-border); border-radius: 1rem; background: rgb(var(--cl-surface)); }
}

/* Why choose us: the big tile is a solid colour, so the dot background never shows through */
.sa-features-item.sa-feature-hero { background-color: color-mix(in srgb, rgb(var(--cl-accent)) 9%, rgb(var(--cl-surface))); }

/* Footer: dotted panel with a soft accent glow, rings that drift slowly */
.sa-footer-panel::after {
  content: "";
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(var(--cl-t-primary), 0.08) 1px, transparent 1px), radial-gradient(70% 60% at 50% 100%, rgba(var(--cl-accent), 0.12), transparent 70%);
  background-size: 22px 22px, auto;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 55%, #000, transparent);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 55%, #000, transparent);
}
@keyframes sl-drift { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.sa-drift { animation: sl-drift 9s ease-in-out infinite alternate; }

/* Dotted backgrounds fade out on every side so they melt into neighbouring sections */
.sfx .pfx-pattern {
  -webkit-mask-image: radial-gradient(ellipse 64% 72% at 50% 50%, #000 10%, transparent 74%), linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 64% 72% at 50% 50%, #000 10%, transparent 74%), linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%);
  mask-composite: intersect;
}

/* Sticky header sits above page content; panels keep their layers to themselves so nothing slides over the navbar */
.sa-header { z-index: 30; }
.sa-discord, .sa-product-head, .sa-status-summary, .sa-dash-hero, .sa-promo-card, .sa-coupon-card, .sa-locale-card, .sa-maint-card { isolation: isolate; }

/* Product variants: selected option gets a solid tint */
.sa-variant--on { background-color: color-mix(in srgb, rgb(var(--cl-accent)) 8%, rgb(var(--cl-surface))); }


/* Cart: pill quantity stepper */
.sa-page-cart .input-stepper { border-radius: 9999px; overflow: hidden; }

/* Hero highlight word: a slow colour flow through your accent. Words can also rotate: write *instantly|securely|automatically* in the hero title. */
@keyframes sl-flow { to { background-position: 200% 50%; } }
.sa-hero-title .mk, .sa-hero-title .sa-rot-word, .sa-promo-title .mk {
  background-image: linear-gradient(100deg,
    rgb(var(--cl-accent)) 0%,
    color-mix(in srgb, rgb(var(--cl-accent)) 48%, #fff) 25%,
    rgb(var(--cl-accent)) 50%,
    color-mix(in srgb, rgb(var(--cl-accent)) 72%, #000) 75%,
    rgb(var(--cl-accent)) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: 0.08em;
  animation: sl-flow 5s linear infinite;
}
.sa-hero-title .mk:has(.sa-rotator) { background-image: none; -webkit-text-fill-color: initial; animation: none; padding-bottom: 0; }
.sa-rotator { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.sa-rot-word {
  grid-area: 1 / 1;
  transform: translateY(100%); opacity: 0;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.sa-rot-word.is-on { transform: translateY(0); opacity: 1; }
.sa-rot-word.is-out { transform: translateY(-100%); opacity: 0; }

/* Footer links: sweeping underline, accent colour, little lift; column titles glow when you hover the column */
.sa-footer-link {
  position: relative; display: inline-block;
  background: linear-gradient(rgb(var(--cl-accent)), rgb(var(--cl-accent))) left bottom / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s ease, color 0.2s ease, transform 0.2s ease;
}
.sa-footer-link:hover { background-size: 100% 2px; color: rgb(var(--cl-accent)); transform: translateY(-1px); }
.sa-footer-col h3::after {
  content: ""; display: block; height: 2px; width: 1.25rem; margin: 0.4rem auto 0;
  border-radius: 9999px; background: rgb(var(--cl-accent)); transition: width 0.3s ease;
}
.sa-footer-col:hover h3::after { width: 2.75rem; }

/* Customer lists: orders and tickets get a leading icon tile */
.sa-page-customer-invoices-item, .sa-page-customer-tickets-item { position: relative; padding-left: 4.75rem; }
.sa-page-customer-invoices-item::before, .sa-page-customer-tickets-item::before,
.sa-page-customer-invoices-item::after, .sa-page-customer-tickets-item::after {
  content: ""; position: absolute; left: 1.25rem; top: 1.25rem; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem;
}
.sa-page-customer-invoices-item::before, .sa-page-customer-tickets-item::before { border: 1px solid rgba(var(--cl-accent), 0.25); background: rgba(var(--cl-accent), 0.1); }
.sa-page-customer-invoices-item::after, .sa-page-customer-tickets-item::after { background: rgb(var(--cl-accent)); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1.05rem; mask-size: 1.05rem; }
.sa-page-customer-invoices-item::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.sa-page-customer-tickets-item::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E"); }

/* Carousels: arrows sit beside the cards, dots sit underneath them */
.sa-splide { padding-bottom: 2.75rem; }
@media (min-width: 640px) { .sa-splide { padding-inline: 3.5rem; } }
.sa-splide .splide__arrow {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; opacity: 1;
  background: rgb(var(--cl-surface)); border: 1px solid var(--cl-border);
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.sa-splide .splide__arrow--prev { left: 0; }
.sa-splide .splide__arrow--next { right: 0; }
.sa-splide .splide__arrow:hover:not(:disabled) { background: rgb(var(--cl-accent)); border-color: rgb(var(--cl-accent)); }
.sa-splide .splide__arrow:hover:not(:disabled) svg { fill: rgb(var(--cl-on-accent)); }
.sa-splide .splide__arrow:disabled { opacity: 0.3; }
.sa-splide .splide__pagination { bottom: 0.4rem; gap: 0.35rem; }
.sa-splide .splide__pagination__page { width: 0.5rem; height: 0.5rem; }
@media (max-width: 639.98px) {
  .sa-splide .splide__arrow { top: auto; bottom: 0; transform: none; }
  .sa-splide .splide__arrow--prev { left: 0; }
  .sa-splide .splide__arrow--next { right: 0; }
}

/* Opening a menu, cart or popup locks page scroll; keep the scrollbar space so the page never jumps sideways */
html { scrollbar-gutter: stable; }

/* Promo spotlight: rings orbit, the button gleams, the highlighted word flows */
@keyframes sl-spin { to { transform: rotate(360deg); } }
.sa-orbit { animation: sl-spin 28s linear infinite; }
.sa-orbit-rev { animation: sl-spin 20s linear infinite reverse; }
@keyframes sl-shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.sa-promo .sa-btn--primary.sa-btn--solid { position: relative; overflow: hidden; }
.sa-promo .sa-btn--primary.sa-btn--solid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%); animation: sl-shine 3.8s ease-in-out infinite;
}

/* Purchase notifications: a thin bar counts down the time left on screen */
@keyframes sl-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.sa-sp-progress { animation: sl-progress 7s linear forwards; }
.sa-social-proof-item:hover .sa-sp-progress { animation-play-state: paused; }

/* Coupon: the scissors snip along the ticket and the code is revealed behind them */
.sa-ticket-inner { animation: sl-cut-open 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.55s both; }
@keyframes sl-cut-open { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sa-ticket-scissors { left: 0.75rem; animation: sl-scissors-run 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.55s both; }
@keyframes sl-scissors-run { 0% { left: 0.75rem; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 2rem); opacity: 0; } }
.sa-snip { display: inline-block; animation: sl-snip 0.15s ease-in-out 10 alternate; }
@keyframes sl-snip { from { transform: rotate(-16deg) scaleY(1); } to { transform: rotate(14deg) scaleY(0.8); } }


/* Promo: showcase bars and the animated Discord walkthrough */
.sa-bar { transform-origin: bottom; animation: sl-bar 2.8s ease-in-out infinite; }
@keyframes sl-bar { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
.sa-demo-pop { animation: sl-demo-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes sl-demo-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.sa-caret { animation: sl-blink 1s steps(2, start) infinite; }
@keyframes sl-blink { to { visibility: hidden; } }
.sa-cursor { pointer-events: none; animation: sl-cursor-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes sl-cursor-in { from { opacity: 0; transform: translate(38px, 30px); } to { opacity: 1; transform: translate(0, 0); } }

/* Language / currency popup: dropdown lists may extend past the card; keep the dotted backdrop inside its corners */
.sa-locale-card::before { border-radius: inherit; }