/* ---------------- RESET & BASE ---------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: hsl(16, 90%, 55%);
  --primary-dark: hsl(16, 90%, 45%);
  --secondary: hsl(174, 62%, 47%);
  --background: hsl(0, 0%, 98%);
  --foreground: hsl(222, 47%, 11%);
  --card: hsl(0, 0%, 100%);
  --border: hsl(214, 32%, 91%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215, 16%, 47%);
  --success: hsl(142, 71%, 45%);
  --warning: hsl(38, 92%, 50%);
  --destructive: hsl(0, 84%, 60%);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--background);
  color: var(--foreground);
}



/* ==============================
    Top Listing Slider
   ============================== */


.toplisting-grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;          /* ✅ allows manual scroll */
  scroll-behavior: smooth;
  cursor: grab;
}


.toplisting-grid:active {
  cursor: grabbing;
}

/* Hide scrollbar but keep scrolling */
.toplisting-grid::-webkit-scrollbar {
  display: none;
}

.product {
  min-width: 170px;          /* ✅ prevents shrinking */
  flex-shrink: 0;
}









/* ---------------- PRODUCT CARD ---------------- */
.product {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  width: 240px; /* Fixed width for slider consistency */
  flex-shrink: 0;
  z-index: 1;
}

.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  z-index: 5;
}

/* ---------------- IMAGE & OVERLAYS ---------------- */
.product-img {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-img img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.product:hover .product-img img {
  transform: scale(1.05);
}




.discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;

  font-size: 13px;
  font-weight: 600;

  color: var(--primary);
  background-color: hsl(16, 90%, 95%); /* lighter primary */

  border-radius: 6px;
  line-height: 1;
  position: absolute;
  top: 5px;
  left: 5px;
}



/* ---------------- PRODUCT BODY ---------------- */
.product-body {
  padding: 0.8rem;
}



.product-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
  
  /* --- Multi-line Truncation Logic --- */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Show exactly 2 lines before adding ellipsis */
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* Ensure consistent card height even if name is only 1 line */
  height: 2.6em; 
  line-height: 1.3em;
}


.product-prices {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


.product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.product-price.original-price{
  font-size: 0.8rem;
  color: var(--muted-foreground);
  text-decoration: line-through;
  font-weight: 500;
}

.toplisting-grid .product-rating {
  color: var(--primary);
  font-size: 0.9rem; /* readable */
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.review-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.toplisting-grid .product{
  min-width: 180px;   /* smaller width for mobile */
  flex: 0 0 180px;

}



@media (max-width: 768px) {

  /* -----------------------------
     Top Listing Cards - Mobile
     ----------------------------- */
  .toplisting-grid .product {
    min-width: 160px;   /* smaller width for mobile */
    flex: 0 0 160px;    /* prevent shrinking */
  }

  .product-img img {
    height: 120px;      /* smaller image */
  }

  .toplisting-grid .product-price,
  .product-price{
    font-size: 0.8rem; /* adjust price text */
  }
  

  .product-name a {
    font-size: 0.85rem;
    height: 2.4em;
  }

  .discount-badge {
    font-size: 11px;    /* smaller badge text */
    padding: 3px 6px;
  }

  .toplisting-grid .original-price{
    font-size: 0.65rem; /* adjust original price */
    font-weight: 500;
  }
  .toplisting-grid .product-body {
    padding: 0.6rem; /* reduce padding */
  }
}


/* ---------------- MAIN PAGE TOP LISTINGS ---------------- */
.toplisting-grid.main-page {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    margin-top: 25px;
    overflow-x: visible; /* Remove horizontal scrolling */
    cursor: default; /* Remove grab cursor */
}

/* Override slider behavior for main page */
.toplisting-grid.main-page .product {
    min-width: auto; /* Remove fixed min-width */
    flex: none; /* Remove flex properties */
    width: 100%; /* Take full grid cell width */
    cursor: pointer; /* Change to pointer like product cards */
}

/* Match product card styling */
.toplisting-grid.main-page .product {
    background: var(--card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

.toplisting-grid.main-page .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}




/* Ensure product-body padding matches product-info */
.toplisting-grid.main-page .product .product-body {
    padding: 0.5rem;
}

/* Style product name to match */
.toplisting-grid.main-page .product .product-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--foreground);
    overflow: hidden;
}

.toplisting-grid.main-page .product .product-name a {
    color: var(--foreground);
    text-decoration: none;
}

/* Rating styling to match */
.toplisting-grid.main-page .product .product-rating {
    color: var(--primary);
}

.toplisting-grid.main-page .product .review-count {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}


.new-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--muted);
  padding: 2px 6px;
  border-radius: 6px;
}

/* Price styling to match */
.toplisting-grid.main-page .product .product-prices {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toplisting-grid.main-page .product .product-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.toplisting-grid.main-page .product .original-price {
    font-size: 0.7rem;
    color: var(--muted-foreground);
    text-decoration: line-through;
    font-weight: 500;
}

/* Mobile responsiveness for main page top listings */
@media (max-width: 768px) {
    .toplisting-grid.main-page {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        padding: 1rem;
    }
    

.toplisting-grid.main-page{ 
  margin-top: 5px;
}
    
    .toplisting-grid.main-page .product {
        border-radius: 10px;
    }
    
    .toplisting-grid.main-page .product-img img {
        height: 120px;
    }
    
    .toplisting-grid.main-page .product .product-body {
        padding: 0.6rem;
    }
    
    .toplisting-grid.main-page .product .product-price {
        font-size: 0.8rem;
    }
    
    .toplisting-grid.main-page .product .original-price {
        font-size:0.65rem;
    }
    
    .toplisting-grid.main-page .product .discount-badge {
        font-size: 10px;
        padding: 3px 6px;
    }
}

.skeleton-card {
  background: #f0f0f0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 250px;
  animation: pulse 1.5s infinite;
}

.skeleton-image {
  height: 150px;
  background: #ddd;
  border-radius: 8px;
}

.skeleton-text {
  height: 20px;
  background: #ddd;
  border-radius: 4px;
}

.skeleton-title {
  width: 70%;
}

.skeleton-price {
  width: 40%;
}

@keyframes pulse {
  0% { background-color: #eee; }
  50% { background-color: #ddd; }
  100% { background-color: #eee; }
}