/* ============================================================
   THEME 4 — "HOLO GLASS" (?theme=4)
   Kaca holografik di atas matte black: panel berembun blur,
   cahaya lembut mengikuti pointer, kilau menyapu permukaan
   seperti akrilik asli. Identitas = material kaca, bukan gerak
   agresif (tanpa tilt/magnetic/decode).
   COVERAGE PASS 2: efek menyeluruh — navbar kaca tegas, konten
   legal/FAQ jadi box glass, shop/PDP/cart/checkout/account/admin
   semua kebagian. Token baru hanya --th-*.
   - Animasi hanya transform/opacity/filter/box-shadow/color/
     background-color/border-color/text-shadow (paint only, CLS 0).
   - Properti statis (padding chip, border, dsb) dipasang sejak
     load — bukan dianimasikan.
   - Easing tegas (quint/quart-out), NO bounce.
   ============================================================ */
:root{
  --th-dur:.6s;
  --th-ease:cubic-bezier(.22,1,.36,1);   /* quint-out — reveal/sheen */
  --th-ease2:cubic-bezier(.25,1,.5,1);   /* quart-out — micro hover */
}

/* ============================================================
   1. REVEAL SCAFFOLD (anti-konten-hilang)
   Hidden-state HANYA saat html.th-js; th-safety auto-reveal
   1.5s kalau JS gagal menambah .th-in.
   ============================================================ */
html.th-js .hero>*,
html.th-js .trust-strip,
html.th-js .section-header,
html.th-js .product-card,
html.th-js .bundle-card,
html.th-js .auth-card,
html.th-js .stat-card,
html.th-js .contact-card,
html.th-js .review-item{
  opacity:0;
  transform:translateY(16px);
  filter:blur(3px);
  animation:th-safety .5s var(--th-ease) 1.5s forwards;
}
html.th-js .th-in{
  animation:none;
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity var(--th-dur) var(--th-ease) var(--th-delay,0s),
    transform var(--th-dur) var(--th-ease) var(--th-delay,0s),
    filter var(--th-dur) var(--th-ease) var(--th-delay,0s);
}
@keyframes th-safety{to{opacity:1;transform:none;filter:none}}

/* Card yang sudah ter-reveal: transisi hover (transform/shadow)
   tetap renyah, tanpa delay stagger. */
html.th-js .product-card.th-in,
html.th-js .bundle-card.th-in{
  transition:
    opacity var(--th-dur) var(--th-ease) var(--th-delay,0s),
    filter var(--th-dur) var(--th-ease) var(--th-delay,0s),
    transform .3s var(--th-ease2),
    box-shadow .3s var(--th-ease2);
}
/* Hover/active transform card harus menang atas `html.th-js .th-in`
   (specificity 0,2,1) yang me-reset transform:none. */
html.th-js .product-card.th-in:hover,
html.th-js .bundle-card.th-in:hover{transform:translateY(-4px)}
html.th-js .product-card.th-in:active,
html.th-js .bundle-card.th-in:active{transform:translateY(-1px) scale(.99)}
/* Fix coverage pass 2: stat-card.th-in sempat kehilangan transisi
   hover border/box-shadow (kalah oleh transition-list .th-in). */
html.th-js .stat-card.th-in{
  transition:
    opacity var(--th-dur) var(--th-ease) var(--th-delay,0s),
    transform var(--th-dur) var(--th-ease) var(--th-delay,0s),
    filter var(--th-dur) var(--th-ease) var(--th-delay,0s),
    border-color .3s var(--th-ease2),
    box-shadow .3s var(--th-ease2);
}

/* ============================================================
   2. GLASS HEADER / NAVBAR — kaca harus TERLIHAT.
   Blur naik 15px + saturate; hairline gradient cyan di bawah
   header (statis); nav jadi chip kaca. Tinggi header TIDAK
   berubah (padding chip statis sejak load).
   ============================================================ */
