@media (max-width: 768px) {


  /* Stack the main card vertically */
  .ds-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid #e0e0e0;
  }


  /* Reorganize the left user column into a horizontal top bar */
  .ds-user-col {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
  }

  /* 1. User Name at the top left */
  .ds-user-col > div:first-child {
    margin-bottom: 0 !important;
    font-size: 15px !important;
    order: 1;
  }

  /* 2. Verified Badge pushed to the right */
  .ds-badge-v {
    order: 2;
    margin-left: auto;
    background-color: #f0fdf4; /* Light Dermstore-style green background */
    color: #166534; /* Darker text */
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
  }

  /* 3. User Meta Info (Age, Skin, Gender) styled as gray 'Pills' */
  .ds-user-meta {
    order: 3;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px !important;
    color: #333;
    margin: 4px 0 0 0;
  }

  .ds-user-meta strong {
    color: #666;
    font-weight: 500;
    margin-right: 2px;
  }

  /* Content Area */
  .ds-card > div[style*="flex:1"] {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Adjust Review Title for mobile */
  .ds-card h4 {
    font-size: 16px !important;
    line-height: 1.4;
    margin-top: 8px !important;
  }

  /* Brand Response Box Styling */
  .ds-reply-box {
    margin-top: 16px;
    background: #f9f9f9;
    border-left: 2px solid #333; /* Distinct left border like Dermstore */
    padding: 12px 15px;
    font-size: 13px;
    color: #444;
  }

  /* Shrink Image Thumbnails slightly for mobile */
  .ds-review-img-zoom {
    width: 65px !important;
    height: 65px !important;
  }
}