/* ================================================================
   RageCore — premium dark skin, South-style layout.
   Every colour comes from the theme's accent/surface variables,
   so your blue palette is untouched and re-skins from settings.
   ================================================================ */
::selection{background:rgba(var(--cl-accent),.35)}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* faint accent "particles" behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(2px 2px at 8% 22%,rgba(var(--cl-accent),.9),transparent 60%),
    radial-gradient(2px 2px at 21% 71%,rgba(var(--cl-accent),.7),transparent 60%),
    radial-gradient(3px 3px at 34% 12%,rgba(var(--cl-accent),.8),transparent 60%),
    radial-gradient(2px 2px at 47% 58%,rgba(var(--cl-accent),.6),transparent 60%),
    radial-gradient(2px 2px at 63% 31%,rgba(var(--cl-accent),.85),transparent 60%),
    radial-gradient(3px 3px at 76% 80%,rgba(var(--cl-accent),.7),transparent 60%),
    radial-gradient(2px 2px at 88% 18%,rgba(var(--cl-accent),.8),transparent 60%),
    radial-gradient(2px 2px at 94% 55%,rgba(var(--cl-accent),.6),transparent 60%);
}

/* ---------- Navbar ---------- */
.sa-navbar{
  background:rgba(var(--cl-background),.7)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--cl-border);
}
.sa-navbar-link{
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;
  position:relative;transition:color var(--dur) ease;
}
.sa-navbar-link::after{
  content:"";position:absolute;left:50%;bottom:-8px;width:0;height:2px;border-radius:2px;
  background:rgb(var(--cl-accent));box-shadow:0 0 10px rgba(var(--cl-accent),.9);
  transform:translateX(-50%);transition:width var(--dur) ease;
}
.sa-navbar-link:hover::after,.sa-navbar-link[aria-current="page"]::after{width:18px}

/* ---------- Hero ---------- */
.sa-hero-title{font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(2.5rem,7vw,4.5rem)}
.sa-hero-subtitle{font-size:1.0625rem;max-width:34rem;margin-inline:auto}
.sa-hero--centered .sa-hero-actions{display:flex;justify-content:center}
.sa-hero-eyebrow{box-shadow:0 0 0 1px rgba(var(--cl-accent),.2),0 0 28px -6px rgba(var(--cl-accent),.55)}

/* ---------- Buttons ---------- */
.sa-btn{font-weight:800;letter-spacing:-.005em}
.sa-btn--primary.sa-btn--solid{
  background:linear-gradient(135deg,rgb(var(--cl-accent)),color-mix(in srgb,rgb(var(--cl-accent)) 68%,#8fb0ff));
  box-shadow:0 10px 32px -10px rgba(var(--cl-accent),.9),inset 0 1px 0 rgba(255,255,255,.2);
  border:0;
}
.sa-btn--primary.sa-btn--solid:hover{transform:translateY(-1px);box-shadow:0 14px 40px -10px rgba(var(--cl-accent),1),inset 0 1px 0 rgba(255,255,255,.25)}
.sa-btn--secondary{background:rgba(var(--cl-surface),.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- Section titles: wide-tracked caps + accent underline ---------- */
.sa-section-title{
  text-transform:uppercase;letter-spacing:.14em;font-weight:800;
  font-size:clamp(1.4rem,3.2vw,2rem);
}
.sa-section-header{position:relative}
.sa-section-title::after{
  content:"";display:block;width:44px;height:3px;border-radius:3px;margin-top:.75rem;
  background:linear-gradient(90deg,rgb(var(--cl-accent)),transparent);
  box-shadow:0 0 14px rgba(var(--cl-accent),.7);
}
.sa-section-header.text-center .sa-section-title::after,
.sa-section-header .text-center::after{margin-inline:auto;background:linear-gradient(90deg,transparent,rgb(var(--cl-accent)),transparent)}
.sa-section-eyebrow{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}
.sa-section-subtitle{max-width:38rem}

/* ---------- Stat cards ---------- */
.sa-stats--cards .sa-stats-item{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--cl-surface-raised),.9),rgba(var(--cl-surface),.7));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color var(--dur) ease,transform var(--dur) ease;
}
.sa-stats--cards .sa-stats-item::after{
  content:"";position:absolute;left:50%;bottom:0;width:38%;height:2px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgb(var(--cl-accent)),transparent);
  box-shadow:0 0 14px rgba(var(--cl-accent),.8);
}
.sa-stats--cards .sa-stats-item:hover{border-color:rgba(var(--cl-accent),.45);transform:translateY(-2px)}
.sa-stats-item .text-h2{font-weight:800;letter-spacing:-.04em;font-size:calc(2.1rem*var(--heading-scale))}
.sa-stats-item p{text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem!important;font-weight:700}

/* ---------- Steps ---------- */
.sa-steps-icon{
  width:3.25rem;height:3.25rem;border-radius:16px;font-size:1.15rem;
  background:linear-gradient(145deg,rgba(var(--cl-accent),.22),rgba(var(--cl-accent),.06));
  border:1px solid rgba(var(--cl-accent),.35);
  box-shadow:0 0 28px -6px rgba(var(--cl-accent),.6),inset 0 1px 0 rgba(255,255,255,.08);
}
.sa-steps-item h3{font-weight:800}

/* ---------- Product / group cards ---------- */
.sa-product-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--cl-surface-raised),.95),rgb(var(--cl-surface)))!important;
  border-color:rgba(var(--cl-accent),.18)!important;
  transition:border-color var(--dur) ease,transform var(--dur) ease,box-shadow var(--dur) ease;
}
.sa-product-card::after{ /* accent hairline on top edge */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--cl-accent)),transparent);opacity:.75;
}
.sa-product-card::before{ /* cursor spotlight (JS sets --mx / --my) */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(var(--cl-accent),.16),transparent 65%);
}
.sa-product-card:hover{border-color:rgba(var(--cl-accent),.55)!important;box-shadow:0 22px 56px -26px rgba(var(--cl-accent),.7)}
.sa-product-card:hover::before{opacity:1}
.sa-product-card-media img{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.sa-product-card:hover .sa-product-card-media img{transform:scale(1.05)}
.sa-product-card-title{text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;font-weight:800}
.sa-product-card-price{font-weight:800;font-family:var(--ff-heading);color:rgb(var(--cl-accent))}
.sa-product-card-stock{font-size:.6875rem!important;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.sa-product-card-badges>*,.sa-product-form-badge{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.6875rem}

/* ---------- Shop page: right-hand panels ---------- */
.sa-page-products aside>div{
  background:linear-gradient(180deg,rgba(var(--cl-surface-raised),.95),rgb(var(--cl-surface)));
  border-color:rgba(var(--cl-accent),.2);border-radius:var(--radius-card);
}
.sa-page-products aside p.uppercase,.sa-page-products aside label.uppercase{
  font-weight:800;letter-spacing:.18em;color:rgb(var(--cl-t-primary));
}
.sa-page-products aside p.uppercase svg{display:none}
.sa-page-products aside p.uppercase::before,.sa-page-products aside label.uppercase::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:rgb(var(--cl-accent));box-shadow:0 0 10px rgba(var(--cl-accent),.9);margin-right:2px;
}
.sa-page-products-link{font-weight:700}
.input,.\!input{background:rgba(var(--cl-background),.6)}

/* ---------- Features / FAQ / trust ---------- */
.sa-features-item,.sa-faq-item,.sa-trust-badges{transition:border-color var(--dur) ease,background-color var(--dur) ease}
.sa-features-item:hover{border-color:rgba(var(--cl-accent),.4)}

/* ---------- Overlays, popups, footer ---------- */
.sa-cart-panel,.sa-search-modal{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sa-social-proof{box-shadow:0 20px 50px -20px rgba(0,0,0,.75);border-color:rgba(var(--cl-accent),.25)}
.sa-footer{border-top:1px solid var(--cl-border);background:linear-gradient(180deg,transparent,rgba(var(--cl-accent),.05))}
.sa-footer-link{transition:color var(--dur) ease}
.sa-footer-link:hover{color:rgb(var(--cl-accent))}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--cl-t-muted),.35) transparent}

@media (max-width:640px){
  .sa-section-title{letter-spacing:.1em}
  body::before{opacity:.35}
}
@media (prefers-reduced-motion:reduce){
  .sa-product-card,.sa-product-card-media img,.sa-btn,.sa-navbar-link::after{transition:none!important}
}

/* ================================================================
   v3 additions
   ================================================================ */

/* Tighter hero -> stats -> steps rhythm */
.sa-hero>.wrap{padding-bottom:2.25rem!important}
.sa-hero+.sa-stats{padding-top:.5rem}
.sa-stats{padding-bottom:2.5rem}
.sa-stats+.sa-steps{padding-top:2rem}
.sa-steps{padding-bottom:2.5rem}
.sa-steps+.sa-categories{padding-top:1rem}

