html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body { margin-bottom: 60px; }

/* === Pastili HoneyTrace green theme ============================== */
/* Tones picked from the Pastili logo (lime → forest green + teal). */
:root {
  --pastili-light:   #A5CE39;
  --pastili-mid:     #6FA82F;
  --pastili-dark:    #2E6B1F;
  --pastili-deep:    #1E4A14;
  --pastili-subtle:  #EAF4D7;
  --pastili-teal:    #1FA391;
}

/* Re-skin Bootstrap "warning" so existing markup stays valid. */
.bg-warning            { background-color: var(--pastili-light) !important; }
.bg-warning-emphasis   { background-color: var(--pastili-deep)  !important; color: #fff; }
.bg-warning-subtle     { background-color: var(--pastili-subtle) !important; }
.text-warning          { color: var(--pastili-light) !important; }

.btn-warning {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  var(--pastili-mid);
  --bs-btn-border-color:        var(--pastili-mid);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            var(--pastili-dark);
  --bs-btn-hover-border-color:  var(--pastili-dark);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           var(--pastili-deep);
  --bs-btn-active-border-color: var(--pastili-deep);
  --bs-btn-disabled-color:      #fff;
  --bs-btn-disabled-bg:         var(--pastili-mid);
  --bs-btn-disabled-border-color: var(--pastili-mid);
}

.btn-primary {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  var(--pastili-mid);
  --bs-btn-border-color:        var(--pastili-mid);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            var(--pastili-dark);
  --bs-btn-hover-border-color:  var(--pastili-dark);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           var(--pastili-deep);
  --bs-btn-active-border-color: var(--pastili-deep);
}

.btn-outline-warning {
  --bs-btn-color:               var(--pastili-mid);
  --bs-btn-border-color:        var(--pastili-mid);
  --bs-btn-hover-bg:            var(--pastili-mid);
  --bs-btn-hover-border-color:  var(--pastili-mid);
}

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

.list-group-item.active {
  background-color: var(--pastili-mid);
  border-color: var(--pastili-mid);
  color: #fff;
}

.navbar-dark.bg-warning-emphasis .navbar-brand,
.navbar-dark.bg-warning-emphasis .nav-link {
  color: #fff;
}
.navbar-dark.bg-warning-emphasis .nav-link.active {
  color: var(--pastili-light) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem var(--pastili-light);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--pastili-mid);
  box-shadow: 0 0 0 0.2rem rgba(122, 193, 67, 0.25);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Brand mark in the navbar/login. */
.pastili-mark { display: inline-block; vertical-align: middle; }

/* === Public track page =========================================== */

.track-body {
  background-color: #F4F4EE;
}

.track-page {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.track-card {
  background: #fff;
  border: 1px solid #ECECE3;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.track-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pastili-mid);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.track-label-muted {
  color: #B0B0A6;
}

.track-headline {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 0;
}
.track-headline-sm {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
}

.track-product-frame {
  background: #fff;
  border: 1px solid #ECECE3;
  border-radius: 0.75rem;
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
}
.track-product-frame > img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.track-no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.track-no-photo span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B0B0A6;
}

.track-weight-pill {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: #fff;
  border: 1px solid #ECECE3;
  border-radius: 99px;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
  color: var(--pastili-dark);
}

.track-cert-pill {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  background: var(--pastili-subtle);
  color: var(--pastili-dark);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.track-logo-pill {
  display: inline-block;
  height: 36px;
  width: 110px;
  border-radius: 99px;
  background: var(--pastili-light);
}

.nutrition-card {
  border: 1px solid #ECECE3;
  border-radius: 0.75rem;
  padding: 1rem;
  height: 100%;
}
.nutrition-card hr {
  border-color: #ECECE3;
}

.cert-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pastili-mid);
  margin-right: 0.35rem;
  vertical-align: middle;
}

.supplier-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EFE6D2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B89C66;
  font-size: 1.1rem;
}

.track-map {
  height: 280px;
  border-radius: 0.75rem;
}

.track-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.track-thumb {
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: #ECECE3;
  overflow: hidden;
}
.track-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-coords {
  background: rgba(255,255,255,0.85);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #333;
}