/* =========================================================
   WhiteLabel Shop — Main Stylesheet
   Uses CSS variables injected by header.php
   ========================================================= */

:root {
  --primary:     #2563eb;
  --accent:      #f59e0b;
  --font-family: 'Inter', sans-serif;
}

body {
  font-family: var(--font-family), system-ui, sans-serif;
}

/* ── Promo Banner ───────────────────────────────────────── */
.promo-banner {
  background: var(--primary);
  color: #fff;
  font-size: .875rem;
  letter-spacing: .02em;
}
.promo-banner a { color: #fff; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar-brand strong {
  color: var(--primary);
  font-size: 1.25rem;
}

/* ── Hero Section ───────────────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
}

/* ── Product Cards ──────────────────────────────────────── */
.product-card {
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,.12) !important;
}
.product-thumb {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

/* ── Star Rating ────────────────────────────────────────── */
.star-rating { letter-spacing: .05em; }

/* ── Product Gallery Thumbnails ─────────────────────────── */
.thumbnail-image {
  transition: opacity .15s, border-color .15s;
}
.thumbnail-image:hover { opacity: 1 !important; border-color: var(--primary) !important; }

/* ── Buttons using CSS vars ─────────────────────────────── */
.btn-primary {
  background-color: var(--primary);
  border-color:     var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary) 85%, black);
  border-color:     color-mix(in srgb, var(--primary) 85%, black);
}
.btn-outline-primary {
  color:        var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  color: #fff;
}

/* ── About & Product Content ────────────────────────────── */
.about-content h2,
.about-content h3 { color: var(--primary); }

.product-description img { max-width: 100%; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert-sm { padding: .35rem .65rem; font-size: .85rem; }

/* ── Footer ─────────────────────────────────────────────── */
footer a { transition: color .15s; }
footer a:hover { color: var(--primary) !important; }

/* ── Page transitions ───────────────────────────────────── */
main { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:.6 } to { opacity:1 } }

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 576px) {
  .product-thumb { height: 160px; }
  .hero-section { min-height: 320px !important; }
  .hero-section h1 { font-size: 1.8rem; }
}

/* ── Install wizard ─────────────────────────────────────── */
.install-card .step { transition: color .2s, border-color .2s; }