.site-header{
  background:rgba(10,10,10,.92); /* fallback solid (kontras aman) */
  transition:border-color .3s var(--th-ease2),box-shadow .3s var(--th-ease2);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{
    background:rgba(10,10,10,.55);
    -webkit-backdrop-filter:blur(15px) saturate(1.3);
    backdrop-filter:blur(15px) saturate(1.3);
  }
}
/* Hairline holo di bawah header — statis, opacity halus */
.site-header::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 4%,rgba(0,217,255,.34) 30%,rgba(242,242,242,.16) 50%,
    rgba(0,217,255,.34) 70%,transparent 96%);
  opacity:.65;
}
html.th-scrolled .site-header{
  border-bottom-color:rgba(0,217,255,.20);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
html.th-scrolled .site-header::after{opacity:1}
.site-header::after{transition:opacity .4s var(--th-ease2)}

/* Nav link = chip kaca (padding statis, BUKAN dianimasikan) */
.site-header nav a{
  display:inline-block;
  margin:0 4px;
  padding:6px 10px;
  border-radius:var(--radius);
  transition:color .2s var(--th-ease2),transform .25s var(--th-ease2),
    background-color .25s var(--th-ease2),border-color .25s var(--th-ease2);
}
.site-header nav a:hover{
  transform:translateY(-1px);
  background-color:rgba(242,242,242,.07);
}
.site-header nav a:active{transform:scale(.96)}
/* Cart = chip ber-border (paling penting di nav) */
.site-header nav a.nav-cart{
  border:var(--hair);
  padding:6px 12px;
  background-color:rgba(242,242,242,.04);
}
.site-header nav a.nav-cart:hover{
  border-color:rgba(0,217,255,.45);
  background-color:rgba(0,217,255,.07);
}
/* Brand + dot glow halus */
.brand{display:inline-block;transition:transform .25s var(--th-ease2)}
.brand:hover{transform:translateY(-1px)}
.brand:active{transform:scale(.97)}
.brand .dot{text-shadow:0 0 10px rgba(0,217,255,.65),0 0 24px rgba(0,217,255,.25)}

/* ============================================================
   3. GLASS PANELS lintas halaman (statis, zero animasi/JS)
   ============================================================ */
.checkout-summary,.spec-box,.auth-card,.stat-card,.pay-box,.contact-card,.addr-card,.rev-mod{
  background:var(--black-elev); /* fallback solid */
  box-shadow:inset 0 1px 0 rgba(242,242,242,.06); /* highlight kaca atas */
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .checkout-summary,.spec-box,.auth-card,.stat-card,.pay-box,.contact-card,.addr-card,.rev-mod{
    background:rgba(18,18,18,.55);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}

/* ============================================================
   3b. KONTEN/LEGAL/FAQ/ABOUT = BOX GLASS (bukan tulisan polos)
   Satu panel besar per halaman → blur murah.
   ============================================================ */
.legal{
  background:var(--black-elev); /* fallback solid */
  border:var(--hair);
  border-radius:var(--radius);
  padding:var(--sp-5);
  box-shadow:
    inset 0 1px 0 rgba(242,242,242,.06),
    0 12px 36px rgba(0,0,0,.40);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .legal{
    background:rgba(18,18,18,.5);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
}
/* Heading legal = aksen tactical */
.legal h3{
  border-left:2px solid var(--cyan-dim);
  padding-left:12px;
}
/* Tanggal efektif = chip mono kecil */
.legal .effective{
  display:inline-block;
  border:var(--hair);
  border-radius:var(--radius);
  padding:4px 10px;
  background:rgba(242,242,242,.03);
}
/* FAQ: kartu glass nested per kategori */
.faq-cat{
  background:rgba(242,242,242,.03);
  border:var(--hair);
  border-radius:var(--radius);
  padding:var(--sp-4);
}
.faq-q{
  color:rgba(242,242,242,.82);
  transition:color .2s var(--th-ease2);
}
.faq-q::before{
  content:"> ";
  font-family:var(--font-mono);
  color:var(--cyan-dim);
  transition:color .2s var(--th-ease2);
}
.faq-q:hover{color:var(--white)}
.faq-q:hover::before{color:var(--cyan)}
/* Contact rows */
.contact-card .row{
  transition:background-color .25s var(--th-ease2),transform .25s var(--th-ease2);
}
.contact-card .row:hover{
  background-color:rgba(242,242,242,.04);
  transform:translateX(2px);
}

/* ============================================================
   4. CURSOR-LIGHT GLOBAL (div.th-light dibuat JS; gate pointer:fine)
   ============================================================ */
.th-light{
  position:fixed;top:0;left:0;
  width:560px;height:560px;            /* statis, tidak dianimasikan */
  pointer-events:none;z-index:80;
  mix-blend-mode:screen;
  background:radial-gradient(closest-side,
    rgba(0,217,255,.045),rgba(242,242,242,.02) 45%,transparent 70%);
  opacity:0;
  transition:opacity .4s var(--th-ease2);
}
.th-light.th-on{opacity:1;will-change:transform}

/* ============================================================
   5. BASELINE — hover "zoom/touch" semua clickable + :active kecil
   Selector .btn global: berlaku home/shop/PDP/cart/checkout/
   auth/account/admin/review (tidak ada specificity yang kalah —
   app.css hanya pakai .btn-* satu class).
   ============================================================ */
.btn{
  transition:
    transform .22s var(--th-ease2),
    box-shadow .22s var(--th-ease2),
    background-color .22s var(--th-ease2),
    border-color .22s var(--th-ease2),
    color .22s var(--th-ease2),
    filter .22s var(--th-ease2);
}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(0,217,255,.25)}
.btn-primary{position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(0,217,255,.18)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 24px rgba(0,217,255,.28)}
.btn-secondary:hover{background-color:rgba(0,217,255,.08)}
.btn-ghost:hover{border-color:rgba(242,242,242,.40);background-color:rgba(242,242,242,.04)}
.btn-danger:hover{filter:brightness(1.08)}

/* Cards (semua halaman: home/shop/collection/theme-preview) */
.product-card,.bundle-card{
  position:relative;
  overflow:hidden; /* clip sheen sweep */
  box-shadow:
    inset 0 1px 0 rgba(242,242,242,.05),
    0 2px 6px rgba(0,0,0,.35),
    0 10px 28px rgba(0,0,0,.45);
  transition:transform .3s var(--th-ease2),box-shadow .3s var(--th-ease2);
}
.product-card:hover,.bundle-card:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(242,242,242,.08),
    0 4px 10px rgba(0,0,0,.4),
    0 18px 44px rgba(0,0,0,.55);
}
.product-card:active,.bundle-card:active{transform:translateY(-1px) scale(.99)}
/* Badge ikut "menyala" saat card di-hover (badge-low/danger dibiarkan) */
.badge{transition:border-color .25s var(--th-ease2),color .25s var(--th-ease2)}
.product-card:hover .badge:not(.badge-low){border-color:rgba(242,242,242,.38)}

/* Pills / filter / breadcrumb */
.pill-filter{
  display:inline-block;
  background-color:rgba(18,18,18,.55);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.05);
  transition:transform .22s var(--th-ease2),color .22s var(--th-ease2),
    border-color .22s var(--th-ease2),background-color .22s var(--th-ease2);
}
/* Hover hanya pill non-aktif — .active TETAP cyan solid */
.pill-filter:not(.active):hover{
  transform:translateY(-1px);
  color:var(--white);
  border-color:rgba(242,242,242,.35);
  background-color:rgba(242,242,242,.06);
}
.pill-filter.active{background-color:var(--cyan);box-shadow:0 2px 14px rgba(0,217,255,.25)}
.pill-filter.active:hover{transform:translateY(-1px)}
.pill-filter:active{transform:scale(.96)}
.breadcrumb a{display:inline-block;transition:color .2s var(--th-ease2),transform .22s var(--th-ease2)}
.breadcrumb a:hover{transform:translateY(-1px)}
.breadcrumb a:active{transform:scale(.96)}