/* Category tabs (shop page tab bar + home categories pills) */
.sa-category-tab,.sa-categories-link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.1rem;border-radius:9999px;
  border:1px solid var(--cl-border);
  background:rgba(var(--cl-surface),.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:rgb(var(--cl-t-muted));
  transition:color var(--dur) ease,border-color var(--dur) ease,background-color var(--dur) ease,box-shadow var(--dur) ease;
}
.sa-category-tab:hover,.sa-categories-link:hover{color:rgb(var(--cl-t-primary));border-color:rgba(var(--cl-accent),.5)}
.sa-category-tab.is-active{
  color:rgb(var(--cl-on-accent));border-color:transparent;
  background:linear-gradient(135deg,rgb(var(--cl-accent)),color-mix(in srgb,rgb(var(--cl-accent)) 68%,#8fb0ff));
  box-shadow:0 8px 26px -10px rgba(var(--cl-accent),.9);
}
.sa-categories-item{border-color:rgba(var(--cl-accent),.18)}

/* Badges: always readable, whatever colour is set in the dashboard */
.sa-product-card-badges>span{
  font-size:.6875rem!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.06em;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* ---------- Same standard on EVERY page ---------- */
/* all cards/panels */
.bg-surface.rounded-card.border:not(.sa-product-card){
  background:linear-gradient(180deg,rgba(var(--cl-surface-raised),.95),rgb(var(--cl-surface)));
  border-color:rgba(var(--cl-accent),.18);
}
.bg-surface.rounded-card.border.hfx-lift:hover,.sa-status-card:hover,.sa-feedback-card:hover{border-color:rgba(var(--cl-accent),.45)}
/* page titles (customer pages, product page, cart, faq, feedback, status, blog) */
.sa-customer-header-title,.sa-tpl-product h1,.sa-tpl-cart h1,.sa-tpl-blog-post h1{
  font-weight:800;letter-spacing:-.02em;
}
.sa-customer-header-title{text-transform:uppercase;letter-spacing:.1em;font-size:1.35rem}
.sa-customer-header-title::after{
  content:"";display:block;width:40px;height:3px;border-radius:3px;margin-top:.6rem;
  background:linear-gradient(90deg,rgb(var(--cl-accent)),transparent);box-shadow:0 0 12px rgba(var(--cl-accent),.7);
}
/* every solid accent button, even raw ones in forms, cart, checkout, modals */
button.bg-accent-500,a.bg-accent-500.rounded-btn,.sa-add-to-cart{
  background:linear-gradient(135deg,rgb(var(--cl-accent)),color-mix(in srgb,rgb(var(--cl-accent)) 68%,#8fb0ff));
  font-weight:800;box-shadow:0 8px 26px -10px rgba(var(--cl-accent),.85),inset 0 1px 0 rgba(255,255,255,.18);
  border:0;
}
button.bg-accent-500:hover,a.bg-accent-500.rounded-btn:hover,.sa-add-to-cart:hover{box-shadow:0 12px 34px -10px rgba(var(--cl-accent),1),inset 0 1px 0 rgba(255,255,255,.22)}
/* product page */
.sa-product-gallery{border-radius:var(--radius-card);overflow:hidden;border:1px solid rgba(var(--cl-accent),.2)}
.sa-product-form label,.sa-product-form legend{font-weight:700}
/* customer area nav */
.sa-customer-sidebar-link{font-weight:700;transition:color var(--dur) ease,background-color var(--dur) ease}
/* breadcrumbs, pagination */
.sa-breadcrumbs{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.sa-pagination a,.sa-pagination span{border-radius:9999px;font-weight:700}
/* tables & code in customer pages */
table thead th{text-transform:uppercase;letter-spacing:.1em;font-size:.6875rem;font-weight:800}
/* toasts */
.sa-toast{border-radius:var(--radius-card);border:1px solid rgba(var(--cl-accent),.25);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ================================================================
   v4: cart / checkout look, minimum-order note, animated steps
   ================================================================ */

/* Minimum order note */
.sa-min-order--banner{width:fit-content;margin:-1.5rem auto 1.75rem}
.sa-min-order{
  padding:.55rem .9rem;border-radius:9999px;
  color:rgb(var(--cl-accent));
  background:rgba(var(--cl-accent),.1);
  border:1px solid rgba(var(--cl-accent),.3);
  box-shadow:0 0 22px -8px rgba(var(--cl-accent),.6);
}

/* Cart drawer + cart page */
.sa-cart-panel{
  background:linear-gradient(180deg,rgba(var(--cl-surface-raised),.97),rgba(var(--cl-surface),.98));
  border-color:rgba(var(--cl-accent),.22);
}
.sa-cart-panel h2,.sa-page-cart h2{
  text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.9375rem;
}
.sa-cart-item,.sa-page-cart-item{
  border:1px solid rgba(var(--cl-accent),.14);border-radius:var(--radius-card);
  background:rgba(var(--cl-background),.45);transition:border-color var(--dur) ease;
}
.sa-cart-item:hover,.sa-page-cart-item:hover{border-color:rgba(var(--cl-accent),.4)}
.sa-page-cart-price{font-family:var(--ff-heading);font-weight:800;color:rgb(var(--cl-accent))}
.sa-page-cart .rounded-card.border{border-color:rgba(var(--cl-accent),.22)}
.sa-page-cart button.bg-accent-500,.sa-cart-panel button.bg-accent-500{
  padding-block:.85rem;text-transform:uppercase;letter-spacing:.1em;font-size:.8125rem;
}
.input-stepper{border-color:rgba(var(--cl-accent),.25);border-radius:9999px}

/* ---------- Steps: premium, looping 01 -> 02 -> 03 ---------- */
.sa-steps--grid .sa-steps-icon{
  position:relative;width:3.75rem;height:3.75rem;border-radius:18px;font-size:1.3rem;
  background:linear-gradient(145deg,rgba(var(--cl-accent),.3),rgba(var(--cl-accent),.05));
  border:1px solid rgba(var(--cl-accent),.4);
  box-shadow:0 0 32px -8px rgba(var(--cl-accent),.7),inset 0 1px 0 rgba(255,255,255,.12);
}
.sa-steps--grid .sa-steps-icon::before{ /* ripple ring when a step completes */
  content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgb(var(--cl-accent));
  opacity:0;pointer-events:none;
}
.sa-steps--grid .sa-steps-icon::after{ /* check badge */
  content:"\f00c";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.65rem;
  color:rgb(var(--cl-on-accent));background:linear-gradient(135deg,rgb(var(--cl-accent)),color-mix(in srgb,rgb(var(--cl-accent)) 65%,#9db8ff));
  box-shadow:0 0 16px rgba(var(--cl-accent),.95),0 0 0 3px rgb(var(--cl-background));
}
.sa-steps--grid .sa-steps-item span.tabular-nums{font-weight:800;letter-spacing:.12em}
/* connector lines: only 01 -> 02 and 02 -> 03, bridging the gap to the next number */
.sa-steps--grid .sa-steps-item .h-px{
  height:2px;border-radius:2px;
  background-image:linear-gradient(90deg,rgb(var(--cl-accent)),rgb(var(--cl-accent)));
  background-repeat:no-repeat;background-size:100% 100%;
}
.sa-steps--grid .sa-steps-item:last-child .h-px{display:none}
@media (max-width:639px){.sa-steps--grid .sa-steps-item .h-px{display:none}}

/* centred layout */
.sa-steps--grid .sa-steps-items{max-width:62rem;margin-inline:auto}
.sa-steps--grid .sa-steps-item{text-align:center}
.sa-steps--grid .sa-steps-item>div:first-child{position:relative;justify-content:center;height:1.5rem}
.sa-steps--grid .sa-steps-item>div:nth-child(2){flex-direction:column;justify-content:center;align-items:center;gap:.95rem}
.sa-steps--grid .sa-steps-item>p{max-width:19rem;margin-inline:auto}
/* line: from just right of this number to just left of the next number */
.sa-steps--grid .sa-steps-item .h-px{
  position:absolute;top:50%;margin:-1px 0 0;flex:none;
  left:calc(50% + 1.6rem);width:calc(100% + var(--grid-gap) - 3.2rem);
}

/* start state (JS running): dimmed, empty */
html.rc-js .sa-steps--grid .sa-steps-item>*{opacity:.4}
html.rc-js .sa-steps--grid .sa-steps-icon::after{transform:scale(0);opacity:0}
html.rc-js .sa-steps--grid .sa-steps-item .h-px{background-size:0% 100%}

/* playing: 01 at .3s, 02 at 2s, 03 at 3.7s */
.sa-steps--grid.is-playing .sa-steps-item:nth-child(1){--d:.3s}
.sa-steps--grid.is-playing .sa-steps-item:nth-child(2){--d:2s}
.sa-steps--grid.is-playing .sa-steps-item:nth-child(3){--d:3.7s}
.sa-steps--grid.is-playing .sa-steps-item>*{animation:st-lit .7s ease var(--d) both}
.sa-steps--grid.is-playing .sa-steps-item span.tabular-nums{animation:st-num .9s ease var(--d) both}
.sa-steps--grid.is-playing .sa-steps-icon{animation:st-pulse .9s ease var(--d) both}
.sa-steps--grid.is-playing .sa-steps-icon::before{animation:st-ripple 1s ease-out calc(var(--d) + .4s) forwards}
.sa-steps--grid.is-playing .sa-steps-icon::after{animation:st-tick .55s cubic-bezier(.3,1.6,.5,1) calc(var(--d) + .45s) both}
.sa-steps--grid.is-playing .sa-steps-item .h-px{animation:st-line 1.1s ease-in-out calc(var(--d) + .6s) both}
.sa-steps--grid.is-playing .sa-steps-item:nth-child(3) .sa-steps-icon{animation:st-final 1.2s ease var(--d) both}
/* resetting just before the loop restarts */
.sa-steps--grid.is-playing.is-resetting .sa-steps-item>*{animation:st-dim .6s ease both}
.sa-steps--grid.is-playing.is-resetting .sa-steps-item span.tabular-nums{animation:none}
.sa-steps--grid.is-playing.is-resetting .sa-steps-icon,
.sa-steps--grid.is-playing.is-resetting .sa-steps-item:nth-child(3) .sa-steps-icon{animation:st-calm .6s ease both}
.sa-steps--grid.is-playing.is-resetting .sa-steps-icon::before{animation:none}
.sa-steps--grid.is-playing.is-resetting .sa-steps-icon::after{animation:st-out .5s ease both}
.sa-steps--grid.is-playing.is-resetting .sa-steps-item .h-px{animation:st-line-out .6s ease both}

@keyframes st-lit{from{opacity:.4}to{opacity:1}}
@keyframes st-dim{from{opacity:1}to{opacity:.4}}
@keyframes st-num{from{text-shadow:0 0 0 transparent}to{text-shadow:0 0 16px rgba(var(--cl-accent),.95)}}
@keyframes st-pulse{0%{transform:scale(1)}40%{transform:scale(1.14);box-shadow:0 0 44px 2px rgba(var(--cl-accent),.95)}100%{transform:scale(1)}}
@keyframes st-final{0%{transform:scale(1)}40%{transform:scale(1.18);box-shadow:0 0 58px 6px rgba(var(--cl-accent),1)}100%{transform:scale(1);box-shadow:0 0 34px -2px rgba(var(--cl-accent),.8)}}
@keyframes st-calm{from{transform:scale(1)}to{transform:scale(1);box-shadow:0 0 32px -8px rgba(var(--cl-accent),.7),inset 0 1px 0 rgba(255,255,255,.12)}}
@keyframes st-ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
@keyframes st-tick{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes st-out{from{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}
@keyframes st-line{from{background-size:0% 100%;box-shadow:0 0 0 rgba(var(--cl-accent),0)}to{background-size:100% 100%;box-shadow:0 0 12px rgba(var(--cl-accent),.65)}}
@keyframes st-line-out{from{background-size:100% 100%;box-shadow:0 0 12px rgba(var(--cl-accent),.65)}to{background-size:0% 100%;box-shadow:0 0 0 rgba(var(--cl-accent),0)}}

/* ================================================================
   Motion for the rest of the site (all skipped for reduced-motion)
   ================================================================ */
/* scroll reveal: fade + rise, staggered by position in the row */
html.rc-js .rc-reveal{opacity:0;translate:0 22px}
html.rc-js .rc-reveal.rc-in{animation:rc-up .75s cubic-bezier(.2,.8,.2,1) calc(var(--rc-i,0)*70ms) both}
@keyframes rc-up{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
/* section title underline draws itself in */
html.rc-js .sa-section-title::after{width:0;transition:width .8s cubic-bezier(.2,.8,.2,1) .25s}
html.rc-js .sa-section-header.rc-in .sa-section-title::after{width:44px}
/* hero entrance (blur-in, staggered) — uses filter/translate only, so it can't clash with the theme's own reveal */
html.rc-js .sa-hero-eyebrow,html.rc-js .sa-hero-title,html.rc-js .sa-hero-subtitle,html.rc-js .sa-hero-actions{
  animation:rc-hero .9s cubic-bezier(.2,.8,.2,1) both;
}
html.rc-js .sa-hero-title{animation-delay:.12s}
html.rc-js .sa-hero-subtitle{animation-delay:.26s}
html.rc-js .sa-hero-actions{animation-delay:.4s}
@keyframes rc-hero{from{filter:blur(10px);translate:0 16px}to{filter:blur(0);translate:0 0}}
/* idle motion */
.sa-hero-eyebrow{animation:rc-glow 3.6s ease-in-out infinite}
@keyframes rc-glow{0%,100%{box-shadow:0 0 0 1px rgba(var(--cl-accent),.2),0 0 22px -8px rgba(var(--cl-accent),.45)}50%{box-shadow:0 0 0 1px rgba(var(--cl-accent),.4),0 0 34px -4px rgba(var(--cl-accent),.8)}}
.sa-hero .sa-btn--primary.sa-btn--solid{animation:rc-btn 3.2s ease-in-out infinite}
@keyframes rc-btn{0%,100%{box-shadow:0 10px 32px -10px rgba(var(--cl-accent),.8),inset 0 1px 0 rgba(255,255,255,.2)}50%{box-shadow:0 14px 46px -8px rgba(var(--cl-accent),1),inset 0 1px 0 rgba(255,255,255,.25)}}
.sa-stats-item,.sa-features-item{--rc-float:0}
.sa-features-item i,.sa-features-item svg{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.sa-features-item:hover i,.sa-features-item:hover svg{transform:translateY(-3px) scale(1.12)}
.sa-footer-link{display:inline-block;transition:color var(--dur) ease,transform var(--dur) ease}
.sa-footer-link:hover{transform:translateX(3px)}
.sa-cart-panel{animation:none}
@media (prefers-reduced-motion:reduce){
  .sa-hero-eyebrow,.sa-hero .sa-btn--primary.sa-btn--solid{animation:none!important}
}

/* ---------- Hero side art: big, blue-rim-lit, standing on the stats row ---------- */
/* size knob: change --hero-art-size to make both images bigger/smaller */
/* knobs: --hero-art-size = image width (taller = bigger characters); --hero-art-gap = space between the faded bottom and the stats;
   --art-l-x / --art-r-x = where each character sits across its image (0-1); --art-spread = distance from page centre to each character's centre (default: centre of the outer stat cards). */
.sa-hero--has-art{
  /* centre of the outer stat cards, measured from page centre, plus a small nudge outward */
  --art-spread:calc((3 * (min(100vw,1200px) - 3rem) + 60px) / 8);--art-nudge:1.25rem;
  /* size: grows with the window but never so big that a character reaches the text column (16.5rem = half the headline + margin) */
  --hero-art-size:min(clamp(30rem,calc(25vw + 25rem),45rem),calc((var(--art-spread) + var(--art-nudge) - 16.5rem) / .25));
  --hero-art-gap:.25rem;--art-l-x:.555;--art-r-x:.495;--glow-room:6rem;min-height:38rem;overflow:visible!important;overflow-x:clip!important}
/* wrapper has generous padding so the blue glow is never clipped by a box edge */
.sa-hero-art{display:none;position:absolute;z-index:0;pointer-events:none;user-select:none;
  box-sizing:content-box;width:var(--hero-art-size);padding:var(--glow-room) var(--glow-room) 0;
  /* bottom edge fades out just above the stats row */
  bottom:var(--hero-art-gap);
  /* soft fade only where the cut-out ends (bottom) */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);
  will-change:translate;animation:rc-art 8s ease-in-out infinite;
}
.sa-hero-art img{display:block;width:100%;height:auto;max-width:none;
  filter:drop-shadow(0 0 1.5px rgba(var(--cl-accent),1)) drop-shadow(0 0 10px rgba(var(--cl-accent),.6)) drop-shadow(0 0 40px rgba(var(--cl-accent),.38));}
.sa-hero-art--left{left:calc(50% - (var(--art-spread) + var(--art-nudge)) - var(--hero-art-size)*var(--art-l-x) - var(--glow-room))}
.sa-hero-art--right{right:auto;left:calc(50% + (var(--art-spread) + var(--art-nudge)) - var(--hero-art-size)*var(--art-r-x) - var(--glow-room));animation-delay:-4s}
@media (min-width:1100px){.sa-hero-art{display:block}}
/* stats sit in front so the art appears to stand behind/on them */
.sa-stats{position:relative;z-index:2}
/* hero copy stays crisp over the art */
.sa-hero .wrap{z-index:1}
.sa-hero-title,.sa-hero-subtitle{text-shadow:0 2px 24px rgba(var(--cl-background),.9)}
@keyframes rc-art{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.sa-hero-art{animation:none}}

/* ================================================================
   v8: finishing pass
   ================================================================ */
/* smooth page entrance + interaction feel */
body{animation:rc-page .6s ease both}
@keyframes rc-page{from{opacity:0}to{opacity:1}}
.sa-btn:active,button.bg-accent-500:active{transform:scale(.97)}
:focus-visible{outline:2px solid rgba(var(--cl-accent),.9);outline-offset:3px;border-radius:6px}
a,button{-webkit-tap-highlight-color:transparent}

/* header gains depth once you scroll */
.sa-header .sa-navbar{transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}
.sa-header.is-scrolled .sa-navbar{
  background:rgba(var(--cl-background),.88)!important;
  box-shadow:0 12px 40px -18px rgba(0,0,0,.8),0 1px 0 rgba(var(--cl-accent),.18);
}

/* soft hairline between page sections */
.components>.component{position:relative}
.components>.component+.component:not(.sa-stats):not(.sa-steps):not(.sa-categories):not(.sa-products):not(.sa-page-products)::before{
  content:"";position:absolute;top:0;left:50%;width:min(1100px,88%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(var(--cl-accent),.3),transparent);pointer-events:none;
}

/* footer finish */
.sa-footer{position:relative}
.sa-footer::before{
  content:"";position:absolute;top:-1px;left:50%;width:min(900px,80%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgb(var(--cl-accent)),transparent);box-shadow:0 0 18px rgba(var(--cl-accent),.8);
}

/* back-to-top */
.rc-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:40;width:2.9rem;height:2.9rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--cl-surface-raised),.9);color:rgb(var(--cl-t-primary));
  border:1px solid rgba(var(--cl-accent),.4);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -10px rgba(var(--cl-accent),.8);
  opacity:0;translate:0 12px;pointer-events:none;
  transition:opacity .3s ease,translate .3s ease,border-color .2s ease,box-shadow .2s ease;cursor:pointer;
}
.rc-top.is-on{opacity:1;translate:0 0;pointer-events:auto}
.rc-top:hover{border-color:rgb(var(--cl-accent));box-shadow:0 14px 36px -10px rgba(var(--cl-accent),1)}
.rc-top svg{width:1.1rem;height:1.1rem}
@media (max-width:640px){.rc-top{right:.9rem;bottom:5.5rem}}
@media (prefers-reduced-motion:reduce){body{animation:none}.rc-top{transition:none}}

/* ================================================================
   v13: eye-catching pass + every-device pass
   ================================================================ */
html{overflow-x:clip}

/* ---- living background: slow aurora + drifting particles ---- */
body::before{animation:rc-drift 60s linear infinite}
@keyframes rc-drift{from{background-position:0 0}to{background-position:0 -240px}}
body::after{
  content:"";position:fixed;inset:-15%;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(38% 32% at 18% 22%,rgba(var(--cl-accent),.22),transparent 70%),
    radial-gradient(34% 30% at 84% 68%,rgba(var(--cl-accent),.16),transparent 70%),
    radial-gradient(26% 24% at 60% 12%,rgba(150,185,255,.1),transparent 70%);
  animation:rc-aurora 26s ease-in-out infinite alternate;
}
@keyframes rc-aurora{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}

/* ---- gradient shimmer on highlighted words ---- */
.hl-accent .mk{
  background:linear-gradient(100deg,rgb(var(--cl-accent)) 0%,color-mix(in srgb,rgb(var(--cl-accent)) 45%,#d6e4ff) 48%,rgb(var(--cl-accent)) 92%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:rc-shimmer 4.5s ease-in-out infinite alternate;
}
@keyframes rc-shimmer{from{background-position:0% 0}to{background-position:100% 0}}

/* ---- stat numbers glow ---- */
.sa-stats-item .text-h2{
  background:linear-gradient(180deg,rgb(var(--cl-t-primary)),color-mix(in srgb,rgb(var(--cl-accent)) 40%,rgb(var(--cl-t-primary))));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* ---- buttons: living gradient ---- */
.sa-btn--primary.sa-btn--solid,button.bg-accent-500,a.bg-accent-500.rounded-btn{
  background-size:220% 100%;
  background-image:linear-gradient(110deg,rgb(var(--cl-accent)) 0%,color-mix(in srgb,rgb(var(--cl-accent)) 55%,#9db8ff) 50%,rgb(var(--cl-accent)) 100%);
  animation:rc-grad 8s ease-in-out infinite;
}
.sa-hero .sa-btn--primary.sa-btn--solid{animation:rc-btn 3.2s ease-in-out infinite,rc-grad 8s ease-in-out infinite}
@keyframes rc-grad{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ---- product cards: light sweep across the banner on hover ---- */
.sa-product-card-media{position:relative;overflow:hidden}
.sa-product-card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  translate:-130% 0;transition:translate .9s cubic-bezier(.2,.8,.2,1);
}
.sa-product-card:hover .sa-product-card-media::after{translate:130% 0}
.sa-product-card-price{display:inline-block;padding:.12rem .6rem;border-radius:9999px;background:rgba(var(--cl-accent),.12);border:1px solid rgba(var(--cl-accent),.3)}

/* ---- scroll progress bar + cursor glow (added by JS) ---- */
.rc-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:70;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,rgb(var(--cl-accent)),#9db8ff);box-shadow:0 0 14px rgba(var(--cl-accent),.9)}
.rc-cursor{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--cl-accent),.13),transparent 70%);opacity:0;transition:opacity .4s ease;will-change:transform}
.rc-cursor.is-on{opacity:1}

/* ================= TABLET + PHONE ================= */
/* hero art becomes a soft faded backdrop instead of disappearing */
@media (max-width:1099px){
  .sa-hero--has-art{--hero-art-size:min(88vw,34rem);--glow-room:3rem;min-height:0}
  .sa-hero-art{display:block;opacity:.34;animation:none}
  .sa-hero-art--left{left:calc(var(--hero-art-size)*-.28 - var(--glow-room))}
  .sa-hero-art--right{left:auto;right:calc(var(--hero-art-size)*-.28 - var(--glow-room))}
  .sa-hero>.wrap{padding-bottom:2.5rem!important}
}
@media (max-width:1099px) and (min-width:640px){.sa-hero-art{opacity:.42}}

@media (max-width:639px){
  .sa-hero-title{font-size:clamp(2.05rem,10.6vw,2.8rem);letter-spacing:-.04em}
  .sa-hero-subtitle{font-size:1rem}
  .sa-hero .sa-buttons{flex-direction:column;align-items:stretch;width:100%}
  .sa-hero .sa-btn{width:100%;justify-content:center;padding-block:.95rem}
  .sa-hero>.wrap{padding-top:1rem}
  /* stats: 2 x 2 */
  .sa-stats--cards .sa-stats-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .sa-stats--cards .sa-stats-item{padding:1rem .6rem}
  .sa-stats-item .text-h2{font-size:1.6rem}
  .sa-stats-item p{letter-spacing:.1em;font-size:.625rem!important}
  /* steps stack with room to breathe */
  .sa-steps--grid .sa-steps-items{gap:2.25rem}
  /* category tabs scroll sideways instead of wrapping into a wall */
  .sa-category-tabs,.sa-categories-items{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;
    margin-inline:-1rem;padding:0 1rem .6rem;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sa-category-tabs::-webkit-scrollbar,.sa-categories-items::-webkit-scrollbar{display:none}
  .sa-category-tab,.sa-categories-link{flex:none;scroll-snap-align:start;white-space:nowrap}
  .sa-section-title{font-size:1.3rem;letter-spacing:.1em}
  .sa-min-order--banner{margin-top:-1rem;font-size:.6875rem}
  /* comfortable tap targets */
  .sa-navbar a,.sa-navbar button,.sa-footer-link{min-height:2.75rem}
  .sa-btn,button.bg-accent-500{min-height:2.9rem}
}
@media (max-width:380px){
  .sa-hero-title{font-size:1.95rem}
  .sa-stats-item .text-h2{font-size:1.4rem}
}

/* phones/tablets in landscape or short windows */
@media (max-height:520px) and (orientation:landscape){.sa-hero>.wrap{padding-block:1.25rem!important}}

/* notches + home-indicator bars */
.rc-top{bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));right:calc(1.25rem + env(safe-area-inset-right,0px))}
@media (max-width:640px){.rc-top{bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}}
.sa-footer{padding-bottom:env(safe-area-inset-bottom,0px)}

/* touch screens: no hover-only motion, lighter background work */
@media (hover:none){
  .sa-product-card:hover{transform:none}
  .sa-product-card-media::after{display:none}
  .rc-cursor{display:none}
  body::after{animation:none}
}
@media (max-width:639px){body::before{animation:none}}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,.hl-accent .mk,.sa-btn--primary.sa-btn--solid,button.bg-accent-500,a.bg-accent-500.rounded-btn{animation:none!important}
  .sa-product-card-media::after{transition:none}
  .rc-cursor{display:none}
}

/* =====================================================================
   v14 — Cart redesign + recent-sales tabs
   ===================================================================== */

/* ---- Cart page ---- */
.sa-page-cart-item{
  position:relative;padding:1.1rem 1.2rem;overflow:hidden;
  background:linear-gradient(135deg,rgba(var(--cl-surface-raised),.9),rgba(var(--cl-surface),.92));
  border-color:rgba(var(--cl-accent),.22);
  box-shadow:0 14px 40px -22px rgba(var(--cl-accent),.55);
}
.sa-page-cart-item::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,rgba(var(--cl-accent),1),rgba(var(--cl-accent),.2));
  box-shadow:0 0 14px rgba(var(--cl-accent),.8);
}
.sa-page-cart-item:hover{transform:translateY(-2px);box-shadow:0 18px 44px -20px rgba(var(--cl-accent),.7)}
.sa-page-cart-item>div>div:first-child{
  border-color:rgba(var(--cl-accent),.35)!important;border-radius:16px!important;
  box-shadow:0 0 0 3px rgba(var(--cl-accent),.08),0 10px 26px -10px rgba(var(--cl-accent),.6);
}
.sa-page-cart-title{font-size:1.0625rem;font-weight:800;font-family:var(--ff-heading);letter-spacing:.01em}
.sa-page-cart-price{font-size:1.4rem;line-height:1.1;text-shadow:0 0 22px rgba(var(--cl-accent),.5)}
.sa-page-cart .input-stepper{background:rgba(var(--cl-background),.6);box-shadow:inset 0 0 0 1px rgba(var(--cl-accent),.08)}
.sa-cart-remove{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:9999px;border:1px solid transparent;transition:all var(--dur) ease}
.sa-cart-remove:hover{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}

/* summary card */
.sa-page-cart .lg\:sticky>.rounded-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--cl-surface-raised),.96),rgba(var(--cl-surface),.98));
  border-color:rgba(var(--cl-accent),.3);
  box-shadow:0 24px 60px -28px rgba(var(--cl-accent),.7),inset 0 1px 0 rgba(255,255,255,.04);
}
.sa-page-cart .lg\:sticky>.rounded-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(var(--cl-accent),1),transparent);
}
.sa-cart-sum-head h2{display:flex;align-items:center;gap:.6rem;margin:0}
.sa-cart-sum-head h2 i{color:rgb(var(--cl-accent));font-size:.9rem}
.sa-cart-count{
  font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:9999px;color:rgb(var(--cl-accent));
  background:rgba(var(--cl-accent),.12);border:1px solid rgba(var(--cl-accent),.3);
}

/* minimum order meter */
.sa-cart-meter{padding:.8rem .9rem;border-radius:14px;background:rgba(var(--cl-accent),.07);border:1px dashed rgba(var(--cl-accent),.4)}
.sa-cart-meter-text{display:flex;gap:.5rem;align-items:flex-start;font-size:.8125rem;color:rgb(var(--cl-t-primary))}
.sa-cart-meter-text i{color:rgb(var(--cl-accent));margin-top:.15rem}
.sa-cart-meter-text strong{color:rgb(var(--cl-accent))}
.sa-cart-meter-bar{margin-top:.6rem;height:6px;border-radius:9999px;background:rgba(var(--cl-accent),.15);overflow:hidden}
.sa-cart-meter-bar span{display:block;height:100%;border-radius:inherit;transition:width .5s ease;
  background:linear-gradient(90deg,rgba(var(--cl-accent),.7),rgba(var(--cl-accent),1));box-shadow:0 0 12px rgba(var(--cl-accent),.9)}

/* security check (altcha) */
.sa-security{padding:.75rem .85rem .85rem;border-radius:16px;background:rgba(var(--cl-background),.5);border:1px solid rgba(var(--cl-accent),.18)}
.sa-security-label{display:flex;align-items:center;gap:.45rem;margin:0 0 .55rem;font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--cl-accent),1)}
altcha-widget{
  --altcha-max-width:100%;
  --altcha-border-radius:12px;
  --altcha-color-base:rgb(var(--cl-surface-raised));
  --altcha-color-border:rgba(var(--cl-accent),.35);
  --altcha-color-border-focus:rgb(var(--cl-accent));
  --altcha-color-text:rgb(255 255 255);
  --altcha-color-active:rgb(var(--cl-accent));
  --altcha-color-footer-bg:rgb(var(--cl-surface));
  display:block;width:100%;
}

