.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  
  .card{
      --bs-card-border-color: none;
  }
  
  .card-body{
    padding: 0 1rem !important;
  }

  .col-lg-3 .card-body{
    padding: 0 0 !important;
  }

  
  
  
  .card-body  .pt2 {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    text-align: right;
  }
  
  .card-title{
      font: var(--podium-cds-typography-body1-strong);
  }
  
  .product-price, .product-total{
      font: var(--podium-cds-typography-body1-regular);
      font-size: 14px;
  }

  
  
  /* Mobile: Image width set to 152px */
  @media (max-width: 768px) {
    .product-image {
      width: 192px; /* Mobile image size */
      
    }
  
    .card-body  .pt2 {
    position: relative;
    top: 0;
    right: 0;
    margin: 0;
    text-align: left;
  }
  }
  
  /* Tablet: Image width set to 192px */
  @media (min-width: 768px) {
    .product-image {
      width: 192px; /* Tablet image size */
    }
  
    
  }
  
  @media (min-width: 999px) {
      .col-lg-3 {
      width: 30%;
    }
  }
  
  /* General adjustments for image and product details layout */
  @media (min-width: 768px) {
    .product-row .col-md-2 {
      width: 20%; /* Set image to occupy 50% of width */
    }
  
    .product-row .col-md-10 {
      width: 70%; /* Set product details to occupy 50% of width */
     
    }
  }

  /* -------------------------------------------------
 ------------------- 2nd edit ---------------------
 -------------------------------------------------- */

.aa .btn-outline-secondary {
    border: none !important;
}

.aa .btn-outline-secondary:hover {
    border-radius: 50%;
    background-color: #dddddd;
    border-color: #dddddd; 
}

.aa1{
    display: flex;
    justify-content: flex-start; /* Align items at the start horizontally */
    align-items: center; /* Align items vertically to the center */
    width: fit-content;
    border: 1px var(--podium-cds-color-border-tertiary) solid;
    border-radius: var(--podium-cds-button-border-radius);
    padding: 4px 6px;
    
}

.fav1{
    display: flex;
    justify-content: flex-end; /* Align items at the end horizontally */
    align-items: center; /* Align items vertically to the center */
    width: fit-content;
    border: 1px var(--podium-cds-color-border-tertiary) solid;
    border-radius: var(--podium-cds-button-border-radius);
    padding: 4px 6px;
}

.aa{
    margin-top: 8px;
    gap: 8px;
}

.css-1f31asj {
    color: var(--podium-cds-color-text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.css-1f31asj .size214{
   text-decoration: underline;
}

#bag-title{
    color: var(--podium-cds-color-text-secondary);
    font-size: 16px !important; 
    font: var(--podium-cds-typography-body1-regular);
}

#total-title{
    font-size: 16px !important; 
}

#midver{
    color: var(--podium-cds-color-text-secondary);
}

#bag-title,
#total-title,
#midver{
    display: none;
}

/* Show only on small screens (mobile) */
@media (max-width: 768px) {
    #titles-container {
        display: flex; /* Use flexbox to align the children */
        justify-content: flex-start; /* Align items to the left (or use center if needed) */
        align-items: center; /* Vertically align the items */
        gap: 8px; /* Space between elements (adjust as needed) */
      }
    #bag-title,
    #total-title,
    #midver{
      display: block; /* or block if you want block layout */
    }
  }