{{-- NEW: Minimal CSS for quantity controls --}}
  <style>
      .qty-controls .btn {
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .qty-controls .btn:disabled {
          opacity: 0.6;
      }

      .qty-display {
          font-weight: 500;
      }

      .qty-controls .btn.stock-limit-reached {
          opacity: 0.4;
          cursor: not-allowed;
          background-color: #f8f9fa;
      }

      .border_rnone {
          border-right: none;
          border-top: none;
          border-bottom: none;
      }

      .border_lnone {
          border-left: none;
          border-top: none;
          border-bottom: none;
      }

      .border_qty {
          border: 1px solid #6c757d;
          gap: 5px;
          border-radius: 5px;
      }

      .mini-cart-item {
          border-bottom: 1px solid #b9b9b9 !important;
      }

      .control-buttons {
          border-top: 1px solid #b9b9b9 !important;
      }

      .border_qty {
          /* width: 75px; */
          height: 40px;
          border: 1px solid var(--color-primary);
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          background: #fff;
          padding: 0 25px 0 0;
      }

      .qty-display {
          font-size: 17px;
          font-weight: bold;
          color: var(--color-primary);
          width: 100%;
          text-align: center;
      }

      .qty-btn {
          border: none;
          background: transparent;
          color: var(--color-primary);
          cursor: pointer;
          font-size: 12px;
          padding: 0;
          line-height: 8px;
          width: 20px;
          height: 12px;
      }

      /* Position the up/down buttons on the right */
      .qty-btn.plus,
      .qty-btn.minus {
          position: absolute;
          right: 5px;
      }

      /* Up arrow */
      .qty-btn.plus {
          top: 0px;
      }

      /* Down arrow */
      .qty-btn.minus {
          bottom: 5px;
      }

      /* Remove Bootstrap button effects */
      .qty-btn:focus {
          outline: none;
          box-shadow: none;
      }

      .qty-section {
          /* margin-left: 39px; */
          /* margin-top: 30px; */
      }

      @media (max-width: 500px) {
          .qty-section {
              margin-left: 0px;
          }

          /* .border_qty {
              width: 55px !important;
          } */

          .qty-display {
              font-size: 13px;

          }
      }

      @media (max-width: 500px) {
          /* .border_qty {
              width: 40px !important;
          } */
      }

      .product-attributes-custom {
          display: flex;
          flex-wrap: wrap;
          gap: 7px 6px;
          /* row gap = 6px, column gap = 12px */
          line-height: 1.2;
          /* tighter but readable */
          margin-top: 4px;
      }

      .product-attributes-custom>div {
          display: flex;
          align-items: center;
          gap: 4px;
          /* space between label & value */
          font-size: 12px;
          margin: 0;
          padding: 0;
      }
      @media (max-width: 475px) {
            .custom-left {
                flex: 0 0 auto;
                width: 66.666%; /* col-8 */
            }
            .custom-right {
                flex: 0 0 auto;
                width: 33.333%; /* col-4 */
            }
        }

  </style>

  {{-- <li class="mini-cart-item row g-0 py-1 pb-2">
      <div class="col-2">
          <div class="product-image">
              <a href="{{ $product->original_product->url }}">
                  <img src="{{ RvMedia::getImageUrl(Arr::get($cartItem->options, 'image', $product->original_product->image), 'thumb') }}"
                      alt="{{ $product->original_product->name }}" width="70">
              </a>
          </div>
      </div>
      <div class="col-7">
          <div class="product-content">
              <div class="d-flex justify-content-between align-items-start">
                  <div class="product-name">
                      <a href="{{ $product->original_product->url }}">{{ $product->original_product->name }}</a>
                  </div>
               
              </div>

              @if (is_plugin_active('marketplace') && $product->original_product->store->id)
                  <div class="product-vendor">
                      <a class="text-primary ms-1" href="{{ $product->original_product->store->url }}">
                          {{ $product->original_product->store->name }}
                      </a>
                  </div>
              @endif
              <span class="quantity d-flex justify-content-between align-items-start w-100">
                  <span class="box-prices">
                      <span>{{ format_price($cartItem->price) }}</span>
                      @if ($product->front_sale_price != $product->price)
                          <small class="text-secondary text-sm">
                              <del>{{ format_price($product->price) }}</del>
                          </small>
                      @endif
                  </span>

                  <!-- OLD QUANTITY DISPLAY -->
                  <!-- (x{{ $cartItem->qty }}) -->

                  <!-- NEW QUANTITY CONTROLS -->
                  <!-- <div class="qty-controls d-flex align-items-center border_qty">
                    <button class="btn btn-sm btn-outline-secondary qty-decrease border_lnone" 
                            data-row-id="{{ $cartItem->rowId }}" 
                            style="width: 25px; height: 25px; padding: 0; font-size: 12px;">
                        <i class="fi fi-rr-minus"></i>
                    </button>
                    <span class="qty-display mx-1" data-row-id="{{ $cartItem->rowId }}" style="min-width: 27px; text-align: center;">{{ $cartItem->qty }}</span>
                    <button class="btn btn-sm btn-outline-secondary qty-increase border_rnone" 
                            data-row-id="{{ $cartItem->rowId }}" 
                            data-max="{{ $product->with_storehouse_management ? $product->getCurrentStock() : 1000 }}"
                            style="width: 25px; height: 25px; padding: 0; font-size: 12px;">
                        <i class="fi fi-rr-plus"></i>
                    </button>
                </div> -->


              </span>
               <!-- <p class="mb-0">
                <small>
                    <small>{{ $cartItem->options['attributes'] ?? '' }}</small>
                </small>
            </p> -->
             <!-- @if (!empty($cartItem->options['attributes']))
                <div class="product-attributes mt-1 d-flex flex-wrap" style="gap: 1px;">
                    @foreach (explode(',', $cartItem->options['attributes']) as $item)
                        <span class="badge border text-dark px-2 py-1 small" style="font-weight: 450;">
                            {{ trim($item) }}
                        </span>
                    @endforeach
                </div>
            @endif -->
              @php
                  // Allowed attributes
                  $allowedAttributes = ['(Diameter', 'Pattern', 'Profile', 'Width', 'Size'];

                  // Convert "key: value" items into an associative array
                  $attributes = [];
                  if (!empty($cartItem->options['attributes'])) {
                      foreach (explode(',', $cartItem->options['attributes']) as $attr) {
                          if (strpos($attr, ':') !== false) {
                              [$key, $value] = array_map('trim', explode(':', $attr, 2));
                              if (in_array($key, $allowedAttributes)) {
                                  $attributes[$key] = $value;
                              }
                          }
                      }
                  }
              @endphp

              @if (!empty($attributes))
                  <div class="product-attributes d-flex flex-wrap">
                      @foreach ($attributes as $key => $value)
                          <div class="d-flex gap-1" style="padding-right: 10px;font-size: 12px;">
                              <strong>{{ ltrim($key, '(') }}:</strong><span>{{ rtrim($value, ')') }}</span>
                          </div>
                      @endforeach
                  </div>
              @endif


              @if (!empty($cartItem->options['options']))
                  {!! render_product_options_info($cartItem->options['options'], $product, true) !!}
              @endif

              @if (!empty($cartItem->options['extras']) && is_array($cartItem->options['extras']))
                  @foreach ($cartItem->options['extras'] as $option)
                      @if (!empty($option['key']) && !empty($option['value']))
                          <p class="mb-0"><small>{{ $option['key'] }}: <strong>
                                      {{ $option['value'] }}</strong></small></p>
                      @endif
                  @endforeach
              @endif
          </div>
      </div>
      <div class="col-3" style="text-align: right;">
          <a class="btn remove-cart-item p-0" href="#" style="color: var(--color-primary);border: none;"
              data-url="{{ route('public.cart.remove', $cartItem->rowId) }}"
              aria-label="{{ __('Remove this item') }}">
              <!-- <i class="fi fi-rr-delete"></i> -->
               <!-- < <i class="fi fi-rr-cross-circle"></i> -->
               <i class="fi fi-rr-trash"></i>

          </a>
          <div class="qty-section">
              <div class="qty-controls border_qty">
                  <button class="qty-btn minus qty-decrease" data-row-id="{{ $cartItem->rowId }}">
                      <img src="{{ asset('assets/images/arrow-down.svg') }}" class="arrow-icon" alt="">
                  </button>

                  <span class="qty-display" data-row-id="{{ $cartItem->rowId }}">
                      {{ $cartItem->qty }}
                  </span>

                  <button class="qty-btn plus qty-increase" data-row-id="{{ $cartItem->rowId }}"
                      data-max="{{ $product->with_storehouse_management ? $product->getCurrentStock() : 1000 }}">
                      <img src="{{ asset('assets/images/arrow-up.svg') }}" class="arrow-icon" alt="">
                  </button>
              </div>
          </div>
      </div>
  </li> --}}
  <li class="mini-cart-item row g-0 py-1 pb-2">

      <!-- PRODUCT IMAGE -->
      <div class="col-2">
          <div class="product-image">
              <a href="{{ $product->original_product->url }}">
                  {{-- <img src="{{ RvMedia::getImageUrl(Arr::get($cartItem->options, 'image', $product->original_product->image), 'thumb') }}"
                      alt="{{ $product->original_product->name }}" width="70"> --}}
                      <img src="{{ RvMedia::getImageUrl(
                            Arr::get($cartItem->options, 'image', $product->original_product->image),
                            'thumb',
                            false,
                            RvMedia::getDefaultImage()
                        ) }}"
                        alt="{{ $product->original_product->name }}"
                        width="70">

              </a>
          </div>
      </div>

      <div class="col-10">
          <div class="row">
              <div class="col-12">
                  <div class="fw-bold product-name">
                      <a href="{{ $product->original_product->url }}">
                          {{ $product->original_product->name }}
                      </a>
                  </div>

                  @if (is_plugin_active('marketplace'))
                      <div class="product-vendor">
                          <a class="text-primary" href="{{ $product->original_product->store->url }}">
                              {{ $product->original_product->store->name }}
                          </a>
                      </div>
                  @endif
              </div>
          </div>
          <div class="row">
              <div class="col-9 custom-left">
                  <div class="box-prices">
                      <span>{{ format_price($cartItem->price) }}</span>
                      @if ($product->front_sale_price != $product->price)
                          <small class="text-secondary text-sm">
                              <del>{{ format_price($product->price) }}</del>
                          </small>
                      @endif
                  </div>

                  @php
                      // Allowed attributes
                      $allowedAttributes = ['Diameter', 'Pattern', 'Profile', 'Width', 'Size'];

                      // Convert "key: value" items into an associative array
                      $attributes = [];
                      if (!empty($cartItem->options['attributes'])) {
                          foreach (explode(',', $cartItem->options['attributes']) as $attr) {
                              if (strpos($attr, ':') !== false) {
                                  [$key, $value] = array_map('trim', explode(':', $attr, 2));
                                  if (in_array($key, $allowedAttributes)) {
                                      $attributes[$key] = $value;
                                  }
                              }
                          }
                      }
                  @endphp

                  @if (!empty($attributes))

                      <div class="product-attributes-custom d-flex flex-wrap">
                          @foreach ($attributes as $key => $value)
                              <div class="d-flex" style="font-size: 12px; margin-right: 6px;">
                                  <strong>{{ ltrim($key, '(') }}:</strong>
                                  <span>{{ rtrim($value, ')') }}</span>
                              </div>
                          @endforeach
                      </div>

                  @endif
              </div>

              <!-- RIGHT SIDE -->
              <div class="col-3 text-end custom-right">

                  <!-- REMOVE BUTTON -->
                  <a class="btn remove-cart-item p-0" href="#"
                      data-url="{{ route('public.cart.remove', $cartItem->rowId) }}"
                      style="color: var(--color-primary); border:none;">
                      <i class="fi fi-rr-trash"></i>
                  </a>

                  <!-- QTY CONTROLS -->
                    <div class="qty-section">
                        <div class="qty-controls border_qty">
                            <button class="qty-btn minus qty-decrease" data-row-id="{{ $cartItem->rowId }}">
                                <img src="{{ asset('assets/images/arrow-down.svg') }}" class="arrow-icon" alt="">
                            </button>

                            <span class="qty-display" data-row-id="{{ $cartItem->rowId }}">
                                {{ $cartItem->qty }}
                            </span>

                            <button class="qty-btn plus qty-increase" data-row-id="{{ $cartItem->rowId }}"
                                data-max="{{ $product->with_storehouse_management ? $product->getCurrentStock() : 1000 }}">
                                <img src="{{ asset('assets/images/arrow-up.svg') }}" class="arrow-icon" alt="">
                            </button>
                        </div>
                    </div>

              </div>
          </div>

      </div>
  </li>