/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ============================================================
   ELITE OVERRIDES — Full Design System
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes card-shimmer {
  from { transform: skewX(-20deg) translateX(-200%); }
  to   { transform: skewX(-20deg) translateX(300%); }
}

@keyframes accent-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

@keyframes dot-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%       { transform: scale(1.4); opacity: 1; }
}

/* ── Ambient Background ─────────────────────────────────────── */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 65% at 50% -8%,  rgba(var(--cl-accent), 0.1)  0%, transparent 62%),
    radial-gradient(ellipse 50%  40% at 90% 90%,  rgba(var(--cl-accent), 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 40%  30% at 10% 70%,  rgba(var(--cl-accent), 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* ── Custom Scrollbar ───────────────────────────────────────── */

::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--cl-accent), 0.28);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cl-accent), 0.55); }

/* ── Header — Premium Glass ─────────────────────────────────── */

header.component > div {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: linear-gradient(
    135deg,
    rgba(var(--cl-card), 0.7) 0%,
    rgba(var(--cl-card), 0.45) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 16px 48px rgba(0, 0, 0, 0.38);
}

/* Gradient accent top line */
header.component > div::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.75), transparent);
  z-index: 1;
}

/* Noise grain texture on header */
header.component > div::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* Shop name gradient */
header.component h1 {
  background: linear-gradient(
    130deg,
    rgb(var(--cl-t-primary)) 40%,
    color-mix(in srgb, rgb(var(--cl-accent)), white 40%) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stats — dividers between columns */
header.component .grid > div {
  position: relative;
}

header.component .grid > div + div::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}

/* Stat numbers — gradient text */
header.component .grid p:first-child {
  background: linear-gradient(
    145deg,
    rgb(var(--cl-t-primary)) 25%,
    color-mix(in srgb, rgb(var(--cl-accent)), white 35%) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Nav — active link glow */
header nav a.bg-accent-500\/10,
header nav button.bg-accent-500\/10 {
  box-shadow: inset 0 0 0 1px rgba(var(--cl-accent), 0.3);
}

header nav a, header nav button {
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

/* ── Announcement Bar ───────────────────────────────────────── */

.announcement > div {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, rgba(var(--cl-accent), 1), #1a0060 35%) 0%,
    rgba(var(--cl-accent), 1) 50%,
    color-mix(in srgb, rgba(var(--cl-accent), 1), #1a0060 35%) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 0 40px rgba(var(--cl-accent), 0.22),
    0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ── Product Cards ──────────────────────────────────────────── */

a.group.bg-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.875rem !important;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.38s ease,
    border-color 0.38s ease !important;
  will-change: transform;
}

/* Shimmer sweep on hover */
a.group.bg-card::before {
  content: '';
  position: absolute;
  top: -80%;
  left: 0;
  width: 45%;
  height: 260%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.045) 50%,
    transparent 100%
  );
  transform: skewX(-20deg) translateX(-200%);
  pointer-events: none;
  z-index: 20;
}

a.group.bg-card:hover::before {
  animation: card-shimmer 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

a.group.bg-card:hover {
  transform: translateY(-7px);
  border-color: rgba(var(--cl-accent), 0.28) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--cl-accent), 0.22),
    0 0 60px rgba(var(--cl-accent), 0.09) !important;
}

/* Image zoom on hover */
.product-card-img {
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a.group.bg-card:hover .product-card-img {
  transform: scale(1.07);
}

/* Price text gradient */
.price-text {
  background: linear-gradient(
    130deg,
    rgba(var(--cl-accent), 1) 0%,
    color-mix(in srgb, rgba(var(--cl-accent), 1), white 52%) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Stock dot breathe animation */
.stock-dot-active {
  animation: dot-breathe 2.5s ease-in-out infinite;
}

/* ── Search Bar ─────────────────────────────────────────────── */

.bg-card.border.rounded-lg:has(input) {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bg-card.border.rounded-lg:has(input:focus) {
  border-color: rgba(var(--cl-accent), 0.45) !important;
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.2), 0 0 20px rgba(var(--cl-accent), 0.08);
}

/* ── Feedback Cards ─────────────────────────────────────────── */

.cursor-pointer .bg-card.border.rounded-lg {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.cursor-pointer:hover .bg-card.border.rounded-lg {
  transform: translateY(-4px);
  border-color: rgba(var(--cl-accent), 0.22) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(var(--cl-accent), 0.15);
}

/* Star rating — filled stars glow */
.cursor-pointer .text-accent-500 svg {
  filter: drop-shadow(0 0 3px rgba(var(--cl-accent), 0.5));
}

/* ── Section Titles ─────────────────────────────────────────── */

h2.border-l-4.border-l-accent-500 {
  border-left-width: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0.75rem;
  position: relative;
}

h2.border-l-4.border-l-accent-500::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 2.75rem; height: 2px;
  background: linear-gradient(90deg, rgba(var(--cl-accent), 1), transparent);
  border-radius: 1px;
}

/* ── Primary CTA Button ─────────────────────────────────────── */

button.bg-accent-500.border-accent-500 {
  background: linear-gradient(
    135deg,
    rgba(var(--cl-accent), 1) 0%,
    color-mix(in srgb, rgba(var(--cl-accent), 1), #3b00c8 38%) 100%
  ) !important;
  border-color: transparent !important;
  box-shadow:
    0 0 24px rgba(var(--cl-accent), 0.3),
    0 4px 14px rgba(0, 0, 0, 0.32);
  letter-spacing: 0.015em;
  transition: box-shadow 0.28s ease, opacity 0.2s ease !important;
}

button.bg-accent-500.border-accent-500:hover:not(:disabled) {
  box-shadow:
    0 0 44px rgba(var(--cl-accent), 0.52),
    0 4px 22px rgba(0, 0, 0, 0.32) !important;
  opacity: 0.9;
}

/* ── Buy Now Button ─────────────────────────────────────────── */

button.border-accent-500.text-accent-500:not(.bg-accent-500):hover:not(:disabled) {
  box-shadow:
    inset 0 0 0 1px rgba(var(--cl-accent), 0.5),
    0 0 20px rgba(var(--cl-accent), 0.14) !important;
}

/* ── Variant Selector Active ────────────────────────────────── */

button.\!border-accent-500 {
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.28), 0 0 18px rgba(var(--cl-accent), 0.1);
}

/* ── Product Page ───────────────────────────────────────────── */

/* Price header */
.product-page-header .text-3xl {
  background: linear-gradient(
    135deg,
    rgb(var(--cl-t-primary)) 40%,
    color-mix(in srgb, rgb(var(--cl-t-primary)), rgb(var(--cl-accent)) 55%) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Product name */
.bg-background\/35 h1 {
  background: linear-gradient(130deg, rgb(var(--cl-t-primary)) 60%, rgba(var(--cl-t-primary), 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tab buttons */
button.bg-accent-500\/10.text-accent-500 {
  box-shadow: inset 0 0 0 1px rgba(var(--cl-accent), 0.28);
}

/* ── Footer ─────────────────────────────────────────────────── */

footer.bg-background {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(var(--cl-card), 0.25) 0%,
    rgba(var(--cl-background), 1) 70%
  ) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

footer.bg-background::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), 0.35), transparent);
  pointer-events: none;
}

/* Social icons */
footer a[href]:has(svg) {
  transition: filter 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

footer a[href]:has(svg):hover {
  filter: drop-shadow(0 0 7px rgba(var(--cl-accent), 0.55));
  transform: translateY(-2px);
}

/* Footer brand name */
.footer-brand-name {
  background: linear-gradient(130deg, rgb(var(--cl-t-primary)) 50%, color-mix(in srgb, rgb(var(--cl-accent)), white 35%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer quick links hover */
.footer-link {
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.footer-link:hover {
  padding-left: 0.375rem;
}

/* ── Sales Toast ────────────────────────────────────────────── */

.fixed .bg-card.shadow-2xl {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background-color: rgba(var(--cl-card), 0.72) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(var(--cl-accent), 0.14) !important;
}

/* ── Input Focus ────────────────────────────────────────────── */

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--cl-accent), 0.38), 0 0 14px rgba(var(--cl-accent), 0.1);
}

/* ── Volume Discount Banner ─────────────────────────────────── */

.bg-white\/\[0\.025\].text-center {
  background: linear-gradient(135deg, rgba(var(--cl-accent), 0.07), rgba(255,255,255,0.015)) !important;
  border: 1px solid rgba(var(--cl-accent), 0.18);
}

/* ── Group Modal ────────────────────────────────────────────── */

.bg-background.p-4.md\:p-6 {
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--cl-accent), 0.1);
}