body { background-color: #f8f9fa; }
    /* Keep navbar fixed so it 'stays still' across pages */
    .navbar { background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.08); }
    .navbar-brand { font-weight: 700; color: #d32f2f !important; }
    .nav-link { color: #333 !important; font-weight: 500; }
    .nav-link:hover { color: #d32f2f !important; }

    /* spacing to account for fixed navbar */
    main { padding-top: 92px; }

    /* Product page */
    .product-gallery {
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }

    .thumb {
      cursor: pointer;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid transparent;
    }
    .thumb.active { border-color: #d32f2f; }

    .price { color: #d32f2f; font-weight: 700; font-size: 1.35rem; }
    .old-price { text-decoration: line-through; color: gray; margin-left: 0.6rem; }

    .specs-card { border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

    /* Ratings / reviews */
    .rating-inline { display:flex; align-items:center; gap:.5rem; font-size: .95rem; }
    .rating-inline .avg { font-weight:700; font-size:1.05rem; color:#111; }
    .rating-inline .stars i { color:#f59e0b; margin-right:2px; }
    .review-card { border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.04); background:#fff; }
    .review-item + .review-item { margin-top:1rem; border-top:1px solid #f1f3f5; padding-top:1rem; }

    .review-meta { font-size:.88rem; color:#6c757d; }

    /* review form small tweaks */
    .star-display i { color:#f59e0b; margin-right:2px; }

    @media (max-width: 991.98px) {
      main { padding-top: 110px; } /* more spacing for smaller screens if navbar wraps */
    }
/* Star rating styling — put in your CSS file instead if you prefer */
.star-rating-css {
  display: inline-flex;
  flex-direction: row-reverse; /* render visually 5..1 left-to-right */
  gap: 6px;
  align-items: center;
}

.star-rating-css input { display: none; }

.star-rating-css label {
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  user-select: none;
}

/* default (un-selected) color */
.star-rating-css label .fa-star { color: #cccccc; }

/* color for checked and hover states */
/* checked input affects labels that come *after* it in DOM; with row-reverse this highlights correctly */
.star-rating-css input:checked ~ label .fa-star,
.star-rating-css label:hover .fa-star,
.star-rating-css label:hover ~ label .fa-star {
  color: #f5b301; /* golden */
}

/* small helper for screen readers */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}