/* Cart Preview (Sidebar) */
.cart-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.cart-preview-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cart-preview {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1060;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.cart-preview.active {
  right: 0;
}

.cart-preview__header {
  padding: 1.25rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-preview__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.cart-preview__count {
  font-size: 0.9rem;
  color: #888;
  margin-right: auto;
  margin-left: 1rem;
}

.cart-preview__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
}

.cart-preview__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cart-preview__items {
  padding: 1rem;
  flex: 1;
}

.cart-preview__item {
  display: flex;
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.cart-preview__item-image {
  width: 70px;
  height: 70px;
  overflow: hidden;
  margin-right: 1rem;
  border-radius: 4px;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-preview__item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-preview__item-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 1.5rem;
}

.cart-preview__item-details {
  flex: 1;
  min-width: 0;
}

.cart-preview__item-name {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-preview__item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-preview__item-price {
  font-weight: 600;
  color: #333;
}

.cart-preview__item-quantity {
  display: flex;
  align-items: center;
}

.cart-preview__item-remove {
  position: absolute;
  top: 1rem;
  right: 0;
}

.btn-remove-preview {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.btn-remove-preview:hover {
  background-color: #f0f0f0;
  color: #dc3545;
}

.quantity-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
}

.quantity-value {
  padding: 0 0.5rem;
  min-width: 24px;
  text-align: center;
}

.cart-preview__footer {
  padding: 1.25rem;
  border-top: 1px solid #f0f0f0;
  background-color: #f9f9f9;
}

.cart-preview__summary {
  margin-bottom: 1rem;
}

.cart-preview__summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.cart-preview__summary-label {
  color: #555;
}

.cart-preview__summary-value {
  font-weight: 600;
}

.cart-preview__actions {
  display: flex;
  gap: 0.5rem;
}

.cart-preview__actions .btn {
  flex: 1;
}

.cart-preview__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  height: 100%;
}

.cart-preview__empty-icon {
  font-size: 3rem;
  color: #ccc;
  margin-bottom: 1rem;
}

.cart-preview__empty-text {
  color: #888;
  margin-bottom: 1rem;
}

/* Cart Detail Page */
.cart-page {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e9ecef;
  position: relative;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item__image {
  width: 80px;
  height: 80px;
  margin-right: 1.5rem;
  flex-shrink: 0;
  border-radius: 6px;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-item__placeholder {
  width: 80px;
  height: 80px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: 1.5rem;
}

.cart-item__details {
  flex-grow: 1;
  min-width: 0;
}

.cart-item__name {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.cart-item__meta {
  font-size: 0.875rem;
  color: #6c757d;
}

.cart-item__quantity {
  width: 120px;
  margin: 0 1.5rem;
  flex-shrink: 0;
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  overflow: hidden;
  width: 120px;
  height: 38px;
}

.quantity-input {
  width: 50px;
  border: none;
  text-align: center;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border-left: 1px solid #ced4da;
  border-right: 1px solid #ced4da;
  -moz-appearance: textfield;
}

quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-btn {
  background-color: #f8f9fa;
  border: none;
  color: #495057;
  width: 35px;
  height: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-btn:hover {
  background-color: #e9ecef;
}

.quantity-increase {
  border-right: none;
  border-left: 1px solid #e0e0e0;
}

.cart-item__total {
  width: 100px;
  text-align: right;
  font-weight: 500;
  flex-shrink: 0;
  font-size: 1.1rem;
  min-width: 100px;
  text-align: right;
}

.cart-item__remove {
  width: 40px;
  text-align: right;
  flex-shrink: 0;
  margin-left: 1.5rem;
}

.btn-remove {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.btn-remove:hover {
  background-color: #f0f0f0;
  color: #dc3545;
}

.cart-summary {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e9ecef;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.cart-summary__row:last-child {
  margin-bottom: 0;
}

.cart-summary__label {
  color: #6c757d;
}

.cart-summary__value {
  font-weight: 500;
}

.cart-summary__total {
  font-size: 1.25rem;
  font-weight: 600;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  margin-top: 1rem;
}

.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
}

.cart-actions-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cart-action-secondary {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.cart-action-secondary i {
  font-size: 0.9em;
}

.cart-action-primary {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

.cart-action-primary i {
  font-size: 1.1em;
}

.cart-actions .btn {
  flex-shrink: 0;
}

/* Empty Cart */
.cart-empty {
  text-align: center;
  padding: 4rem 1rem;
  border: 1px dashed #ced4da;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.cart-empty__icon {
  font-size: 4rem;
  color: #adb5bd;
  margin-bottom: 1.5rem;
}

.cart-empty__title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.cart-empty__text {
  color: #6c757d;
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin: 0 auto;
}

/* Floating Cart Button (Mobile) */
.floating-cart-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1040;
  border: none;
  cursor: pointer;
}

.floating-cart-btn__icon {
  font-size: 1.5rem;
}

.floating-cart-btn__count {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #dc3545;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cart Notification Styles */
.cart-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 350px;
  padding: 15px 40px 15px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateX(120%);
  transition: transform 0.3s ease-in-out;
  opacity: 0.95;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.cart-notification.show {
  transform: translateX(0);
}

.cart-notification--success {
  background-color: #d4edda;
  border-left: 4px solid #28a745;
  color: #155724;
}

.cart-notification--error {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
  color: #721c24;
}

.cart-notification--info {
  background-color: #d1ecf1;
  border-left: 4px solid #17a2b8;
  color: #0c5460;
}

.cart-notification__icon {
  margin-right: 10px;
  font-size: 1.25rem;
}

.cart-notification__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-notification__close:hover {
  opacity: 1;
}

/* Ensure notifications are readable on mobile */
@media (max-width: 576px) {
  .cart-notification {
    left: 20px;
    right: 20px;
    max-width: none;
    bottom: auto;
    top: 10px;
  }
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .cart-preview {
    width: 100%;
    right: -100%;
  }
  
  .cart-item {
    flex-wrap: wrap;
    padding-right: 40px; /* Make room for the remove button */
  }
  
  .cart-item__details {
    width: calc(100% - 120px);
  }
  
  .cart-item__quantity {
    margin: 1rem 0 0 0;
    order: 3;
  }
  
  .cart-item__total {
    margin: 1rem 0 0 auto;
    order: 4;
    text-align: right;
    width: 100px;
  }
  
  .cart-item__remove {
    position: absolute;
    top: 1.5rem;
    right: 0;
    margin: 0;
  }
  
  .cart-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .cart-actions .btn {
    flex: 1 0 auto;
    margin: 0;
  }
  
  #clear-cart-btn {
    order: 3;
    flex: 1 0 100%;
    margin-top: 0.5rem;
  }
  
  /* Only show floating cart button when NOT on the cart page */
  body:not(.cart-page-active) .floating-cart-btn {
    display: flex;
  }
  
  /* Fix quantity control for mobile */
  .quantity-control {
    width: 110px;
    height: 36px;
  }
  
  .quantity-btn {
    width: 36px;
    height: 36px;
  }
  
  .quantity-input {
    width: 38px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cart-item {
    position: relative;
    padding-bottom: 2rem;
  }
  
  .cart-item__image {
    width: 80px;
    height: 80px;
  }
  
  .cart-item__details {
    width: calc(100% - 90px);
  }
  
  .cart-item__quantity,
  .cart-item__total {
    margin-top: 0.75rem;
  }
  
  .cart-item__quantity {
    width: 110px;
  }
  
  .cart-item__total {
    width: calc(100% - 120px);
    text-align: right;
  }
}

/* General Cart Styles (Keep existing desktop styles) */
.cart-page {
  /* ... existing styles ... */
}

.cart-items-container {
  /* ... existing styles ... */
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e9ecef;
}
.cart-item:last-child {
  border-bottom: none;
}

.cart-item__image {
  width: 80px;
  height: 80px;
  margin-right: 1.5rem;
  flex-shrink: 0;
}
.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.25rem;
}
.cart-item__placeholder {
  width: 80px;
  height: 80px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: 1.5rem;
}

.cart-item__details {
  flex-grow: 1;
}
.cart-item__name {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.cart-item__meta {
  font-size: 0.875rem;
  color: #6c757d;
}

.cart-item__quantity {
  width: 120px;
  margin: 0 1.5rem;
  flex-shrink: 0;
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
.quantity-control .quantity-btn {
  background-color: #f8f9fa;
  border: none;
  color: #495057;
  width: 35px;
  height: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quantity-control .quantity-btn:hover {
  background-color: #e9ecef;
}
.quantity-control .quantity-input {
  width: 50px;
  height: 35px;
  text-align: center;
  border: none;
  border-left: 1px solid #ced4da;
  border-right: 1px solid #ced4da;
  font-size: 0.875rem;
  /* Hide spinner buttons */
  -moz-appearance: textfield;
}
.quantity-control .quantity-input::-webkit-outer-spin-button,
.quantity-control .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.cart-item__total {
  width: 100px;
  text-align: right;
  font-weight: 500;
  flex-shrink: 0;
}

.cart-item__remove {
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}
.cart-item__remove .btn-remove {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 1.2rem;
}

.cart-summary {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e9ecef;
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.cart-summary__row:last-child {
  margin-bottom: 0;
}
.cart-summary__label {
  color: #6c757d;
}
.cart-summary__value {
  font-weight: 500;
}
.cart-summary__total {
  font-size: 1.25rem;
  font-weight: 600;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  margin-top: 1rem;
}

.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.cart-empty {
  text-align: center;
  padding: 4rem 1rem;
  border: 1px dashed #ced4da;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
}
.cart-empty__icon {
  font-size: 4rem;
  color: #adb5bd;
  margin-bottom: 1.5rem;
}
.cart-empty__title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.cart-empty__text {
  color: #6c757d;
  margin-bottom: 1.5rem;
}

/* --- Mobile Cart Styles (Mockup 2: Card View) --- */
@media (max-width: 767.98px) {
  /* Hide standard site header/footer/nav when mobile cart is active */
  body.mobile-cart-active #main-header, /* Adjust selector if needed */
  body.mobile-cart-active #main-footer, /* Adjust selector if needed */
  body.mobile-cart-active .mobile-nav { /* Adjust selector if needed */
      display: none !important;
  }

  /* Ensure body doesn't scroll and has no extra padding */
  body.mobile-cart-active {
      overflow: hidden;
      padding-bottom: 0 !important; /* Remove padding potentially added for mobile nav */
  }

  /* Hide desktop cart */
  .container.my-5.d-none.d-md-block {
      display: none !important;
  }

  /* Show mobile wrapper */
  .mobile-cart-wrapper {
      display: flex !important; /* Override d-block */
      flex-direction: column;
      height: 100vh; /* Full viewport height */
      width: 100%;
      background-color: #f4f4f4;
      overflow: hidden; /* Prevent body scroll */
      position: fixed; /* Take over the viewport */
      top: 0;
      left: 0;
      z-index: 1000; /* Ensure it's above other potential elements */
  }

  /* Sticky Header */
  .sticky-header {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      flex-shrink: 0; /* Prevent shrinking */
      height: 55px;
      position: sticky; /* Make header sticky */
      top: 0;
      z-index: 10;
  }

  .sticky-header .back-btn {
      background: none;
      border: none;
      font-size: 18px;
      color: #333;
      cursor: pointer;
      padding: 5px;
      margin-right: 15px;
  }

  .sticky-header .title {
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      flex-grow: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .sticky-header .action-btn {
      background: none;
      border: none;
      font-size: 16px;
      color: #333;
      cursor: pointer;
      padding: 5px;
      margin-left: 15px;
  }

  /* Scrollable Content Area */
  .cart-scrollable {
      flex-grow: 1; /* Take remaining space */
      overflow-y: auto; /* Enable vertical scrolling */
      padding: 15px;
  }

  /* Cart Item Card Styling */
  .mobile-cart-item-card {
      background-color: #ffffff;
      border-radius: 10px;
      margin-bottom: 15px;
      padding: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      display: grid; /* Use grid for layout */
      grid-template-columns: auto 1fr auto; /* Image, Details, Remove */
      grid-template-rows: auto auto; /* Name/Price, Actions */
      gap: 10px 15px; /* Row gap, Column gap */
      align-items: center;
  }

  .mobile-cart-item-card__image {
      grid-row: 1 / 3; /* Span both rows */
      width: 70px;
      height: 70px;
      border-radius: 6px;
      overflow: hidden;
      background-color: #eee;
      flex-shrink: 0;
  }
  .mobile-cart-item-card__image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }

  .mobile-cart-item-card__details {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      min-width: 0;
  }

  .mobile-cart-item-card__name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .mobile-cart-item-card__price {
      font-size: 13px;
      color: #555;
  }

  .mobile-cart-item-card__actions {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      display: flex;
      justify-content: flex-start; /* Align quantity to start */
      align-items: center;
  }

  /* Mobile Quantity Control */
  .mobile-cart-item-card .quantity-control {
      display: flex;
      align-items: center;
      border: 1px solid #e0e0e0;
      border-radius: 20px; /* Rounded */
      overflow: hidden;
  }

  .mobile-cart-item-card .quantity-control button {
      background-color: transparent;
      border: none;
      color: #333;
      font-size: 14px; /* Adjusted for visibility if 16px was too big */
      cursor: pointer;
      width: 30px;
      height: 30px;
      display: flex; /* Use flex to center icon */
      align-items: center;
      justify-content: center;
  }
   .mobile-cart-item-card .quantity-control button:active {
       background-color: #f0f0f0;
   }
   /* Ensure icons inside buttons are visible */
   .mobile-cart-item-card .quantity-control button i {
       font-size: inherit; /* Inherit size from button */
   }

  .mobile-cart-item-card .quantity-control .quantity-value {
      font-size: 14px;
      font-weight: 500;
      padding: 0 8px;
      min-width: 20px;
      text-align: center;
      color: #333; /* Ensure color */
  }

  .mobile-cart-item-card__remove-btn {
      grid-column: 3 / 4;
      grid-row: 1 / 3; /* Span both rows */
      background: none;
      border: none;
      color: #aaa; /* Lighter remove icon */
      font-size: 20px; /* Ensure size */
      cursor: pointer;
      padding: 5px;
      align-self: center; /* Center vertically */
      display: inline-block; /* Ensure display */
      width: 30px; /* Give explicit size if needed */
      height: 30px; /* Give explicit size if needed */
      line-height: 30px; /* Center icon vertically */
      text-align: center; /* Center icon horizontally */
  }
   .mobile-cart-item-card__remove-btn:active {
       color: #dc3545;
   }
   /* Ensure icon inside button is visible */
   .mobile-cart-item-card__remove-btn i {
       font-size: inherit; /* Inherit size from button */
   }

  /* Sticky Footer */
  .sticky-footer {
      padding: 15px;
      background-color: #ffffff;
      border-top: 1px solid #e0e0e0;
      flex-shrink: 0; /* Prevent shrinking */
      box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
      position: sticky; /* Make footer sticky */
      bottom: 0;
      z-index: 10;
  }

  .sticky-footer__summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
  }

  .sticky-footer__summary-label {
      font-size: 14px;
      color: #555;
  }

  .sticky-footer__summary-value {
      font-size: 16px;
      font-weight: 600;
  }

  .sticky-footer .btn {
      width: 100%; /* Full width button */
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 500;
  }
  .sticky-footer .btn i {
      margin-right: 8px;
  }

  /* Style the primary button in the mobile footer */
  .sticky-footer .btn.btn-primary {
      width: 100%; /* Full width button */
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 500;
      background-color: #1e1e2f; /* Specific color */
      color: white;
      border: none; /* Ensure no border overrides */
      border-radius: 8px; /* Match general btn style */
      text-align: center;
  }
  .sticky-footer .btn.btn-primary:active {
      background-color: #3c3c5f; /* Darker shade for active state */
  }

  /* Mobile Empty Cart State */
  .cart-scrollable .cart-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px 20px;
      height: calc(100% - 30px); /* Fill scrollable area minus padding */
      background-color: #fff; /* Match card background */
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .cart-scrollable .cart-empty__icon {
      font-size: 40px; /* Slightly smaller */
      color: #cccccc;
      margin-bottom: 15px;
  }

  .cart-scrollable .cart-empty__title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
  }

  .cart-scrollable .cart-empty__text {
      color: #777;
      margin-bottom: 20px;
      font-size: 13px;
  }
   .cart-scrollable .cart-empty .btn {
       font-size: 13px;
   }

   /* Hide desktop-specific elements if they exist */
   .cart-summary, .cart-actions {
       display: none;
   }

  /* Hide floating WhatsApp button (defined in base.html/base.css) on mobile cart page */
  body.mobile-cart-active .whatsapp-float {
    display: none !important;
  }

  .whatsapp-float {
    display: none !important; /* Hide by default */
  }

  /* Sticky Header */
  .sticky-header .back-btn,
  .sticky-header .action-btn {
    background: none;
    border: none;
    font-size: 18px; /* Ensure font-size is sufficient for icon */
    color: #333;
    cursor: pointer;
    padding: 5px;
    display: inline-flex; /* Use flex to help center */
    align-items: center;
    justify-content: center;
    min-width: 35px; /* Ensure button has space */
    min-height: 35px;
  }
  /* Ensure icons within header buttons are displayed */
  .sticky-header .back-btn i,
  .sticky-header .action-btn i {
    display: inline-block; /* Make sure icon itself is displayed */
    font-size: inherit; /* Inherit size from parent button */
  }

  /* Mobile Quantity Control */
  .mobile-cart-item-card .quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff; /* Add background for contrast */
  }

  .mobile-cart-item-card .quantity-control .quantity-btn {
    background-color: transparent;
    border: none;
    color: #333;
    font-size: 14px; /* Set explicit size */
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-flex; /* Use flex */
    align-items: center;
    justify-content: center;
  }
  /* Ensure icons within quantity buttons are displayed */
  .mobile-cart-item-card .quantity-control .quantity-btn i {
    display: inline-block; /* Make sure icon itself is displayed */
    font-size: inherit; /* Inherit size */
  }

  .mobile-cart-item-card .quantity-control .quantity-value {
    font-size: 14px;
    font-weight: 500;
    padding: 0 8px;
    min-width: 20px;
    text-align: center;
    color: #333;
  }

  .mobile-cart-item-card__remove-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px; /* Ensure size */
    cursor: pointer;
    padding: 5px;
    align-self: center;
    display: inline-flex; /* Use flex */
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
  }
  /* Ensure icon within remove button is displayed */
  .mobile-cart-item-card__remove-btn i {
    display: inline-block; /* Make sure icon itself is displayed */
    font-size: inherit; /* Inherit size */
  }

  /* Ensure icon in footer button is displayed */
  .sticky-footer .btn i {
    margin-right: 8px;
    display: inline-block; /* Make sure icon itself is displayed */
  }
}

/* Remove or comment out the overly specific !important block below if the above works */
/*
@media (max-width: 767.98px) {
  .sticky-header .back-btn,
  .sticky-header .action-btn,
  .mobile-clear-cart-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 35px !important;
    min-height: 35px !important;
    color: #333 !important;
    background-color: transparent !important;
    z-index: 20 !important;
  }

  .sticky-header .back-btn i,
  .sticky-header .action-btn i,
  .mobile-clear-cart-btn i {
    font-size: 18px !important;
    display: inline-block !important;
  }

  .mobile-cart-item-card .quantity-btn,
  .quantity-btn.quantity-increase,
  .quantity-btn.quantity-decrease {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f8f8 !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 4px !important;
    color: #333 !important;
    z-index: 5 !important;
  }

  .mobile-cart-item-card .quantity-btn i,
  .quantity-btn.quantity-increase i,
  .quantity-btn.quantity-decrease i {
    font-size: 14px !important;
    display: inline-block !important;
  }

  .mobile-cart-item-card__remove-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    min-height: 30px !important;
    color: #aaa !important;
    background-color: transparent !important;
    z-index: 5 !important;
  }

  .mobile-cart-item-card .quantity-control {
    border: 1px solid #ddd !important;
    background-color: #fff !important;
    display: flex !important;
  }

  .mobile-cart-item-card .quantity-control .quantity-value {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    color: #333 !important;
    font-weight: 500 !important;
  }
}
*/

/* Cart Preview Styles (Keep existing or adapt as needed) */
.cart-preview {
  /* ... existing styles ... */
}
/* ... rest of cart-preview styles ... */

/* Quick View Modal Styles (Keep existing or adapt as needed) */
.quick-view-image {
  /* ... existing styles ... */
}
/* ... rest of quick-view styles ... */

/* Updated Desktop Cart Actions Styles */
@media (min-width: 768px) {
  .cart-actions {
    display: flex;
    justify-content: space-between; /* Keep space between left and right groups */
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem; /* Consistent gap */
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
  }

  /* Group for buttons on the right */
  .cart-actions-main {
      display: flex;
      align-items: center;
      gap: 0.75rem; /* Space between Clear Cart and Checkout */
  }

  .cart-action-secondary {
      font-size: 0.875rem;
      padding: 0.5rem 1rem;
  }

   .cart-action-secondary i {
       font-size: 0.9em;
   }

  .cart-action-primary {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
      font-weight: 500;
  }

   .cart-action-primary i {
       font-size: 1.1em;
   }

  .cart-actions .btn {
      flex-shrink: 0;
  }

  /* Optional: If wrapping occurs and you want right group below left */
  /* @media (max-width: 991.98px) {
      .cart-actions {
          justify-content: center;
          flex-direction: column;
          align-items: flex-start;
      }
      .cart-actions-main {
          margin-top: 1rem;
          width: 100%;
          justify-content: flex-end;
      }
  } */
}


/* Mobile Specific Cart Styles */
@media (max-width: 767.98px) {
    /* ... existing mobile cart styles ... */
}

/* ... other existing cart styles ... */