/* checkout button + trust row */
.sa-page-cart button.bg-accent-500{gap:.6rem;font-weight:800;box-shadow:0 14px 34px -12px rgba(var(--cl-accent),.9)}
.sa-page-cart button.bg-accent-500 .sa-cart-go{transition:transform .25s ease;font-size:.75rem}
.sa-page-cart button.bg-accent-500:hover .sa-cart-go{transform:translateX(4px)}
.sa-cart-trust{list-style:none;margin:.2rem 0 0;padding:.9rem 0 0;border-top:1px solid rgba(var(--cl-accent),.14);display:grid;gap:.5rem}
.sa-cart-trust li{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:rgba(255,255,255,.65)}
.sa-cart-trust i{width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:.65rem;color:rgb(var(--cl-accent));background:rgba(var(--cl-accent),.12)}

/* ---- Recent sales tabs ---- */
.sa-sales{display:none}
.sa-sales-inline{display:flex;justify-content:center;margin-top:1.75rem}
.sa-sales-slot{display:grid;width:min(100%,19rem);position:relative}
.sa-sale{
  grid-area:1/1;display:flex;align-items:center;gap:.75rem;
  padding:.7rem .95rem .7rem .7rem;border-radius:18px;
  background:linear-gradient(135deg,rgba(var(--cl-surface-raised),.82),rgba(var(--cl-surface),.7));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(var(--cl-accent),.4);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.8),0 0 28px -8px rgba(var(--cl-accent),.55),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;visibility:hidden;translate:0 12px;scale:.97;
  transition:opacity .55s ease,translate .55s cubic-bezier(.2,.8,.2,1),scale .55s ease,visibility 0s linear .55s;
}
.sa-sale.is-on{opacity:1;visibility:visible;translate:0 0;scale:1;transition-delay:0s}
.sa-sale.is-off{translate:0 -12px}
html:not(.rc-js) .sa-sales-slot .sa-sale:first-child{opacity:1;visibility:visible;translate:0 0;scale:1}
.sa-sale-img{width:2.9rem;height:2.9rem;flex:none;border-radius:13px;object-fit:cover;border:1px solid rgba(var(--cl-accent),.5);box-shadow:0 0 16px -2px rgba(var(--cl-accent),.6)}
.sa-sale-img--ph{display:inline-flex;align-items:center;justify-content:center;color:rgb(var(--cl-accent));background:rgba(var(--cl-accent),.12)}
.sa-sale-body{display:flex;flex-direction:column;gap:.1rem;min-width:0;line-height:1.25}
.sa-sale-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.625rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--cl-accent))}
.sa-sale-tag i{animation:rc-dot 1.8s ease-in-out infinite}
.sa-sale-name{font-size:.875rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12.5rem;font-family:var(--ff-heading)}
.sa-sale-meta{display:flex;align-items:center;gap:.5rem;font-size:.6875rem;color:rgba(255,255,255,.6)}
.sa-sale-stars{color:rgb(var(--cl-accent));font-size:.55rem;letter-spacing:.06em;white-space:nowrap}
@keyframes rc-dot{0%,100%{opacity:1;filter:drop-shadow(0 0 0 transparent)}50%{opacity:.55;filter:drop-shadow(0 0 5px rgba(var(--cl-accent),1))}}

