/**
 * AR Nexos Tech - Animations & Loading States
 * CSS animations for skeletons, spinners, transitions, and scroll effects
 */

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221 83% 53.3%;
  --radius: 0.5rem;
}

.shadcn-input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 9999px;
  /* Make it fully rounded to match tailwind 'rounded-full' */
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.shadcn-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring));
  border-color: hsl(var(--primary));
}

/* ============================================
   SKELETON LOADER
   ============================================ */
@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.skeleton {
  background: linear-gradient(90deg,
      #e5e7eb 25%,
      #f3f4f6 50%,
      #e5e7eb 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.375rem;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 1;
  background: #e5e7eb;
  animation: skeleton-pulse 2s ease-in-out infinite;
}

.skeleton-title {
  height: 1.25rem;
  width: 75%;
  background: #e5e7eb;
  margin: 1rem;
  border-radius: 0.25rem;
  animation: skeleton-pulse 2s ease-in-out infinite;
  animation-delay: 0.1s;
}

.skeleton-price {
  height: 1.5rem;
  width: 40%;
  background: #e5e7eb;
  margin: 0 1rem 1rem;
  border-radius: 0.25rem;
  animation: skeleton-pulse 2s ease-in-out infinite;
  animation-delay: 0.2s;
}

.skeleton-button {
  height: 2.5rem;
  background: #e5e7eb;
  margin: 0 1rem 1rem;
  border-radius: 0.5rem;
  animation: skeleton-pulse 2s ease-in-out infinite;
  animation-delay: 0.3s;
}

/* ============================================
   SPINNER / LOADER
   ============================================ */
@keyframes spinner-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e5e7eb;
  border-top-color: #000;
  border-radius: 50%;
  animation: spinner-rotate 0.75s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

.spinner-xl {
  width: 64px;
  height: 64px;
  border-width: 4px;
}

/* Page loader overlay */
.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loader.active {
  opacity: 1;
  visibility: visible;
}

.page-loader-content {
  text-align: center;
}

.page-loader .spinner {
  margin: 0 auto 1rem;
}

/* Button loader */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spinner-rotate 0.75s linear infinite;
}

/* ============================================
   FADE & SLIDE ANIMATIONS
   ============================================ */
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out forwards;
}

.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.5s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.5s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.3s ease-out forwards;
}

/* Stagger animation delays */
.stagger-1 {
  animation-delay: 0.05s;
}

.stagger-2 {
  animation-delay: 0.1s;
}

.stagger-3 {
  animation-delay: 0.15s;
}

.stagger-4 {
  animation-delay: 0.2s;
}

.stagger-5 {
  animation-delay: 0.25s;
}

.stagger-6 {
  animation-delay: 0.3s;
}

.stagger-7 {
  animation-delay: 0.35s;
}

.stagger-8 {
  animation-delay: 0.4s;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   HOVER & INTERACTIVE EFFECTS
   ============================================ */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-brightness {
  transition: filter 0.3s ease;
}

.hover-brightness:hover {
  filter: brightness(1.1);
}

/* Button ripple effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-glow {
  display: inline-block;
  padding: 1rem 3rem;
  background: transparent;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid var(--accent);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 15px var(--accent-glow);
  opacity: 0;
  animation: slideUpFade 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  transition: all 0.3s ease;
}


.btn-ripple::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.btn-ripple:active::before {
  transform: scale(2);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/* ============================================
   PULSE & BOUNCE EFFECTS
   ============================================ */
@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Badge pulse */
.badge-pulse {
  position: relative;
}

.badge-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}

/* ============================================
   CART & WISHLIST ANIMATIONS
   ============================================ */
@keyframes cart-bounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.cart-badge-animate {
  animation: cart-bounce 0.3s ease;
}

@keyframes heart-beat {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.3);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.heart-animate {
  animation: heart-beat 0.4s ease;
}

/* ============================================
   TOAST NOTIFICATION ANIMATIONS
   ============================================ */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-enter {
  animation: slide-in-right 0.3s ease-out forwards;
}