/* Shop/collection toolbar = bar glass (statis) */
.shop-toolbar{
  background:rgba(18,18,18,.5);
  border:var(--hair);
  border-radius:var(--radius);
  padding:10px var(--sp-3);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.05);
}

/* Footer */
.site-footer{position:relative}
.site-footer::before{
  content:"";
  position:absolute;top:-1px;left:0;right:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 6%,rgba(0,217,255,.26) 38%,rgba(242,242,242,.12) 50%,
    rgba(0,217,255,.26) 62%,transparent 94%);
}
.footer-grid strong{border-bottom:var(--hair);padding-bottom:6px}
.footer-grid a{transition:color .2s var(--th-ease2),transform .25s var(--th-ease2)}
.footer-grid a:hover{transform:translateX(3px);color:var(--white)}
.footer-grid a:active{transform:translateX(1px) scale(.98)}
.foot-bottom a{display:inline-block;transition:color .2s var(--th-ease2),transform .22s var(--th-ease2)}
.foot-bottom a:hover{transform:translateY(-1px);color:var(--white)}
.foot-bottom a:active{transform:scale(.97)}

/* Account / admin nav = chip (padding statis) */
.account-nav a{
  padding:8px 10px;
  border-radius:var(--radius);
  transition:color .2s var(--th-ease2),transform .25s var(--th-ease2),
    border-color .25s var(--th-ease2),background-color .25s var(--th-ease2);
}
.account-nav a:hover{
  transform:translateX(2px);
  color:var(--white);
  border-color:rgba(0,217,255,.30);
  background-color:rgba(242,242,242,.05);
}
.account-nav a:active{transform:translateX(1px) scale(.98)}
/* Order rows account: lift kaca tipis */
.acc-order{transition:background-color .25s var(--th-ease2),transform .25s var(--th-ease2),box-shadow .25s var(--th-ease2)}
.acc-order:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.06);
}
.acc-order a{display:inline-block;transition:transform .22s var(--th-ease2),color .22s var(--th-ease2)}
.acc-order a:hover{transform:translateY(-1px)}
.acc-order a:active{transform:scale(.96)}
.addr-card,.stat-card,.rev-mod{transition:border-color .3s var(--th-ease2),box-shadow .3s var(--th-ease2)}
.addr-card:hover,.stat-card:hover,.rev-mod:hover{
  border-color:rgba(242,242,242,.20);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.10),0 6px 20px rgba(0,0,0,.4);
}

