/* ============================================================
   Shop — product grid on the order pages.
   ============================================================ */

/* intro above the grid is centered on the original site */
.order-intro { text-align: center; max-width: 900px; margin: 0 auto 10px; }

/* full-bleed beige band around the grid; the form fields follow on white */
.product-band { margin-top: 20px; margin-bottom: 40px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-card-img { display: block; background: var(--white); }
.product-card-img img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
  padding: 16px;
}

.product-card-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.product-card-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px;
  color: var(--dark-red);
}

.product-card-desc { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.product-card-desc p { margin-bottom: .6em; }

.product-card-qty { margin-top: auto; }
.product-card-qty label {
  font-size: 13px;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
  color: var(--dark-red);
}
.product-card-qty select {
  width: 100%;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  background: var(--white);
  font-family: var(--font-body);
}

/* the order form wrapper spans the container so the product band can use
   the full width; only the customer fields stay narrow (and centered) */
.order-form-page .form-wrapper.site-form { max-width: none; }
.order-details-title { margin: 10px 0 18px; text-align: center; }
.order-fields {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: start;
}
.order-fields > .form-field { min-width: 0; }
/* comment and captcha span the full width */
.order-fields > .form-field:has(textarea),
.order-fields > .form-field:has(.turnstile-container),
.order-fields > .form-field:has(.basic-captcha) {
  grid-column: 1 / -1;
}
@media (max-width: 700px) {
  .order-fields { grid-template-columns: 1fr; }
}
.order-submit { margin-top: 24px; text-align: center; }