/*
 * 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; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* ── Blue visual language overrides ───────────────────────────────────────── */

/* Eyebrow text: plain uppercase label like Blue's style, no pill chrome */
.sa-section-eyebrow,
.sa-hero-eyebrow {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Hero subtitle: slightly dimmer to match Blue's t-primary/75 secondary text */
.sa-hero-subtitle {
  opacity: 0.78;
}

/* Section subtitles: same restraint */
.sa-section-subtitle {
  opacity: 0.78;
}

/* Navbar: hard vertical divider between brand and links matches Blue's aesthetic */
.sa-navbar--classic .sa-navbar-logo {
  padding-right: 1.5rem;
  border-right: 1px solid var(--cl-border);
  margin-right: 0.25rem;
}

/* Footer: remove the gradient top rule — Blue used a simpler horizontal border */
.sa-footer > .absolute.top-0 {
  display: none;
}
.sa-footer {
  border-top: 1px solid var(--cl-border);
}

/* Footer wordmark: disabled in settings but guard against it showing at any opacity */
.footer-wordmark {
  display: none;
}

/* Icon tiles: Blue used solid accent fills without inner glow ring */
.icon-tile {
  background: rgba(var(--cl-accent), 0.12);
  border-color: rgba(var(--cl-accent), 0.18);
}
.group:hover .icon-tile-glow,
.icon-tile-glow:hover {
  background: rgba(var(--cl-accent), 0.2);
  box-shadow: none;
}

/* Rule labels in footer columns: hard left-aligned, no fade trail */
.rule-label::after {
  background: var(--cl-border);
}

/* Cart panel / modals: remove rounded card on the drawer itself */
.sa-cart-panel {
  border-radius: 0;
}

/* Search modal: remove rounding */
[role="dialog"] {
  border-radius: 0;
}

/* Social proof toast: no rounding */
.sa-toast {
  border-radius: 0;
}

/* Product cards: ensure no stray border-radius from utility classes on image wrappers */
.sa-product-card .aspect-product-card-image {
  border-radius: 0;
}

/* Feedback cards: match Blue's card style */
.sa-feedback-card {
  border-radius: 0;
}

/* Outline / secondary buttons: Blue used a crisp accent-colored border */
[class*="btn-"][class*="outline"],
.sa-btn--outline {
  border-color: rgba(var(--cl-accent), 0.5);
  color: rgb(var(--cl-accent));
}
[class*="btn-"][class*="outline"]:hover,
.sa-btn--outline:hover {
  background: rgba(var(--cl-accent), 0.08);
  border-color: rgba(var(--cl-accent), 0.7);
}

/* Announcement bar: tight text to match Blue's compact bar */
.sa-announcement {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

/* Steps connector: Blue palette — accent line on near-black */
.steps-flow {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--cl-accent), 0.55) 50%,
    transparent 100%
  );
}
/* ── Product page: ported from the standalone HTML site ───────────────────
 * Reference: "Site Example/Real copy.html" (.under-shot / .feat / .assurance).
 * Values below are the reference's own px figures, so the two pages match.
 * Plain CSS on sa-* hooks: built.css is compiled Tailwind and this theme
 * ships no toolchain to rebuild it.
 */

/* TABS — reference used an underlined nav (.nav-main a), not a pill group.
   Same language here, at a readable size. */
.sa-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--cl-border);
}

.sa-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 0 12px;
  margin-bottom: -1px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: rgb(var(--cl-t-muted));
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sa-tab:hover {
  color: rgb(var(--cl-t-primary));
}

.sa-tab[aria-selected="true"] {
  color: rgb(var(--cl-t-primary));
  border-bottom-color: rgb(var(--cl-accent));
}

/* WHAT'S INCLUDED — .feat ul / .feat li from the reference */
.sa-included {
  --sa-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
}

/* Top-level bullet list becomes the two-column feature grid.
   Nested lists keep normal rendering. */
.sa-included ul:not(ul ul) {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.sa-included ul:not(ul ul) > li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgb(var(--cl-t-primary));
  opacity: 0.88;
}

.sa-included ul:not(ul ul) > li::marker { content: ""; }

.sa-included ul:not(ul ul) > li::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  background-color: var(--cl-accent-text);
  -webkit-mask: var(--sa-check) center / contain no-repeat;
  mask: var(--sa-check) center / contain no-repeat;
}

/* ASSURANCE — .assurance / .assurance .box, directly under the feature list */
.sa-assurance {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sa-assurance-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-card);
  background: rgb(var(--cl-surface));
}

.sa-assurance-icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--cl-accent-text);
}

.sa-assurance-box strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
  margin-bottom: 1px;
}

.sa-assurance-box p {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgb(var(--cl-t-muted));
  margin: 0;
}

/* Reference breakpoints: 1-col features, trust boxes stay side by side */
@media (max-width: 560px) {
  .sa-included ul:not(ul ul) { grid-template-columns: 1fr; }
  .sa-tabs { gap: 18px; }
  .sa-tab { font-size: 15px; }
  .sa-assurance { gap: 8px; }
  .sa-assurance-box { padding: 10px; gap: 8px; }
  .sa-assurance-icon { width: 18px; height: 18px; }
  .sa-assurance-box strong { font-size: 12.5px; }
  .sa-assurance-box p { font-size: 11px; line-height: 1.3; }
}

/* Masthead + footer are dark in BOTH schemes in the reference
   (--mast: #0c0c0f dark / #16161a light). */
