*{box-sizing:border-box}
html,body{margin:0!important;background:#020202!important}
body.levial-collection-v420{background:#020202!important;overflow-x:hidden}
.cv-page{width:1024px;margin:0 auto;background:#020202;box-shadow:0 0 60px rgba(0,0,0,.65)}
.cv-section{position:relative;width:1024px;overflow:hidden}
.cv-art{position:absolute;inset:0;background-position:center top;background-repeat:no-repeat;background-size:1024px auto}
.cv-hot,.cv-product-hot{position:absolute;z-index:10;display:block}
.cv-hero{height:455px}.cv-hero .cv-art{background-image:url('../images/collection/collection-v420-hero.webp');transform:scale(1.025);animation:cvHeroZoom 8s ease-out forwards}
.cv-featured{height:350px}.cv-featured .cv-art{background-image:url('../images/collection/collection-v420-featured.webp')}
.cv-grid{height:498px}.cv-grid .cv-art{background-image:url('../images/collection/collection-v420-grid.webp')}
.cv-community{height:127px}.cv-community .cv-art{background-image:url('../images/collection/collection-v420-community.webp')}
.cv-footer{height:106px}.cv-footer .cv-art{background-image:url('../images/collection/collection-v420-footer.webp')}

@keyframes cvHeroZoom{to{transform:scale(1)}}

/* subtle animated gold line sweep inspired by the homepage */
.cv-hero:after,.cv-featured:after{content:"";position:absolute;left:-35%;top:0;width:22%;height:1px;background:linear-gradient(90deg,transparent,#c8994a,transparent);opacity:.75;animation:cvSweep 4.8s ease-in-out infinite;z-index:4}
.cv-featured:after{top:0;animation-delay:1.2s}
@keyframes cvSweep{0%,25%{left:-35%;opacity:0}45%{opacity:.7}70%,100%{left:115%;opacity:0}}

/* Top nav hit areas */
.cv-home{left:290px;top:38px;width:70px;height:44px}
.cv-collection{left:365px;top:38px;width:105px;height:44px}
.cv-about{left:486px;top:38px;width:75px;height:44px}
.cv-research{left:565px;top:38px;width:105px;height:44px}
.cv-faq{left:668px;top:38px;width:58px;height:44px}
.cv-contact{left:725px;top:38px;width:85px;height:44px}

/* Featured six cards */
.cv-feature-hot{top:19px;width:160px;height:316px;border-radius:6px}
.cv-feature-hot:hover{box-shadow:none}

/* Grid categories */
.cv-category-hotspots{position:absolute;left:0;top:0;width:100%;height:45px;z-index:11}
.cv-cat-hot{position:absolute;top:2px;height:35px;border:0;background:transparent;border-radius:18px;cursor:pointer}
.cv-cat-hot:hover,.cv-cat-hot.active{box-shadow:inset 0 0 0 1px rgba(200,154,77,.5);background:rgba(168,120,42,.04)}

/* product click targets */
.cv-grid-hot{width:153px;height:145px;border-radius:5px}
.cv-grid-hot:hover{box-shadow:none}

/* Newsletter: keep exact image styling but make field truly live */
.cv-newsletter{position:absolute;z-index:12;left:312px;top:34px;width:235px;height:34px;display:flex}
.cv-newsletter input{flex:1;background:#070707;border:0;color:#d6cdc0;padding:0 11px;font-size:8px;outline:0}
.cv-newsletter button{width:40px;border:0;background:linear-gradient(135deg,#9b7333,#d2ad68);color:#070707;cursor:pointer}

/* Hover motion like homepage cards */
.cv-product-hot{transition:transform .24s ease,box-shadow .24s ease}
.cv-product-hot:hover{transform:translateY(-3px)}


@media(max-width:700px){
 body.levial-collection-v420{min-width:0}
 .cv-page{width:1024px}
}


/* ============================================================
   v4.2.1 — HOME-PAGE MOTION SYSTEM
   Uses the same scroll-reveal behavior as the Levial homepage.
   ============================================================ */
.cv-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.7,.2,1);
}
.cv-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Stagger the internal visual slightly after the panel arrives. */
.cv-reveal .cv-art{
  filter:brightness(.86);
  transition:
    transform 1.3s cubic-bezier(.2,.7,.2,1),
    filter 1.1s ease;
}
.cv-reveal.is-visible .cv-art{
  filter:brightness(1);
}

/* Hero behaves like the homepage hero-scene. */
.cv-hero .cv-art{
  transform:scale(1.035);
  transition:transform 1.5s cubic-bezier(.2,.7,.2,1),filter 1s ease;
}
.cv-hero.is-visible .cv-art{
  transform:scale(1.015);
}

/* Visible floating/glow effect on featured collection area. */
.cv-featured:before{
  content:"";
  position:absolute;
  z-index:5;
  left:8%;
  right:8%;
  top:32%;
  height:42%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(191,147,76,.11),transparent 66%);
  opacity:0;
  transform:scale(.92);
  transition:opacity 1.1s ease .25s,transform 1.2s ease .25s;
}
.cv-featured.is-visible:before{
  opacity:1;
  transform:scale(1);
}

/* Product hit areas now have a more obvious homepage-style lift and aura. */
.cv-product-hot:before{
  content:"";
  position:absolute;
  inset:14% 16%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(194,151,79,.16),transparent 67%);
  filter:blur(9px);
  opacity:0;
  transform:scale(.78);
  transition:.45s ease;
  pointer-events:none;
}
.cv-product-hot:hover:before{
  opacity:1;
  transform:scale(1.18);
}
.cv-product-hot:hover{
  transform:translateY(-8px) scale(1.018);
}

/* Category pill motion. */
.cv-cat-hot{
  transition:background .3s ease,box-shadow .3s ease,transform .25s ease;
}
.cv-cat-hot:hover{
  transform:translateY(-2px);
}

/* Newsletter marble panel gets a very slow premium drift, like brand-wall. */
.cv-community .cv-art{
  transform:scale(1.018);
}
.cv-community.is-visible .cv-art{
  animation:cvCommunityDrift 10s ease-in-out infinite alternate;
}
@keyframes cvCommunityDrift{
  from{transform:scale(1.018) translateX(-2px)}
  to{transform:scale(1.03) translateX(3px)}
}

/* Slight gold shimmer across the collection header and featured divider. */
.cv-hero:before{
  content:"";
  position:absolute;
  z-index:6;
  top:104px;
  left:-38%;
  width:28%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(210,167,92,.8),transparent);
  animation:cvPremiumSweep 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cvPremiumSweep{
  0%,22%{left:-38%;opacity:0}
  40%{opacity:.75}
  68%,100%{left:112%;opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .cv-reveal{opacity:1;transform:none;transition:none}
  .cv-reveal .cv-art,.cv-community.is-visible .cv-art{animation:none!important;transform:none!important;transition:none!important}
}


/* v4.2.2 alignment + visible homepage-style vial pop */
.cv-product-hot{overflow:visible!important;transform:none!important;transition:none!important}
.cv-product-hot:hover{transform:none!important;box-shadow:none!important}
.cv-product-hot:before{display:none!important}
.cv-hover-vial{position:absolute;z-index:30;left:50%;top:50%;object-fit:contain;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.94);filter:drop-shadow(0 12px 12px rgba(0,0,0,.9));transition:opacity .16s ease,transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease}
.cv-feature-hot .cv-hover-vial{width:126px;height:252px;top:42%}
.cv-grid-hot .cv-hover-vial{width:90px;height:120px;top:42%}
.cv-product-hot:hover .cv-hover-vial,.cv-product-hot:focus-visible .cv-hover-vial{opacity:1;transform:translate(-50%,-55%) scale(1.12);filter:drop-shadow(0 20px 17px rgba(0,0,0,.98)) drop-shadow(0 0 14px rgba(204,159,82,.42))}
.cv-product-hot:after{content:"";position:absolute;z-index:29;left:50%;bottom:18%;width:58%;height:8%;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(ellipse,rgba(205,160,82,.36),rgba(167,116,43,.1) 42%,transparent 72%);filter:blur(5px);transform:translateX(-50%) scale(.72);transition:opacity .28s ease,transform .32s ease}
.cv-product-hot:hover:after,.cv-product-hot:focus-visible:after{opacity:1;transform:translateX(-50%) scale(1)}
.cv-cat-hot:hover,.cv-cat-hot.active{box-shadow:inset 0 0 0 1px rgba(208,165,91,.58);background:rgba(173,126,50,.045)}
.cv-cat-hot:hover{transform:translateY(-1px)}
.cv-community .cv-art,.cv-community.is-visible .cv-art{animation:none!important;transform:none!important}


/* ============================================================
   v4.3.1 — CLEAN HOME-STYLE HOVER + WORKING FILTERS
   ============================================================ */

/* The exact card underneath is re-rendered on hover, then lifted.
   No duplicate vial, no cutout artifacts, no giant zoom. */
.cv-product-hot{
  overflow:visible;
  transition:none;
}
.cv-hover-card{
  position:absolute;
  z-index:30;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:5px;
  opacity:0;
  pointer-events:none;
  transform:translateY(0) scale(1);
  transform-origin:center;
  transition:
    opacity .16s ease,
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s ease,
    filter .28s ease;
}
.cv-product-hot:hover .cv-hover-card,
.cv-product-hot:focus-visible .cv-hover-card{
  opacity:1;
  transform:translateY(-5px) scale(1.035);
  filter:brightness(1.055);
  box-shadow:
    0 16px 28px rgba(0,0,0,.72),
    0 0 0 1px rgba(196,151,77,.36),
    0 0 18px rgba(185,138,64,.12);
}

/* Featured cards pop a touch less to stay refined. */
.cv-feature-hot:hover .cv-hover-card,
.cv-feature-hot:focus-visible .cv-hover-card{
  transform:translateY(-4px) scale(1.022);
}

/* Real visual filtering for a baked-layout collection:
   non-matching cards receive a matching dark card mask. */
.cv-filter-mask{
  position:absolute;
  z-index:25;
  inset:0;
  border-radius:5px;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,5,.975),rgba(3,3,3,.985));
  box-shadow:
    inset 0 0 0 1px rgba(138,103,52,.20);
  transition:opacity .28s ease;
}
.cv-grid-hot.is-filtered .cv-filter-mask{
  opacity:1;
}
.cv-grid-hot.is-filtered{
  pointer-events:none;
}
.cv-grid-hot.is-filtered .cv-hover-card{
  display:none;
}

/* Active category gets the same restrained gold pill as the reference. */
.cv-cat-hot{
  transition:background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.cv-cat-hot:hover{
  transform:translateY(-1px);
}
.cv-cat-hot.active{
  background:rgba(179,131,52,.07);
  box-shadow:inset 0 0 0 1px rgba(208,165,91,.66);
}

/* Keep the overall scroll reveal, but make it restrained. */
.cv-reveal{
  transform:translateY(14px);
  transition:opacity .65s ease,transform .65s ease;
}
.cv-reveal.is-visible{
  transform:none;
}

/* Avoid over-animation on the static artwork itself. */
.cv-reveal .cv-art,
.cv-reveal.is-visible .cv-art{
  filter:none;
  transition:none;
}
.cv-community .cv-art,
.cv-community.is-visible .cv-art{
  animation:none!important;
  transform:none!important;
}

@media(prefers-reduced-motion:reduce){
  .cv-hover-card,.cv-filter-mask,.cv-cat-hot{transition:none!important}
}