/* Cart / qty (CSS-only — tanpa listener JS) */
.cart-remove{transition:color .2s var(--th-ease2),transform .2s var(--th-ease2),text-shadow .2s var(--th-ease2)}
.cart-remove:hover{transform:scale(1.12);text-shadow:0 0 14px rgba(255,77,77,.50)}
.cart-remove:active{transform:scale(.94)}
.qty-stepper{background:rgba(18,18,18,.55)}
.qty-stepper button{
  background:rgba(242,242,242,.04);
  transition:background-color .2s var(--th-ease2),color .2s var(--th-ease2),transform .15s var(--th-ease2);
}
.qty-stepper button:hover{background-color:rgba(242,242,242,.10);color:var(--cyan)}
.qty-stepper button:active{transform:scale(.92)}

/* Row hover tint (paint-only) lintas halaman.
   .stock-table baris pertama = header th → dibiarkan netral. */
.spec-box .spec-row,.cart-row,.stock-table tr:not(:first-child),.radio-row{
  transition:background-color .25s var(--th-ease2);
}
.spec-box .spec-row:hover,.cart-row:hover,
.stock-table tr:not(:first-child):hover,.acc-order:hover,.radio-row:hover{
  background-color:rgba(242,242,242,.035);
}

/* ============================================================
   5b. PDP — galeri, add-form, harga, trust chip
   ============================================================ */