.sa-header, .sa-footer { background: #0c0c0f; }
[data-scheme="light"] .sa-header,
[data-scheme="light"] .sa-footer { background: #16161a; }

/* Reference nav: plain links with an accent underline on the current page,
   not the theme's default pill treatment. */
.sa-navbar-link {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #a7a6b0;
}
.sa-navbar-link:hover { color: #f1f1f4; background: none; }
.sa-navbar-link[aria-current="page"] {
  color: #f1f1f4;
  border-bottom-color: rgb(var(--cl-accent));
  background: none;
}
.sa-footer-link { color: #a7a6b0; }
.sa-footer-link:hover { color: #f1f1f4; }

/* BUY BOX — reference ".buy": plans sit bare on the page, only the
   quantity / total / buttons group is boxed. */
.sa-buybox {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-card);
  background: rgb(var(--cl-surface));
}

/* HELP LINE — reference ".extras" / ".help", under everything */
.sa-help {
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--cl-border);
}

.sa-help p {
  margin: 0;
  color: rgba(var(--cl-t-primary), 0.8);
  font-size: 15px;
}

.sa-help strong {
  font-weight: 700;
  color: rgb(var(--cl-t-primary));
}

.sa-help a {
  color: var(--cl-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* TOTAL ROW — reference ".total-row", inside the buy box above the buttons */
.sa-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid var(--cl-border);
}

.sa-total-label {
  font-size: 15px;
  color: rgba(var(--cl-t-primary), 0.8);
}

.sa-total-price {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: rgb(var(--cl-t-primary));
}


/* REDEMPTION NOTE — reference ".redeem", last item in the buy box */
.sa-redeem {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: rgb(var(--cl-t-muted));
}

.sa-redeem a {
  color: var(--cl-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Reference tokens with no theme equivalent ─────────────────────────────
 * --line2 (stronger rule) and --accent-soft (selected plan fill), taken
 * from the reference's own :root blocks.
 */
:root { --sa-line2: #3c3c47; --sa-accent-soft: #241633; --sa-text2: #ccccd4; }
[data-scheme="light"] { --sa-line2: #c2c2c9; --sa-accent-soft: #efe6ff; --sa-text2: #3b3b42; }

/* PLAN CARDS — reference ".plan". The Tailwind state classes were removed
   from the markup, so these rules own the whole appearance. */
.sa-variant-card {
  position: relative;
  width: 100%;
  padding: 14px 18px;
  gap: 14px;
  text-align: left;
  border: 1px solid var(--sa-line2);
  border-radius: var(--radius-card);
  background: rgb(var(--cl-surface));
  transition: border-color 0.15s, background 0.15s;
}

.sa-variant-card:hover:not(:disabled) { border-color: rgb(var(--cl-accent)); }

.sa-variant-card[aria-pressed="true"] {
  border-color: rgb(var(--cl-accent));
  background: var(--sa-accent-soft);
  box-shadow: inset 0 0 0 1px rgb(var(--cl-accent));
}

/* .plan .radio — 20px ring, filled inset 3px when chosen */
.sa-variant-card > span[aria-hidden="true"] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sa-line2);
  border-radius: 50%;
  flex: none;
  position: relative;
  background: none;
}
.sa-variant-card[aria-pressed="true"] > span[aria-hidden="true"] {
  border-color: rgb(var(--cl-accent));
}
.sa-variant-card > span[aria-hidden="true"] > span {
  position: absolute;
  inset: 3px;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: rgb(var(--cl-accent));
  opacity: 0;
}
.sa-variant-card[aria-pressed="true"] > span[aria-hidden="true"] > span { opacity: 1; }

/* .pl-name / .pl-period / .pl-price */
.sa-variant-card .text-sm.font-medium { font-size: 16px; font-weight: 700; line-height: 1.25; }
.sa-variant-card .text-xs { font-size: 13px; }
.sa-variant-card > .text-right { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; white-space: nowrap; }
.sa-variant-card > .text-right .font-medium { font-weight: 700; }
.sa-variant-card > .text-right .text-xs { font-size: 13px; font-weight: 400; }

/* BUY CONTROLS — reference .btn / .qty */
.sa-product-form .btn-primary,
.sa-product-form .btn-secondary,
.sa-product-form .sa-add-to-cart,
.sa-buybox button[type="submit"] {
  min-height: 50px;
  font-size: 15px;
  font-weight: 600;
}
.sa-buybox input[type="number"] {
  height: 40px;
  font-size: 16px;
  font-weight: 600;
  min-width: 44px;
  text-align: center;
}
.sa-buybox input[type="number"] + button,
.sa-buybox button:has(+ input[type="number"]) {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
.sa-product-form .rule-label { font-size: 13px; letter-spacing: 0.3px; }

/* ── Section sizing (classic-split only) ──────────────────────────────────
 * Reference .product: a 44px column gap, and h1 sitting ~10px down so the
 * buy column starts a little below the banner. Right column slightly wider.
 */
@media (min-width: 1024px) {
  /* Reference .product: minmax(0, 1.05fr) minmax(0, 1fr) with a 44px gap.
     flex-basis 0 plus those grow factors reproduces it exactly, so neither
     column is squeezed by its own content. */
  .sa-page-product--classic-split .sa-prod-cols { gap: 44px; }
  .sa-page-product--classic-split .sa-prod-media { flex: 1.05 1 0; width: auto; min-width: 0; }
  .sa-page-product--classic-split .sa-prod-buy  { flex: 1 1 0; width: auto; min-width: 0; padding-top: 10px; }
}

/* Tabs sit closer to the banner — reference .under-shot margin-top: 22px,
   against the theme's 32px, which left a gap under the image. */
.sa-prod-content { margin-top: 8px; }
.sa-prod-content-m { margin-top: 26px; }

/* TAGLINE — reference ".lede", under the title */
.sa-lede {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 48ch;
  color: rgba(var(--cl-t-primary), 0.8);
}

/* Title a touch larger than text-h1's scale on the split layout
   (that scale is clamp(1.75rem, 3.2vw + .9rem, 2.5rem) at a 15px base). */
.sa-page-product--classic-split .sa-page-product-title {
  font-size: clamp(29.25px, 3.2vw + 16.5px, 40.5px);
}

/* A per-product note comes from the rich-text editor, so normalise its
   block children to the same small centred line. */
.sa-redeem > :first-child { margin-top: 0; }
.sa-redeem > :last-child { margin-bottom: 0; }
.sa-redeem p { font-size: 13px; line-height: 1.5; color: rgb(var(--cl-t-muted)); margin: 0; }

/* "Popular" badge — reference ".pl-badge", straddling the card's top edge */
.sa-variant-list {
  gap: 10px;
  padding-top: 9px;   /* room for the badge to overhang the first card */
}

.sa-variant-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: var(--radius-badge);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--cl-on-accent));
  background: rgb(var(--cl-accent));
}

/* ── Home page: ported from "Site Example/index copy.html" ────────────────
 * Reference .home-hero is a two-column grid (copy left, featured products
 * right) with .home-cards beneath. Figures below are the reference's own.
 */
@media (min-width: 1024px) {
  .sa-hero-split { gap: 44px; }
}

/* .hh-text h1 / > p */
.sa-hero--product-spotlight .sa-hero-title {
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.02;
}
.sa-hero--product-spotlight .sa-hero-subtitle {
  font-size: 23px;
  max-width: 46ch;
  opacity: 1;
  color: rgba(var(--cl-t-primary), 0.8);
}

/* .hh-featured / .fp-track — a vertical stack of product rows */
.sa-hero-featured {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* .fprod — row card: art left, name + price, Buy now right */
.sa-hero-featured .sa-product-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-card);
  background: rgb(var(--cl-surface));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sa-hero-featured .sa-product-card:hover {
  border-color: rgb(var(--cl-accent));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
[data-scheme="light"] .sa-hero-featured .sa-product-card:hover {
  box-shadow: 0 10px 28px rgba(21, 23, 26, 0.16);
}

/* .fprod-art — fixed 180x104 thumbnail. The theme's compact-row thumb is a
   w-20/sm:w-24 wrapper, so the size goes on the wrapper and the img fills it. */
.sa-hero-featured .sa-product-card-thumb {
  width: 180px;
  height: 104px;
  flex: none;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(var(--cl-t-primary), 0.05);
}
.sa-hero-featured .sa-product-card-thumb img,
.sa-hero-featured .sa-product-card-thumb > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .fprod-info b / .fprod-price */
.sa-hero-featured .sa-product-card-title { font-size: 18px; font-weight: 600; }
.sa-hero-featured .sa-product-card-price { font-size: 13.5px; color: rgb(var(--cl-t-muted)); }

/* .home-cards / .hcard */
.sa-support-channels--grid-3 .grid { gap: 16px; }
.sa-support-channels--grid-3 .sa-support-channels-item {
  padding: 24px;
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-card);
  background: rgb(var(--cl-surface));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sa-support-channels--grid-3 .sa-support-channels-item:hover {
  border-color: rgb(var(--cl-accent));
}
.sa-support-channels--grid-3 .sa-support-channels-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sa-support-channels--grid-3 .sa-support-channels-item:hover .sa-support-channels-title {
  color: var(--cl-accent-text);
}

@media (max-width: 1023px) {
  /* Reference: the carousel sits above the hero copy on narrow screens. */
  .sa-hero--product-spotlight .sa-hero-split { display: flex; flex-direction: column; }
  .sa-hero--product-spotlight .sa-hero-split > div:last-child { order: -1; }
}

@media (max-width: 560px) {
  .sa-hero-featured .sa-product-card img { width: 120px; height: 70px; }
  .sa-hero-featured .sa-product-card { gap: 14px; padding: 12px; flex-wrap: wrap; }
  .sa-hero--product-spotlight .sa-hero-subtitle { font-size: 18px; }
}

/* .hh-payments — accepted-method strip under the hero buttons.
   The snippet emits an inline flex row; the reference lays the icons out on a
   fixed 5-column grid so they wrap into even rows instead of one long line. */
.sa-hero-payments {
  margin-top: 28px;
  max-width: 560px;
}

.sa-hero-payments .sa-payment-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 20px;
  align-items: center;
}

.sa-hero-payments .sa-payment-icons > * {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 28px;
  min-width: 0;
}

.sa-hero-payments img {
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 480px) {
  .sa-hero-payments { max-width: 100%; }
  .sa-hero-payments .sa-payment-icons { grid-template-columns: repeat(4, 1fr); gap: 12px 14px; }
  .sa-hero-payments img { height: 28px; }
}

/* ── Footer: reference .foot ───────────────────────────────────────────────
 * A row of links with the Discord icon pushed right, then a ruled copyright
 * line across the full width.
 */
.sa-footer-minimal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.sa-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  flex: 1;
}

.sa-footer-social { margin-left: auto; }

.sa-footer-copy {
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--cl-border);
  font-size: 13px;
  color: #a7a6b0;
}

.sa-footer-link { font-size: 14.5px; padding: 6px 0; }
.sa-footer-link:hover { text-decoration: underline; }

/* ── Home link cards: reference .hcard ────────────────────────────────────
 * support-channels is built for tall step cards; strip the watermark number,
 * the min-height and the extra padding so they read as the reference's
 * compact link cards.
 */
.sa-support-channels--grid-3 .ghost-num { display: none; }

.sa-support-channels--grid-3 .sa-support-channels-item {
  min-height: 0 !important;
  padding: 24px;
}

/* the step/badge row is empty here, so it only adds dead space */
.sa-support-channels--grid-3 .sa-support-channels-item .mb-4:empty,
.sa-support-channels--grid-3 .sa-support-channels-item > .relative > .flex.items-center.gap-3 {
  display: none;
}

/* reference .home-cards margin: 22px 0 20px, against the theme's py-section */
.sa-support-channels--grid-3 {
  padding-top: 22px;
  padding-bottom: 20px;
}

/* ── Products page: ported from FLUXMARKET.TO/Products.html ───────────────
 * snippets/products-reference.njk. Figures are the reference's own; the
 * reference's colour names are mapped onto theme tokens so light mode works.
 */
.sa-page-products--reference { padding-top: 0; padding-bottom: 0; }
.fx-pl {
  --bg: rgb(var(--cl-background)); --surface: rgb(var(--cl-surface)); --tile: #1a1a1f;
  --text: rgb(var(--cl-t-primary)); --text2: rgba(var(--cl-t-primary), 0.8); --text3: rgb(var(--cl-t-muted));
  --line: var(--cl-border); --line2: var(--sa-line2);
  --accent: rgb(var(--cl-accent)); --accent-on: rgb(var(--cl-on-accent)); --accent-text: var(--cl-accent-text); --accent-soft: var(--sa-accent-soft);
  --deal: #ff8a73; --amber: #f5b84a; --shadow: 0 10px 28px rgba(0,0,0,0.55); --r: 6px;
  color: var(--text); font-size: 15px; line-height: 1.5;
}
[data-scheme="light"] .fx-pl { --tile: #e9e9ec; --deal: #c2331d; --amber: #935400; --shadow: 0 10px 28px rgba(21,23,26,0.16); }
.fx-pl a { color: inherit; }
.fx-pl button, .fx-pl input, .fx-pl select { font: inherit; color: inherit; }
.fx-pl button { cursor: pointer; background: none; border: 0; }
.fx-pl [hidden] { display: none !important; }
.fx-link { color: var(--accent-text); font-weight: 500; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; display: inline-block; }
.fx-link:hover { text-decoration-thickness: 2px; }
.fx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: var(--r); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; }
.fx-btn-primary { background: var(--accent); color: var(--accent-on) !important; }
.fx-btn-primary:hover { filter: brightness(1.08); }
.fx-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.fx-btn.fx-block { width: 100%; min-height: 50px; }

/* LAYOUT */
.fx-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; align-items: start; padding: 22px 0 48px; }
.fx-filters { position: sticky; top: 90px; max-height: calc(100vh - 112px); overflow-y: auto; overflow-x: hidden; padding: 18px 6px 0 0; }
.fx-f-head { display: none; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fx-f-head h2 { font-size: 19px; font-weight: 600; }
.fx-f-close { color: var(--accent-text); font-weight: 600; padding: 12px 0; }
.fx-f-clear-row { margin-bottom: 4px; }
.fx-f-group { border: 0; border-top: 1px solid var(--line); padding: 14px 0 6px; margin: 10px 0 0; min-width: 0; }
.fx-f-group:first-of-type { border-top: 0; margin-top: 0; }
.fx-f-group legend { font-size: 13px; font-weight: 600; color: var(--text3); letter-spacing: 0.2px; margin-bottom: 4px; float: left; width: 100%; padding: 0; }
.fx-f-group > div, .fx-f-group > form { clear: both; }
.fx-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-size: 14.5px; }
.fx-opt input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.fx-opt .n, .fx-plink .n { margin-left: auto; color: var(--text3); font-size: 13px; }
.fx-plink { display: flex; width: 100%; align-items: center; min-height: 36px; text-align: left; font-size: 14.5px; color: var(--text); text-decoration: none; }
.fx-plink:hover { color: var(--accent-text); }
.fx-plink[aria-pressed="true"] { font-weight: 700; color: var(--accent-text); }
.fx-pr-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 6px 0 4px; }
.fx-pr-range input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); font-size: 14px; -moz-appearance: textfield; }
.fx-pr-range input::-webkit-inner-spin-button, .fx-pr-range input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fx-pr-range input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-pr-range .fx-go { height: 38px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r); font-size: 14px; font-weight: 600; }
.fx-pr-range .fx-go:hover { border-color: var(--accent); color: var(--accent-text); }
.fx-f-foot, .fx-f-overlay { display: none; }

