/* ================================
   🏠 HOME – PRODUCT CATEGORY SECTIONS
================================ */

:root {
    --primary: hsl(16, 90%, 55%);
    --primary-light: hsl(16, 90%, 96%);
    --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%);
}

/* Individual category block */
.category-section {
    width: 100%;
    margin-bottom: 10px;
}

/* Section header (title + view all) */
.category-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}


/* ================================
   🧱 PRODUCT GRID
================================ */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}





/* ================================
   🎨 CATEGORY HEADER COLORS (AUTO)
   Red · Green · Blue · OrangeRed
================================ */

.category-section .section-header {
    padding: 4px 18px;
    border-radius: 0px;
    color: #fff;
}


/* RED */
.category-section:nth-of-type(4n + 1) .section-header {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

/* GREEN */
.category-section:nth-of-type(4n + 2) .section-header {
    background: linear-gradient(135deg, #15803d, #22c55e);
}

/* BLUE */
.category-section:nth-of-type(4n + 3) .section-header {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

/* ORANGERED */
.category-section:nth-of-type(4n) .section-header {
    background: linear-gradient(135deg, #c2410c, #f97316);
}

/* Improve contrast */
.category-section .section-title,
.category-section .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}


/* ================================
   🧭 CATEGORY PRODUCT SLIDER
================================ */

.category-section .product-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
}

.category-section .product-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Fix card width for sliding */
.category-section .product-card {
    flex: 0 0 173px;
}


/* ================================
   ⚙️ mobile responsiveness
================================ */


@media (max-width: 1024px) {
  .category-section .product-card {
    flex: 0 0 160px;
  }
}


@media (max-width: 768px) {
  .category-section{
    padding-left: 1px;
    padding-right: 1px;
}
  .category-section .section-header{
    border-radius: 0;
    padding: 1px 12px;
  }

  
}

/* Skeleton Styles */
.skeleton-card {
    background: #f3f3f3;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    animation: skeleton-loading 1.2s linear infinite alternate;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 1/1;
    background: #e0e0e0;
}

.skeleton-text {
    height: 1rem;
    width: 60%;
    margin: 0.5rem auto;
    background: #e0e0e0;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-color: #f0f0f0; }
    100% { background-color: #e0e0e0; }
}