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

/* Solyra — interactive before/after image comparison */
.sa-before-after {
  --ba-position: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #10141b;
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.sa-before-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}
.sa-before-after .sa-ba-after { z-index: 1; }
.sa-before-after .sa-ba-before-clip {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: var(--ba-position);
  overflow: hidden;
}
.sa-before-after .sa-ba-before-clip img { width: var(--ba-full-width, 100%); }
.sa-before-after .sa-ba-divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--ba-position);
  width: 3px;
  transform: translateX(-50%);
  background: #0E0C1A;
  box-shadow: 0 0 14px rgba(168,85,247,.75);
  pointer-events: none;
}
.sa-before-after .sa-ba-handle {
  position: absolute;
  z-index: 5;
  left: var(--ba-position);
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%);
  border: 3px solid #0E0C1A;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg,#c084fc,#0E0C1A);
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}
.sa-before-after .sa-ba-label {
  position: absolute;
  z-index: 6;
  top: 14px;
  padding: 7px 12px;
  border: 2px solid #0E0C1A;
  border-radius: 999px;
  color: #fff;
  background: rgba(10,15,22,.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.sa-before-after .sa-ba-label-after { left: 14px; }
.sa-before-after .sa-ba-label-before { right: 14px; }
.sa-before-after .sa-ba-range {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.sa-before-after:focus-within { outline: 2px solid #0E0C1A; outline-offset: 3px; }
.sa-before-after-caption { margin-top: 10px; color: var(--text-muted, #9ca3af); font-size: 13px; text-align: center; }
@media (max-width: 640px) {
  .sa-before-after { aspect-ratio: 4 / 3; border-radius: 12px; }
  .sa-before-after .sa-ba-handle { width: 42px; height: 42px; }
  .sa-before-after .sa-ba-label { top: 10px; padding: 6px 9px; font-size: 11px; }
  .sa-before-after .sa-ba-label-after { left: 10px; }
  .sa-before-after .sa-ba-label-before { right: 10px; }
}

/* SOLYRA — PROMO POPUP */
.solyra-promo-open { overflow: hidden; }
.solyra-promo-overlay {
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(5,4,12,.78);
  backdrop-filter: blur(7px); opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.solyra-promo-overlay.is-visible { opacity: 1; visibility: visible; }
.solyra-promo-modal {
  position: relative; width: min(100%, 440px); padding: 42px 30px 30px;
  text-align: center; color: #fff; background: #0E0C1A;
  border: 1px solid rgba(168,85,247,.65); border-radius: 20px;
  box-shadow: 0 22px 80px rgba(0,0,0,.55), 0 0 35px rgba(168,85,247,.18);
  transform: translateY(14px) scale(.98); transition: transform .22s ease;
}
.solyra-promo-overlay.is-visible .solyra-promo-modal { transform: translateY(0) scale(1); }
.solyra-promo-close {
  position: absolute; top: 12px; right: 15px; border: 0; background: transparent;
  color: #c9c2d8; font-size: 28px; line-height: 1; cursor: pointer;
}
.solyra-promo-kicker { color: #c084fc; font-size: 12px; font-weight: 800; letter-spacing: .24em; }
.solyra-promo-modal h2 { margin: 12px 0 8px; color: #fff; font-size: clamp(24px,5vw,32px); font-weight: 850; }
.solyra-promo-discount { margin: 8px 0; color: #c084fc; font-size: clamp(30px,8vw,48px); font-weight: 900; line-height: 1.1; }
.solyra-promo-message { margin: 12px auto 22px; max-width: 320px; color: #c9c4d4; font-size: 14px; }
.solyra-promo-code-row { display: flex; align-items: stretch; gap: 8px; padding: 7px; border: 1px dashed #a855f7; border-radius: 12px; background: rgba(168,85,247,.09); }
.solyra-promo-code { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; color: #fff; font-weight: 850; letter-spacing: .12em; overflow-wrap: anywhere; }
.solyra-promo-copy { padding: 12px 14px; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(135deg,#c084fc,#7e22ce); font-size: 11px; font-weight: 850; cursor: pointer; }
.solyra-promo-feedback { min-height: 18px; margin-top: 10px; color: #d8b4fe; font-size: 12px; }
@media (max-width: 480px) { .solyra-promo-modal { padding: 38px 18px 22px; border-radius: 16px; } .solyra-promo-code-row { flex-direction: column; } .solyra-promo-code { min-height: 34px; } }


/* SOLYRA — clean original purple styling (Halloween styling removed) */
.sa-before-after { border-color: rgba(168,85,247,.30); }
.sa-before-after .sa-ba-divider { background:#8B5CF6; box-shadow:0 0 14px rgba(168,85,247,.55); }
.sa-before-after .sa-ba-handle { border-color:#8B5CF6; background:linear-gradient(145deg,#c084fc,#7e22ce); }
.sa-before-after .sa-ba-label { border-color:#8B5CF6; }
.sa-before-after:focus-within { outline-color:#8B5CF6; }
.sa-btn--primary, .sa-add-to-cart { background-image:linear-gradient(110deg,#8B5CF6 0%,#7E22CE 100%); }
.sa-btn--primary:hover, .sa-add-to-cart:hover { box-shadow:0 0 22px rgba(168,85,247,.20); }
a:hover, .sa-footer-link:hover, .sa-navbar-link:hover { color:#C084FC; }
.sa-product-card { border-color:rgba(168,85,247,.20); }
.sa-product-card:hover { border-color:rgba(168,85,247,.48); box-shadow:0 10px 32px rgba(168,85,247,.08),0 10px 30px rgba(0,0,0,.2); }
.sa-section-eyebrow, .sa-hero-eyebrow { color:#C084FC; }
.solyra-promo-modal { border-color:rgba(168,85,247,.65); }
.solyra-promo-kicker, .solyra-promo-discount { color:#C084FC; }
.solyra-promo-code-row { border-color:#A855F7; background:rgba(168,85,247,.09); }
.solyra-promo-copy { background:linear-gradient(135deg,#C084FC,#7E22CE); }
.solyra-promo-feedback { color:#D8B4FE; }

/* SOLYRA REVIEWS — two opposite, continuous rows at the bottom of the homepage */
.solyra-reviews-marquee { width:100%; overflow:hidden; display:flex; flex-direction:column; gap:14px; margin:26px 0 34px; }
.solyra-reviews-track { display:flex; width:max-content; gap:16px; will-change:transform; animation:solyraReviewsLeft 52s linear infinite; }
.solyra-reviews-track.is-reverse { animation-name:solyraReviewsRight; animation-duration:58s; }
/* Hover speed is controlled smoothly through the Web Animations API (see custom.js). */
.solyra-reviews-group { display:flex; align-items:stretch; gap:16px; padding-right:16px; }
.solyra-reviews-group > .sa-feedbacks-item { flex:0 0 clamp(260px, 31vw, 390px); width:clamp(260px, 31vw, 390px); }
.solyra-reviews-group .sa-feedback-card { height:100%; min-height:180px; }
@keyframes solyraReviewsLeft { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes solyraReviewsRight { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media(max-width:640px) {
  .solyra-reviews-marquee { gap:10px; margin:18px 0 26px; }
  .solyra-reviews-track { gap:10px; animation-duration:42s; }
  .solyra-reviews-track.is-reverse { animation-duration:47s; }
  .solyra-reviews-group { gap:10px; padding-right:10px; }
  .solyra-reviews-group > .sa-feedbacks-item { flex-basis: min(78vw, 310px); width:min(78vw, 310px); }
}
@media(prefers-reduced-motion:reduce) { .solyra-reviews-track { animation:none !important; } }

/* SOLYRA — premium purple hover interactions (products, groups/categories and links) */
.sa-product-card,
.sa-blog-post-card,
.sa-feedback-card,
.sa-category-card,
.category-card,
.sa-category {
  transition:
    transform .28s cubic-bezier(.2,.75,.25,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background-color .28s ease;
  transform: translateZ(0);
}

.sa-product-card:hover,
.sa-blog-post-card:hover,
.sa-category-card:hover,
.category-card:hover,
.sa-category:hover {
  transform: translateY(-5px) scale(1.012);
  border-color: rgba(168,85,247,.72) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(168,85,247,.14),
    0 0 24px rgba(168,85,247,.16) !important;
}

/* Gentle image zoom inside product/category cards */
.sa-product-card .sa-product-card-media img,
.sa-category-card img,
.category-card img,
.sa-category img {
  transition: transform .45s cubic-bezier(.2,.75,.25,1), filter .35s ease;
}
.sa-product-card:hover .sa-product-card-media img,
.sa-category-card:hover img,
.category-card:hover img,
.sa-category:hover img {
  transform: scale(1.045);
  filter: saturate(1.08);
}

/* Purple interaction feedback for category/navigation chips and buttons */
.sa-navbar-link,
.sa-footer-link,
.sa-btn,
.sa-product-card a,
.sa-category-link,
.category-link,
[data-category] {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s ease;
}
.sa-navbar-link:hover,
.sa-footer-link:hover,
.sa-category-link:hover,
.category-link:hover {
  color: #D8B4FE !important;
  text-shadow: 0 0 12px rgba(192,132,252,.28);
}
.sa-btn:hover,
.sa-add-to-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(168,85,247,.25);
}

/* Keep hover motion subtle and usable on touch devices / reduced-motion settings */
@media (hover: none) {
  .sa-product-card:hover,
  .sa-blog-post-card:hover,
  .sa-category-card:hover,
  .category-card:hover,
  .sa-category:hover,
  .sa-btn:hover,
  .sa-add-to-cart:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-product-card, .sa-blog-post-card, .sa-feedback-card,
  .sa-category-card, .category-card, .sa-category,
  .sa-product-card img, .sa-category-card img, .category-card img, .sa-category img,
  .sa-navbar-link, .sa-footer-link, .sa-btn, .sa-add-to-cart {
    transition: none !important;
  }
}

/* SOLYRA REVIEWS — full-bleed rows edge-to-edge across the viewport */
.solyra-reviews-marquee {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
.solyra-reviews-track,
.solyra-reviews-group {
  width: max-content;
  max-width: none;
}