/* Side cards only where there is clear space outside the characters (>=1860px);
   below that a single rotating card sits under the hero buttons instead. */
@media (min-width:1860px){
  .sa-sales-inline{display:none}
  .sa-sales{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
  .sa-sales-slot{position:absolute;width:15.5rem;animation:rc-art 7s ease-in-out infinite;
    --edge:calc(var(--art-spread,27.5rem) + var(--art-nudge,1.25rem));
    --xl:calc(50% - var(--edge) - var(--hero-art-size,45rem)*.275 - 1.25rem - 15.5rem);
    --xr:calc(50% + var(--edge) + var(--hero-art-size,45rem)*.2 + 1.25rem)}
  .sa-sale-name{max-width:8.5rem}
  .sa-sale-meta{min-width:0;gap:.6rem}
  .sa-sales-slot--l1{top:8%;left:var(--xl)}
  .sa-sales-slot--l2{top:32%;left:calc(var(--xl) - 1.25rem);animation-delay:-2.3s}
  .sa-sales-slot--l3{top:56%;left:var(--xl);animation-delay:-4.6s}
  .sa-sales-slot--r1{top:8%;left:var(--xr);animation-delay:-1.2s}
  .sa-sales-slot--r2{top:32%;left:calc(var(--xr) + 1.25rem);animation-delay:-3.8s}
  .sa-sales-slot--r3{top:56%;left:var(--xr);animation-delay:-5.4s}
}
@media (max-width:480px){
  .sa-sale{padding:.6rem .8rem .6rem .6rem}
  .sa-sale-name{max-width:9.5rem}
}
@media (max-width:640px){
  .sa-page-cart-item .flex.items-start{flex-wrap:wrap}
  .sa-page-cart-price{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .sa-sale{transition:opacity .2s ease;translate:0 0;scale:1}
  .sa-sales-slot,.sa-sale-tag i{animation:none}
}

/* sale cards are links */
a.sa-sale{text-decoration:none;color:inherit;cursor:pointer}
.sa-sales-slot{pointer-events:none}
.sa-sale.is-on{pointer-events:auto}
a.sa-sale:hover{border-color:rgba(var(--cl-accent),.85);box-shadow:0 18px 44px -18px rgba(0,0,0,.8),0 0 34px -4px rgba(var(--cl-accent),.8),inset 0 1px 0 rgba(255,255,255,.08)}
a.sa-sale:focus-visible{outline:2px solid rgb(var(--cl-accent));outline-offset:3px}
.sa-sale-view{margin-left:auto;font-size:.625rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--cl-accent));display:inline-flex;align-items:center;gap:.3rem;opacity:.8;transition:opacity .2s ease}
.sa-sale-view i{font-size:.5rem;transition:transform .2s ease}
a.sa-sale:hover .sa-sale-view{opacity:1}
a.sa-sale:hover .sa-sale-view i{transform:translateX(3px)}
.sa-sale-meta{justify-content:space-between;min-width:11rem}


