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

/* ===== Resell2Gain: violet marketplace look (inspired by resellme layout) ===== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

body{--ff-heading:'Instrument Serif','Playfair Display',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;--v1:#c4b5fd;--v2:#a78bfa;--v3:#8b5cf6;--v4:#6d28d9}
body{background-image:radial-gradient(900px 520px at 12% -6%,rgba(139,92,246,.28),transparent 62%),radial-gradient(700px 480px at 100% 30%,rgba(109,40,217,.16),transparent 65%)!important;background-attachment:fixed}
h1,h2,h3,.font-heading{letter-spacing:-.025em;font-weight:400}
.sa-section-title{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.02}

/* eyebrows: mono caps with leading rule */
.sa-hero-eyebrow,.sa-section-eyebrow{font-family:var(--mono)!important;font-size:12px!important;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--v1)!important;display:flex;align-items:center;gap:14px}
.sa-section-eyebrow::before{content:"";width:46px;height:1px;background:var(--v3)}
.sa-hero-eyebrow::after{content:"";height:1px;width:120px;background:linear-gradient(90deg,var(--v3),transparent)}

/* section headers: left aligned, ruled */
.sa-section-header{padding-bottom:28px;margin-bottom:36px;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(139,92,246,.7),rgba(139,92,246,0)) 1}
.sa-section-subtitle{color:rgb(var(--cl-t-muted));max-width:46ch}

/* navbar */
.sa-header,.sa-navbar{backdrop-filter:blur(16px);background:rgba(15,11,26,.78)!important;border-bottom:1px solid rgba(167,139,250,.16)}
.sa-navbar-link{font-family:var(--mono);font-size:12px!important;letter-spacing:.2em;text-transform:uppercase;border:1px solid transparent;border-radius:999px!important}
.sa-navbar-link.text-t-primary{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.14)!important;color:#fff!important}
.sa-navbar-cart{border-radius:999px;border:1px solid rgba(167,139,250,.22);background:rgba(139,92,246,.1)}

