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

/* ------------------------------------------------------------------ */
/* OFFSET — premium pass                                               */
/* Everything below is additive: it only styles existing sa-* hooks,   */
/* it never changes markup, logic or SellAuth data.                    */
/* ------------------------------------------------------------------ */

/* Thin hairline rhythm between homepage sections — the "depth between
   sections" the near-black background needs instead of one flat slab. */
.components > .component + .component {
  border-top: 1px solid var(--cl-border);
}
/* Sections that already carry their own framing (cards, tinted panels,
   the hero) shouldn't get a second line on top of their own edge. */
.components > .sa-hero + .component,
.components > .component:has(+ .sa-hero) {
  border-top: none;
}

/* ---------------------------------------------------------------- */
/* Navbar — refined floating pill                                    */
/* ---------------------------------------------------------------- */

.sa-navbar-pill {
  background: linear-gradient(180deg, rgba(var(--cl-surface), 0.92), rgba(var(--cl-surface), 0.78));
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(0, 0, 0, 0.4),
    var(--shadow-nav);
}

.sa-navbar-link {
  position: relative;
}

.sa-navbar-link.text-t-primary::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 1px;
  background: rgba(var(--cl-accent), 0.6);
}

/* Give the Discord nav item a quiet pill treatment so it reads as the
   one outbound action in an otherwise internal nav — no extra markup,
   just matching on the real destination URL. */
.sa-navbar-link[href*="discord.gg"] {
  border: 1px solid var(--cl-border);
  background: rgba(var(--cl-t-primary), 0.03);
}

.sa-navbar-link[href*="discord.gg"]:hover {
  border-color: rgba(var(--cl-accent), 0.45);
  background: rgba(var(--cl-accent), 0.08);
}

/* ---------------------------------------------------------------- */
/* Product cards — depth, glow ring, interactive feel                */
/* ---------------------------------------------------------------- */

.sa-product-card--offset {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 45%),
    rgb(var(--cl-surface));
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.sa-product-card--offset:hover {
  border-color: rgba(var(--cl-accent), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.12), var(--shadow-card);
}

.sa-product-card--offset .sa-product-card-media img {
  filter: saturate(1.04);
}

.sa-product-card--offset .sa-product-card-price {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* Buttons — quiet premium press/edge treatment                      */
/* ---------------------------------------------------------------- */

.sa-btn {
  transition: transform var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.sa-btn:active {
  transform: scale(0.97);
}

.sa-btn--primary.sa-btn--solid {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow-btn);
}

/* ------------------------------------------------------------------ */
/* OFFSET — marketplace identity pass                                  */
/* Electric-violet accent + near-black + off-white, applied to the     */
/* surfaces the last brief called out specifically. Additive only.     */
/* ------------------------------------------------------------------ */

/* Navbar: the new inline search pill and its focus state */
.sa-navbar-search:hover,
.sa-navbar-search:focus-visible {
  background: rgba(var(--cl-t-primary), 0.05);
}

/* Search modal: give the real search experience the same premium
   surface treatment as the rest of the site (it already has full
   client-side product search — this only restyles it). */
.sa-search-modal [role="dialog"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%),
    rgb(var(--cl-surface));
}

/* Product gallery: quieter border, consistent with product cards */
.sa-product-gallery {
  transition: border-color var(--dur) ease;
}

/* Product page price: make the number the clear focal point of the
   buy box, matching the "clear pricing hierarchy" requirement. */
.sa-page-product-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Cart drawer + items: same depth language as product cards */
.sa-cart-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 30%),
    rgb(var(--cl-surface));
}

.sa-cart-item {
  transition: border-color var(--dur) ease;
}

.sa-cart-item:hover {
  border-color: rgba(var(--cl-t-primary), 0.16);
}

/* Customer dashboard sidebar: active link gets the accent treatment
   already used elsewhere (it does by default via bg-accent-500/10 —
   this just adds the matching left rail so it reads as a proper
   dashboard nav instead of a plain list). */
.sa-customer-sidebar-link {
  position: relative;
}

.sa-customer-sidebar-link.text-accent-500::before {
  content: '';
  position: absolute;
  left: -0.625rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background: rgb(var(--cl-accent));
}

/* Footer: a quiet top glow instead of a hard flat line into black */
.sa-footer {
  position: relative;
  overflow: hidden;
}

.sa-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 34rem;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.4), transparent);
  pointer-events: none;
}

/* Semantic class hooks (sa-*) reference — see project notes for the
   full list; kept out of this file to keep the rules above easy to
   scan. */

/* ------------------------------------------------------------------ */
/* OFFSET — visual identity pass                                       */
/* Asymmetric hero, bento categories, carousel products: this section  */
/* gives them a shared, signature hover/glow language so the homepage  */
/* reads as one designed system rather than repeated generic cards.    */
/* ------------------------------------------------------------------ */

/* Hero: soft ambient glow behind the spotlighted product, and a
   gently faded heading instead of a flat block of white text. */
.sa-hero-spotlight {
  isolation: isolate;
}

.sa-hero-spotlight::before {
  content: '';
  position: absolute;
  inset: -2.5rem;
  z-index: -1;
  background: radial-gradient(circle, rgba(var(--cl-accent), 0.16), transparent 68%);
  filter: blur(48px);
  pointer-events: none;
}

.sa-hero-title {
  background: linear-gradient(180deg, rgb(var(--cl-t-primary)) 35%, rgba(var(--cl-t-primary), 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}

.sa-section-title {
  letter-spacing: -0.01em;
}

/* Bento category tiles share the same accent-glow hover as product
   cards, so the two most-clicked surfaces on the homepage feel like
   one deliberate interaction pattern instead of two different themes. */
.sa-categories-item--bento {
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.sa-categories-item--bento:hover {
  border-color: rgba(var(--cl-accent), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.12), var(--shadow-card);
}

/* Product carousel: a touch more breathing room than a flat grid, and
   slides that don't get flattened by the shared border-radius token. */
.sa-products--carousel .splide__track {
  padding-block: 0.25rem;
}

/* split-highlights features panel: let it sit slightly recessed
   rather than reading as another bordered card identical to the ones
   above and below it. */
.sa-features--split-highlights > .wrap > div {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 60%),
    rgb(var(--cl-surface));
}