/* LISTING HEADER */
.fx-bar { display: flex; align-items: center; gap: 14px; padding: 22px 0 14px; flex-wrap: wrap; }
.fx-bar-l { margin-right: auto; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.fx-bar > .fx-sort { order: 2; }
.fx-bar > .fx-bar-r { order: 3; }
.fx-bar h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.2; }
.fx-count { color: var(--text3); font-size: 14px; }
.fx-count .kw { color: var(--text); font-weight: 600; }
.fx-bar-r { display: flex; align-items: center; gap: 14px; }
.fx-f-open { display: none; font-weight: 600; padding: 10px 14px; border: 1px solid var(--line2) !important; border-radius: var(--r); }
.fx-f-open .bdg { color: var(--accent-text); margin-left: 2px; }
.fx-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text3); }
.fx-sort span { white-space: nowrap; }
.fx-sort select { padding: 10px 24px 10px 0; border: 0; border-bottom: 1px solid var(--text); border-radius: 0; background-color: transparent; font-weight: 600; appearance: none; color: var(--text); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0a5' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; }
.fx-sort select:focus { outline: none; box-shadow: none; }
.fx-sort select option { background: var(--surface); color: var(--text); }
.fx-view { display: flex; }
.fx-vbtn { width: 42px; height: 42px; border: 1px solid var(--line2) !important; color: var(--text3); display: flex; align-items: center; justify-content: center; }
.fx-vbtn:first-child { border-radius: var(--r) 0 0 var(--r); }
.fx-vbtn:last-child { border-radius: 0 var(--r) var(--r) 0; border-left: 0 !important; }
.fx-vbtn svg { width: 19px; height: 19px; stroke: currentColor; }
.fx-vbtn:hover { color: var(--text); }
.fx-vbtn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent) !important; color: var(--accent-text); }
.fx-vbtn[aria-pressed="true"] + .fx-vbtn { border-left: 1px solid var(--accent) !important; }
.fx-m-search { display: none; position: relative; margin: 10px 0 4px; }
.fx-m-search .s-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--text3); pointer-events: none; }
.fx-m-search input { width: 100%; height: 46px; padding: 0 14px 0 42px; background: var(--surface); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r); font-size: 16px; }
.fx-m-search input::placeholder { color: var(--text3); }
.fx-m-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 0 22px; padding: 14px 0 12px; }
.fx-chips:empty { display: none; }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 9px 0; border-bottom: 1px solid var(--text) !important; text-decoration: none; }
.fx-chip:hover { color: var(--accent-text); border-color: var(--accent) !important; }
.fx-chip b { font-weight: 400; font-size: 17px; line-height: 1; }

