/* ifstore.uy — navy brand palette over Bootstrap (light theme).
   Brand colors live in these variables only; semantic colors (alert
   danger/success, status badges) stay on Bootstrap defaults. */

:root {
  --ifs-brand:      #12325E;   /* primary navy — logomark bg, wordmark text */
  --ifs-accent:     #2E6DB4;   /* accent — tagline, links, em highlights, hovers */
  --ifs-brand-tint: #EAF1F8;   /* soft backgrounds, card hovers */
  --ifs-brand-dark: #0B2140;   /* logomark/button hover, active states */
}

body {
  background: var(--ifs-brand-tint);
}

a {
  color: var(--ifs-accent);
}

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

.navbar {
  background: #ffffff;
}

.navbar-brand,
.text-brand {
  color: var(--ifs-brand) !important;
}

.text-accent {
  color: var(--ifs-accent) !important;
}

footer {
  background: #ffffff;
}

.card {
  background: #ffffff;
  border-color: #d7e2ee;
}

.card-header {
  background: var(--ifs-brand-tint);
  border-color: #d7e2ee;
  font-weight: 600;
  color: var(--ifs-brand);
}

.list-group-item {
  background: #ffffff;
  border-color: #d7e2ee;
}

.list-group-item:hover {
  background: var(--ifs-brand-tint);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ifs-accent);
  box-shadow: 0 0 0 .2rem rgba(46, 109, 180, .15);
}

/* ── Brand buttons (replace Bootstrap btn-info usages) ─────────────────── */
.btn-brand {
  --bs-btn-bg: var(--ifs-brand);
  --bs-btn-border-color: var(--ifs-brand);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--ifs-brand-dark);
  --bs-btn-hover-border-color: var(--ifs-brand-dark);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--ifs-brand-dark);
  --bs-btn-active-border-color: var(--ifs-brand-dark);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--ifs-brand);
  --bs-btn-disabled-border-color: var(--ifs-brand);
  --bs-btn-disabled-color: #ffffff;
}

.btn-brand-outline {
  --bs-btn-color: var(--ifs-brand);
  --bs-btn-border-color: var(--ifs-brand);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--ifs-brand-dark);
  --bs-btn-hover-border-color: var(--ifs-brand-dark);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--ifs-brand-dark);
  --bs-btn-active-border-color: var(--ifs-brand-dark);
  --bs-btn-active-color: #ffffff;
}

.badge-brand {
  background: var(--ifs-brand);
  color: #ffffff;
}

/* ── Auth card (login / register) ──────────────────────────────────────── */
.ifs-auth-card {
  background: #ffffff;
  border: 1px solid #d7e2ee;
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow: 0 6px 24px rgba(18, 50, 94, .08);
}

.ifs-auth-card .logomark {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto .75rem;
}

.ifs-auth-card .name {
  color: var(--ifs-brand);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: -.02em;
  margin-bottom: .15rem;
}

.ifs-auth-card .tagline {
  color: var(--ifs-accent);
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  margin-bottom: 1.75rem;
}

.ifs-auth-card h1 {
  font-size: 1.3rem;
  color: var(--ifs-brand-dark);
}

.ifs-auth-card h1 em {
  color: var(--ifs-accent);
  font-style: normal;
}

/* ── Storefront ─────────────────────────────────────────────────────────── */
.product-card {
  transition: box-shadow .15s ease, border-color .15s ease;
  color: inherit;
}

.product-card:hover {
  border-color: var(--ifs-accent);
  box-shadow: 0 6px 18px rgba(18, 50, 94, .12);
}

.product-thumb {
  background: var(--ifs-brand-tint);
  border-radius: 12px 12px 0 0;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-thumb .placeholder-mark {
  width: 56px;
  height: 56px;
  opacity: .35;
}

.product-title {
  color: var(--ifs-brand-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.product-detail-image img {
  max-height: 420px;
  object-fit: contain;
}

.product-detail-image .placeholder-mark {
  width: 96px;
  height: 96px;
  opacity: .35;
  margin: 4rem 0;
}

.product-thumb-mini {
  object-fit: cover;
  background: var(--ifs-brand-tint);
}