.pdp-gallery .product-img-placeholder{
  box-shadow:
    inset 0 1px 0 rgba(242,242,242,.07),
    0 14px 40px rgba(0,0,0,.5);
}
.add-form{
  border:var(--hair);
  border-radius:var(--radius);
  padding:var(--sp-3);
  background:rgba(18,18,18,.45);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.05);
}
.pdp-price{text-shadow:0 0 22px rgba(0,217,255,.16)}
.trust-mini{
  display:inline-flex;
  border:var(--hair);
  border-radius:var(--radius);
  padding:8px 12px;
  background:rgba(242,242,242,.03);
}

/* ============================================================
   5c. CHECKOUT / ORDER — fieldset glass, legend chip, VA glow
   ============================================================ */
.checkout fieldset{
  background:rgba(18,18,18,.45);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.05);
}
.checkout legend{
  border:var(--hair);
  border-radius:var(--radius);
  padding:4px 10px;
  background:var(--black);
}
.va-number{
  display:inline-block;
  border:1px solid rgba(0,217,255,.30);
  border-radius:var(--radius);
  padding:8px 14px;
  font-size:20px;
  letter-spacing:.08em;
  background:rgba(0,217,255,.05);
  text-shadow:0 0 16px rgba(0,217,255,.35);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.06),0 0 24px rgba(0,217,255,.08);
}
.countdown{
  display:inline-block;
  border:var(--hair);
  border-radius:var(--radius);
  padding:4px 10px;
  margin-top:var(--sp-2);
  background:rgba(242,242,242,.03);
  font-size:12px;
}

/* ============================================================
   6. INPUT GLOBAL (text/email/password/number/select/textarea —
   termasuk admin/ship-form/stock-adjust/auth/checkout/cart).
   Background SOLID-translusen TANPA backdrop-filter per-input
   (blur per-input mahal). Scoped selector ikut ditulis supaya
   menang dari app.css (.checkout input, .auth-card input, dst).
   ============================================================ */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=tel],select,textarea,.qty-input,
