:root{
      --brand:#d32f2f;
      --muted:#6c757d;
      --card-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }

    body {
      background: #f8f9fa;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: #212529;


    }

    /* NAVBAR */
    .navbar { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
    .navbar-brand { font-weight: 700; color: var(--brand) !important; }
    .nav-link { color: #333 !important; font-weight: 500; }
    .nav-link:hover, .nav-link.active { color: var(--brand) !important; }
    .search-form { min-width: 260px; }

    /* FILTER BAR */
    .filter-bar {
      background: #fff;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 1px 6px rgba(0,0,0,0.04);
      margin-bottom: 20px;
      align-items:center;
    }
    .filter-bar .btn { margin-right: 8px; }

    /* PRODUCT CARDS - overall */
    .product-card {
      border: none;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
      transition: transform 0.15s, box-shadow 0.15s;
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }

    /* IMAGE AREA: add padding around image so it doesn't touch the border */
    .product-thumb {
      background: #fff;
      border-bottom: 1px solid #f1f3f5;
      display: flex;
      align-items: center;
      justify-content: center;
      /* padding creates breathing room for the image */
      padding: 14px;
      /* keep a consistent visual height while allowing responsiveness */
      aspect-ratio: 16/10;
      width: 100%;
    }
    .product-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* show whole product with whitespace if needed */
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      background: #ffffff;
    }

    /* DISCOUNT BADGE */
    .badge-discount {
      position: absolute;
      top: 12px; left: 12px;
      background: var(--brand); color: #fff; font-size: .78rem;
      padding: 6px 9px; border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      z-index: 5;
    }

    /* CARD BODY: explicit padding so text and buttons don't touch edges */
    .product-card .card-body {
      padding: 14px; /* main padding for readable spacing */
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 auto;
    }
    .card-body .title { font-weight:600; font-size:.98rem; margin-bottom:0; }
    .meta { color:var(--muted); font-size:.85rem; }

    .price { color: var(--brand); font-weight: 700; font-size:1.02rem; }
    .old-price { text-decoration: line-through; color:#8a8989; font-size:.95rem; margin-left:.6rem; }

    /* star & review */
    .star-sm i { color:#f59e0b; margin-right:2px; font-size:.90rem; }

    /* action buttons container inside card */
    .product-actions {
      display:flex;
      gap:10px;
      margin-top:auto; /* push to bottom so cards equalize height visually */
    }

    /* Avatar */
    .avatar {
      width: 36px; height: 36px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: #f1f3f5; color: #444; font-weight: 700; border: 1px solid #e9ecef;
    }
/* small, reusable circular badge */
.inbox-dot {
  width: 11px;
  height: 11px;
  padding: 0 0 0 5;
  border-radius: 50%;
  display: inline-block;
  line-height: 0;               /* avoid text affecting size */
  vertical-align: middle;
  box-sizing: border-box;       /* makes border included in size */
}
.pagination {
  display: flex !important;
  list-style: none;
  gap: 0.25rem;
  margin-left: 10px;
}
.pagination .page-item .page-link {
  min-width: 40px;
  text-align: center;
  padding: .45rem .6rem;
}
    /* FOOTER */
    .site-footer { background:#111827; color:#fff; padding:36px 0 18px; margin-top:100px; }
    .site-footer, .site-footer p, .site-footer .small, .site-footer li, .site-footer address, .site-footer .meta { color: #fff !important; }
    .site-footer a { color: #fff !important; text-decoration:none; }
    .site-footer a:hover { opacity:.85; text-decoration:underline; }
    .social-btn { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px;  margin-right:.5rem;  color:#111827; }
    .newsletter-input { max-width:360px; }

    /* Back-to-top button icon */
    #backToTop i { font-size:1.15rem; }

    /* RESPONSIVE TWEAKS: reduce padding on smaller screens while keeping breathing room */
    @media (max-width: 991.98px) {
      .product-thumb { padding: 12px; aspect-ratio: 16/9; }
      .product-card .card-body { padding: 12px; gap:8px; }
    }

    @media (max-width: 575.98px) {
      .search-form { min-width: 140px; }
      .product-thumb { padding: 10px; aspect-ratio: 4/3; }
      .product-card .card-body { padding: 10px; gap:6px; }
      .badge-discount { top:10px; left:10px; padding:5px 7px; font-size:.72rem; }
    }

    /* Ensure buttons wrap nicely on very small screens */
    .product-actions .btn { min-width: 0; }