.toast-exit {
  animation: slide-out-right 0.3s ease-in forwards;
}

/* ============================================
   MODAL / DIALOG ANIMATIONS
   ============================================ */
@keyframes modal-backdrop-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-content-scale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-backdrop {
  animation: modal-backdrop-fade 0.2s ease-out forwards;
}

.modal-content {
  animation: modal-content-scale 0.3s ease-out forwards;
}

/* ============================================
   IMAGE LOADING STATES
   ============================================ */
.image-loading {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.image-fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-fade-in.loaded {
  opacity: 1;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
@keyframes progress-fill {
  from {
    width: 0%;
  }
}

.progress-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: #000;
  border-radius: 2px;
  transition: width 0.5s ease-out;
}

.progress-bar-animated .progress-bar-fill {
  animation: progress-fill 1s ease-out forwards;
}

/* ============================================
   SKELETON GRIDS (Product Loading)
   ============================================ */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .skeleton-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .skeleton,
  .skeleton-image,
  .skeleton-title,
  .skeleton-price,
  .skeleton-button {
    animation: none;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   PREMIUM PRODUCT CARD OVERRIDES
   ============================================ */
.product-card {
  background-color: #18181B !important;
  border: 1px solid #27272A !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
  padding: 0.625rem !important;
  /* 10px padding */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.product-card:hover {
  transform: translateY(-4px) !important;
  background-color: #1F1F23 !important;
  /* Slightly lighter on hover */
  border-color: #3F3F46 !important;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6) !important;
}

/* Glass card inside header / wrapper link for image */
.product-card .img-container,
.product-card .relative.aspect-square,
.product-card .aspect-square {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border-bottom: none !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 1/1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-card:hover .img-container,
.product-card:hover .relative.aspect-square,
.product-card:hover .aspect-square {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Image zoom & lift */
.product-card .product-img,
.product-card img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0.375rem !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card:hover .product-img,
.product-card:hover img {
  transform: scale(1.05) !important;
}

/* Wishlist Heart Button Glassmorphic Style */
.product-card button.absolute.top-3.right-3 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #9CA3AF !important;
  border-radius: 9999px !important;
  padding: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.product-card button.absolute.top-3.right-3:hover {
  background-color: #ffffff !important;
  background: #ffffff !important;
  transform: scale(1.1) !important;
  color: #ef4444 !important;
}

/* Custom filled state for active wishlist items */
.product-card button.absolute.top-3.right-3 svg.fill-current.text-red-500,
.product-card button.absolute.top-3.right-3 .fill-current.text-red-500 {
  color: #ef4444 !important;
}

/* Premium Custom Badges with Sleek Gradients */
.product-card span.absolute.top-3.left-3,
.product-card span.absolute.top-2.left-2,
.product-card div.absolute.top-0.left-0 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Bestseller Badge (Deep slate gold highlight) */
.product-card span.absolute.top-3.left-3[class*="bg-[#071A2B]"],
.product-card span.absolute.top-3.left-3:contains("Best Seller") {
  background: linear-gradient(135deg, #071a2b 0%, #1e293b 100%) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* New Badge (Modern violet blue gradient) */
.product-card span.absolute.top-3.left-3[class*="bg-[#071A2B]"],
.product-card span.absolute.top-3.left-3:contains("New") {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  color: #ffffff !important;
}

/* Sale Badge (Vibrant orange-red gradient) */
.product-card span.absolute.top-3.left-3[class*="bg-[#2563EB]"],
.product-card span.absolute.top-2.left-2[class*="bg-[#2563EB]"],
.product-card span.absolute.top-3.left-3:contains("Sale"),
.product-card span.absolute.top-2.left-2[class*="bg-[#2563EB]"] {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%) !important;
  color: #ffffff !important;
}

/* Live Pulsing Dot Indicators for Stock Status */
.product-card .product-stock,
.product-card>div.p-3>div.flex.items-center.gap-1,
.product-card>div.p-4>div.flex.items-center.gap-1,
.product-card>div.p-3>div[class*="text-green"],
.product-card>div.p-3>div[class*="text-amber"],
.product-card>div.p-3>div[class*="text-red"],
.product-card>div.p-4>div[class*="text-green"],
.product-card>div.p-4>div[class*="text-amber"],
.product-card>div.p-4>div[class*="text-red"] {
  margin-top: auto !important;
  margin-bottom: 1rem !important;
  display: inline-flex !important;
}

.product-card .stock-pill,
.product-card .product-stock>span,
.product-card>div.p-3>div.flex.items-center.gap-1,
.product-card>div.p-4>div.flex.items-center.gap-1 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important;
  background-color: #27272A !important;
  color: #E4E4E7 !important;
  border: 1px solid #3F3F46 !important;
}

.product-card .stock-pill span.w-1.5.h-1.5,
.product-card .product-stock span.bg-green-500,
.product-card>div.p-3>div.flex.items-center.gap-1 span:first-child,
.product-card>div.p-4>div.flex.items-center.gap-1 span:first-child {
  width: 0.375rem !important;
  height: 0.375rem !important;
  border-radius: 9999px !important;
  background-color: #10B981 !important;
  /* green dot */
  display: inline-block !important;
  color: transparent !important;
  overflow: hidden !important;
  animation: pulse-green 2s infinite !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
}

/* Red dot for out of stock */
.product-card>div.p-3>div[class*="text-red"] span:first-child,
.product-card>div.p-4>div[class*="text-red"] span:first-child {
  background-color: #EF4444 !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Amber dot for low stock */
.product-card>div.p-3>div[class*="text-amber"] span:first-child,
.product-card>div.p-4>div[class*="text-amber"] span:first-child {
  background-color: #F59E0B !important;
  animation: none !important;
  box-shadow: none !important;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Product Card Typography & Brand Highlight */
.product-card .product-brand,
.product-card .product-info>p:first-child,
.product-card>div.p-3>p:first-child,
.product-card>div.p-4>p:first-child,
.product-card>div.p-4>span:first-child,
.product-card span.text-xs.font-medium.text-gray-500,
.product-card span[class*="text-gray-500"] {
  color: #A1A1AA !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.product-card h3,
.product-card .product-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.375 !important;
  margin-bottom: 0.75rem !important;
  height: 42px !important;
}

.product-card h3 a,
.product-card .product-name a {
  transition: color 0.3s ease !important;
  font-weight: 700 !important;
  color: #F4F4F5 !important;
  line-height: 1.4 !important;
}

.product-card:hover h3 a,
.product-card:hover .product-name a {
  color: #60A5FA !important;
}

/* Premium Card Price Details */
.product-card .price-current,
.product-card .price-tag,
.product-card .product-price span.font-bold,
.product-card .product-price span.text-black {
  color: #FBBF24 !important;
  /* Premium gold color */
  font-size: 17px !important;
  font-weight: 800 !important;
}

.product-card .price-original,
.product-card .product-price span.line-through,
.product-card span.text-sm.text-gray-400.line-through {
  color: #71717A !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  margin-left: 0.5rem !important;
}

/* Stack prices vertically next to the Add button on other pages */
.product-card .product-price>div.flex,
.product-card .product-price>div.items-baseline,
.product-card div.flex.items-center.justify-between>div.flex,
.product-card div.flex.items-center.justify-between>div.items-baseline {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.125rem !important;
}

.product-card .product-price>div.flex span,
.product-card .product-price>div.items-baseline span,
.product-card div.flex.items-center.justify-between>div.flex span,
.product-card div.flex.items-center.justify-between>div.items-baseline span {
  margin-left: 0 !important;
}

/* Premium Card Add to Cart Button */
.product-card button.btn-add-cart,
.product-card .btn-add-cart,
.product-card button[onclick*="Cart?.add"],
.product-card button[onclick*="Cart.add"],
.product-card button.mt-4.w-full {
  background-color: #2563EB !important;
  /* Highly visible Royal Blue */
  background-image: none !important;
  background: #2563EB !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* Force full width ONLY for home page, search page and wishlist page where it is a separate block */
.product-card button.w-full,
.product-card .w-full.btn-add-cart,
.product-card .btn-add-cart.w-full,
.product-card button.mt-4.w-full,
.product-card>.product-info>button.btn-add-cart,
.product-card>div.product-info>button.btn-add-cart,
.product-card>div.p-4>div.flex.gap-2>button,
.product-card>div.p-4>button.btn-add-cart {
  width: 100% !important;
}

/* Styling for buttons next to price (side-by-side) */
.product-card .product-price button.btn-add-cart,
.product-card .product-price .btn-add-cart,
.product-card .product-price button[onclick*="Cart?.add"],
.product-card .product-price button[onclick*="Cart.add"],
.product-card div.flex.items-center.justify-between button.btn-add-cart,
.product-card div.flex.items-center.justify-between button[onclick*="Cart?.add"],
.product-card div.flex.items-center.justify-between button[onclick*="Cart.add"] {
  width: auto !important;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.875rem !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  height: 2.5rem !important;
}

.product-card:hover button.btn-add-cart,
.product-card:hover .btn-add-cart,
.product-card:hover button[onclick*="Cart?.add"],
.product-card:hover button[onclick*="Cart.add"],
.product-card:hover button.mt-4.w-full {
  background-color: #1D4ED8 !important;
  background: #1D4ED8 !important;
  background-image: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.4) !important;
}

.product-card:hover button.btn-add-cart:active,
.product-card:hover button[onclick*="Cart?.add"]:active,
.product-card:hover button.mt-4.w-full:active {
  transform: translateY(0) scale(0.98) !important;
}

.product-card button.btn-add-cart:disabled,
.product-card button[onclick*="Cart?.add"]:disabled,
.product-card button[onclick*="Cart.add"]:disabled,
.product-card button.mt-4.w-full:disabled,
.product-card .btn-add-cart:disabled {
  background-color: #27272A !important;
  background: #27272A !important;
  color: #71717A !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Hide auto-injected variants list if any */
.product-card .product-variants {
  display: none !important;
}

/* -----------------------------------------------------------
   GLOBAL COMPACT LAYOUT OVERRIDE (For all pages except index)
   Applies absolute positioning to move stock next to brand,
   reduces paddings, and removes the horizontal line.
----------------------------------------------------------- */

/* Make the info container relative for absolute positioning */
.product-card>div.flex-1 {
  position: relative !important;
  padding: 0.75rem 0.625rem 0.25rem !important;
  /* pt-3 px-2.5 pb-1 */
}

/* Brand Name Spacing */
.product-card>div.flex-1>p:first-child {
  margin-bottom: 0.25rem !important;
  font-size: 10px !important;
  width: 55% !important;
  /* Prevent overlapping with stock badge */
}

/* Product Name Height */
.product-card>div.flex-1>h3 {
  margin-bottom: 0.5rem !important;
  height: 38px !important;
  font-size: 13.5px !important;
}

/* Absolutely position the Stock Badge wrapper to the top right */
.product-card>div.flex-1 .product-stock {
  position: absolute !important;
  top: 0.6rem !important;
  right: 0.6rem !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Remove dynamic py-1 px-2 padding from JS */
  background: transparent !important;
  /* Remove dynamic background from JS */
  border: none !important;
}

/* Reduce Stock Pill size to match the small "IN" badge */
.product-card>div.flex-1 .stock-pill {
  padding: 0.15rem 0.4rem !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  gap: 0.25rem !important;
}

/* Remove Footer top border and reduce padding */
.product-card>div.flex-1>div.mt-auto {
  border-top: none !important;
  padding-top: 0.25rem !important;
}

/* Adjust image aspect ratio globally to 5/4 for shorter cards */
.product-card .img-container.aspect-square {
  aspect-ratio: 5 / 4 !important;
}

/* ============================================
   MARQUEE / SCROLLING TEXT BAR
   ============================================ */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 20s linear infinite;
  width: max-content;
}

.animate-marquee:hover {
  animation-play-state: paused;
}