/* =====================================================================
   v16 — Product showcase
   ===================================================================== */
.sa-showcase-grid{display:grid;gap:1.5rem;align-items:start}
@media (min-width:1024px){.sa-showcase-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:2rem;align-items:stretch}}
.sa-showcase-left{display:flex;flex-direction:column;gap:1rem;min-width:0}
.sa-showcase-stage{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,rgba(var(--cl-accent),.16),rgba(var(--cl-background),.9));
  border:1px solid rgba(var(--cl-accent),.35);
  box-shadow:0 30px 70px -34px rgba(var(--cl-accent),.8),0 0 0 1px rgba(255,255,255,.03) inset;
}
.sa-showcase-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}
.sa-showcase-media{position:absolute;inset:0;animation:sc-fade .45s ease both}
.sa-showcase-media img{width:100%;height:100%;object-fit:cover;display:block}
.sa-showcase-media lite-youtube{width:100%;height:100%;max-width:none;border-radius:0}
.sa-showcase-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(var(--cl-accent),.6)}
.sa-showcase-pill{
  position:absolute;left:.9rem;top:.9rem;z-index:2;pointer-events:none;display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;border-radius:9999px;font-size:.625rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(var(--cl-background),.65);border:1px solid rgba(var(--cl-accent),.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sa-showcase-pill i{color:rgb(var(--cl-accent));font-size:.55rem}
@keyframes sc-fade{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}

.sa-showcase-thumbs{display:flex;gap:.75rem;overflow-x:auto;padding:.25rem .15rem .6rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.sa-showcase-thumb{
  position:relative;flex:0 0 auto;width:9.5rem;aspect-ratio:16/10;border-radius:14px;overflow:hidden;cursor:pointer;scroll-snap-align:start;
  border:1px solid rgba(var(--cl-accent),.2);background:rgba(var(--cl-surface),.9);padding:0;
  opacity:.62;transition:opacity .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.sa-showcase-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sa-showcase-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78))}
.sa-showcase-thumb:hover{opacity:1;transform:translateY(-2px)}
.sa-showcase-thumb.is-active{opacity:1;border-color:rgb(var(--cl-accent));box-shadow:0 0 0 2px rgba(var(--cl-accent),.25),0 12px 28px -12px rgba(var(--cl-accent),.9)}
.sa-showcase-thumb-name{position:absolute;left:.55rem;right:.55rem;bottom:.4rem;z-index:2;font-size:.6875rem;font-weight:800;color:#fff;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-showcase-thumb-play{position:absolute;top:.4rem;right:.4rem;z-index:2;width:1.5rem;height:1.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:.5rem;color:#fff;background:rgba(var(--cl-accent),.9)}
.sa-showcase-thumb-ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:rgba(var(--cl-accent),.7)}

.sa-showcase-info{min-width:0;display:grid}
.sa-showcase-card{
  grid-area:1/1;position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.6rem 1.6rem 1.5rem;border-radius:var(--radius-card);overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--cl-surface-raised),.95),rgba(var(--cl-surface),.97));
  border:1px solid rgba(var(--cl-accent),.3);box-shadow:0 26px 60px -32px rgba(var(--cl-accent),.7),inset 0 1px 0 rgba(255,255,255,.04)}
