/* =========================================================
   Autovens Premium Theme v2  (override layer — safe to remove)
   Palette follows the Autovens logo: violet → fuchsia → amber
   ========================================================= */

/* 1. Brand palette (re-colours every bg-brand-*, text-brand-* …) */
:root, :host {
  --color-brand-50:  #f5f3ff;
  --color-brand-100: #ede9fe;
  --color-brand-200: #ddd6fe;
  --color-brand-300: #c4b5fd;
  --color-brand-400: #a78bfa;
  --color-brand-500: #8b5cf6;
  --color-brand-600: #6d3df0;
  --color-brand-700: #5b21d6;
  --color-brand-800: #4c1d95;
  --color-brand-900: #1e0b4b;
  --av-grad: linear-gradient(120deg, #6d3df0 0%, #a21caf 55%, #f43f5e 100%);
  --av-grad-soft: linear-gradient(120deg, rgba(109,61,240,.10), rgba(217,70,239,.08) 55%, rgba(244,63,94,.08));
  --av-glow: 0 18px 40px -18px rgba(109,61,240,.55);
  --av-ring: 0 0 0 4px rgba(139,92,246,.18);
}

/* 2. Page canvas */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 520px at 100% -8%, rgba(139,92,246,.08), transparent 60%),
    radial-gradient(900px 480px at -10% 30%, rgba(236,72,153,.05), transparent 60%),
    #f7f7fb !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #7c3aed; color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #c4b5fd transparent; }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(#a78bfa, #d946ef); border-radius: 10px; border: 2px solid #f7f7fb; }
:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* 3. Announcement bar */
body > div.bg-brand-900:first-child {
  background: linear-gradient(90deg, #12052e, #3b0d6b 35%, #6b0f5a 65%, #12052e) !important;
  background-size: 200% 100% !important;
  animation: av-bar 14s linear infinite;
  color: #f5e9ff !important;
  letter-spacing: .02em;
}
@keyframes av-bar { to { background-position: 200% 0; } }

/* 4. Header: glass + gradient hairline */
header.sticky {
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent !important;
  box-shadow: 0 1px 0 rgba(109,61,240,.08), 0 10px 30px -22px rgba(30,11,75,.35);
}
header.sticky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--av-grad); opacity: .55;
}
header form > div.flex:has(> input[name="q"]) {
  border-radius: 999px !important;
  border: 1.5px solid #e4defa !important;
  background: #fff;
  box-shadow: 0 2px 10px -6px rgba(30,11,75,.25);
  transition: box-shadow .25s, border-color .25s;
}
header form > div.flex:has(> input[name="q"]):focus-within { border-color: #a78bfa !important; box-shadow: var(--av-ring), 0 8px 24px -12px rgba(109,61,240,.45); }
header form > div.flex:has(> input[name="q"]) button {
  background: var(--av-grad) !important; color: #fff !important; border-radius: 999px; margin: 3px; padding-inline: 18px !important;
  transition: filter .2s, transform .2s;
}
header form > div.flex:has(> input[name="q"]) button:hover { filter: brightness(1.08); transform: scale(1.03); }
header a.bg-brand-600, header button.bg-brand-600 { background: var(--av-grad) !important; box-shadow: var(--av-glow); }
header nav a, header .container-x a { transition: color .2s; }

/* 5. Buttons */
@layer components {
  .btn-primary {
    background: var(--av-grad) !important; color: #fff !important; border: 0;
    box-shadow: 0 8px 20px -10px rgba(109,61,240,.7), inset 0 1px 0 rgba(255,255,255,.25);
    background-size: 160% 100% !important; background-position: 0 0;
    transition: background-position .5s ease, transform .2s ease, box-shadow .25s ease !important;
  }
  .btn-primary:hover { background-position: 100% 0 !important; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(162,28,175,.75), inset 0 1px 0 rgba(255,255,255,.3); }
  .btn-primary:active { transform: translateY(0) scale(.98); }
  .btn-outline { border-radius: 999px; }
  .btn-outline:hover { border-color: #a78bfa; color: #5b21d6; box-shadow: var(--av-ring); }

  /* 6. Cards */
  .card {
    border-radius: 18px; border-color: #ebe8f5;
    box-shadow: 0 1px 2px rgba(30,11,75,.04), 0 8px 24px -20px rgba(30,11,75,.35);
  }
  .input { border-radius: 12px; border-color: #e2ddf3; transition: border-color .2s, box-shadow .2s; }
  .input:focus { border-color: #a78bfa; box-shadow: var(--av-ring); outline: none; }

  /* 7. Section titles with gradient accent */
  .section-title {
    position: relative; display: inline-flex; align-items: center; gap: .4em;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; color: #120a2e;
    padding-bottom: 8px;
  }
  .section-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px;
    background: var(--av-grad);
  }
  .badge { font-weight: 700; letter-spacing: .01em; box-shadow: 0 4px 10px -6px rgba(0,0,0,.35); }
}

/* 8. Product cards */
.group.card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s !important; }
.group.card:hover {
  transform: translateY(-6px) !important; border-color: #d8ccfb !important;
  box-shadow: 0 26px 46px -26px rgba(109,61,240,.55), 0 10px 18px -14px rgba(30,11,75,.25) !important;
}
.group.card > a.card-shine { background: linear-gradient(180deg, #faf9ff, #f3f1fa) !important; }
.group.card .text-brand-600.uppercase { letter-spacing: .12em; font-weight: 800; background: var(--av-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.group.card .btn-primary { border-radius: 999px; }
.group.card button[aria-label="Add to wishlist"] { backdrop-filter: blur(6px); transition: transform .25s, color .2s; }
.group.card button[aria-label="Add to wishlist"]:hover { transform: scale(1.15); }

/* 9. Section "View all" links → pills */
section > .mb-4 > a.text-brand-600, section .flex.items-end.justify-between > a.text-brand-600 {
  padding: 6px 14px; border-radius: 999px; background: #f1ecff; color: #5b21d6 !important; text-decoration: none !important;
  transition: background .25s, color .25s, transform .25s;
}
section > .mb-4 > a.text-brand-600:hover, section .flex.items-end.justify-between > a.text-brand-600:hover {
  background: var(--av-grad); color: #fff !important; transform: translateX(2px);
}

/* 10. Hero / promo blocks */
section.container-x .rounded-2xl, section.container-x .rounded-3xl { box-shadow: 0 24px 50px -32px rgba(30,11,75,.55); }

/* 11. Footer */
footer.bg-slate-900 {
  position: relative;
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(162,28,175,.25), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(109,61,240,.25), transparent 60%),
    #0d0720 !important;
}
footer.bg-slate-900::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--av-grad); }
footer a { transition: color .2s; }
footer a:hover { color: #e9d5ff !important; }

/* 12. Newsletter band */
section.bg-brand-700 {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, #4c1d95 0%, #6d3df0 40%, #a21caf 75%, #e11d48 100%) !important;
}
section.bg-brand-700::before {
  content: ""; position: absolute; inset: -50% -10%; pointer-events: none;
  background: radial-gradient(400px 160px at 20% 50%, rgba(255,255,255,.18), transparent 70%);
  animation: av-float 9s ease-in-out infinite alternate;
}
section.bg-brand-700 input { border-radius: 999px !important; border: 0 !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
section.bg-brand-700 button { border-radius: 999px !important; box-shadow: 0 10px 22px -10px rgba(0,0,0,.45); transition: transform .2s; }
section.bg-brand-700 button:hover { transform: translateY(-2px); }
@keyframes av-float { to { transform: translateX(45%); } }

/* 13. Promo tiles shine */
section.container-x > a.group.rounded-2xl { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s !important; }
section.container-x > a.group.rounded-2xl:hover { transform: translateY(-5px) !important; box-shadow: 0 30px 50px -28px rgba(30,11,75,.7) !important; }
section.container-x > a.group.rounded-2xl::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); transition: left .9s ease;
}
section.container-x > a.group.rounded-2xl:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  body > div.bg-brand-900:first-child, section.bg-brand-700::before { animation: none; }
}