/*PRODUCTS PAGE: LAYOUT & CARDS*/

/* Outer container for the products page section */
.products-wrap { 
  padding: 3rem 1rem 2rem; 
  text-align: center; 
}

/* Page title styling ("PRODUCTS") */
.products-title { 
  font-weight: bold; 
  font-size: 32px; 
  margin-bottom: 1.25rem; 
}

/* Row of category filter links (ALL / TOPS / ... ) */
.category-links {
  display: flex;              /* lay links in a row */
  flex-wrap: wrap;            /* wrap to next line on small screens */
  justify-content: center;    /* center the group */
  gap: 10px;                  /* space between links */
  margin-bottom: 1.25rem;     /* space below the row */
}

/* Individual category link appearance */
.category-links a {
  text-decoration: none;      /* remove underline */
  color: gray;                /* default color */
  font-weight: bold;          /* bolder text */
  border-bottom: 2px solid transparent; /* underline appears when active */
  padding-bottom: .15rem;     /* small breathing room for underline */
  transition: color .2s, border-color .2s; /* smooth hover/active change */
  cursor: pointer;            /* pointer cursor for clickability */
}

/* Active category link (currently selected) */
.category-links a.active { 
  color: #000; 
  border-bottom-color: #000;  /* show the underline when active */
}

/* Hover state for category links */
.category-links a:hover { 
  color: #555; 
}

/* Grid that holds all product cards (mobile-first: 1 column) */
.product-grid {
  display: grid; 
  grid-template-columns: 1fr; /* single column by default */
  gap: 1rem;                  /* space between cards */
  max-width: 1100px;          /* center the grid at a readable width */
  margin: 0 auto;             /* horizontally center */
}

/* At ≥768px: switch to a 4-column grid with a larger gap */
@media (min-width:768px) {
  .product-grid { 
    grid-template-columns: repeat(4,1fr); /* 4 columns */
    gap: 1.25rem; 
  }
}

/* Product card container*/
.card {
  border: none; 
  border-radius: 10px;        /* rounded corners */
  overflow: hidden;           /* clip overflowing image corners */
  background: #F9F3EC;        /* soft background */
  text-decoration: none;      /* remove link underline */
  color: inherit;             /* inherit text color */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* hover animation */
}

/* Product image inside the card (desktop/tablet) */
.card img {
  width: 100%;                /* fill card width */
  height: 230px;              /* fixed height */
  object-fit: cover;          /* crop to fill the box nicely */
  display: block; 
  transition: transform 0.3s ease; /* smooth zoom on hover */
}

/* On small screens: avoid cropping; show full image in a square box */
@media (max-width: 767px) {
  .card img {
    object-fit: contain;      /* no crop*/
    aspect-ratio: 1 / 1;      /* square image area */
    height: auto;             /* remove fixed height */
    background: #fff;       /* background behind image */
  }
}

/* Card hover: slight lift and shadow */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Card image hover*/
.card:hover img {
  transform: scale(1.05);
}

/* Inner text wrapper for the card (name + price) */
.card-body {
  padding: .75rem 1rem 1rem; 
  text-align: center;
}

/* Product name text */
.card-title { 
  font-weight: 700; 
  margin: 0 0 .25rem 0; 
  font-size: inherit;        /* inherit from parent or default */
}

/* Product price text */
.card-text { 
  margin: 0; 
}

.stock-text {
  margin: .35rem 0 0;
  font-size: .9rem;
  font-weight: 700;
  color: #047857;
}

.stock-empty {
  color: #b42318;
}

/* “No products available” message block spanning full grid width */
.empty { 
  grid-column: 1 / -1;        /* span all columns */
  background: #f1efe9; 
  padding: 1rem; 
  border-radius: 10px; 
}