.checkout input[type=text],.checkout input[type=email],.checkout textarea,
.auth-card input,.auth-card textarea,.auth-card select,
.sort-form select,.cart-qty .qty-input,.ship-form input,.stock-adjust input{
  background-color:rgba(18,18,18,.55);
  border:var(--hair);
  box-shadow:inset 0 1px 0 rgba(242,242,242,.05);
  transition:border-color .25s var(--th-ease2),box-shadow .25s var(--th-ease2),
    background-color .25s var(--th-ease2);
}
/* Stepper PDP: kembalikan border kiri/kanan saja (statis) */
.qty-stepper .qty-input{border:0;border-left:var(--hair);border-right:var(--hair)}
input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,
input[type=number]:hover,input[type=search]:hover,input[type=tel]:hover,
textarea:hover,select:hover,.qty-input:hover,
.checkout input[type=text]:hover,.checkout input[type=email]:hover,.checkout textarea:hover,
.auth-card input:hover,.auth-card textarea:hover,.auth-card select:hover{
  border-color:rgba(242,242,242,.28);
  background-color:rgba(18,18,18,.70);
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,
input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,
textarea:focus,select:focus,.qty-input:focus,
.checkout input[type=text]:focus,.checkout input[type=email]:focus,.checkout textarea:focus,
.auth-card input:focus,.auth-card textarea:focus,.auth-card select:focus{
  outline:1px solid var(--cyan);
  border-color:var(--cyan-dim);
  box-shadow:0 0 0 3px rgba(0,217,255,.10),0 0 18px rgba(0,217,255,.08);
}

/* ============================================================
   7. SHEEN SWEEP "lens coating" (::before; transition hanya di
   :hover = tanpa sweep balik). Card produk/bundle SEMUA halaman
   + galeri PDP + tombol primary. Tidak di .btn-danger.
   ============================================================ */
.btn-primary::before,.product-card::before,.bundle-card::before,
.product-img-placeholder::before{
  content:"";
  position:absolute;top:-20%;bottom:-20%;left:0;width:45%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-160%) skewX(-18deg);
}
.btn-primary:hover::before,
.product-card:hover::before,
.bundle-card:hover::before,
.product-img-placeholder:hover::before{
  transform:translateX(320%) skewX(-18deg);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
/* Placeholder dalam card: sheen cukup di level card (hindari dobel) */
.product-card .product-img-placeholder::before{content:none}

/* ============================================================
   8. WHITE GLARE SPOTLIGHT (::after; kesan kaca, bukan neon)
   --th-mx/--th-my di-set JS (delegated + rAF); gate pointer:fine.
   ============================================================ */
@media (pointer:fine){
  html.th-js .product-card::after,
  html.th-js .bundle-card::after{
    content:"";
    position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(260px circle at
      calc(var(--th-mx,.5)*100%) calc(var(--th-my,.5)*100%),
      rgba(242,242,242,.05),transparent 70%);
    opacity:0;
    transition:opacity .35s var(--th-ease);
  }
  html.th-js .product-card:hover::after,
  html.th-js .bundle-card:hover::after{opacity:1}
}

/* ============================================================
   9. IDLE FLOAT AMBIENT (oscillation pelan, murni translate,
   alternate — bukan bounce). Pause saat card hover.
   ============================================================ */
.product-img-placeholder .ph-dot{
  animation:th-float 7s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes th-float{
  from{transform:translate(-50%,calc(-50% - 22px))}
  to{transform:translate(-50%,calc(-50% - 25px))}
}
.product-card:hover .ph-dot,
.product-img-placeholder:hover .ph-dot{animation-play-state:paused}

/* Hero: glow tipis paint-only */
.hero h1{text-shadow:0 0 32px rgba(242,242,242,.10)}

/* ============================================================
   10. REDUCED MOTION — semua animasi/reveal/follower/transform
   MATI, konten langsung tampil. (Blok terakhir file.)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html.th-js .hero>*,
  html.th-js .trust-strip,
  html.th-js .section-header,
  html.th-js .product-card,
  html.th-js .bundle-card,
  html.th-js .auth-card,
  html.th-js .stat-card,
  html.th-js .contact-card,
  html.th-js .review-item{
    opacity:1!important;transform:none!important;filter:none!important;
    animation:none!important;transition:none!important;
  }
  *,*::before,*::after{animation:none!important;transition:none!important}
  .th-light{display:none!important}
  .btn-primary::before,.product-card::before,.bundle-card::before,
  .product-img-placeholder::before,
  .product-card::after,.bundle-card::after{display:none!important}
  .ph-dot,.brand .dot{animation:none!important}
  .btn:hover,.btn:active,.product-card:hover,.bundle-card:hover,
  .product-card:active,.bundle-card:active,
  .site-header nav a:hover,.site-header nav a:active,.brand:hover,.brand:active,
  .pill-filter:not(.active):hover,.pill-filter.active:hover,.pill-filter:active,
  .breadcrumb a:hover,.breadcrumb a:active,
  .footer-grid a:hover,.footer-grid a:active,.foot-bottom a:hover,.foot-bottom a:active,
  .account-nav a:hover,.account-nav a:active,
  .acc-order:hover,.acc-order a:hover,.acc-order a:active,
  .contact-card .row:hover,
  .cart-remove:hover,.cart-remove:active,
  .qty-stepper button:active{transform:none!important}
}