/* Autovens UI — premium category icons + featured nav links. v1 */
.av-cat{--c1:#93C5FD;--c2:#2563EB;position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.av-cat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c1) 55%,transparent)!important;box-shadow:0 18px 34px -16px color-mix(in srgb,var(--c2) 70%,transparent),0 2px 6px rgba(15,23,42,.05)!important}
.av-cat::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--c1) 16%,transparent),transparent 70%)}
.av-cat:hover::before{opacity:1}
.av-cat:active{transform:translateY(-1px) scale(.98)}

.av-ico{--s:56px;position:relative;display:grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.32);color:#fff;overflow:hidden;
  background:linear-gradient(150deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:0 10px 18px -8px color-mix(in srgb,var(--c2) 85%,transparent),inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -4px 8px color-mix(in srgb,var(--c2) 60%,#000 0%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.av-ico::before{content:"";position:absolute;left:8%;right:8%;top:5%;height:48%;border-radius:calc(var(--s)*.26) calc(var(--s)*.26) 50% 50%/calc(var(--s)*.26) calc(var(--s)*.26) 30% 30%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.av-ico::after{content:"";position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);
  transform:translateX(-70%);animation:av-sheen 7s ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none}
.av-ico svg{position:relative;z-index:1;width:56%;height:56%;filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.28))}
.av-ico--sm{--s:34px}
.av-cat:hover .av-ico{transform:translateY(-2px) rotate(-6deg) scale(1.08);box-shadow:0 16px 26px -10px color-mix(in srgb,var(--c2) 90%,transparent),inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.15)}
.av-cat:hover .av-ico::after{animation:av-sheen-fast .8s ease-out both}
@keyframes av-sheen{0%,82%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
@keyframes av-sheen-fast{from{transform:translateX(-70%)}to{transform:translateX(70%)}}

/* ---------- Featured links: Global Store + Deals ---------- */
.av-feat{display:flex;align-items:center;gap:.7rem;border-radius:14px;padding:.6rem .75rem;font-weight:700;text-decoration:none;position:relative;isolation:isolate;transition:transform .25s}
.av-feat:active{transform:scale(.98)}
.av-feat small{display:block;font-size:.7rem;font-weight:500;opacity:.8;margin-top:1px}
.av-feat .av-ico{--s:36px}
.av-feat--global{color:#065F46;background:linear-gradient(135deg,#ECFDF5,#D1FAE5);border:1px solid #A7F3D0}
.av-globe .av-mer{transform-box:fill-box;transform-origin:center;animation:av-turn 3s linear infinite}
.av-globe .av-mer2{animation-delay:-1.5s}
@keyframes av-turn{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}

.av-feat--deals{color:#fff;overflow:hidden;background:linear-gradient(110deg,#FF7A1A,#F72585,#7B2FF7,#F72585,#FF7A1A);background-size:300% 100%;
  animation:av-flow 4s linear infinite,av-glow 1.6s ease-in-out infinite}
.av-feat--deals::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:av-shine 2.4s ease-in-out infinite}
.av-feat--deals .av-ico{background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.av-feat--deals .av-flame{animation:av-flicker 1.2s ease-in-out infinite;transform-origin:50% 90%}
.av-hot{margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.08em;background:#fff;color:#E11D48;border-radius:999px;padding:.18rem .5rem;animation:av-pulse 1.6s ease-in-out infinite}
@keyframes av-flow{to{background-position:300% 0}}
@keyframes av-glow{0%,100%{box-shadow:0 0 0 0 rgba(247,37,133,.0),0 6px 18px -6px rgba(247,37,133,.55)}50%{box-shadow:0 0 0 4px rgba(247,37,133,.18),0 10px 28px -4px rgba(255,122,26,.75)}}
@keyframes av-shine{0%,40%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes av-flicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.12,.94) rotate(-4deg)}60%{transform:scale(.95,1.08) rotate(3deg)}}
@keyframes av-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* compact pills for the desktop category bar */
.av-pill{display:inline-flex;align-items:center;gap:.3rem;flex:none;margin:.3rem .15rem;padding:.3rem .65rem;border-radius:999px;font-weight:700;font-size:.875rem;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;text-decoration:none}
.av-pill svg{width:16px;height:16px}
.av-pill--global{color:#047857;background:linear-gradient(135deg,#ECFDF5,#D1FAE5);border:1px solid #A7F3D0}
.av-pill--global:hover{background:#D1FAE5}
.av-pill--deals{color:#fff;background:linear-gradient(110deg,#FF7A1A,#F72585,#7B2FF7,#F72585,#FF7A1A);background-size:300% 100%;animation:av-flow 4s linear infinite,av-glow 1.6s ease-in-out infinite}
.av-pill--deals::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:av-shine 2.4s ease-in-out infinite}

/* stagger the idle sheen across the grid */
.av-cat:nth-child(6n+1) .av-ico{--d:0s}.av-cat:nth-child(6n+2) .av-ico{--d:1.1s}.av-cat:nth-child(6n+3) .av-ico{--d:2.2s}
.av-cat:nth-child(6n+4) .av-ico{--d:3.3s}.av-cat:nth-child(6n+5) .av-ico{--d:4.4s}.av-cat:nth-child(6n) .av-ico{--d:5.5s}

@media (prefers-reduced-motion:reduce){.av-ico::after,.av-feat--deals,.av-feat--deals::after,.av-pill--deals,.av-pill--deals::after,.av-mer,.av-flame,.av-hot{animation:none!important}}

/* ===== v2: realistic 3D icons ===== */
.av-3d{--s:68px;overflow:visible;background:linear-gradient(155deg,color-mix(in srgb,var(--c1) 24%,#fff),color-mix(in srgb,var(--c2) 16%,#fff));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px color-mix(in srgb,var(--c1) 28%,transparent),0 10px 20px -12px color-mix(in srgb,var(--c2) 65%,transparent)}
.av-3d::before{opacity:.75}
.av-3d::after{display:none}
.av-3d img{position:relative;z-index:1;width:76%;height:76%;object-fit:contain;pointer-events:none;user-select:none;
  filter:drop-shadow(0 7px 6px color-mix(in srgb,var(--c2) 38%,rgba(15,23,42,.22)));
  animation:av-float 3.2s ease-in-out infinite;animation-delay:calc(var(--d,0s) * -.55);transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s}
@keyframes av-float{0%,100%{translate:0 1px}50%{translate:0 -3px}}
.av-cat:hover .av-ico.av-3d{transform:translateY(-2px) scale(1.04)}
.av-cat:hover .av-3d img{transform:scale(1.16) rotate(-7deg);filter:drop-shadow(0 12px 10px color-mix(in srgb,var(--c2) 45%,rgba(15,23,42,.28)))}
.av-ico--sm.av-3d{--s:40px}
.av-ico--sm.av-3d img{animation:none}
.av-feat .av-3d{--s:42px}
.av-feat--deals .av-3d{background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.av-feat--global .av-3d{background:#fff;box-shadow:inset 0 0 0 1px #A7F3D0,0 6px 14px -8px #047857}
.av-pill img{width:17px;height:17px;margin:-1px 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.av-pill--deals img,.av-feat--deals .av-3d img{animation:av-flicker 1.2s ease-in-out infinite;transform-origin:50% 90%}
@media (max-width:640px){.av-3d{--s:60px}}
@media (prefers-reduced-motion:reduce){.av-3d img,.av-pill img{animation:none!important}}

/* category strip: soft edge fade so overflow reads as "scroll for more" */
.overflow-x-auto:has(+ .av-pill--global){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)} /* .av-strip-fade */

/* ===== v3: real photos ===== */
.av-photo{--s:72px;overflow:hidden;border-radius:calc(var(--s)*.3);background:#e2e8f0;
  box-shadow:0 12px 22px -14px color-mix(in srgb,var(--c2) 75%,transparent),0 1px 2px rgba(15,23,42,.08)}
.av-photo::before{content:"";position:absolute;inset:0;left:0;right:0;top:0;height:auto;border-radius:inherit;z-index:2;background:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -20px 24px -20px rgba(15,23,42,.35)}
.av-photo::after{display:none}
.av-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.av-cat:hover .av-ico.av-photo{transform:translateY(-2px)}
.av-cat:hover .av-photo img{transform:scale(1.12)}
.av-ico--sm.av-photo{--s:40px;border-radius:12px}
@media (max-width:640px){.av-photo{--s:64px}}