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

/* =====================================================================
   ii STUPID: orange / black polish layer
   Colours come from the theme's Accent Color setting (--cl-accent), so
   changing the accent in the builder still recolours all of this.
   ===================================================================== */

::selection { background: rgba(var(--cl-accent), .85); color: #000; }

* { scrollbar-width: thin; scrollbar-color: #262626 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 99px; border: 2px solid rgb(var(--cl-background)); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cl-accent), .7); }

/* ---------- Announcement ---------- */
.sa-announcement--accent {
  font-weight: 700;
  letter-spacing: .01em;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 30%, transparent 70%, rgba(0, 0, 0, .12));
}

/* ---------- Navbar ---------- */
.sa-navbar--floating-pill nav,
.sa-navbar--floating-pill > div > div {
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

.sa-navbar-logo img { filter: drop-shadow(0 0 12px rgba(var(--cl-accent), .45)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.sa-navbar-logo:hover img { transform: rotate(-8deg) scale(1.06); }

/* ---------- Buttons ---------- */
.sa-btn--primary.sa-btn--solid {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 45%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 28px -10px rgba(var(--cl-accent), .75);
  font-weight: 700;
}

.sa-btn--primary.sa-btn--solid:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 36px -10px rgba(var(--cl-accent), .95);
}

.sa-btn--secondary.sa-btn--outline:hover { border-color: rgba(var(--cl-accent), .6); }

/* ---------- Hero ---------- */
.sa-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18rem;
  width: 60rem;
  height: 36rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--cl-accent), .35), transparent);
  filter: blur(40px);
  pointer-events: none;
  animation: ii-breathe 9s ease-in-out infinite;
}

@keyframes ii-breathe {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.08); }
}

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

.sa-hero-title .mk {
  background: linear-gradient(135deg, #ffb066, rgb(var(--cl-accent)) 55%, #ff4d00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(var(--cl-accent), .45));
}

.sa-hero-subtitle { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ---------- Section titles: glowing highlight word ---------- */
.sa-section-title .mk { text-shadow: 0 0 28px rgba(var(--cl-accent), .45); }

/* ---------- Product cards ---------- */
.sa-product-card {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .3s ease;
}

.sa-product-card:hover {
  border-color: rgba(var(--cl-accent), .55);
  box-shadow: 0 30px 60px -28px rgba(var(--cl-accent), .55), 0 0 0 1px rgba(var(--cl-accent), .15);
}

.sa-product-card img { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.sa-product-card:hover img { transform: scale(1.05); }

.sa-product-card-title { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.sa-product-card-price { font-size: 1.05rem; font-weight: 800; }

.sa-products .sa-product-card-title { font-size: 1.25rem; }

/* ---------- Features ---------- */
.sa-features-item {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 50%);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s ease;
}

.sa-features-item::after {
  content: '';
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--cl-accent), .28), transparent);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.sa-features-item:hover { transform: translateY(-4px); border-color: rgba(var(--cl-accent), .4); }
.sa-features-item:hover::after { opacity: 1; }

.sa-features-item i,
.sa-features-item .sa-features-icon {
  color: rgb(var(--cl-accent));
}

/* ---------- Steps ---------- */
.sa-steps-icon {
  background: linear-gradient(135deg, #ffb066, rgb(var(--cl-accent)) 60%, #ff4d00) !important;
  color: rgb(var(--cl-on-accent, 10, 10, 10)) !important;
  box-shadow: 0 8px 22px -8px rgba(var(--cl-accent), .8);
}

.sa-steps-item:last-child .sa-steps-icon { animation: ii-pulse 2.4s ease-in-out infinite; }

@keyframes ii-pulse {
  0%, 100% { box-shadow: 0 8px 22px -8px rgba(var(--cl-accent), .8), 0 0 0 0 rgba(var(--cl-accent), .5); }
  50%      { box-shadow: 0 8px 22px -8px rgba(var(--cl-accent), .8), 0 0 0 8px rgba(var(--cl-accent), 0); }
}

/* ---------- Trust badges ---------- */
.sa-trust-badges .rounded-card,
.sa-trust-badges > div > div {
  border-color: rgba(var(--cl-accent), .22);
}

/* ---------- Video block ---------- */
.sa-text-video-block lite-youtube {
  box-shadow: 0 30px 80px -30px rgba(var(--cl-accent), .5);
}

/* ---------- Reviews ---------- */
.sa-feedback-card { transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s ease; }
.sa-feedback-card:hover { transform: translateY(-3px); border-color: rgba(var(--cl-accent), .35); }

/* ---------- FAQ ---------- */
.sa-faq-item { transition: border-color .3s ease; }
.sa-faq-item:hover { border-color: rgba(255, 255, 255, .16); }
.sa-faq-item:has([aria-expanded="true"]),
.sa-faq-item:has(details[open]) { border-color: rgba(var(--cl-accent), .5); }

.sa-faq-support-card {
  border-color: rgba(var(--cl-accent), .3);
  background-image: radial-gradient(24rem 10rem at 0% 0%, rgba(var(--cl-accent), .14), transparent 70%);
}

/* ---------- Footer ---------- */
.sa-footer { position: relative; }

.sa-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(640px, 80%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--cl-accent)), transparent);
  box-shadow: 0 0 30px 4px rgba(var(--cl-accent), .35);
}

.sa-footer-link:hover { color: rgb(var(--cl-accent)); }

@media (prefers-reduced-motion: reduce) {
  .sa-hero::before,
  .sa-steps-item:last-child .sa-steps-icon { animation: none; }
}

/* ---------- Only one product: centre it and give it room ---------- */
.sa-products-items:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.sa-products-items:has(> :only-child) .sa-product-card-title { font-size: 1.5rem; }
.sa-products-items:has(> :only-child) .sa-product-card-price { font-size: 1.25rem; }