/* Basic page setup */
    * {
      box-sizing: border-box;
    }
/* body {
      margin: 0;
      padding: 24px 16px;
      font-family: Arial, Helvetica, sans-serif;
      color: #222;
      background: #fff;
      line-height: 1.5;
    } */

    /* Page heading */
    .page-heading, .page-footer {
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    .page-heading {
      margin-bottom: 28px;
    }

    .page-heading h1 {
      margin: 0 0 4px;
      font-size: clamp(1.45rem, 3vw, 2rem);
      line-height: 1.2;
    }

    .page-heading p {
      margin: 0;
      font-size: clamp(1rem, 2.2vw, 1.3rem);
      text-align: center;
    }

    /* Responsive product layout:
       the browser chooses how many columns fit. */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
      gap: 28px 24px;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* Each product keeps its image, text and price together. */
    .product-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 16px;
      border: 1px solid #e1e1e1;
      border-radius: 8px;
    }

    /* A consistent image area. The full image remains visible. */
    .product-image-box {
      width: 100%;
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    .product-image-box img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    /* Optional image-specific adjustments:
       Use only if a copied graphic has extra white space or looks
       noticeably smaller/larger than the others. */
    .product-image-box img.image-wide {
      max-width: 100%;
    }

    .product-card h2 {
      margin: 0 0 8px;
      font-size: 1.15rem;
      line-height: 1.25;
    }

    .product-card .description {
      margin: 0 0 12px;
      font-size: 1rem;
    }

    .product-card .price {
      margin: auto 0 0;
      padding-top: 4px;
      font-weight: 700;
    }

    /* The carrying case is a single item, so it naturally occupies
       one card in the grid; no special layout is required. */

    .page-footer {
      margin-top: 36px;
      padding-top: 20px;
      border-top: 1px solid #ddd;
    }

    .page-footer p {
      margin: 6px 0;
    }

    .page-footer .thank-you {
      margin-top: 22px;
      font-weight: 700;
      font-size: 1.1rem;
    }

    a {
      color: inherit;
      overflow-wrap: anywhere;
    }

    /* Small screens: tighter padding and shorter image area. */
    @media (max-width: 480px) {
      body {
        padding: 18px 12px;
      }

      .product-grid {
        gap: 18px;
      }

      .product-card {
        padding: 14px;
      }

      .product-image-box {
        height: 170px;
      }
    }