.sa-showcase-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,rgb(var(--cl-accent)),transparent)}
.sa-showcase-meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.sa-showcase-tag{padding:.3rem .7rem;border-radius:9999px;font-size:.625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--cl-accent));background:rgba(var(--cl-accent),.12);border:1px solid rgba(var(--cl-accent),.35)}
.sa-showcase-count{margin-left:auto;font-size:.6875rem;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.45)}
.sa-showcase-title{margin:0;font-family:var(--ff-heading);font-weight:800;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15;color:#fff;letter-spacing:-.01em}
.sa-showcase-price{margin:0;font-family:var(--ff-heading);font-weight:800;font-size:1.15rem;color:rgb(var(--cl-accent));text-shadow:0 0 22px rgba(var(--cl-accent),.5)}
.sa-showcase-desc{display:flex;flex-direction:column;gap:.65rem;max-height:15rem;overflow-y:auto;padding-right:.35rem;
  padding-top:.9rem;border-top:1px solid rgba(var(--cl-accent),.16);scrollbar-width:thin;scrollbar-color:rgba(var(--cl-accent),.4) transparent}
.sa-showcase-desc p{margin:0;font-size:.9375rem;line-height:1.65;color:rgba(255,255,255,.72)}
.sa-showcase-li{display:flex;gap:.65rem;align-items:flex-start}
.sa-showcase-li i{flex:none;width:1.25rem;height:1.25rem;margin-top:.2rem;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:.55rem;color:rgb(var(--cl-accent));background:rgba(var(--cl-accent),.14)}
.sa-showcase-btn{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:.9rem 1.4rem;border-radius:9999px;text-decoration:none;
  font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,rgba(var(--cl-accent),.95),rgba(var(--cl-accent),.7));box-shadow:0 14px 32px -12px rgba(var(--cl-accent),.9);transition:transform .25s ease,box-shadow .25s ease}
.sa-showcase-btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(var(--cl-accent),1)}
.sa-showcase-btn i{font-size:.7rem;transition:transform .25s ease}
.sa-showcase-btn:hover i{transform:translateX(4px)}
.sa-sc-in{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.sa-sc-in-from{opacity:0;transform:translateY(12px)}
.sa-sc-in-to{opacity:1;transform:none}
@media (max-width:640px){
  .sa-showcase-thumb{width:7.75rem}
  .sa-showcase-card{padding:1.25rem 1.1rem}
  .sa-showcase-desc{max-height:none}
}
@media (prefers-reduced-motion:reduce){.sa-showcase-media{animation:none}.sa-sc-in{transition:none}}


/* ---- Support gate (ticket modal) ---- */
.sa-support-gate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;padding:.5rem .25rem .25rem}
.sa-support-gate-icon{width:3.75rem;height:3.75rem;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:#fff;
  background:linear-gradient(135deg,#5865F2,#4752c4);box-shadow:0 14px 34px -10px rgba(88,101,242,.8),0 0 0 4px rgba(88,101,242,.15)}
.sa-support-gate-title{margin:.2rem 0 0;font-family:var(--ff-heading);font-weight:800;font-size:1.25rem;color:#fff}
.sa-support-gate-text{margin:0;max-width:26rem;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.7)}
.sa-support-gate-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.9rem 1.2rem;border-radius:9999px;text-decoration:none;
  font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#5865F2,#4752c4);
  box-shadow:0 14px 32px -12px rgba(88,101,242,.9);transition:transform .25s ease,box-shadow .25s ease}
.sa-support-gate-btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(88,101,242,1)}
.sa-support-gate-skip{background:none;border:0;cursor:pointer;padding:.4rem .6rem;font-size:.8125rem;color:rgba(255,255,255,.55);text-decoration:underline;text-underline-offset:3px}
.sa-support-gate-skip:hover{color:#fff}

/* =====================================================================
   v18 — Glassmorphism + liquid morph
   ===================================================================== */
:root{
  --glass-bg:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.06) 100%),rgba(var(--cl-surface-raised),.38);
  --glass-bg-strong:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),rgba(var(--cl-surface-raised),.55);
  --glass-border:1px solid rgba(255,255,255,.13);
  --glass-blur:blur(20px) saturate(170%);
  --glass-shadow:0 18px 50px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(255,255,255,.03);
  --liquid-ease:cubic-bezier(.34,1.56,.64,1);
}

/* ---- liquid blobs behind the glass (injected by custom.js) ---- */
.rc-liquid{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rc-blob{position:absolute;width:44vmax;height:44vmax;filter:blur(70px);opacity:.5;will-change:transform,border-radius;
  background:radial-gradient(circle at 30% 30%,rgba(var(--cl-accent),.95),rgba(var(--cl-accent),.25) 60%,transparent 75%);
  animation:rc-blob-morph 19s ease-in-out infinite,rc-blob-move 31s ease-in-out infinite alternate}
.rc-blob--1{left:-12vmax;top:-10vmax}
.rc-blob--2{right:-14vmax;top:26vh;width:38vmax;height:38vmax;opacity:.38;animation-duration:23s,37s;animation-delay:-6s,-12s;
  background:radial-gradient(circle at 60% 40%,rgba(120,160,255,.9),rgba(var(--cl-accent),.3) 55%,transparent 75%)}
.rc-blob--3{left:22vw;bottom:-22vmax;width:40vmax;height:40vmax;opacity:.32;animation-duration:27s,41s;animation-delay:-11s,-20s}
@keyframes rc-blob-morph{
  0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
  25%{border-radius:61% 39% 44% 56% / 55% 62% 38% 45%}
  50%{border-radius:37% 63% 55% 45% / 63% 38% 62% 37%}
  75%{border-radius:55% 45% 38% 62% / 38% 57% 43% 62%}}
@keyframes rc-blob-move{from{transform:translate3d(0,0,0) rotate(0) scale(1)}to{transform:translate3d(9vw,7vh,0) rotate(40deg) scale(1.12)}}
body::after{opacity:.35}

/* ---- glass surfaces ---- */
.bg-surface.rounded-card.border:not(.sa-product-card),
.sa-product-card,
.sa-stats--cards .sa-stats-item,
.sa-features-item,.sa-faq-item,.sa-trust-badges,.sa-status-card,.sa-feedback-card,
.sa-page-cart-item,
.sa-page-cart .lg\:sticky>.rounded-card,
.sa-showcase-card,.sa-showcase-stage,
.sa-sale,
.sa-security,.sa-cart-meter,
.sa-category-tabs a,.sa-cat-pill{
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border)!important;
  box-shadow:var(--glass-shadow)!important;
}
.sa-cart-panel,.sa-search-modal,.sa-ticket-create-modal .bg-surface-raised,[role=dialog] .bg-surface-raised,.sa-modal,.sa-group-modal-panel{
  background:var(--glass-bg-strong)!important;
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:var(--glass-border)!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.sa-header .sa-navbar,.sa-header.is-scrolled .sa-navbar{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(var(--cl-background),.45)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:var(--glass-border)!important;box-shadow:0 14px 40px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.2)!important;
}
.input-stepper,input.rounded-input,select.rounded-input,textarea.rounded-input,.sa-searchbar input{
  background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
input.rounded-input:focus,textarea.rounded-input:focus,select.rounded-input:focus{border-color:rgba(var(--cl-accent),.8)!important;box-shadow:0 0 0 3px rgba(var(--cl-accent),.2)!important}
.sa-showcase-thumb{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
/* keep card text crisp above the frosted layer */
.sa-product-card .sa-product-card-media{border-radius:inherit}

/* ---- liquid morph on interaction ---- */
.sa-product-card,.sa-stats--cards .sa-stats-item,.sa-features-item,.sa-faq-item,.sa-status-card,.sa-feedback-card,.sa-page-cart-item,.sa-showcase-card,.sa-sale,.bg-surface.rounded-card.border{
  transition:border-radius .7s var(--liquid-ease),transform .5s var(--liquid-ease),border-color .3s ease,box-shadow .4s ease!important}
.sa-product-card:hover,.sa-stats--cards .sa-stats-item:hover,.sa-features-item:hover,.sa-status-card:hover,.sa-feedback-card:hover,.sa-page-cart-item:hover{
  border-radius:30px 18px 28px 20px / 22px 30px 18px 28px!important;transform:translateY(-4px) scale(1.012)}
a.sa-sale:hover{border-radius:26px 16px 24px 18px!important;transform:translateY(-3px) scale(1.03)}
.sa-showcase-thumb{transition:border-radius .6s var(--liquid-ease),transform .5s var(--liquid-ease),opacity .25s ease,border-color .25s ease,box-shadow .25s ease}
.sa-showcase-thumb:hover,.sa-showcase-thumb.is-active{border-radius:22px 12px 20px 14px}

/* buttons: ripple on press */
.sa-btn,button.bg-accent-500,a.bg-accent-500.rounded-btn,.sa-showcase-btn,.sa-support-gate-btn{position:relative;overflow:hidden}

.rc-ripple{position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;
  background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,.15) 60%,transparent 70%);
  animation:rc-ripple .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rc-ripple{to{transform:scale(28);opacity:0}}

/* icon tiles breathe as living blobs */
.sa-support-gate-icon{animation:rc-blob-tile 9s ease-in-out infinite}
@keyframes rc-blob-tile{
  0%,100%{border-radius:22px 22px 22px 22px}
  33%{border-radius:30px 18px 26px 20px / 20px 28px 18px 30px}
  66%{border-radius:18px 28px 20px 30px / 28px 18px 30px 20px}}
.rc-cursor{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:rc-blob-morph 9s ease-in-out infinite}

/* sections melt in: blur + scale -> focus (liquid reveal) */
html.rc-js .rc-reveal{opacity:0;translate:0 26px;scale:.97;filter:blur(10px)}
html.rc-js .rc-reveal.rc-in{animation:rc-melt .9s cubic-bezier(.2,.8,.2,1) calc(var(--rc-i,0)*70ms) both}
@keyframes rc-melt{
  0%{opacity:0;translate:0 26px;scale:.97;filter:blur(10px)}
  60%{opacity:1;filter:blur(1px)}
  100%{opacity:1;translate:0 0;scale:1;filter:blur(0)}}

/* tab swap = goo morph (sales cards + showcase panel) */
.sa-sale{transition:opacity .6s ease,translate .7s var(--liquid-ease),scale .7s var(--liquid-ease),filter .6s ease,visibility 0s linear .6s}
.sa-sale:not(.is-on){filter:blur(6px)}
.sa-sc-in-from{opacity:0;transform:translateY(14px) scale(.97);filter:blur(8px)}
.sa-sc-in-to{opacity:1;transform:none;filter:blur(0)}

/* ---- fallbacks & lighter phones ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-bg:linear-gradient(135deg,rgba(var(--cl-surface-raised),.96),rgba(var(--cl-surface),.98));--glass-bg-strong:var(--glass-bg)}
}
@media (max-width:640px){
  :root{--glass-blur:blur(12px) saturate(150%)}
  .rc-blob{filter:blur(50px);width:60vmax;height:60vmax}
  .rc-blob--3{display:none}
}
@media (hover:none){
  .sa-product-card:hover,.sa-stats--cards .sa-stats-item:hover,.sa-features-item:hover,.sa-status-card:hover,.sa-feedback-card:hover,.sa-page-cart-item:hover,a.sa-sale:hover{border-radius:inherit!important;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .rc-blob,.rc-cursor,.sa-support-gate-icon{animation:none}
  .sa-btn:hover,button.bg-accent-500:hover{animation:none}
  html.rc-js .rc-reveal,html.rc-js .rc-reveal.rc-in{filter:none;scale:1;animation:none;opacity:1;translate:0 0}
  .rc-ripple{display:none}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass-bg:linear-gradient(135deg,rgba(var(--cl-surface-raised),.98),rgba(var(--cl-surface),.98));--glass-bg-strong:var(--glass-bg)}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}


/* =====================================================================
   v19 — Liquid-glass buttons (Apple style), no button animation loops
   ===================================================================== */
.sa-btn,button.bg-accent-500,a.bg-accent-500.rounded-btn,.sa-add-to-cart,.sa-showcase-btn,
.sa-hero .sa-btn--primary.sa-btn--solid,.sa-btn:hover,button.bg-accent-500:hover,a.bg-accent-500.rounded-btn:hover{animation:none!important}

/* tinted liquid glass (primary) */
.sa-btn--primary.sa-btn--solid,button.bg-accent-500,a.bg-accent-500.rounded-btn,.sa-add-to-cart,.sa-showcase-btn{
  position:relative;isolation:isolate;
  color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35);
  background-color:transparent!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 52%),
    radial-gradient(120% 140% at 50% 120%,rgba(255,255,255,.3),transparent 55%),
    linear-gradient(135deg,rgba(var(--cl-accent),.82),rgba(var(--cl-accent),.46))!important;
  background-size:auto!important;background-position:0 0!important;
  -webkit-backdrop-filter:blur(18px) saturate(200%) brightness(1.12);backdrop-filter:blur(18px) saturate(200%) brightness(1.12);
  border:1px solid rgba(255,255,255,.4)!important;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.75),
    inset 0 -12px 20px -10px rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 12px 30px -12px rgba(var(--cl-accent),.85),
    0 2px 8px rgba(0,0,0,.35)!important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,filter .3s ease,background-color .3s ease!important;
}
.sa-btn--primary.sa-btn--solid:hover,button.bg-accent-500:hover,a.bg-accent-500.rounded-btn:hover,.sa-add-to-cart:hover,.sa-showcase-btn:hover{
  transform:translateY(-2px) scale(1.035);filter:brightness(1.12) saturate(1.1);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.9),
    inset 0 -12px 22px -10px rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 18px 40px -12px rgba(var(--cl-accent),1),
    0 2px 10px rgba(0,0,0,.3)!important;
}
.sa-btn:active,button.bg-accent-500:active,a.bg-accent-500.rounded-btn:active,.sa-showcase-btn:active{transform:scale(.97)!important;filter:brightness(.97)}
button.bg-accent-500:disabled{filter:grayscale(.4) brightness(.8);transform:none}

