.yellow-lock {
    color: #ffc107 !important; /* Yellow color */
    background-color: #fff3cd !important; /* Light yellow background */
    border-radius: 50% !important;
    padding: 4px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .yellow-lock svg {
    width: 12px !important;
    height: 12px !important;
    fill: currentColor !important;
  }
  
  /* Locked quantity display styling */
  .po-quantity-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
  }
  
  .quantity-value {
    min-width: 20px;
    text-align: center;
  }
  
  /* Mobile responsiveness */
  @media (max-width: 767px) {
    /* Hide product details in mobile */
    .product-details .truncated,
    .product-details .details {
      display: none !important;
    }
    
    /* Compact minicart items */
    .minicart-wrapper .item {
      padding: 8px 0 !important;
      display: flex !important;
      flex-wrap: wrap !important;
    }
    
    .minicart-wrapper .product-image {
      width: 50px !important;
      margin-right: 10px !important;
    }
    
    .minicart-wrapper .product-image img {
      width: 50px !important;
      height: 50px !important;
    }
    
    .minicart-wrapper .product-details {
      flex: 1 !important;
      padding: 0 !important;
      min-width: 0 !important;
    }
    
    .minicart-wrapper .product-name {
      font-size: 13px !important;
      line-height: 1.3 !important;
      margin-bottom: 5px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    
    /* Compact price and quantity */
    .minicart-wrapper .info-wrapper {
      width: 100% !important;
      margin: 3px 0 !important;
      display: flex !important;
    }
    
    .minicart-wrapper .info-wrapper tbody {
      display: flex !important;
      width: 100% !important;
    }
    
    .minicart-wrapper .info-wrapper tr {
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
    }
    
    .minicart-wrapper .info-wrapper th {
      font-size: 12px !important;
      padding: 2px 5px 2px 0 !important;
      width: auto !important;
      min-width: 30px !important;
    }
    
    .minicart-wrapper .info-wrapper td {
      font-size: 12px !important;
      padding: 2px !important;
    }
    
    .minicart-wrapper .price {
      font-size: 13px !important;
      font-weight: bold !important;
    }
    
    /* Compact quantity display - ADD QTY LABEL */
    .po-quantity-display {
      font-size: 12px !important;
      gap: 4px !important;
    }
    
    .po-quantity-display:before {
      content: "Qty:" !important;
      font-size: 12px !important;
      color: #6c757d !important;
      font-weight: normal !important;
      margin-right: 2px !important;
    }
    
    .quantity-value {
      font-size: 13px !important;
      font-weight: bold !important;
      margin-left: 2px !important;
    }
    
    .yellow-lock {
      width: 18px !important;
      height: 18px !important;
      padding: 3px !important;
      margin-left: 2px !important;
    }
    
    .yellow-lock svg {
      width: 10px !important;
      height: 10px !important;
    }
    
    /* For editable quantities (non-locked items) */
    .qty-cell:not(:has(.po-quantity-display)):before {
      content: "Qty:" !important;
      font-size: 12px !important;
      color: #6c757d !important;
      font-weight: normal !important;
      margin-right: 5px !important;
      display: inline-block !important;
      vertical-align: middle !important;
    }
    
    /* Compact action buttons - ICONS ONLY */
    .minicart-wrapper .action-icons {
      margin-top: 5px !important;
      display: flex !important;
      gap: 12px !important; /* &em space equivalent */
      width: 100% !important;
      justify-content: flex-start !important;
    }
    
    /* Hide text, show only icons */
    .minicart-wrapper .btn-edit span,
    .minicart-wrapper .remove span {
      display: none !important;
    }
    
    /* Edit icon */
    .minicart-wrapper .btn-edit {
      font-size: 0 !important;
      padding: 6px !important;
      margin-right: 0 !important;
      width: 30px !important;
      height: 30px !important;
      border-radius: 50% !important;
      background: #f8f9fa !important;
      border: 1px solid #dee2e6 !important;
      position: relative !important;
    }
    
    .minicart-wrapper .btn-edit:before {
      content: "✎" !important;
      font-size: 14px !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      color: #6c757d !important;
    }
    
    /* Remove icon */
    .minicart-wrapper .remove {
      font-size: 0 !important;
      padding: 6px !important;
      margin-right: 0 !important;
      width: 30px !important;
      height: 30px !important;
      border-radius: 50% !important;
      background: #f8f9fa !important;
      border: 1px solid #dee2e6 !important;
      position: relative !important;
    }
    
    .minicart-wrapper .remove:before {
      content: "×" !important;
      font-size: 18px !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      color: #dc3545 !important;
      font-weight: bold !important;
    }
    
    /* Adjust quantity input for mobile */
    .minicart-wrapper .cart-item-quantity.input-text {
      width: 35px !important;
      height: 25px !important;
      font-size: 12px !important;
      padding: 2px 4px !important;
      vertical-align: middle !important;
    }
    
    .minicart-wrapper .quantity-button {
      padding: 3px 6px !important;
      font-size: 11px !important;
      height: 25px !important;
      vertical-align: middle !important;
    }
    
    /* Ensure proper spacing between elements */
    .minicart-wrapper .product-wrapper {
      margin-bottom: 5px !important;
    }
  }
  
  /* Tablet responsiveness */
  @media (min-width: 768px) and (max-width: 1024px) {
    .minicart-wrapper .product-image img {
      width: 70px !important;
      height: 70px !important;
    }
    
    .minicart-wrapper .product-name {
      font-size: 14px !important;
    }
    
    .minicart-wrapper .info-wrapper th,
    .minicart-wrapper .info-wrapper td {
      font-size: 13px !important;
    }
  }
</style>
<style>
  /* Mobile responsiveness */
  @media (max-width: 767px) {
    /* Fix the large gap between image and content */
    .minicart-wrapper .item {
      padding: 10px 0 !important;
      display: flex !important;
      align-items: flex-start !important;
      gap: 12px !important; /* Reduced from default large gap */
      width: 100% !important;
    }
    
    .minicart-wrapper .product-image {
      width: 60px !important; /* Slightly larger but compact */
      min-width: 60px !important;
      margin-right: 0 !important; /* Remove any default margin */
      flex-shrink: 0 !important;
    }
    
    .minicart-wrapper .product-image img {
      width: 60px !important;
      height: 60px !important;
      object-fit: cover !important;
    }
    
    .minicart-wrapper .product-details {
      flex: 1 !important;
      padding: 0 !important;
      min-width: 0 !important; /* Allow text truncation */
      margin-left: 0 !important;
    }
    
    /* Compact product name and details */
    .minicart-wrapper .product-name {
      font-size: 14px !important;
      line-height: 1.3 !important;
      margin-bottom: 6px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-weight: 600 !important;
      color: #333 !important;
    }
    
    /* Price and quantity in a compact row */
    .minicart-wrapper .product-wrapper {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      margin-bottom: 8px !important;
    }
    
    .minicart-wrapper .info-wrapper {
      width: 100% !important;
      margin: 0 !important;
    }
    
    .minicart-wrapper .info-wrapper tbody {
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
    }
    
    .minicart-wrapper .info-wrapper tr {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    
    .minicart-wrapper .info-wrapper th {
      font-size: 13px !important;
      padding: 0 !important;
      width: auto !important;
      min-width: 35px !important;
      color: #666 !important;
      font-weight: 500 !important;
    }
    
    .minicart-wrapper .info-wrapper td {
      font-size: 13px !important;
      padding: 0 !important;
    }
    
    .minicart-wrapper .price {
      font-size: 14px !important;
      font-weight: bold !important;
      color: #e51c23 !important; /* Red color for price */
    }
    
    /* Quantity display with Qty label */
    .minicart-wrapper .qty-cell {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    
    .minicart-wrapper .qty-cell:before {
      content: "Qty:" !important;
      font-size: 13px !important;
      color: #666 !important;
      font-weight: 500 !important;
    }
    
    /* Locked quantity styling */
    .po-quantity-display {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    
    .quantity-value {
      font-size: 14px !important;
      font-weight: bold !important;
      color: #333 !important;
    }
    
    .yellow-lock {
      color: #ffc107 !important;
      background-color: #fff3cd !important;
      border-radius: 50% !important;
      padding: 4px !important;
      width: 20px !important;
      height: 20px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    .yellow-lock svg {
      width: 12px !important;
      height: 12px !important;
      fill: currentColor !important;
    }
    
    /* Action icons with Font Awesome */
    .minicart-wrapper .action-icons {
      margin-top: 8px !important;
      padding-top:0px !important;
      display: flex !important;
      gap: 16px !important; /* Proper spacing between icons */
      width: 100% !important;
      justify-content: flex-start !important;
    }
    
    /* Hide text, show only icons */
    .minicart-wrapper .btn-edit,
    .minicart-wrapper .remove {
      font-size: 0 !important;
      padding: 8px !important;
      margin-right: 0 !important;
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      background: #f8f9fa !important;
      border: 1px solid #dee2e6 !important;
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-decoration: none !important;
    }
    
    /* Font Awesome edit icon */
    .minicart-wrapper .btn-edit:before {
      content: "\f044" !important; /* Font Awesome edit icon */
      font-family: "FontAwesome" !important;
      font-size: 16px !important;
      color: #6c757d !important;
    }
    
    /* Font Awesome remove icon */
    .minicart-wrapper .remove:before {
      content: "\f00d" !important; /* Font Awesome times icon */
      font-family: "FontAwesome" !important;
      font-size: 18px !important;
      color: #dc3545 !important;
      font-weight: normal !important;
    }
    
    /* Hover effects */
    .minicart-wrapper .btn-edit:hover {
      background: #e9ecef !important;
      border-color: #ced4da !important;
    }
    
    .minicart-wrapper .remove:hover {
      background: #f8d7da !important;
      border-color: #f5c6cb !important;
    }
    
    /* Adjust quantity input for mobile */
    .minicart-wrapper .cart-item-quantity.input-text {
      width: 45px !important;
      height: 32px !important;
      font-size: 14px !important;
      padding: 4px 6px !important;
      border: 1px solid #ced4da !important;
      border-radius: 4px !important;
    }
    
    .minicart-wrapper .quantity-button {
      padding: 4px 10px !important;
      font-size: 13px !important;
      height: 32px !important;
      background: #007bff !important;
      color: white !important;
      border: none !important;
      border-radius: 4px !important;
      margin-left: 5px !important;
    }
    
    .minicart-wrapper .quantity-button:hover {
      background: #0056b3 !important;
    }
    
    /* Ensure proper spacing and no overflow */
    .minicart-wrapper .product-details > * {
      max-width: 100% !important;
    }
  }
  
  /* Additional optimization for very small screens */
  @media (max-width: 380px) {
    .minicart-wrapper .product-image {
      width: 50px !important;
      min-width: 50px !important;
    }
    
    .minicart-wrapper .product-image img {
      width: 50px !important;
      height: 50px !important;
    }
    
    .minicart-wrapper .item {
      gap: 8px !important;
    }
    
    .minicart-wrapper .product-name {
      font-size: 13px !important;
    }
    
    .minicart-wrapper .action-icons {
      gap: 12px !important;
      padding-top:0px !important;
    }
    
    .minicart-wrapper .btn-edit,
    .minicart-wrapper .remove {
      width: 32px !important;
      height: 32px !important;
      padding: 6px !important;
    }
  }