/*.pcs-card-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.pcs-card{border:1px solid #ccc;border-radius:8px;padding:16px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.pcs-btn{display:inline-block;padding:6px 12px;background:#0073aa;color:#fff;border-radius:4px;text-decoration:none}@media(max-width:600px){.pcs-card-container{grid-template-columns:1fr}}*/

.pcs-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.pcs-single-product{
    width : 100%;
}

.pcs-results {
    width :94%;
    margin : 5%;
}

.pcs-results h2{
    text-align: center;
}

.pcs-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform .2s ease, box-shadow .2s ease;
}

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

.pcs-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #333;
}

.pcs-card p {
  font-size: 0.9rem;
  color: #555;
  margin: 4px 0;
}

.pcs-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: #0073aa;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

.pcs-btn:hover {
  background: #005f8d;
}

@media (max-width: 600px) {
  .pcs-card-container {
    grid-template-columns: 1fr;
  }
}

.pcs-detail-wrapper {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  min-height: 70vh;          /* take up most of viewport */
  padding: 20px;
}

/* Product detail card */
.pcs-detail-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  max-width: 500px;
  width: 100%;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Wrapper for the product search box */
/*.pcs-search-wrapper {*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
  min-height: 50vh; /* push it toward the middle of the page */
/*  padding: 20px;*/
/*  background: #f9f9f9;*/
/*}*/

/* Inner box styling */
/*.pcs-search-box {*/
/*  width: 100%;*/
/*  max-width: 600px;*/
/*  background: #fff;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 4px 12px rgba(0,0,0,0.1);*/
/*  padding: 30px;*/
/*  text-align: center;*/
/*}*/

/* Input styling */
/*.pcs-search-box input[type="text"] {*/
/*  width: 80%;*/
/*  padding: 12px 15px;*/
/*  border: 1px solid #ddd;*/
/*  border-radius: 8px;*/
/*  font-size: 16px;*/
/*  outline: none;*/
/*  transition: border-color 0.2s;*/
/*}*/

/*.pcs-search-box input[type="text"]:focus {*/
/*  border-color: #0073e6;*/
/*}*/

/* Button styling */
/*.pcs-search-box input[type="submit"],*/
/*.pcs-search-box button {*/
/*  margin-left: 10px;*/
/*  padding: 12px 20px;*/
/*  border: none;*/
/*  border-radius: 8px;*/
/*  background: #0073e6;*/
/*  color: #fff;*/
/*  font-size: 16px;*/
/*  cursor: pointer;*/
/*  transition: background 0.2s;*/
/*}*/

/*.pcs-search-box input[type="submit"]:hover,*/
/*.pcs-search-box button:hover {*/
/*  background: #005bb5;*/
/*}*/

/* Mobile responsive */
/*@media (max-width: 600px) {*/
/*  .pcs-search-box {*/
/*    padding: 20px;*/
/*  }*/
/*  .pcs-search-box input[type="text"] {*/
/*    width: 100%;*/
/*    margin-bottom: 10px;*/
/*  }*/
/*  .pcs-search-box input[type="submit"],*/
/*  .pcs-search-box button {*/
/*    width: 100%;*/
/*    margin: 0;*/
/*  }*/
/*}*/

/* Wrapper around search bar */
.search-form,
.search-bar-wrapper {
    width: 60%;              /* make it 60% of page width */
    margin: 20px auto;       /* center horizontally */
    display: flex;
    justify-content: center;
}

/* The input box */
.search-form input[type="text"],
.search-bar-wrapper input[type="text"] {
    flex: 1;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 6px 0 0 6px;
    box-sizing: border-box;
}

/* The button */
.search-form button,
.search-bar-wrapper button {
    padding: 12px 20px;
    font-size: 16px;
    background: #ff9800;   /* same orange as your header */
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

.search-form button:hover,
.search-bar-wrapper button:hover {
    background: #e68900;
}