:root {
     --fa-style-family-brands: "Font Awesome 6 Brands";
     --fa-font-brands: normal 400 1em / 1 "Font Awesome 6 Brands";
        background-color: black;

 }

 html {
     max-width: 700px;
     justify-self: center;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Cormorant Garamond', serif;
 }

 body {
     background: white;
     color: #333;
     font-size: 1.3rem;
     font-family: 'Cormorant Garamond', serif;
 }

 .info {
     padding: 10px;
     flex: 1;
     display: grid;
     grid-template-columns: repeat(2, 1fr);

 }



 .price {
     color: rgb(0, 0, 0);
     font-weight: bold;
     margin: 8px 0;

 }

 button {
     background: rgb(66, 66, 66);
     border: none;
     color: white;
     padding: 8px 12px;
     border-radius: 6px;
     cursor: pointer;

 }
 
.products {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: center;
    justify-self: center;
    margin-top: 32px;
    font-variant-numeric: oldstyle-nums;
    background-color: #ffffff;
        justify-items: center;
    max-width: 517px;
}



.product {
    width: 95%;
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;}

.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.product button {
  pointer-events: none;
}


.product img {
  width: 100%;
  height: 220px;
  object-fit: fill;     
  object-position: center;
  border-radius: 12px 12px 0 0;
  background-color: #f2f2f2; /* soft fallback while loading */
}


 .product:hover{
    cursor: pointer;
 }
.category {
  position: relative;
}

.category .count {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  opacity: 0.9;
}