/* Pick Fast storefront extras */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { overflow-x: hidden; touch-action: manipulation; }

@keyframes shimmer { 100% { transform: translateX(100%); } }
.shimmer { position: relative; overflow: hidden; background: #e4e4e7; }
.shimmer::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 1.4s infinite;
}

@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.slide-up { animation: slideUp .25s ease-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn .2s ease-out; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Order tracking timeline */
.track { display:flex; justify-content:space-between; position:relative; margin:6px 2px 2px; }
.track::before { content:''; position:absolute; top:13px; left:12%; right:12%; height:3px; background:#e4e4e7; z-index:0; }
.track-fill { position:absolute; top:13px; left:12%; height:3px; background:#16a34a; z-index:0; transition:width .5s ease; }
.tstep { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; flex:1; font-size:9px; font-weight:700; color:#a1a1aa; text-align:center; }
.tdot { width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid #e4e4e7; display:flex; align-items:center; justify-content:center; margin-bottom:3px; font-size:12px; }
.tstep.done .tdot { background:#16a34a; border-color:#16a34a; color:#fff; }
.tstep.done { color:#16a34a; }
.tstep.active .tdot { background:#EA580C; border-color:#EA580C; color:#fff; animation:tpulse 1.4s infinite; }
.tstep.active { color:#EA580C; }
@keyframes tpulse { 0%{box-shadow:0 0 0 0 rgba(234,88,12,.5);} 70%{box-shadow:0 0 0 8px rgba(234,88,12,0);} 100%{box-shadow:0 0 0 0 rgba(234,88,12,0);} }

/* side menu drawer slide-in */
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.slide-in { animation: slideIn .22s ease-out; }