/* --- Product Info Section (Refactored) --- */

.product-info-section {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns on desktop */
  padding-top: 40px;
  /* align-items: stretch; */ /* Default: Items in the same implicit row stretch vertically */
  align-items: start; /* Use this if you DON'T want items to stretch vertically */
}

/* Style the grid items directly */
.product-info-item {
  /* Add borders/padding here if you want visible boxes around each item */
  /* border: 1px dashed green; */
  /* background-color: rgba(0, 255, 0, 0.05); */
  /* padding: 15px; */ /* Often better to pad inner containers like logo-headline */
  overflow: hidden; /* Prevent content spillover */
  /* If using align-items: start, items will size naturally. */
  /* If using align-items: stretch (default), items will fill height. */
}

.product-info-item-4 {
  padding-right: 0px !important;
}

.heading-icon-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- Styling for Content WITHIN the items --- */

/* Container for Icon + Headline + Text */
.logo-headline-container {
  display: flex;
  flex-direction: column;
  padding: 35px;
  height: 100%;
  justify-content: center;
}

.product-info-item-1 {
  padding-left: 0px;
}

.product-info-icon {
  width: 10%;
  height: 100px;
  object-fit: cover;
  margin-bottom: 15px;
  flex-shrink: 0; /* Prevent icon shrinking */
}

.logo-headline-container h2 {
  /* Style h2 specifically within this container */
  margin-top: 0;
  margin-bottom: 15px;
}

.logo-headline-container p {
  /* Style p specifically within this container */
  margin-bottom: 0; /* Remove default bottom margin if needed */
}

.product-info-image {
  display: block; /* Remove extra space below image */
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  /* Add object-fit if you need images to crop/cover within a fixed container size */
  /* object-fit: cover; */
  /* height: 300px; */ /* Example fixed height */
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .product-info-section {
    padding-top: 0px;
    margin-top: -2rem;
    grid-template-columns: 1fr; /* Stack to a single column */
    gap: 25px; /* Adjust vertical gap for mobile */
    /* align-items remains as set above (e.g., 'start') */
  }
  /* No specific changes needed for .product-info-item on mobile */
  /* They will naturally stack in the single column */
}

@media (max-width: 768px) {
  /* Reorder just this specific pair */
  .product-info-item-3 {
    order: 2;
  }

  .product-info-item-4 {
    order: 1;
  }
}