/* ============================================================
   MOLNAR SOFTWARES — SCROLLBAR + GLOBAL ANIMATION LAYER
   ============================================================ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #b51b1b; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #d64343; }

/* ---------- KEYFRAMES ---------- */
@keyframes msFadeUp   { from { opacity:0; transform: translate3d(0,26px,0); }  to { opacity:1; transform:none; } }
@keyframes msFadeDown { from { opacity:0; transform: translate3d(0,-22px,0); } to { opacity:1; transform:none; } }
@keyframes msFadeLeft { from { opacity:0; transform: translate3d(-30px,0,0); } to { opacity:1; transform:none; } }
@keyframes msFadeRight{ from { opacity:0; transform: translate3d(30px,0,0); }  to { opacity:1; transform:none; } }
@keyframes msFadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes msZoomIn   { from { opacity:0; transform: scale(.9); } to { opacity:1; transform: scale(1); } }
@keyframes msPop      { 0%{transform:scale(.86);opacity:0} 60%{transform:scale(1.04);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes msFloat    { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@keyframes msPulseGlow{
  0%,100% { filter: drop-shadow(0 0 14px rgba(181,27,27,.35)); }
  50%     { filter: drop-shadow(0 0 32px rgba(181,27,27,.75)); }
}
@keyframes msTextGlow {
  0%,100% { text-shadow: 0 0 26px rgba(181,27,27,.45), 0 0 52px rgba(181,27,27,.22); }
  50%     { text-shadow: 0 0 40px rgba(181,27,27,.80), 0 0 80px rgba(181,27,27,.42); }
}
@keyframes msShine    { 0% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(230%) skewX(-20deg); } }
@keyframes msShimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes msSpinSlow { to { transform: rotate(360deg); } }
@keyframes msKenBurns { 0%{ transform: scale(1); } 100%{ transform: scale(1.10); } }
@keyframes msRipple   { to { transform: scale(2.6); opacity: 0; } }
@keyframes msBlink    { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- PAGE LOAD ---------- */
body { animation: msFadeIn .45s ease both; }

/* ---------- SCROLL REVEAL ENGINE (adds to theme's existing .scroll-reveal) ---------- */
.ms-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .75s cubic-bezier(.22,1,.36,1);
}
/* once revealed, drop the transform entirely so it can't act as a
   containing block for absolutely-positioned children */
.ms-reveal.ms-done { transition: none; transform: none !important; }
.ms-reveal.ms-left  { transform: translate3d(-36px,0,0); }
.ms-reveal.ms-right { transform: translate3d(36px,0,0); }
.ms-reveal.ms-zoom  { transform: scale(.93); }
.ms-reveal.ms-in    { opacity: 1; transform: none; }

/* ---------- SCROLL PROGRESS BAR ---------- */
#ms-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, #b51b1b, #ff4d4d, #b51b1b);
  box-shadow: 0 0 12px rgba(181,27,27,.85);
  z-index: 99999; pointer-events: none;
  transition: width .12s linear;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.header-navcobra { animation: msFadeDown .6s cubic-bezier(.22,1,.36,1) both; }
.header-navcobra { transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease; }
.header-navcobra.ms-scrolled {
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(181,27,27,.22);
}
body .nav-link-navcobra,
body .jw-left-link {
  position: relative;
  transition: color .22s ease, transform .22s ease;
}
body .nav-link-navcobra::after,
body .jw-left-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px; border-radius: 2px; background: #b51b1b;
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 10px rgba(181,27,27,.9);
}
body .nav-link-navcobra:hover,
body .jw-left-link:hover { color: #fff; transform: translateY(-1px); }
body .nav-link-navcobra:hover::after,
body .jw-left-link:hover::after { transform: scaleX(1); }

body .logo-navcobra,
body .logo-section-navcobra img { transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease; }
body .logo-section-navcobra:hover img,
body .logo-navcobra:hover {
  transform: scale(1.07) rotate(-3deg);
  filter: drop-shadow(0 0 14px rgba(181,27,27,.7));
}

body .cart-btn-navcobra,
body .account-btn-navcobra,
body .mobile-menu-trigger-navcobra,
body .mobile-search-trigger-navcobra {
  transition: transform .22s cubic-bezier(.22,1,.36,1), background-color .22s ease, box-shadow .22s ease;
}
body .cart-btn-navcobra:hover,
body .account-btn-navcobra:hover,
body .mobile-menu-trigger-navcobra:hover,
body .mobile-search-trigger-navcobra:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 20px rgba(181,27,27,.28);
}
body .cart-count-navcobra { animation: msPop .4s cubic-bezier(.22,1,.36,1) both; }

body .search-input-navcobra { transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
body .search-box-navcobra:focus-within { box-shadow: 0 0 0 3px rgba(181,27,27,.18); border-radius: 1rem; }

/* Mobile menu slide */
body .mobile-menu-panel-navcobra { transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
body .mobile-menu-overlay-navcobra { transition: opacity .3s ease; }

/* ============================================================
   BUTTONS — global shine + press
   ============================================================ */
body .btn:not(.variant):not(.btn-close),
body .pc-btn,
body .bf-discord-btn,
body a.btn {
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s ease,
              background-color .25s ease, border-color .25s ease, color .25s ease;
}
body .btn:not(.variant):not(.btn-close):hover,
body .pc-btn:hover,
body .bf-discord-btn:hover,
body a.btn:hover { transform: translateY(-2px); }
body .btn:not(.variant):not(.btn-close):active,
body .pc-btn:active,
body .bf-discord-btn:active,
body a.btn:active { transform: translateY(0) scale(.98); }

body .btn:not(.variant):not(.btn-close)::before,
body .pc-btn::before,
body .bf-discord-btn::before {
  content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-130%) skewX(-20deg);
  pointer-events: none;
}
body .btn:not(.variant):not(.btn-close):hover::before,
body .pc-btn:hover::before,
body .bf-discord-btn:hover::before { animation: msShine .85s ease forwards; }

/* Ripple removed. This rule stays only to neutralise any stray node left
   behind by a cached older script.js -- it must never affect layout. */
.ms-ripple {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
body .pc-outer {
  position: relative;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
body .pc-outer:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 42px rgba(0,0,0,.55), 0 0 0 1px rgba(181,27,27,.35);
  border-color: rgba(181,27,27,.45);
}
body .pc-img-wrap { overflow: hidden; position: relative; }
body .pc-img { transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s ease; }
body .pc-outer:hover .pc-img { transform: scale(1.09); filter: saturate(1.15) brightness(1.05); }

/* shine sweep across card image on hover */
body .pc-img-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .75s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
body .pc-outer:hover .pc-img-wrap::after { transform: translateX(120%); }

body .pc-title { transition: color .25s ease, transform .25s ease; }
body .pc-outer:hover .pc-title { color: #fff; transform: translateX(2px); }
body .pc-price-value { transition: transform .25s cubic-bezier(.22,1,.36,1), color .25s ease; }
body .pc-outer:hover .pc-price-value { transform: scale(1.06); }
body .pc-badge { transition: transform .25s ease, box-shadow .25s ease; }
body .pc-outer:hover .pc-badge { transform: translateY(-2px); }

/* live status dot pulse */
body .pc-status--undetected { animation: msBlink 2.4s ease-in-out infinite; }
body .pc-status--updating   { animation: msBlink 1.2s ease-in-out infinite; }

/* staggered grid entrance */
body .product-grid-item { animation: msFadeUp .6s cubic-bezier(.22,1,.36,1) both; }
body .product-grid-item:nth-child(1) { animation-delay: .05s }
body .product-grid-item:nth-child(2) { animation-delay: .12s }
body .product-grid-item:nth-child(3) { animation-delay: .19s }
body .product-grid-item:nth-child(4) { animation-delay: .26s }
body .product-grid-item:nth-child(5) { animation-delay: .33s }
body .product-grid-item:nth-child(6) { animation-delay: .40s }
body .product-grid-item:nth-child(7) { animation-delay: .47s }
body .product-grid-item:nth-child(8) { animation-delay: .54s }
body .product-grid-item:nth-child(n+9) { animation-delay: .60s }

/* ============================================================
   PRODUCTS TOOLBAR / SEARCH
   ============================================================ */
body .products-hero-badge { animation: msPop .6s cubic-bezier(.22,1,.36,1) both; }
body .products-hero-title { animation: msFadeUp .7s cubic-bezier(.22,1,.36,1) .08s both; }
body .products-hero-subtitle { animation: msFadeUp .7s cubic-bezier(.22,1,.36,1) .18s both; }
body .products-toolbar { animation: msFadeUp .7s cubic-bezier(.22,1,.36,1) .26s both; }
body .products-search-input:focus,
body .products-filter-select:focus { transform: translateY(-1px); }
body .products-search-icon { transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s ease; }
body .products-search:focus-within .products-search-icon { transform: translateY(-50%) scale(1.12); color: #fff; }

/* ============================================================
   FAQ
   ============================================================ */
body .faq-card {
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
body .faq-card:hover {
  transform: translateY(-4px);
  border-color: rgba(181,27,27,.4);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
body .faq-icon { transition: transform .35s cubic-bezier(.22,1,.36,1), color .3s ease; }
body .faq-card:hover .faq-icon { transform: rotate(90deg) scale(1.1); }
body .faq-question-text { transition: color .25s ease, transform .25s ease; }
body .faq-card:hover .faq-question-text { transform: translateX(3px); }

/* ============================================================
   SOCIALS
   ============================================================ */
body .social-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
body .social-card:hover { transform: translateY(-7px) scale(1.015); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
body .social-icon-wrapper { transition: transform .4s cubic-bezier(.22,1,.36,1); }
body .social-card:hover .social-icon-wrapper { transform: scale(1.12) rotate(-6deg); }
body .social-arrow { transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
body .social-card:hover .social-arrow { transform: translateX(6px); }

/* ============================================================
   FEATURES BLOCK
   ============================================================ */
body .bf-cell { transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease; }
body .bf-cell:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0,0,0,.5); border-color: rgba(181,27,27,.35); }
body .bf-shield-icon { animation: msFloat 4.5s ease-in-out infinite; }
body .bf-pulse-ring { animation: msPulseGlow 3s ease-in-out infinite; }
body .bf-badge { transition: transform .25s ease; }
body .bf-cell:hover .bf-badge { transform: translateY(-2px) scale(1.04); }

/* ============================================================
   FEEDBACK / REVIEW CARDS + BLOG CARDS
   ============================================================ */
body .feedback-card,
body .blog-post-card,
body .status-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
body .feedback-card:hover,
body .blog-post-card:hover,
body .status-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0,0,0,.5);
  border-color: rgba(181,27,27,.35);
}
body .blog-post-card img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
body .blog-post-card:hover img { transform: scale(1.07); }

/* ============================================================
   FOOTER
   ============================================================ */
body .footer-modern { animation: msFadeUp .8s cubic-bezier(.22,1,.36,1) both; }
body .footer-link {
  display: inline-block;
  transition: color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), padding-left .25s ease;
}
body .footer-link:hover { color: #fff; transform: translateX(5px); }
body .footer-link-icon { transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease; opacity: .6; }
body .footer-link:hover .footer-link-icon { transform: translateX(4px); opacity: 1; }
body .footer-logo { transition: transform .4s cubic-bezier(.22,1,.36,1), filter .4s ease; }
body .footer-logo-wrap:hover .footer-logo { transform: rotate(-8deg) scale(1.08); filter: drop-shadow(0 0 14px rgba(181,27,27,.6)); }
body .footer-icon { transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s ease; }
body .footer-icon:hover { transform: translateY(-4px) scale(1.15); color: #b51b1b; }

/* ============================================================
   MODALS / FORMS / MISC
   ============================================================ */
body .modal.fade .modal-dialog { transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease; transform: translateY(24px) scale(.97); }
body .modal.show .modal-dialog { transform: none; }

body input, body select, body textarea { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
body input:focus, body select:focus, body textarea:focus { box-shadow: 0 0 0 3px rgba(181,27,27,.16); }

body img { backface-visibility: hidden; }
body a { transition: color .22s ease; }

/* accent text shimmer utility */
.ms-shimmer {
  background: linear-gradient(90deg, #b51b1b 0%, #ff6b6b 25%, #b51b1b 50%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: msShimmer 3.5s linear infinite;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ms-reveal { opacity: 1 !important; transform: none !important; }
}

html { scroll-behavior: smooth; }


/* ============================================================
   OPT-OUT ZONE — layout-sensitive areas the animation layer
   must never touch (variant buttons, quantity steppers, selects)
   ============================================================ */
body .product-form .variants .variant,
body .product-form .variants .variant *,
body .product-form .input-group,
body .product-form .input-group *,
body .choices,
body .choices * {
  animation: none !important;
}

body .product-form .variants .variant::before,
body .product-form .variants .variant::after {
  animation: none !important;
}

/* variant hover: colour only, zero layout movement */
body .product-form .variants .variant {
  transform: none !important;
  overflow: hidden;
  height: auto !important;
  min-height: 0 !important;
  align-items: center;
}

/* any element injected into a variant that isn't part of the theme markup
   gets taken out of flow so it cannot stretch the card */
body .product-form .variants .variant > *:not(.name-stock):not(.price):not(.active-indicator) {
  position: absolute !important;
  pointer-events: none !important;
}

/* keep the two real children laid out correctly no matter what */
body .product-form .variants .variant > .name-stock {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body .product-form .variants .variant > .price {
  position: static !important;
  flex: 0 0 auto !important;
}

body .product-form .variants .variant.active { overflow: hidden; }

body .ms-reveal .product-form,
body .product-form .ms-reveal {
  opacity: 1 !important;
  transform: none !important;
}