/* clear liquid glass (secondary / outline) */
.sa-btn--secondary,.sa-btn--outline{
  color:#fff!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 55%),
    linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05))!important;
  background-color:rgba(255,255,255,.04)!important;
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55),inset 0 -10px 18px -10px rgba(255,255,255,.14),0 10px 26px -14px rgba(0,0,0,.7)!important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background-color .3s ease!important;
}
.sa-btn--secondary:hover,.sa-btn--outline:hover{transform:translateY(-2px) scale(1.035);background-color:rgba(255,255,255,.1)!important;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.75),inset 0 -10px 18px -10px rgba(255,255,255,.22),0 14px 32px -14px rgba(var(--cl-accent),.6)!important}

/* keep the hero buttons rock solid + proper size */
.sa-hero .sa-btn{will-change:auto}
.sa-btn{font-weight:700;letter-spacing:.005em}

/* ---- particle materialise ---- */
.rc-particles{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none}
html.rc-js .rc-reveal{filter:blur(6px) brightness(1.5)}
@keyframes rc-melt{
  0%{opacity:0;translate:0 22px;scale:.975;filter:blur(6px) brightness(1.6)}
  55%{opacity:1;filter:blur(1px) brightness(1.2)}
  100%{opacity:1;translate:0 0;scale:1;filter:blur(0) brightness(1)}}
@media (prefers-reduced-motion:reduce){.rc-particles{display:none}}


/* =====================================================================
   v20 — materialise everywhere + premium announcement bar
   ===================================================================== */
/* no residual filter after reveal (it would break backdrop-filter on glass children) */
html.rc-js .rc-reveal.rc-in{opacity:1;translate:0 0;scale:1;filter:none;animation:rc-melt .9s cubic-bezier(.2,.8,.2,1) calc(var(--rc-i,0)*70ms) backwards}
.rc-mat{animation:rc-melt .85s cubic-bezier(.2,.8,.2,1) backwards}

/* ---- announcement bar ---- */
.sa-announcement{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),
    linear-gradient(90deg,rgba(var(--cl-accent),.95) 0%,rgba(var(--cl-accent),.62) 35%,rgba(120,165,255,.7) 50%,rgba(var(--cl-accent),.62) 65%,rgba(var(--cl-accent),.95) 100%)!important;
  background-size:100% 100%,220% 100%!important;animation:ann-flow 14s ease-in-out infinite alternate;
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  color:#fff!important;border-bottom:1px solid rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 34px -12px rgba(var(--cl-accent),.9);
  font-size:.75rem!important;font-weight:800!important;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@keyframes ann-flow{from{background-position:0 0,0% 0}to{background-position:0 0,100% 0}}
/* travelling sheen */
.sa-announcement::before{
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);
  animation:ann-sheen 6.5s ease-in-out infinite;
}
@keyframes ann-sheen{0%,55%{left:-30%}100%{left:130%}}
/* soft edge fade for the marquee */
.sa-announcement>.relative{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  padding-block:.6rem!important;
}
.sa-announcement-item{position:relative;display:inline-flex;align-items:center;gap:.75rem;text-decoration:none}
.sa-announcement-item::before{
  content:"";flex:none;width:.45rem;height:.45rem;border-radius:2px;transform:rotate(45deg);background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.2),0 0 12px 2px rgba(255,255,255,.9);animation:ann-pulse 2.2s ease-in-out infinite;
}
a.sa-announcement-item:hover{text-decoration:none!important;text-shadow:0 0 14px rgba(255,255,255,.9)}
@keyframes ann-pulse{0%,100%{opacity:1;scale:1}50%{opacity:.55;scale:.7}}
.sa-announcement.sa-announcement--surface,.sa-announcement:not(.bg-accent-500){}
@media (max-width:640px){.sa-announcement{font-size:.6875rem!important;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.sa-announcement,.sa-announcement::before,.sa-announcement-item::before{animation:none}}

/* =====================================================================
   v21 — Claude-style glass: calm, warm, soft frosted surfaces (replaces liquid-glass)
   ===================================================================== */
:root{
  --glass-bg:linear-gradient(160deg,rgba(255,246,238,.075) 0%,rgba(255,246,238,.025) 60%),rgba(var(--cl-surface-raised),.5);
  --glass-bg-strong:linear-gradient(160deg,rgba(255,246,238,.1),rgba(255,246,238,.03)),rgba(var(--cl-surface-raised),.72);
  --glass-border:1px solid rgba(255,244,235,.1);
  --glass-blur:blur(16px) saturate(130%);
  --glass-shadow:0 10px 34px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,244,235,.09);
}
/* buttons: soft frosted, no glare */
.sa-btn--primary.sa-btn--solid,button.bg-accent-500,a.bg-accent-500.rounded-btn,.sa-add-to-cart,.sa-showcase-btn{
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%),linear-gradient(135deg,rgba(var(--cl-accent),.9),rgba(var(--cl-accent),.68))!important;
  -webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(255,244,235,.2)!important;text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 22px -10px rgba(var(--cl-accent),.75),0 1px 3px rgba(0,0,0,.25)!important;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease!important;
}
.sa-btn--primary.sa-btn--solid:hover,button.bg-accent-500:hover,a.bg-accent-500.rounded-btn:hover,.sa-add-to-cart:hover,.sa-showcase-btn:hover{
  transform:translateY(-1px) scale(1.01);filter:brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 28px -10px rgba(var(--cl-accent),.9),0 1px 3px rgba(0,0,0,.25)!important;
}
.sa-btn--secondary,.sa-btn--outline{
  background-image:linear-gradient(160deg,rgba(255,246,238,.1),rgba(255,246,238,.03))!important;background-color:rgba(255,246,238,.03)!important;
  -webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(255,244,235,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,244,235,.1),0 6px 18px -12px rgba(0,0,0,.6)!important;
  transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease!important;
}
.sa-btn--secondary:hover,.sa-btn--outline:hover{transform:translateY(-1px);background-color:rgba(255,246,238,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,244,235,.14),0 8px 22px -12px rgba(0,0,0,.7)!important}
.rc-ripple{background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,.08) 60%,transparent 70%)}
/* calmer card motion than the liquid morph */
.sa-product-card:hover,.sa-stats--cards .sa-stats-item:hover,.sa-features-item:hover,.sa-status-card:hover,.sa-feedback-card:hover,.sa-page-cart-item:hover{
  border-radius:inherit!important;transform:translateY(-3px)}

