/* ═══════════════════════════════════════════════════════════════════════
   VARASHREE CTA EFFECTS — shared, reusable hover/interaction system
   Everything here is opt-in via class name (.vs-cta, .vs-ring-btn,
   .vs-social-icon2, .vs-notify-bell) — nothing here touches unrelated
   buttons. Colors are the theme's own black/gold palette throughout,
   not the literal colors in any reference design.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- TASK 1 — morphing gold/black CTA with glow ---------- */
.vs-cta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:30px;
  background:linear-gradient(135deg,#f5da8a 0%,#d4af37 50%,#a9842a 100%);
  color:#1a1408;
  cursor:pointer;
  transition:transform .15s ease, border-radius .35s ease, box-shadow .35s ease, color .35s ease;
  box-shadow:0 0 0 rgba(212,175,55,0);
}
.vs-cta::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#1c1710 0%,#050403 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
  border-radius:inherit;
}
.vs-cta:hover::before{transform:scaleX(1)}
.vs-cta:hover{
  border-radius:40px 10px 40px 10px;
  color:#e8d7a5;
  box-shadow:0 0 18px rgba(212,175,55,.5),0 0 36px rgba(212,175,55,.22);
}
.vs-cta:focus-visible{outline:2px solid #d4af37;outline-offset:3px}
.vs-cta:active{transform:scale(.94)}
.vs-cta > *{position:relative;z-index:1}
.vs-cta svg,.vs-cta i{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .vs-cta,.vs-cta::before{transition:none}
}

/* ---------- TASK 3 — sliding letter-swap label (lives inside .vs-cta) ----------
   JS (cta-effects.js) auto-splits each .vs-cta-label's text into two
   stacked, per-character copies on load — authors never hand-write the
   span structure. */
/* The outgoing copy ALWAYS stays in normal flow — it's what gives the label
   its width. Previously it switched to position:absolute on hover, which
   left the label with no in-flow child, collapsing it to zero width and
   blanking the whole button mid-hover. The incoming copy overlays it
   absolutely instead. */
.vs-cta-label{position:relative;display:inline-flex;overflow:hidden;line-height:1.2;white-space:nowrap}
.vs-cta-label .span-mother{display:flex}
.vs-cta-label .span-mother span{display:inline-block;transition:transform .3s ease}
.vs-cta:hover .vs-cta-label .span-mother span{transform:translateY(-1.25em)}
.vs-cta-label .span-mother2{
  display:flex;position:absolute;top:0;left:0;right:0;
  justify-content:center;white-space:nowrap;pointer-events:none;
}
.vs-cta-label .span-mother2 span{display:inline-block;transform:translateY(1.25em);transition:transform .3s ease}
.vs-cta:hover .vs-cta-label .span-mother2 span{transform:translateY(0)}
/* Text that hasn't been split yet (JS hasn't run, or reduced-motion skip) just reads normally. */
.vs-cta-label:not(.vs-split){overflow:visible}

@media (prefers-reduced-motion:reduce){
  .vs-cta-label .span-mother span,.vs-cta-label .span-mother2 span{transition:none}
  .vs-cta:hover .vs-cta-label .span-mother span{transform:none}
  .vs-cta-label .span-mother2{display:none}
}

/* ---------- TASK 2 — social/icon button: glass circle + rotating gold sweep ---------- */
.vs-social-icon2{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;border-radius:50%!important;
  background:transparent;border:none;cursor:pointer;
  transition:all .3s ease;
  color:rgba(242,235,217,.75);
}
.vs-social-icon2 .vs-si-glass{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:rgba(20,17,11,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-radius:50%!important;border:1px solid rgba(212,175,55,.28);
  transition:all .3s ease;position:relative;z-index:1;
}
.vs-social-icon2 svg{width:18px;height:18px;position:relative;z-index:1}
.vs-social-icon2 .vs-si-bg{
  position:absolute;inset:0;content:'';
  background:linear-gradient(135deg,#f5da8a 0%,#d4af37 45%,#a9842a 100%);
  z-index:0;border-radius:50%!important;pointer-events:none;
  transition:transform .35s ease;
}
.vs-social-icon2:hover .vs-si-bg{transform:rotate(35deg)}
.vs-social-icon2:hover .vs-si-glass{
  background:rgba(212,175,55,.12);color:#1a1408;border-color:transparent;
}
.vs-social-icon2:focus-visible{outline:2px solid #d4af37;outline-offset:3px}

/* ---------- TASK 4 — double-ring arrow reveal (gallery/thumb/back-to-top) ---------- */
.vs-ring-btn{position:relative}
.vs-ring-btn::before{
  content:'';position:absolute;inset:5px;border-radius:50%;
  border:2px solid rgba(212,175,55,.35);
  transition:opacity .4s cubic-bezier(.77,0,.175,1) 80ms, transform .5s cubic-bezier(.455,.03,.515,.955) 80ms;
  pointer-events:none;
}
.vs-ring-btn::after{
  content:'';position:absolute;inset:5px;border-radius:50%;
  border:2px solid #d4af37;
  transform:scale(1.3);opacity:0;
  transition:opacity .4s cubic-bezier(.165,.84,.44,1), transform .5s cubic-bezier(.25,.46,.45,.94);
  pointer-events:none;
}
.vs-ring-btn:hover::before,.vs-ring-btn:focus-visible::before{
  opacity:0;transform:scale(.7);
  transition:opacity .4s cubic-bezier(.165,.84,.44,1), transform .5s cubic-bezier(.25,.46,.45,.94);
}
.vs-ring-btn:hover::after,.vs-ring-btn:focus-visible::after{
  opacity:1;transform:scale(1);
  transition:opacity .4s cubic-bezier(.77,0,.175,1) 80ms, transform .5s cubic-bezier(.455,.03,.515,.955) 80ms;
}
@media (prefers-reduced-motion:reduce){
  .vs-ring-btn::before,.vs-ring-btn::after{transition:none}
}

/* ---------- TASK 5 — out-of-stock notify bell ---------- */
.vs-notify-bell{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex-shrink:0;
}
.vs-notify-bell svg{width:100%;height:100%;fill:currentColor}
@keyframes vsBellRing{
  0%,100%{transform-origin:top;transform:rotateZ(0)}
  15%{transform:rotateZ(10deg)}
  30%{transform:rotateZ(-10deg)}
  45%{transform:rotateZ(5deg)}
  60%{transform:rotateZ(-5deg)}
  75%{transform:rotateZ(2deg)}
}
@media (prefers-reduced-motion:no-preference){
  .lot-add-to-cart:hover .vs-notify-bell,.btn-submit:hover .vs-notify-bell{
    animation:vsBellRing .9s both;
  }
}

/* ---------- mobile: same effects, lighter footprint ---------- */
@media (max-width:560px){
  .vs-cta:not(.vs-cta--ghost){padding-inline:22px}
  .vs-cta:hover{box-shadow:0 0 12px rgba(212,175,55,.4),0 0 24px rgba(212,175,55,.16)}
  .vs-social-icon2{width:36px;height:36px}
  .vs-ring-btn::before,.vs-ring-btn::after{inset:4px}
}


/* ---------- .vs-cta--ghost — outlined variant ----------
   Same morph geometry, glow and letter-swap as the solid .vs-cta, but keeps
   a dark surface so multi-colour brand marks (Google/Facebook/Yahoo) stay
   legible — a gold fill would wash them out. Used for secondary and
   social sign-in buttons. */
.vs-cta--ghost{
  background:rgba(255,255,255,.045);
  color:var(--vs-cta-ivory,#f5f0e6);
  border:1px solid rgba(212,175,55,.32);
  border-radius:50px;
}
/* Gold wash instead of the solid black sweep. */
.vs-cta--ghost::before{
  background:linear-gradient(135deg,rgba(212,175,55,.24) 0%,rgba(212,175,55,.10) 100%);
}
.vs-cta--ghost:hover{
  color:#f7efd8;
  border-color:rgba(212,175,55,.85);
  border-radius:40px 10px 40px 10px;
  box-shadow:0 0 16px rgba(212,175,55,.34),0 0 34px rgba(212,175,55,.16);
}
/* Icons must not be pulled into the text roll — only the label animates. */
.vs-cta--ghost .vs-social-icon,
.vs-cta--ghost svg{position:relative;z-index:1}

/* Preserve each host button's own metrics — .vs-cta's defaults must not
   override the spacing the login/signup pages already establish. */
.vs-cta--ghost.vs-social-btn{gap:12px;padding:13px 16px}
.vs-cta--ghost.btn-signup{border-radius:50px}
.vs-cta--ghost.btn-signup:hover{border-radius:40px 10px 40px 10px}
/* Label must not stretch the row; it only needs to clip its own text. */
.vs-social-btn .vs-cta-label{flex:0 1 auto;justify-content:center}


/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL SOCIAL BUTTON COMPONENT — single source of truth
   Was previously duplicated byte-for-byte across footer.php + 5 standalone
   page templates (about/terms/contact/achievements/faq); any edit to one
   copy wouldn't reach the others, which is exactly the drift that made
   these buttons inconsistent in the first place. Consolidated here, in
   the one stylesheet already enqueued globally on every front-end page —
   the row-layout (.footer-social/.socials), the pending/coming-soon
   treatment, and their responsive sizing now live in exactly one place.
   The base .vs-social-icon2 button (shape, gold sweep, border, glass
   panel) is defined earlier in this same file — nothing here repeats it.
   ═══════════════════════════════════════════════════════════════════════ */
.footer-social,
.socials{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
}
/* Icons awaiting a URL: identical hover animation to the live icons — the
   old muted/pointer-events:none treatment silently blocked the browser
   from ever registering :hover, which is why these never animated no
   matter what CSS targeted them. Full opacity + real hover now; a click
   still goes nowhere since there's no href on the underlying <span>, so
   this stays a genuine placeholder rather than a link to a dead page. */
.vs-social-pending{
  cursor:default;
  color:rgba(242,235,217,.85);
}
.vs-social-pending.vs-social-icon2 .vs-si-bg{opacity:.35}
.vs-social-pending.vs-social-icon2:hover .vs-si-bg{opacity:.55}

@media (max-width:560px){
  .footer-social,.socials{gap:10px;justify-content:flex-start}
  .vs-social-icon2,.vs-social-pending.vs-social-icon2{width:36px;height:36px}
}
@media (max-width:360px){
  .footer-social,.socials{gap:8px}
}


/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION / LIST STAGGERED REVEAL
   Motion.dev-style: each item starts slightly lower and transparent, then
   rises and fades into place, staggered per item. Applied ONLY to nav and
   list-style UI (header menu, mega-menu, mobile drawer, footer links,
   filter list) via the .vs-nav-reveal-item class added by JS — nothing
   here touches product names, prices, descriptions or CTAs, and no
   colour/spacing/layout value is changed, only opacity + a small
   translateY on items that already exist.
   ═══════════════════════════════════════════════════════════════════════ */
.vs-nav-reveal-item{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.19,1,.22,1),
             transform .5s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--vs-nav-delay,0s);
  will-change:opacity,transform;
}
.vs-nav-reveal-item.is-in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .vs-nav-reveal-item{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   NAV TEXT ROLL — Motion.dev-style interactive text motion
   Scoped to plain navigational text only (header nav, mega-menu, footer
   links, filter list) — separate system from .vs-cta-label (buttons,
   which swap to DIFFERENT replacement text) and .vs-nav-reveal-item
   (load/open stagger). Two identical copies of the same label are
   stacked in a clipped box; on interaction the top copy rolls up and out
   while the duplicate rolls up into place — the label never changes,
   only moves. Pure CSS once the JS below has wrapped the text once;
   :active covers touch, since real :hover doesn't exist there.
   ═══════════════════════════════════════════════════════════════════════ */
.vs-nav-roll{
  display:inline-block;
  position:relative;
  overflow:hidden;
  vertical-align:top;
  line-height:1.2;
}
.vs-nav-roll .vs-nav-roll-inner{
  display:block;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.vs-nav-roll .vs-nav-roll-dup{
  display:block;
  position:absolute;
  top:100%;
  left:0;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
:is(a,button):has(.vs-nav-roll):hover .vs-nav-roll-inner,
:is(a,button):has(.vs-nav-roll):focus-visible .vs-nav-roll-inner,
:is(a,button):has(.vs-nav-roll):active .vs-nav-roll-inner,
.vs-nav-roll:hover .vs-nav-roll-inner,
label:has(.vs-nav-roll):hover .vs-nav-roll-inner{
  transform:translateY(-100%);
}
:is(a,button):has(.vs-nav-roll):hover .vs-nav-roll-dup,
:is(a,button):has(.vs-nav-roll):focus-visible .vs-nav-roll-dup,
:is(a,button):has(.vs-nav-roll):active .vs-nav-roll-dup,
.vs-nav-roll:hover .vs-nav-roll-dup,
label:has(.vs-nav-roll):hover .vs-nav-roll-dup{
  transform:translateY(-100%);
}
/* :has() fallback — older browsers get the wrapper's own :hover/:active,
   which still covers the direct-hover case (most of the targets here are
   hovered directly, not via a larger parent), just not the "hover the
   whole row" case on browsers without :has() support. */
.vs-nav-roll:focus-visible .vs-nav-roll-inner,
.vs-nav-roll:active .vs-nav-roll-inner{transform:translateY(-100%)}
.vs-nav-roll:focus-visible .vs-nav-roll-dup,
.vs-nav-roll:active .vs-nav-roll-dup{transform:translateY(-100%)}

@media (prefers-reduced-motion:reduce){
  .vs-nav-roll .vs-nav-roll-inner,
  .vs-nav-roll .vs-nav-roll-dup{transition:none}
}