/* buttons */
.sa-btn{border-radius:999px!important;font-weight:600;letter-spacing:.01em;transition:transform .2s,box-shadow .2s,filter .2s}
.sa-btn--solid,.sa-btn--primary{background:linear-gradient(180deg,#a78bfa,#7c3aed)!important;color:#fff!important;border:0!important;box-shadow:0 10px 38px rgba(124,58,237,.45)}
.sa-btn--solid:hover,.sa-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.sa-btn--outline,.sa-btn--secondary{background:rgba(23,17,38,.8)!important;border:1px solid rgba(167,139,250,.3)!important;color:#f4f0ff!important}
.sa-btn--ghost{color:var(--v1)!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(167,139,250,.4)}

/* hero + tilted tiles */
.sa-hero-title{font-size:clamp(3rem,7.2vw,6.6rem)!important;line-height:.96!important;letter-spacing:-.035em!important;background:linear-gradient(90deg,#ede9fe,#c4b5fd 35%,#a78bfa 65%,#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sa-hero-title *{-webkit-text-fill-color:transparent;color:transparent!important}
.sa-hero-subtitle{max-width:34rem;font-size:1.15rem!important;line-height:1.6}
.a-showcase{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.a-showcase-copy{position:relative;z-index:2}
.a-tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;transform:rotate(-4deg) translateX(30px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%);opacity:.95}
.a-tile{background:rgb(var(--cl-surface));border:1px solid rgba(167,139,250,.2);border-radius:22px;padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.a-tile:nth-child(even){transform:translateY(34px)}
.a-tile-art{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#4c1d95,#120b22 75%)}
.a-tile-art img{width:100%;height:100%;object-fit:cover}
.a-tile-meta{display:flex;justify-content:space-between;gap:8px;padding:12px 4px 2px;font-size:13px;font-weight:500}
.a-tile-meta span:last-child{font-family:var(--mono);color:var(--v1)}
@media(max-width:1023px){.a-tiles{display:none}.a-showcase{grid-template-columns:1fr}}

/* cards */
.sa-product-card{border-radius:24px!important;background:rgb(var(--cl-surface))!important;border:1px solid rgba(167,139,250,.18)!important;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.sa-product-card:hover{transform:translateY(-6px);border-color:rgba(167,139,250,.5)!important;box-shadow:0 26px 60px rgba(76,29,149,.35)}
.sa-product-card-media{border-radius:18px;margin:10px 10px 0}
.sa-product-card-title{font-family:var(--ff-heading);font-size:1.45rem!important;letter-spacing:-.02em;font-weight:400!important}
.sa-product-card-price{font-family:var(--ff-heading);font-size:1.6rem!important;color:#fff!important}
.sa-product-card-price-slash{font-family:var(--mono);font-size:12px}
.sa-product-card-stock,.sa-product-card-status{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* steps: big mono numbers */
.sa-steps-items{counter-reset:stp;gap:0!important}
.sa-steps-item{counter-increment:stp;position:relative;padding:34px 30px 38px!important;border-top:1px solid rgba(139,92,246,.45);border-left:1px solid rgba(167,139,250,.14);background:transparent!important;border-radius:0!important}
.sa-steps-item::before{content:counter(stp,decimal-leading-zero);display:block;font-family:var(--mono);font-size:3.4rem;line-height:1;color:var(--v3);margin-bottom:28px;letter-spacing:.06em}
.sa-steps-item h3,.sa-steps-item [class*="font-"]{font-family:var(--ff-heading)}
.sa-steps-icon{border-radius:999px!important;border:1px solid rgba(167,139,250,.3)!important;background:rgba(139,92,246,.1)!important;color:var(--v1)!important}

/* features + stats */
.sa-features-item,.sa-stats-item{border-radius:22px!important;background:rgb(var(--cl-surface))!important;border:1px solid rgba(167,139,250,.16)!important}
.sa-stats-item{font-family:var(--ff-heading)}

/* faq: numbered rows */
.sa-faq-items{counter-reset:faq;border-top:1px solid rgba(139,92,246,.45)}
.sa-faq-item{counter-increment:faq;position:relative;border:0!important;border-bottom:1px solid rgba(167,139,250,.14)!important;border-radius:0!important;background:transparent!important;padding-left:3.2rem}
.sa-faq-item::before{content:counter(faq,decimal-leading-zero);position:absolute;left:0;top:1.35rem;font-family:var(--mono);font-size:12px;color:var(--v3)}
.sa-faq-item summary,.sa-faq-item button{font-family:var(--ff-heading);font-size:1.5rem;letter-spacing:-.02em}

/* reviews */
.sa-feedback-card{border-radius:24px!important;background:rgb(var(--cl-surface))!important;border:1px solid rgba(167,139,250,.16)!important}
.sa-feedback-card [class*="star"],.sa-feedback-card .fa-star{color:#fbbf24}

/* closing CTA card */
.sa-text-block{position:relative}
.sa-text-block--card,.sa-text-block .card,.sa-text-block>div>div{border-radius:34px}
.sa-text-block--card{background:radial-gradient(700px 360px at 90% 10%,rgba(139,92,246,.28),transparent 60%),rgb(var(--cl-surface))!important;border:1px solid rgba(167,139,250,.28)!important}
.sa-text-block-body{color:rgb(var(--cl-t-muted));max-width:38rem}

/* cart drawer + inputs */
.sa-cart-panel{background:rgba(15,11,26,.97)!important;border-left:1px solid rgba(167,139,250,.2)}
.sa-cart-item{border-radius:20px;background:rgb(var(--cl-surface));border:1px solid rgba(167,139,250,.16)}
input,select,textarea{border-radius:14px!important}
input:focus,select:focus,textarea:focus{border-color:#a78bfa!important;box-shadow:0 0 0 3px rgba(139,92,246,.28)!important}

/* customer area */
.sa-customer-sidebar{border-radius:26px;background:rgb(var(--cl-surface));border:1px solid rgba(167,139,250,.18)}
.sa-customer-sidebar-link{border-radius:14px}
.sa-customer-header-title{font-family:var(--ff-heading);font-size:2.6rem}

/* footer */
.sa-footer{position:relative;overflow:hidden;border-top:1px solid rgba(167,139,250,.16);background:linear-gradient(180deg,transparent,rgba(7,4,15,.7))}
.sa-footer::after{content:"Resell2Gain";position:absolute;left:50%;bottom:-.18em;transform:translateX(-50%);font-family:var(--ff-heading);font-size:clamp(5rem,17vw,15rem);line-height:1;white-space:nowrap;color:rgba(139,92,246,.07);pointer-events:none;z-index:0}
.sa-footer>*{position:relative;z-index:1}
.sa-footer-link{transition:color .2s}
.sa-footer-link:hover{color:var(--v1)}

/* violet dust + back-to-top (custom.js) */
.r2g-dust{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.r2g-dust i{position:absolute;bottom:-20px;width:5px;height:5px;border-radius:50%;background:#a78bfa;opacity:0;animation:r2g-rise linear infinite}
@keyframes r2g-rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.5}100%{transform:translateY(-110vh) translateX(40px);opacity:0}}
.r2g-top{position:fixed;right:22px;bottom:22px;z-index:60;width:52px;height:52px;border-radius:50%;border:1px solid rgba(167,139,250,.35);background:rgba(23,17,38,.92);color:#ede9fe;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.r2g-top.on{opacity:1;pointer-events:auto}.r2g-top:hover{transform:translateY(-3px);border-color:#a78bfa}
@media(prefers-reduced-motion:reduce){.r2g-dust{display:none}}

/* ===== Customer panel (resellme-style, violet) ===== */
.sa-dash-balance{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:34px 38px;margin-bottom:var(--grid-gap);border-radius:30px;border:1px solid rgba(167,139,250,.3);background:radial-gradient(520px 220px at 90% 0%,rgba(139,92,246,.3),transparent 65%),rgb(var(--cl-surface))}
.sa-dash-label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--v1)}
.sa-dash-amount{font-family:var(--ff-heading);font-size:clamp(3rem,6vw,4.6rem);line-height:1;letter-spacing:-.03em;margin-top:10px;color:#fff}
.sa-dash-topup{display:inline-flex;align-items:center;padding:.9rem 1.8rem}
.sa-dash-row{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:var(--grid-gap)}
.sa-dash-row>*{margin-top:0!important}
.sa-dash-row>div:first-child{border-radius:26px!important}
.sa-dash-support{border-radius:26px;border:1px solid rgba(167,139,250,.2);background:rgb(var(--cl-surface));padding:28px}
.sa-dash-support-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(139,92,246,.16);border:1px solid rgba(167,139,250,.3);color:var(--v1)}
.sa-dash-support-title{font-family:var(--ff-heading);font-size:2rem;letter-spacing:-.02em;margin:18px 0 6px}
.sa-dash-support-text{color:rgb(var(--cl-t-muted));line-height:1.6;margin-bottom:18px}
.sa-dash-support-links{display:flex;gap:22px;flex-wrap:wrap}
.sa-dash-support-links a{color:var(--v1);font-weight:600;text-decoration:none}
.sa-dash-support-links a:hover{color:#fff}
.sa-customer-sidebar{padding:12px}
.sa-customer-sidebar-link{padding:.8rem 1rem;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.sa-customer-sidebar-link[aria-current],.sa-customer-sidebar-link.text-t-primary{background:rgba(139,92,246,.16)!important;border:1px solid rgba(167,139,250,.4);color:#fff!important}
.sa-page-customer-dashboard-item,.sa-page-customer-invoices-item,.sa-page-customer-balance-items>*{border-radius:24px!important;background:rgb(var(--cl-surface))!important;border:1px solid rgba(167,139,250,.16)!important}
.sa-page-customer-dashboard-item .text-2xl{font-family:var(--ff-heading);font-size:2.4rem!important;letter-spacing:-.02em;font-weight:400}
.sa-page-customer-invoices-item{transition:border-color .2s,transform .2s}
.sa-page-customer-invoices-item:hover{border-color:rgba(167,139,250,.5)!important;transform:translateY(-2px)}
.sa-page-customer-invoices-badge{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.sa-page-customer-invoices-filter{border-radius:999px!important}
.sa-customer-header-subtitle{color:rgb(var(--cl-t-muted))}
.sa-page-cart-title{font-family:var(--ff-heading);font-size:clamp(2.6rem,5vw,4rem)}
.sa-page-cart-item{border-radius:22px!important;background:rgb(var(--cl-surface))!important;border:1px solid rgba(167,139,250,.16)!important}
.sa-page-cart-price{font-family:var(--ff-heading);font-size:1.5rem}

/* ===== Full-screen menu (custom.js) ===== */
.r2g-actions{display:flex;align-items:center;gap:10px;margin-left:12px}
.r2g-cta{display:inline-flex;align-items:center;padding:.65rem 1.4rem;border-radius:999px;background:linear-gradient(180deg,#a78bfa,#7c3aed);color:#fff!important;font-weight:600;font-size:14px;text-decoration:none!important;box-shadow:0 8px 28px rgba(124,58,237,.4)}
.r2g-burger{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(167,139,250,.28);background:rgba(139,92,246,.1);color:#ede9fe;cursor:pointer}
.r2g-menu{position:fixed;inset:0;z-index:100;background:radial-gradient(900px 500px at 20% 0%,rgba(109,40,217,.28),transparent 60%),#0a0714;display:none;flex-direction:column;overflow:auto}
.r2g-menu.open{display:flex}
.r2g-menu-close{position:absolute;top:22px;right:26px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(167,139,250,.3);background:transparent;color:#fff;cursor:pointer;font-size:22px}
.r2g-menu-body{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:90px 7vw 40px}
.r2g-menu-links a{display:flex;align-items:baseline;gap:28px;font-family:var(--ff-heading);font-size:clamp(2.8rem,6.5vw,5.4rem);line-height:1.04;letter-spacing:-.03em;color:#ede9fe;text-decoration:none;transition:color .2s,transform .2s}
.r2g-menu-links a:hover{color:#a78bfa;transform:translateX(8px)}
.r2g-menu-links a span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:#6d4bd1;width:28px}
.r2g-menu-side h4{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--v1);margin:0 0 18px}
.r2g-menu-side a{display:block;padding:18px 0;border-bottom:1px solid rgba(167,139,250,.16);color:#f4f0ff;text-decoration:none}
.r2g-menu-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 7vw 30px}
.r2g-menu-foot nav{display:flex;gap:26px;flex-wrap:wrap}
.r2g-menu-foot nav a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a9a3bd;text-decoration:none}
.r2g-menu-foot .r2g-disc{padding:.7rem 1.4rem;border-radius:999px;border:1px solid rgba(167,139,250,.3);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-decoration:none}
@media(max-width:900px){.r2g-menu-body{grid-template-columns:1fr;gap:30px;padding-top:100px}.r2g-actions .r2g-cta{display:none}}