/* =====================================================================
   v22 — clear glass, min-order note, Discord nav icon
   ===================================================================== */
:root{
  --glass-bg:linear-gradient(150deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.015) 55%,rgba(255,255,255,.04) 100%),rgba(var(--cl-background),.16);
  --glass-bg-strong:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),rgba(var(--cl-background),.34);
  --glass-border:1px solid rgba(255,255,255,.16);
  --glass-blur:blur(10px) saturate(115%);
  --glass-shadow:0 8px 30px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.025);
}
.sa-cart-panel,.sa-search-modal,[role=dialog] .bg-surface-raised{-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)}
.sa-header .sa-navbar,.sa-header.is-scrolled .sa-navbar{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),rgba(var(--cl-background),.28)!important;
  -webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
.sa-btn--primary.sa-btn--solid,button.bg-accent-500,a.bg-accent-500.rounded-btn,.sa-add-to-cart,.sa-showcase-btn{
  background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 60%),linear-gradient(135deg,rgba(var(--cl-accent),.72),rgba(var(--cl-accent),.48))!important;
  -webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);
  border:1px solid rgba(255,255,255,.28)!important}
.sa-btn--secondary,.sa-btn--outline{
  background-image:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015))!important;background-color:transparent!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)!important}
.sa-btn--secondary:hover,.sa-btn--outline:hover{background-color:rgba(255,255,255,.05)!important}

/* minimum-order note */
.sa-min-order--banner,.sa-cart-panel .sa-min-order{display:flex;align-items:flex-start;gap:.7rem;text-align:left;text-transform:none;letter-spacing:0;border-radius:16px;max-width:30rem}
.sa-min-order--banner{margin:-1.25rem auto 1.75rem;width:auto}
.sa-min-order i{margin-top:.2rem}
.sa-min-order-text{display:flex;flex-direction:column;gap:.15rem;line-height:1.35}
.sa-min-order-text strong{font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sa-min-order-text small{font-size:.72rem;font-weight:500;color:rgba(255,255,255,.7)}
.sa-cart-panel .sa-min-order{margin-block:.25rem}

/* Discord icon in the top bar */
.sa-navbar-discord{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:9999px;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,rgba(88,101,242,.75),rgba(88,101,242,.45));border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -10px rgba(88,101,242,.9);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.sa-navbar-discord i{font-size:1.15rem;line-height:1}
.sa-navbar-discord:hover{transform:translateY(-1px);filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -10px rgba(88,101,242,1)}
.sa-navbar-discord-label{display:none;font-size:.8125rem;font-weight:700}
@media (max-width:1023px){.sa-navbar-discord-label{display:inline}}

/* =====================================================================
   v23 — phone fixes (cart, tap targets, footer)
   ===================================================================== */
/* stepper never gets squeezed/clipped */
.sa-page-cart-item .input-stepper,.sa-cart-item .input-stepper{flex:none;display:inline-flex;align-items:center}
.sa-page-cart-item .input-stepper>*{flex:none}
.sa-page-cart-item{overflow:visible}
.sa-page-cart-item>.flex.items-start{min-width:0}
.sa-page-cart-item .min-w-0.flex-1{min-width:0}
.sa-page-cart-item .flex.items-center.gap-4.mt-3{flex-wrap:wrap;gap:.6rem .9rem}
@media (pointer:coarse){
  .input-stepper button{width:2.6rem!important;min-height:2.6rem}
  .sa-cart-remove{padding:.6rem .85rem}
  .sa-navbar-link,.sa-category-tabs a,.sa-cat-pill{min-height:2.75rem;display:inline-flex;align-items:center}
  .sa-footer a,footer a{padding-block:.3rem;display:inline-block}
}
@media (max-width:480px){
  .sa-page-cart-item{padding:.95rem}
  .sa-page-cart-item>.flex.items-start{flex-wrap:wrap;gap:.8rem}
  .sa-page-cart-item .size-16,.sa-page-cart-item .sm\:size-20{width:4.25rem;height:4.25rem}
  .sa-page-cart-item .min-w-0.flex-1{flex:1 1 calc(100% - 5.5rem)}
  .sa-page-cart-item .text-end{order:3;flex:1 0 100%;display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;text-align:left!important;
    border-top:1px dashed rgba(var(--cl-accent),.25);padding-top:.7rem}
  .sa-page-cart-item .text-end p{margin:0!important}
  .sa-page-cart-price{font-size:1.25rem}
  .sa-page-cart-title{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .sa-security{padding:.7rem}
  .sa-min-order--banner{margin-inline:0;max-width:none}
}
@media (max-width:767px){
  footer .grid.gap-10{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
  footer .grid.gap-10>div:first-child{grid-column:1/-1}
  .sa-category-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-1rem;padding-inline:1rem}
  .sa-category-tabs::-webkit-scrollbar{display:none}
  .sa-category-tabs>*{flex:none}
}
footer a,footer p,footer h2,footer h3,footer li,footer span{overflow-wrap:anywhere;min-width:0}
.sa-hero{max-width:100vw}
.rc-top{max-width:calc(100vw - 1rem)}

/* ---- navbar must never be wider than the phone (long shop name + logo + 4 icons) ---- */
.sa-navbar .sa-navbar-logo{flex-shrink:1!important;min-width:0;max-width:100%}
.sa-navbar .sa-navbar-logo img{flex:none;max-width:3.5rem;object-fit:contain}
.sa-navbar .sa-navbar-logo span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-navbar .wrap,.sa-navbar .wrap>*{min-width:0}
.sa-navbar .wrap>.flex,.sa-navbar .flex.items-center.gap-1\.5{flex-shrink:0}
@media (max-width:480px){
  .sa-navbar .flex.items-center.gap-1\.5{gap:.1rem}
  .sa-navbar .flex.items-center.gap-1\.5 button{padding:.45rem}
}
@media (max-width:639px){
  .sa-hero-art{opacity:.2!important}
  .sa-hero .wrap{position:relative;z-index:2}
}

/* ---- hard stop for the "page wider than the phone" strip ---- */
html{overflow-x:hidden;max-width:100%}
body{max-width:100%;overflow-x:clip}
body::before,body::after{inset:0!important;max-width:100vw;clip-path:inset(0)}
body::after{inset:0!important;background-size:130% 130%;background-position:center}
.page-fx,.rc-liquid,.rc-particles{max-width:100vw;clip-path:inset(0)}
.sa-cart-panel,.sa-search-modal{max-width:100vw}
/* background dots removed: particles now only come from things materialising */
body::before{display:none!important}

/* ===== v25: solid announcement bar + readable group modal + scroll lock ===== */
.sa-announcement{
  background-color:rgb(var(--cl-accent))!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 55%),
    linear-gradient(90deg,rgb(var(--cl-accent)) 0%,rgb(70,115,235) 35%,rgb(110,155,250) 50%,rgb(70,115,235) 65%,rgb(var(--cl-accent)) 100%)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* group modal: blurred dimmed page behind, solid panel, solid cards */
.sa-group-modal{z-index:70!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sa-group-modal>div>.fixed.inset-0,.sa-group-modal .fixed.inset-0.transition-opacity{
  background:rgba(var(--cl-background),.62)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.sa-group-modal .sa-group-modal-panel,.sa-group-modal .rounded-card.bg-surface:not(.sa-product-card){
  background:linear-gradient(180deg,rgb(var(--cl-surface-raised)),rgb(var(--cl-surface)))!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 30px 80px -10px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4)!important;
}
.sa-group-modal .sa-product-card{
  background:linear-gradient(180deg,rgb(var(--cl-surface-raised)),rgb(var(--cl-surface)))!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,.1)!important;
}
/* lock background scroll while a group modal is open */
html:has(.sa-group-modal:not([style*="display: none"])),
html:has(.sa-group-modal:not([style*="display: none"])) body{overflow:hidden!important;height:100%}

/* ===== v26: compact floating cart drawer ===== */
.sa-cart-panel{
  top:.75rem!important;bottom:auto!important;inset-inline-end:.75rem!important;
  height:auto!important;max-height:min(640px,calc(100dvh - 1.5rem))!important;
  width:min(380px,calc(100vw - 1.5rem))!important;max-width:none!important;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:20px!important;overflow:hidden;
  background:linear-gradient(180deg,rgb(var(--cl-surface-raised)),rgb(var(--cl-surface)))!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 30px 80px -10px rgba(0,0,0,.75)!important;
}
.sa-cart-panel>.overflow-y-auto{min-height:0;overscroll-behavior:contain}
.sa-cart-panel+*{}
@media (max-width:639px){
  .sa-cart-panel{top:auto!important;bottom:.75rem!important;inset-inline:.75rem!important;width:auto!important;max-height:78dvh!important}
}