/* PRODUCT TILES */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 34px 24px; }
.fx-card { display: block; text-decoration: none; position: relative; }
.fx-card-img { position: relative; aspect-ratio: 1196 / 717; background: var(--tile); border-radius: var(--r); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.fx-card-img::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); pointer-events: none; }
[data-scheme="light"] .fx-card-img::after { box-shadow: inset 0 0 0 1px rgba(21,23,26,0.1); }
.fx-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-card:hover .fx-card-img { transform: translateY(-3px); box-shadow: var(--shadow); }
.fx-card-img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-weight: 600; color: var(--text2); background: var(--tile); }
.fx-tag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.fx-tag.most { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.fx-card-body { padding-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.fx-card-meta { font-size: 13px; color: var(--text3); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.fx-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fx-card-title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-card-title .arrow { color: var(--accent-text); opacity: 0; transform: translateX(-4px); transition: 0.18s; }
.fx-card:hover .fx-card-title .arrow { opacity: 1; transform: none; }
.fx-card:hover .fx-card-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.fx-card-desc { font-size: 14px; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-cardprice { display: flex; align-items: baseline; gap: 6px; flex: none; white-space: nowrap; }
.fx-cardprice .pr { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--accent-text); }
.fx-cardprice .old, .fx-pblock .old { font-size: 13px; color: var(--text3); text-decoration: line-through; }
.fx-cardprice .save { font-size: 12.5px; color: var(--deal); font-weight: 700; }
.fx-grid[data-view="list"] .fx-cardprice { display: none; }
.fx-pblock { display: none; }
.fx-pblock .pr { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--accent-text); }
.fx-pblock .save { font-size: 13px; color: var(--deal); font-weight: 700; }
.fx-pblock .cta { margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--line2); border-radius: var(--r); font-weight: 600; font-size: 14px; }
.fx-card:hover .fx-pblock .cta { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

/* list view: art left, price right */
.fx-grid[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fx-grid[data-view="list"] .fx-card { display: grid; grid-template-columns: 220px minmax(0, 1fr) 170px; grid-template-rows: auto; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.fx-grid[data-view="list"] .fx-card[hidden] { display: none; }
.fx-grid[data-view="list"] .fx-card:first-child { padding-top: 6px; }
.fx-grid[data-view="list"] .fx-card-body { padding-top: 0; }
.fx-grid[data-view="list"] .fx-card-desc { -webkit-line-clamp: 3; }
.fx-grid[data-view="list"] .fx-pblock { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; text-align: right; gap: 2px; }
.fx-grid[data-view="list"] .fx-card-title .arrow { display: none; }

.fx-empty { text-align: center; padding: 64px 16px; border-top: 1px solid var(--line); }
.fx-empty h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.fx-empty p { color: var(--text2); max-width: 460px; margin: 0 auto 22px; }
.fx-empty p a { color: var(--accent-text); font-weight: 600; }
.fx-how { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.fx-help { color: var(--text2); }
.fx-help a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .fx-grid[data-view="list"] .fx-card { grid-template-columns: 190px minmax(0, 1fr) 150px; gap: 6px 20px; }
}
@media (max-width: 1000px) {
  .fx-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .fx-f-open { display: inline-block; }
  .fx-filters { position: fixed; z-index: 2100; left: 0; right: 0; bottom: 0; top: auto; max-height: 88vh; max-height: 88dvh; background: var(--bg); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 20px 22px 22px; transform: translateY(105%); transition: transform 0.25s ease; visibility: hidden; box-shadow: 0 -10px 40px rgba(0,0,0,0.5); }
  .fx-filters.open { transform: translateY(0); visibility: visible; }
  .fx-f-head { display: flex; }
  .fx-opt, .fx-plink { min-height: 46px; }
  .fx-f-foot { display: block; position: sticky; bottom: -22px; padding: 14px 0 4px; margin-top: 8px; background: var(--bg); }
  .fx-f-overlay { display: block; position: fixed; inset: 0; z-index: 2050; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .fx-f-overlay.open { opacity: 1; pointer-events: all; }
}
@media (max-width: 800px) {
  .fx-grid[data-view="list"] .fx-card { grid-template-columns: 132px minmax(0, 1fr) auto; column-gap: 14px; }
  .fx-grid[data-view="list"] .fx-card-img { grid-row: 1 / span 2; align-self: start; }
  .fx-grid[data-view="list"] .fx-card-body { grid-column: 2; }
  .fx-grid[data-view="list"] .fx-pblock { grid-column: 3; grid-row: 1; gap: 1px; white-space: nowrap; }
  .fx-grid[data-view="list"] .fx-pblock .pr { font-size: 17px; }
  .fx-grid[data-view="list"] .fx-pblock .cta { display: none; }
}
@media (max-width: 640px) {
  /* phone toolbar: [All products 28] + [Filters][view] on row 1, sort full width on row 2 */
  .fx-bar { padding-top: 14px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title controls" "sort sort"; align-items: center; column-gap: 12px; row-gap: 12px; }
  .fx-bar h1 { font-size: 20px; }
  .fx-bar-l { grid-area: title; margin-right: 0; gap: 2px 8px; }
  .fx-bar > .fx-sort { grid-area: sort; order: 0; width: 100%; }
  .fx-bar > .fx-bar-r { grid-area: controls; order: 0; gap: 10px; }
  .fx-f-open { padding: 10px 16px; flex: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--line2)) !important; color: var(--accent-text); }
  .fx-vbtn { width: 46px; height: 44px; border-color: color-mix(in srgb, var(--accent) 40%, var(--line2)) !important; }
  .fx-sort select { flex: 1; min-width: 0; padding: 8px 22px 8px 6px; border-bottom-color: var(--accent); }
  .fx-m-search { display: flex; margin-top: 2px; }
  .fx-m-search input { border-color: color-mix(in srgb, var(--accent) 45%, var(--line2)); }
  .fx-count .kw { color: var(--accent-text); }
  .fx-card:active .fx-card-title { color: var(--accent-text); }
  .fx-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .fx-card-title { font-size: 19px; }
  .fx-grid[data-view="list"] .fx-card { grid-template-columns: 104px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 16px 0; }
  .fx-grid[data-view="list"] .fx-card-title { font-size: 16.5px; }
  .fx-grid[data-view="list"] .fx-card-desc { -webkit-line-clamp: 2; font-size: 13.5px; }
  .fx-grid[data-view="list"] .fx-pblock .pr { font-size: 20px; }
  .fx-grid[data-view="list"] .fx-tag { top: 5px; left: 5px; font-size: 10.5px; padding: 2px 6px; }
  .fx-how { margin-top: 32px; }
}

/* ── Product descriptions: normalise SellAuth editor output ───────────────
 * The editor stores inline font sizes (12–13px), fonts (Arial), highlight
 * backgrounds and colours pointing at variables this theme doesn't define
 * (var(--text), var(--muted)). Strip those so every product reads like Real.
 * Deliberate colours (e.g. a red warning) are kept.
 */
.sa-page-product .editor [style] { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; background: none !important; }
.sa-page-product .editor [style*="var(--text)"] { color: inherit !important; }
.sa-page-product .editor [style*="var(--muted)"] { color: rgb(var(--cl-t-muted)) !important; }
.sa-page-product .editor a { color: var(--cl-accent-text); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.sa-page-product .editor p + p { margin-top: 10px; }

/* numbered "how it works" lists: accent numbers, bold step title on its own line */
.sa-included ol { list-style: none; counter-reset: sa-step; padding-left: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.sa-included ol > li { counter-increment: sa-step; position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.45; }
.sa-included ol > li::before { content: counter(sa-step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--cl-accent-text); background: var(--sa-accent-soft); }
.sa-included ol > li > b:first-child, .sa-included ol > li > strong:first-child { display: block; }
.sa-included ol > li > br:first-of-type { display: none; }
/* the editor's own .e-list-* / .e-listitem rules add a 1rem indent, item
   margins and native markers on top of the grids above */
.sa-included .e-list-ul, .sa-included .e-list-ol { margin-left: 0; list-style: none; }
.sa-included .e-list-ul:not(ul ul) > .e-listitem, .sa-included .e-list-ol > .e-listitem { margin: 0; }
.sa-included ol > li::marker { content: ""; }

/* Description sections: a paragraph holding only bold text is a section label */
.sa-included > p:has(> b:only-child), .sa-included > p:has(> strong:only-child) {
  margin: 22px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--cl-t-muted));
}
.sa-included > p:has(> b:only-child) *, .sa-included > p:has(> strong:only-child) * { font-weight: inherit; color: inherit; }
.sa-included > p:has(> b:only-child) + ul, .sa-included > p:has(> strong:only-child) + ul,
.sa-included > p:has(> b:only-child) + ol, .sa-included > p:has(> strong:only-child) + ol { margin-top: 0; }
.sa-included ol > li { color: rgb(var(--cl-t-muted)); }
.sa-included ol > li > b:first-child, .sa-included ol > li > strong:first-child { color: rgb(var(--cl-t-primary)); font-weight: 600; margin-bottom: 2px; }

/* ===== Page headings: the original site's plain left-aligned hero ===== */
.sa-page-faq, .sa-page-terms, .sa-page-feedback, .sa-page-status { padding-top: 40px; }
:is(.sa-page-terms, .sa-page-feedback, .sa-page-status) .sa-section-header { max-width: none; margin-bottom: 28px; }
:is(.sa-page-terms, .sa-page-feedback, .sa-page-status) .sa-section-title { font-size: clamp(30px, 5vw, 42px); font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; }
:is(.sa-page-terms, .sa-page-feedback, .sa-page-status) .sa-section-subtitle { margin-top: 8px; font-size: 16.5px; color: var(--sa-text2); }
.sa-page-terms .sa-page-terms-body { max-width: 760px; color: var(--sa-text2); font-size: 15px; line-height: 1.65; }
.sa-page-terms .sa-page-terms-body :is(h1, h2, h3) { color: rgb(var(--cl-t-primary)); }

/* ===== Support page: ported from FLUXMARKET.TO/Support.html ===== */
.fx-sup { --line: var(--cl-border); --text2: var(--sa-text2); --text3: rgb(var(--cl-t-muted)); padding-bottom: 48px; }
.fx-sup-hero { padding: 0 0 10px; }
.fx-sup-hero h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; color: rgb(var(--cl-t-primary)); }
.fx-sup-hero p { color: var(--text2); font-size: clamp(13px, 3.4vw, 16.5px); margin-top: 8px; }
.fx-sup-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 10px; }
.fx-sup-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: rgb(var(--cl-surface)); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; transition: border-color .15s; }
.fx-sup-card:hover { border-color: rgb(var(--cl-accent)); }
.fx-sup-card h2 { font-size: 17px; font-weight: 600; color: rgb(var(--cl-t-primary)); }
.fx-sup-card p { color: var(--text2); font-size: 14px; line-height: 1.5; flex: 1; }
.fx-sup-cta { color: var(--cl-accent-text); font-weight: 600; font-size: 14.5px; margin-top: 4px; }
.fx-sup-block { margin: 40px 0 10px; padding-top: 28px; border-top: 1px solid var(--line); }
.fx-sup-block h2 { font-size: 20px; font-weight: 600; margin-bottom: 14px; color: rgb(var(--cl-t-primary)); }
#faq.fx-sup-block h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 16px; }
.fx-sup-pay { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.fx-sup-pay li { padding: 8px 14px; background: rgb(var(--cl-surface)); border: 1px solid var(--sa-line2, var(--line)); border-radius: 999px; font-size: 14px; color: var(--text2); font-weight: 500; }
.fx-sup-faqs { display: flex; flex-direction: column; }
.fx-sup-faq { border-bottom: 1px solid var(--line); }
.fx-sup-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; color: rgb(var(--cl-t-primary)); }
.fx-sup-faq summary::-webkit-details-marker { display: none; }
.fx-sup-faq summary:hover { color: var(--cl-accent-text); }
.fx-sup-faq .chev { width: 20px; height: 20px; stroke: var(--text3); flex: none; transition: transform .2s; }
.fx-sup-faq[open] .chev { transform: rotate(180deg); stroke: var(--cl-accent-text); }
.fx-sup-a { padding: 0 0 20px; color: var(--text2); font-size: 15px; line-height: 1.65; max-width: 760px; }
@media (max-width: 800px) { .fx-sup-cards { grid-template-columns: 1fr; } }

/* ===== 404: ported from FLUXMARKET.TO/404.html ===== */
.fx-404 { text-align: center; padding: 110px 20px 120px; }
.fx-404-code { font-size: clamp(96px, 16vw, 150px); font-weight: 700; line-height: 1; letter-spacing: -4px; background: linear-gradient(180deg, #c79bff, #b57bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-404 h1 { margin-top: 18px; font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -0.6px; color: rgb(var(--cl-t-primary)); }
.fx-404 > p { margin-top: 12px; font-size: 16px; color: var(--sa-text2); }
.fx-404-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.fx-404-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 23px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none; }
.fx-404-primary { background: rgb(var(--cl-accent)); color: rgb(var(--cl-on-accent)); }
.fx-404-line { border: 1px solid var(--sa-line2); color: rgb(var(--cl-t-primary)); }
.fx-404-line:hover { border-color: rgb(var(--cl-accent)); }
.fx-404 .fx-404-help { margin-top: 26px; font-size: 16px; color: var(--sa-text2); }
.fx-404-help a { color: var(--cl-accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Reviews summary sits under the left-aligned heading, in the site's plain surface */
.sa-page-feedback .wrap > .max-w-2xl.mx-auto, .sa-page-feedback .wrap > .max-w-xl.mx-auto { margin-left: 0; }
.sa-page-feedback .wrap > .max-w-xl.mx-auto { background: rgb(var(--cl-surface)); border-color: var(--cl-border); }

/* ===== Site-wide: no decorative glows or grid patterns (the original site has none) ===== */
.bloom-tr::before, .bloom-bl::before, .bloom-c::before { display: none; }
.sa-product-locked > .absolute, .pfx-pattern, .sfx-glow { display: none; }
.icon-tile-glow { box-shadow: none; }
.sa-page-blog { padding-top: 40px; }
.sa-page-blog .sa-section-header { max-width: none; margin-bottom: 28px; }
.sa-page-blog .sa-section-title { font-size: clamp(30px, 5vw, 42px); font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; }
.sa-page-blog .sa-section-subtitle { margin-top: 8px; font-size: 16.5px; color: var(--sa-text2); }

/* ===== Home featured rows: FLUXMARKET.TO/index.html .fprod ===== */
.sa-hero-featured { display: flex; flex-direction: column; gap: 12px; }
.fprod { display: flex; align-items: center; gap: 16px; padding: 12px 20px 12px 12px; background: rgb(var(--cl-surface)); border: 1px solid var(--cl-border); border-radius: 6px; text-decoration: none; transition: border-color .15s; }
.fprod:hover { border-color: rgb(var(--cl-accent)); }
.fprod-art { position: relative; width: 180px; height: 104px; border-radius: 4px; overflow: hidden; background: #1a1a1f; flex: none; display: flex; align-items: center; justify-content: center; }
.fprod-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fprod-ph { font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--sa-text2); }
.fprod-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fprod-info b { font-size: 18px; font-weight: 600; color: rgb(var(--cl-t-primary)); }
.fprod-price { font-size: 13.5px; color: rgb(var(--cl-t-muted)); }
.fprod-buy { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 6px; background: rgb(var(--cl-accent)); color: rgb(var(--cl-on-accent)); font-weight: 600; font-size: 14px; white-space: nowrap; }
.fprod:hover .fprod-buy { filter: brightness(1.08); }
@media (max-width: 640px) { .fprod-art { width: 120px; height: 70px; } .fprod { gap: 14px; } }

/* Footer logo, as on the original footer row */
.sa-footer-logo { display: inline-flex; margin-right: 4px; }
.sa-footer-logo img { width: 26px; height: 26px; object-fit: contain; }

/* Home payment logos: FLUXMARKET.TO/index.html .hh-payments */
.hh-payments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 20px; margin-top: 28px; max-width: 460px; }
.hh-payments div { display: flex; align-items: center; justify-content: flex-start; height: 28px; }
.hh-payments img { height: 36px; width: auto; max-width: 100%; object-fit: contain; }
.hh-payments .pay-chip { background: #fff; border-radius: 6px; padding: 2px 8px; height: 28px; box-sizing: border-box; width: fit-content; }
.hh-payments .pay-chip img { height: 100%; }
@media (max-width: 640px) { .hh-payments { gap: 10px 12px; margin-top: 24px; max-width: 100%; } .hh-payments img { height: 28px; } }

/* Cart count next to the icon, like the original "Cart (0)" */
.sa-cart-count { font-size: 14px; font-weight: 500; color: inherit; font-variant-numeric: tabular-nums; }

/* Home link cards are whole-card links (reference a.hcard) */
.sa-support-channels-item--link { display: flex; text-decoration: none; color: inherit; cursor: pointer; }
.sa-support-channels--grid-3 .sa-support-channels-item p { margin-top: 0; }
.sa-support-channels--grid-3 .sa-support-channels-title { margin-bottom: 6px !important; }

/* Reviews page: one-line rating summary instead of the summary box */
.fx-rv-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: -6px 0 22px; }
.fx-rv-avg { font-size: 22px; font-weight: 700; color: rgb(var(--cl-t-primary)); line-height: 1; }
.fx-rv-count { font-size: 14px; color: rgb(var(--cl-t-muted)); }
.fx-rv-count b { color: rgb(var(--cl-t-primary)); font-weight: 600; }
.fx-rv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 24px; }
[data-fx-rv-list] { transition: opacity .15s; }

/* Support chat bubble (snippets/fx-chat.njk), bottom left */
.fx-chat { position: fixed; left: 18px; bottom: 18px; z-index: 40; font-size: 14px; }
.fx-chat-bubble { width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  color: rgb(var(--cl-on-accent, 255 255 255)); background: rgb(var(--cl-accent)); border: 0;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35); transition: transform .15s ease, filter .15s ease; }
.fx-chat-bubble:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fx-chat-bubble:focus-visible { outline: 2px solid rgb(var(--cl-accent)); outline-offset: 3px; }
.fx-chat-ico-close, .fx-chat.is-open .fx-chat-ico-open { display: none; }
.fx-chat.is-open .fx-chat-ico-close { display: block; }
.fx-chat-panel { position: absolute; left: 0; bottom: 66px; width: min(340px, calc(100vw - 36px)); border-radius: 14px; overflow: hidden;
  background: rgb(var(--cl-surface)); border: 1px solid rgb(var(--cl-border)); box-shadow: 0 18px 50px rgb(0 0 0 / .5);
  animation: fx-chat-in .16s ease-out; transform-origin: bottom left; }
@keyframes fx-chat-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.fx-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid rgb(var(--cl-border)); }
.fx-chat-title { font-weight: 700; color: rgb(var(--cl-t-primary)); font-size: 15px; }
.fx-chat-sub { color: rgb(var(--cl-t-muted)); font-size: 12px; margin-top: 2px; }
.fx-chat-x { color: rgb(var(--cl-t-muted)); padding: 4px; border-radius: 6px; }
.fx-chat-x:hover { color: rgb(var(--cl-t-primary)); background: rgb(var(--cl-t-primary) / .06); }
.fx-chat-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.fx-chat-body form { display: flex; flex-direction: column; gap: 8px; }
.fx-chat-label { font-size: 12px; font-weight: 600; color: rgb(var(--cl-t-muted)); }
.fx-chat-input { width: 100%; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; color: rgb(var(--cl-t-primary));
  background: rgb(var(--cl-t-primary) / .04); border: 1px solid rgb(var(--cl-border)); resize: vertical; }
