/* assets/storefront.css - Modern Elegant Theme */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,700;1,500&display=swap');

:root {
  /* Modern Elegant Palette */
  --color-bg-main: #f8fafc; /* Slate-50 */
  --color-bg-card: #ffffff; /* Crisp white */
  --color-text-primary: #1e293b; /* Charcoal / Dark Navy mix */
  --color-text-secondary: #64748b; /* Soft slate */
  --color-accent: #b4975a; /* Soft elegant gold */
  --color-accent-hover: #9c804b;
  --color-dark-navy: #0f172a;
  
  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-floating: 0 20px 40px rgba(15, 23, 42, 0.12);
}

body {
  background-color: var(--color-bg-main);
  font-family: 'Inter', sans-serif;
  color: var(--color-text-primary);
}

/* Typography Overrides */
h1, h2, h3, h4, h5, .serif-heading {
  font-family: 'Playfair Display', serif;
  color: var(--color-dark-navy);
}

/* Layout Wrappers */
.storefront-public-wrapper {
  background-color: var(--color-bg-main) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Elegant Cards */
.elegant-card {
  background-color: var(--color-bg-card);
  border: 1px solid rgba(15, 23, 42, 0.03) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.elegant-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover) !important;
}

/* Item Images */
.elegant-card img {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transition: transform 0.5s ease;
}

.elegant-card:hover img {
  transform: scale(1.03);
}

.img-wrapper-overflow {
  overflow: hidden;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Hero Section */
.hero-card {
  background: var(--color-bg-card) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-floating) !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  border-radius: 24px !important;
}

/* Badges and Buttons */
.badge-elegant {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
}

.btn-elegant-gold {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
}

.btn-elegant-gold:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn-elegant-dark {
  background-color: var(--color-dark-navy) !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-elegant-dark:hover {
  background-color: #1e293b !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn-elegant-outline {
  background-color: transparent !important;
  color: var(--color-dark-navy) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

.btn-elegant-outline:hover {
  background-color: rgba(15, 23, 42, 0.03) !important;
}

/* Ribbon Categories */
.category-ribbon-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

.category-ribbon-btn.active-cat {
  background-color: var(--color-dark-navy) !important;
  color: #fff !important;
  box-shadow: var(--shadow-soft) !important;
}

.category-ribbon-btn.inactive-cat {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
}

.category-ribbon-btn.inactive-cat:hover {
  background-color: rgba(15, 23, 42, 0.02) !important;
  color: var(--color-text-primary) !important;
}

/* Grid Override */
.customer-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  .customer-menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
  }
}