/* ============================================================
   Webshop — kundeside-tema
   ============================================================ */
:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-rgb: 79, 70, 229;
  --accent: #f59e0b;
  --ink: #1e2235;
  --muted: #6b7280;
  --surface: #f6f7fb;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--surface);
}

h1, h2, h3, h4, h5, h6, .navbar-brand { font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* ---- Buttons ---- */
.btn { border-radius: 0.65rem; font-weight: 600; }
.btn-lg { border-radius: 0.8rem; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
}
.btn-warning {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; --bs-btn-color: #fff; --bs-btn-hover-color:#fff;
}
.text-primary { color: var(--brand) !important; }
.link-primary { color: var(--brand) !important; }

/* ---- Navbar ---- */
.navbar.bg-dark {
  background: linear-gradient(90deg, #1e1b4b 0%, var(--brand) 100%) !important;
  padding-top: .7rem; padding-bottom: .7rem;
}
.navbar .nav-link { font-weight: 600; opacity: .92; }
.navbar .nav-link:hover, .navbar .nav-link.active { opacity: 1; }
.navbar .form-control { border-radius: .65rem; }

/* ---- Hero ---- */
.hero {
  background: radial-gradient(1200px 400px at 90% -10%, rgba(245,158,11,.35), transparent 60%),
              linear-gradient(135deg, #1e1b4b 0%, var(--brand) 60%, #6d28d9 100%);
  color: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 20px 40px -20px rgba(var(--brand-rgb), .6);
}
.hero .btn-warning { box-shadow: 0 8px 20px -6px rgba(245,158,11,.7); }

/* ---- Cards ---- */
.card { border: 1px solid rgba(0,0,0,.05); border-radius: 1rem; }
.card-header { border-radius: 1rem 1rem 0 0 !important; }

.product-card {
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(var(--brand-rgb), .15);
}
.product-thumb { height: 210px; object-fit: cover; background: #eef0f6; transition: transform .35s ease; }
.product-card:hover .product-thumb { transform: scale(1.05); }
.product-thumb-placeholder {
  height: 210px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#eef0f6,#e3e6f0); color: #b9c0d4; font-size: 3rem;
}
.product-card .card-title a { color: var(--ink); }
.product-card .card-title a:hover { color: var(--brand); }

/* Sale ribbon */
.sale-ribbon {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: .5rem; letter-spacing: .03em;
  box-shadow: 0 4px 10px -2px rgba(245,158,11,.6);
}

.price-old { text-decoration: line-through; color: var(--muted); font-size: .85rem; }
.price-now { color: #e11d48; font-weight: 800; }

/* Category tiles on the homepage */
.category-tile { transition: transform .15s ease, box-shadow .15s ease; }
.category-tile:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.1); }

/* Product detail image */
.product-detail-img {
  width: 100%; max-height: 480px; object-fit: contain;
  background: #fff; border-radius: 1rem; border: 1px solid rgba(0,0,0,.05);
}

/* Badges */
.badge { font-weight: 600; }

/* List groups / sidebar filters */
.list-group-item.active { background: var(--brand); border-color: var(--brand); }

/* Footer */
footer.bg-dark { background: #15182a !important; }

/* Forms */
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--brand-rgb), .5);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15);
}

.nav-link.active { font-weight: 700; }

@media (max-width: 575px) {
  .product-thumb, .product-thumb-placeholder { height: 165px; }
  .hero { border-radius: 1rem; }
}