.fx-chat-input:focus { outline: none; border-color: rgb(var(--cl-accent) / .6); }
.fx-chat-input option { background: rgb(var(--cl-surface)); color: rgb(var(--cl-t-primary)); }
.fx-chat-text { color: rgb(var(--cl-t-primary)); line-height: 1.5; }
.fx-chat-note, .fx-chat-foot { font-size: 12px; color: rgb(var(--cl-t-muted)); line-height: 1.45; }
.fx-chat-note a, .fx-chat-foot a { color: rgb(var(--cl-accent-text)); text-decoration: underline; }
.fx-chat-err { font-size: 12.5px; color: rgb(var(--cl-error)); }
.fx-chat-send { display: block; text-align: center; width: 100%; border-radius: 9px; padding: 10px 12px; font-weight: 600; cursor: pointer;
  color: rgb(var(--cl-on-accent, 255 255 255)); background: rgb(var(--cl-accent)); border: 0; margin-top: 2px; }
.fx-chat-send:disabled { opacity: .5; cursor: not-allowed; }
/* keep SellAuth's "recent purchase" popups above the bubble */
.sa-social-proof { bottom: 84px !important; }

/* Home link cards: 4 across (2 on tablets) */
@media (min-width: 640px) { .grid.fx-sc-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid.fx-sc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fx-rv-n { font-weight: 500; opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; }