/* Product Card Professional Styling */

/* Card container improvements */
.card {
      overflow: hidden !important;
      transition: all 0.3s ease;
      border: 1px solid #e0e0e0 !important;
}

/* Image styling */
.card-img-top {
      max-width: 100% !important;
      width: 100% !important;
      object-fit: contain !important;
      background-color: #f8f9fa;
      padding: 1.5rem;
      transition: transform 0.3s ease;
}

.card:hover .card-img-top {
      transform: scale(1.05);
}

/* Professional card body spacing */
.card-body {
      padding: 1.5rem 1.25rem !important;
}

.card-title {
      margin-bottom: 1rem !important;
      font-size: 1rem !important;
      line-height: 1.5;
      min-height: 3em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
}

.card-body .text-danger {
      font-size: 1.15rem !important;
      margin-bottom: 0.5rem !important;
      font-weight: 700;
}

/* Professional button styling */
.card-footer {
      padding: 1rem 1.25rem !important;
      background-color: #ffffff !important;
      border-top: 1px solid #f0f0f0 !important;
}

.card-footer .btn {
      white-space: nowrap;
      transition: all 0.3s ease;
      font-weight: 600;
}

.card-footer .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

/* Mobile-specific adjustments */
@media (max-width: 576px) {
      .card-img-top {
            height: 160px !important;
            padding: 0.75rem;
      }

      .card-body {
            padding: 0.75rem 0.65rem !important;
      }

      .card-title {
            font-size: 0.8rem !important;
            min-height: 2.4em;
            margin-bottom: 0.5rem !important;
            line-height: 1.4;
      }

      .card-body .text-danger {
            font-size: 0.95rem !important;
      }

      .card-footer {
            padding: 0.65rem !important;
      }

      .card-footer .btn {
            width: 100% !important;
            font-size: 0.78rem !important;
            padding: 0.5rem 0.5rem !important;
            display: flex !important;
            justify-content: center;
      }

      .card-footer .btn .btn-text {
            font-size: 0.78rem;
      }

      .card-footer .btn i {
            font-size: 0.8rem !important;
            margin-right: 0.25rem !important;
      }

      .card-footer form {
            width: 100% !important;
      }

      /* Featured products section */
      .border.rounded-3.p-4 {
            padding: 1rem !important;
            border-width: 1px !important;
      }

      /* Section headers smaller on mobile */
      h2.text-center.text-primary.mb-4,
      h2.text-primary.text-center.mb-4 {
            font-size: 1.2rem !important;
            margin-bottom: 1.25rem !important;
            padding-bottom: 0.75rem;
      }

      h4.text-dark.fw-bold.mb-3 {
            font-size: 1rem !important;
            margin-bottom: 0.75rem !important;
      }

      /* Reduce section padding */
      section.py-4 {
            padding-top: 1.25rem !important;
            padding-bottom: 1.25rem !important;
      }

      .container.px-4.px-lg-5 {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
      }

      /* Card column spacing */
      .col.mb-5 {
            margin-bottom: 1rem !important;
      }

      .col.mb-4 {
            margin-bottom: 0.75rem !important;
      }

      /* Reduce card gap */
      .row.gx-4 {
            margin-left: -0.375rem;
            margin-right: -0.375rem;
      }

      .row.gx-4>* {
            padding-left: 0.375rem;
            padding-right: 0.375rem;
      }
}

/* Tablet adjustments */
@media (min-width: 577px) and (max-width: 768px) {
      .card-img-top {
            height: 220px !important;
            padding: 1.25rem;
      }

      .card-body {
            padding: 1.25rem 1rem !important;
      }

      .card-footer .btn {
            font-size: 0.9rem !important;
            padding: 0.6rem 1rem !important;
      }
}

/* Desktop improvements */
@media (min-width: 769px) {
      .card-img-top {
            height: 260px !important;
      }

}

/* Better card shadows */
.card.shadow-sm {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.card.shadow-sm:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
      transform: translateY(-5px);
}

/* Grid spacing improvements */
.row.gx-4 {
      margin-left: -0.75rem;
      margin-right: -0.75rem;
}

.row.gx-4>* {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
}

.row.gx-lg-5 {
      margin-left: -1rem;
      margin-right: -1rem;
}

.row.gx-lg-5>* {
      padding-left: 1rem;
      padding-right: 1rem;
}

/* Card column spacing */
.col.mb-5 {
      margin-bottom: 2rem !important;
}

.col.mb-4 {
      margin-bottom: 1.75rem !important;
}

/* Section spacing */
section.py-4 {
      padding-top: 2.5rem !important;
      padding-bottom: 2.5rem !important;
}

/* Product section headers */
h2.text-primary.text-center.mb-4 {
      margin-bottom: 2.5rem !important;
      padding-bottom: 1.25rem;
      border-bottom: 3px solid #007bff;
      font-weight: 700;
}

h4.text-dark.fw-bold.mb-3 {
      margin-bottom: 1.5rem !important;
      padding-bottom: 0.75rem;
      border-bottom: 2px solid #e9ecef;
}

/* Container padding */
.container.px-4.px-lg-5 {
      padding-left: 1.5rem !important;
      padding-right: 1.5rem !important;
}

@media (min-width: 992px) {
      .container.px-4.px-lg-5 {
            padding-left: 3rem !important;
            padding-right: 3rem !important;
      }
}

/* Variant Selection Styling */
.variant-selector+label {
      min-width: 40px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      margin-bottom: 0px !important;
}

.variant-selector:checked+label {
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
      font-weight: 600;
      transform: scale(1.05);
}

.variant-selector:hover+label {
      background-color: #f8f9fa;
      color: #0d6efd;
      border-color: #0d6efd;
}

.variant-selector:checked:hover+label {
      background-color: #0d6efd;
      color: #fff;
}

.variant-selector:disabled+label {
      opacity: 0.5;
      cursor: not-allowed;
      background-color: #e9ecef;
      border-color: #dee2e6;
      color: #6c757d;
      box-shadow: none;
}