/* Nida Khan Luxury Custom CSS Additions */

/* Drawer Slide In / Out */
.drawer-backdrop {
  transition: opacity 0.3s ease;
}

.drawer-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal styling */
.luxury-modal-overlay {
  background-color: rgba(34, 22, 18, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Aspect ratio fallbacks */
.aspect-\[3\/4\] {
  aspect-ratio: 3 / 4;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16 / 9;
}

/* Line clamps */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stepper input */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Custom button states */
.btn-luxury-primary {
  background-color: #2E1F18;
  color: #FAF6F0;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-luxury-primary:hover {
  background-color: #3D2B24;
}
.btn-luxury-primary:active {
  transform: scale(0.99);
}

.btn-luxury-secondary {
  background-color: #FAF6F0;
  color: #2E1F18;
  border: 1px solid #D4BBA5;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-luxury-secondary:hover {
  background-color: #F5EFE6;
  border-color: #8C5E48;
}

.btn-whatsapp {
  background-color: #15803D;
  color: #ffffff;
  transition: background-color 0.2s ease;
}
.btn-whatsapp:hover {
  background-color: #166534;
}

/* Header sticky blur */
header.sticky {
  background-color: rgba(250, 246, 240, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Badges */
.badge-gold {
  color: #C5A880;
  border: 1px solid rgba(197, 168, 128, 0.4);
}

/* Responsive Shop Grid: Exactly 2 columns on mobile/tablet, 4 columns on desktop */
#shopProductGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem;
}

@media (min-width: 640px) {
  #shopProductGrid {
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  #shopProductGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem;
  }
}