/* ============================================================
   COMPARE ENGINE — product cards, compare table, quick view
   ============================================================ */
.compare-tools {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 12px 0 4px;
}
.compare-tools select, .compare-tools input[type="search"] {
  border: 1px solid rgba(120,140,165,.35); border-radius: 10px;
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  background: rgba(255,255,255,.75); color: #24364b; min-width: 150px;
}
.compare-tools .switch-row.mini { padding: 0; font-size: 12px; }
.count-pill {
  display: inline-block; background: #e7f6ec; color: #1c7a3d;
  border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; vertical-align: middle;
}

/* The results grid.

   This used to be repeat(auto-fill, minmax(230px, 1fr)), which picks a column
   count from the available width. That is why the grid was 3-up, 4-up or
   5-up depending on the window: the row never matched the 16 products the
   engine renders, so a "4 x 4" page came out as three ragged rows.

   The grid is four across on desktop, three on a tablet, two on a large
   phone and one on a small one, with the breakpoints owned here so there is
   a single answer rather than two files disagreeing. The page renders 16
   products, which is 4 x 4. */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px;
  padding: 8px 0 !important;
  text-align: left !important;
  /* every card in a row gets the same height, whatever its content length */
  align-items: stretch;
}
@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1180px) and (min-width: 861px) {
  /* The phone rule below is 3-up too, so tablets read the same as phones
     here. This block exists only so the pair is explicit in the cascade
     rather than depending on two adjacent max-width queries happening to
     agree. */
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Phones: three across.

   This used to be `1fr`, which put a single card per row and left the grid
   one column wide on every handset. Three is what a shopper can actually
   scan, and minmax(0, 1fr) - rather than 1fr - is what keeps it honest:
   a bare 1fr track has an automatic minimum of min-content, so a long
   unbroken product name (a URL-style SKU, a run of digits) pushes the
   track wider than its share and the row overflows the viewport.

   860px is deliberately left above this one: at 861-1180px the tablet rule
   still gives three columns, so there is no width at which the layout jumps
   from three straight to two on the way down. */
@media (max-width: 860px) {
  .product-grid,
  .product-grid.list-view {
    /* the grid itself may never exceed its container, in either axis */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* a small but usable gutter; the cards keep minmax(0,...) so this is
       never what pushes the row over the edge */
    gap: 8px !important;
  }
  /* Every card is a flex column, so it will happily stretch to fit its
     content's min-content width. These three are what stop a long title,
     price or platform name from widening a card past its one-third share
     and pushing the row out of the viewport. */
  .product-grid > .product-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* The image fills its box and is contained by it, so a tall or wide
     product photo cannot escape the card. */
  .product-grid .product-image,
  .product-grid .product-image > a,
  .product-grid .product-image img,
  .product-grid .product-image > a > img {
    max-width: 100%;
    box-sizing: border-box;
  }
  .product-grid .product-image img,
  .product-grid .product-image > a > img {
    object-fit: contain;
  }
  /* Titles wrap inside the card instead of widening it. */
  .product-grid .product-card h3,
  .product-grid .product-card h3 a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* list view is a deliberate one-per-row choice, so it keeps its own rule
   rather than inheriting the three-up phone layout above */
.product-grid.list-view { grid-template-columns: 1fr !important; }

.product-grid .no-results { grid-column: 1/-1; text-align: center; padding: 50px 20px; color: #94a3b8; }
.product-grid .no-results i { font-size: 38px; display: block; margin-bottom: 12px; }

/* Shown above the results when an explicit search had to bypass the
   "2+ stores only" rule - the shopper is told why they are seeing
   single-store listings instead of silently getting them. */
.product-grid .search-notice {
  grid-column: 1/-1; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin-bottom: 4px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  font-size: 12.5px; line-height: 1.5; text-align: left;
}
.product-grid .search-notice i { margin-top: 2px; flex-shrink: 0; color: #d97706; }

.btn-go, .btn-cmp {
  flex: 1; text-align: center; font-size: 11.5px; font-weight: 700;
  padding: 8px 6px; border-radius: 10px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
}
.btn-go { background: #079F34; color: #fff; }
.btn-go:hover { filter: brightness(1.08); }
.btn-cmp { background: rgba(9,32,64,.06); color: #0e1f36; border-color: rgba(9,32,64,.14); }
.btn-cmp:hover { background: rgba(7,159,52,.1); border-color: rgba(7,159,52,.4); color: #1c7a3d; }
.btn-go.big { display: inline-block; margin-top: 12px; padding: 11px 20px; font-size: 13px; }

/* quick view */
.qv-overlay {
  position: fixed; inset: 0; z-index: 1400; background: rgba(9,20,34,.55);
  backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center;
  padding: 30px 16px; overflow-y: auto;
}
.qv {
  position: relative; width: min(980px, 100%); border-radius: 22px; padding: 20px;
  background: rgba(255,255,255,.96); display: grid; grid-template-columns: 340px 1fr; gap: 20px;
  box-shadow: 0 30px 70px rgba(4,15,30,.35);
}
.qv-x { position: absolute; top: 8px; right: 14px; border: none; background: none; font-size: 26px; cursor: pointer; color: #6b7f93; }
.qv-gallery { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.qv-gallery img { width: 100%; border-radius: 12px; object-fit: cover; border: 1px solid rgba(120,140,165,.2); }
.qv-info h3 { font-size: 17px; font-weight: 800; color: #0e1f36; line-height: 1.3; }
.qv-info h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #7790a6; margin: 14px 0 6px; }
.qv-brand { font-size: 12px; color: #6b7f93; margin-top: 4px; }
.qv-price { font-size: 22px; font-weight: 800; color: #079F34; margin: 10px 0; }
.qv-price s { font-size: 13px; color: #9aa8b6; font-weight: 500; }
.qv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.qv-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: #7790a6; padding: 6px; border-bottom: 1px solid rgba(120,140,165,.2); }
.qv-table td { padding: 7px 6px; border-bottom: 1px solid rgba(120,140,165,.12); }
.qv-vars, .qv-specs { font-size: 12px; color: #47576b; line-height: 1.6; padding-left: 16px; }
.qv-desc { font-size: 12px; color: #5b6b7d; line-height: 1.6; }
@media (max-width: 760px) {
  .qv { grid-template-columns: 1fr; }
  .compare-tools select, .compare-tools input[type="search"] { min-width: 0; flex: 1 1 130px; }
}

/* ============================================================
   TOP DEALS (home page)
   The home "Top Deals & Offers" strip was its own .deal-card
   design, which drifted away from the category product box. It now
   reuses .product-card so the two are the same size, and its styles
   live in product-card.css together with the rest of the card.
   ============================================================ */

/* ============================================================
   TOP STORES — home page live store cards
   ============================================================ */
.store-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.85);
  border-radius: 16px; padding: 13px 14px; box-shadow: 0 5px 14px rgba(15,40,70,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.store-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,40,70,.12); }
.store-logo {
  width: 42px; height: 42px; min-width: 42px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg,#2ea978,#1d5ec8);
}
.store-amazon .store-logo   { background: linear-gradient(135deg,#ff9900,#232f3e); }
.store-flipkart .store-logo { background: linear-gradient(135deg,#2874f0,#0a3d91); }
.store-croma .store-logo    { background: linear-gradient(135deg,#00a9e0,#005b8f); }
.store-myntra .store-logo   { background: linear-gradient(135deg,#ff3f6c,#c2185b); }
.store-ajio .store-logo     { background: linear-gradient(135deg,#2b2b6b,#5a2d82); }
.store-snapdeal .store-logo { background: linear-gradient(135deg,#f47521,#c2410c); }
.store-messho .store-logo   { background: linear-gradient(135deg,#7c3aed,#4c1d95); }
.store-card-body { min-width: 0; flex: 1; }
.store-card-name { font-size: 13.5px; font-weight: 800; color: #16283c; }
.store-card-meta { font-size: 11px; color: #6b7f93; margin-top: 2px; }
.store-card-sub { font-size: 10.5px; color: #93a1b0; margin-top: 1px; }
.store-card-go { font-size: 20px; color: #9fb0c0; }

/* category fallback tile (no photo) */
.cat-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(14,31,54,.35); }
.cat-fallback.category-electronics { background: linear-gradient(135deg,#dcefff,#c9e4ff); }
.cat-fallback.category-kitchen     { background: linear-gradient(135deg,#fff0d7,#ffe6bd); }
.cat-fallback.category-fashion      { background: linear-gradient(135deg,#f7ddf4,#f4c9ef); }
.cat-fallback.catc-beauty           { background: linear-gradient(135deg,#ffe4ef,#ffd4e6); }
.cat-fallback.catc-decor            { background: linear-gradient(135deg,#e6f0ff,#d3e3ff); }
.cat-fallback.catc-health           { background: linear-gradient(135deg,#dcf7df,#c8efcd); }
.cat-fallback.catc-automotive       { background: linear-gradient(135deg,#e7e9f6,#d5d9ee); }
.cat-fallback.catc-hospitals        { background: linear-gradient(135deg,#e2f6fa,#cceff5); }
.cat-fallback.catc-education        { background: linear-gradient(135deg,#fff0d7,#ffe6bd); }
.cat-fallback.catc-realestate       { background: linear-gradient(135deg,#eaf3e4,#d9eacd); }
.cat-fallback.catc-travel           { background: linear-gradient(135deg,#dff3ff,#c9e8fb); }
.cat-fallback.catc-sportsout        { background: linear-gradient(135deg,#d8f5e9,#c3ecda); }
.cat-fallback.catc-food             { background: linear-gradient(135deg,#fff5d8,#ffedba); }
.cat-fallback.catc-babykids         { background: linear-gradient(135deg,#ffe9e1,#ffdbcd); }
.cat-fallback.catc-toys             { background: linear-gradient(135deg,#e8e1ff,#dbd0ff); }

/* platform filter chips */
.pf-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(120,140,165,.3); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; background: rgba(255,255,255,.7); cursor: pointer; }
.pf-chip input { margin: 0; }
.pf-chip:hover { border-color: rgba(7,159,52,.5); }

/* compare tray */
.cmp-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(120,140,165,.25); box-shadow: 0 -8px 26px rgba(15,40,70,.12);
}
.cmp-tray.show { display: block; }
.cmp-tray-inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cmp-tray-label { font-size: 12.5px; font-weight: 800; color: #16283c; display: flex; align-items: center; gap: 6px; }
.cmp-tray-items { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.cmp-tray-item { position: relative; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(120,140,165,.25); border-radius: 10px; padding: 4px 8px 4px 4px; background: #fff; max-width: 190px; }
.cmp-tray-item img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.cmp-tray-item span { font-size: 10.5px; color: #47576b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tray-item button { border: none; background: none; cursor: pointer; color: #9aa8b6; font-size: 15px; line-height: 1; }
.cmp-tray-actions { display: flex; gap: 8px; }
.btn-go[disabled], .btn-go.sm[disabled] { opacity: .45; pointer-events: none; }
.btn-cmp.on { background: rgba(7,159,52,.14); color: #1c7a3d; border-color: rgba(7,159,52,.45); }
.btn-cmp.ghost { background: transparent; color: #64748b; border-color: rgba(120,140,165,.3); }
.btn-go.sm { padding: 5px 10px; font-size: 10.5px; flex: 0 0 auto; }

/* full compare view */
.cmp-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(9,20,34,.6); backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; overflow-y: auto; }
.cmp-panel { position: relative; width: min(1180px, 100%); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: 0 30px 70px rgba(4,15,30,.4); }
.cmp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(120,140,165,.18); }
.cmp-head h3 { font-size: 16px; font-weight: 800; color: #0e1f36; }
.cmp-grid { display: grid; gap: 14px; padding: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cmp-col { position: relative; border: 1px solid rgba(120,140,165,.22); border-radius: 16px; padding: 12px; background: #fff; }
.cmp-col-x { position: absolute; top: 6px; right: 8px; border: none; background: rgba(241,245,249,.9); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; color: #64748b; font-size: 15px; line-height: 1; }
.cmp-col-img { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: #f3f6fa; margin-bottom: 10px; }
.cmp-col-img img { width: 100%%; height: 100%%; object-fit: cover; }
.cmp-col-brand { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #7790a6; font-weight: 700; }
.cmp-col-title { display: block; font-size: 12.5px; font-weight: 700; color: #16283c; text-decoration: none; line-height: 1.35; margin: 3px 0 10px; }
.cmp-col-title:hover { color: #079F34; }
.cmp-offers { width: 100%%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 8px; }
.cmp-offers td { padding: 5px 4px; border-bottom: 1px solid rgba(120,140,165,.12); }
.cmp-offers td:first-child { color: #6b7f93; }
.cmp-offers tr.best { background: #e7f6ec; }
.best-tag { background: #079F34; color: #fff; font-size: 9px; font-weight: 800; border-radius: 999px; padding: 1px 6px; }
.cmp-offers tr.na td { color: #b3bec9; }
.cmp-col-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 4px 0; border-bottom: 1px dashed rgba(120,140,165,.14); }
.cmp-col-row span { color: #7790a6; }
.cmp-col-row b { color: #16283c; }
.cmp-specs { margin-top: 10px; }
.cmp-specs h5 { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #7790a6; margin-bottom: 4px; }
.cmp-specs ul { list-style: none; font-size: 11px; }
.cmp-specs li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.cmp-specs li span { color: #7790a6; }
.cmp-specs li b { font-weight: 600; text-align: right; }
@media (max-width: 640px) { .cmp-grid { grid-template-columns: 1fr; } }

/* card sizing now comes from css/category.css (reference) */

/* ============================================================
   ADVANCED FILTER PANEL
   ============================================================ */
.adv-filters {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 20px; padding: 16px 15px;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 8px 24px rgba(15,40,70,.08);
  position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto;
}
.af-block { padding: 11px 0; border-bottom: 1px dashed rgba(120,140,165,.28); }
.af-block:last-of-type { border-bottom: none; }
.af-block h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: #7790a6; font-weight: 800; margin-bottom: 8px; }
.af-prices { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: #16283c; margin-bottom: 6px; }
.af-range { position: relative; height: 30px; }
.af-range input[type=range] { position: absolute; left: 0; top: 8px; width: 100%; margin: 0; pointer-events: none; -webkit-appearance: none; background: transparent; }
.af-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #079F34; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(7,159,52,.4); cursor: pointer; }
.af-range input[type=range]::-webkit-slider-runnable-track { height: 4px; background: rgba(120,140,165,.3); border-radius: 999px; }
.af-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #079F34; border: 2px solid #fff; cursor: pointer; }
.af-quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.af-quick button { font-size: 10.5px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(120,140,165,.3); background: rgba(255,255,255,.75); color: #47576b; cursor: pointer; font-family: inherit; }
.af-quick button:hover { border-color: rgba(7,159,52,.5); color: #1c7a3d; }
.af-list { display: flex; flex-direction: column; gap: 2px; }
.af-list.scroll { max-height: 190px; overflow-y: auto; padding-right: 4px; }
.af-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #3c4d61; padding: 4px 2px; cursor: pointer; border-radius: 6px; }
.af-row:hover { background: rgba(7,159,52,.06); }
.af-row input { margin: 0; width: 13px; height: 13px; accent-color: #079F34; }
.af-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-row i { font-style: normal; font-size: 10px; color: #9aa8b6; }
.af-reset { width: 100%; margin-top: 12px; padding: 9px; border-radius: 10px; border: 1px solid rgba(225,29,72,.35); background: rgba(253,236,236,.6); color: #b03030; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.af-reset:hover { background: #fdecec; }
@media (max-width: 900px) { .adv-filters { position: static; max-height: none; } }
/* image link inside the reference .product-image block */
.product-grid .product-image > a { display: block; width: 100%; height: 100%; }
.product-grid .product-image > a > img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* multi-store chip (extra, not in reference) */
.product-grid .product-card .multi-store {
  position: absolute; top: 9px; right: 46px; z-index: 3;
  background: rgba(9,32,64,.82); color: #fff; font-size: 9.5px; font-weight: 800;
  padding: 4px 8px; border-radius: 7px;
}
/* buy button (extra, not in reference) */
.product-grid .product-card .card-buy {
  display: block; margin-top: 9px; text-align: center; background: #079F34; color: #fff;
  font-size: 11.5px; font-weight: 800; padding: 8px 6px; border-radius: 9px; text-decoration: none;
}
.product-grid .product-card .card-buy:hover { filter: brightness(1.08); }
.product-grid .product-card h3 a { color: inherit; text-decoration: none; }
.product-grid .product-card h3 a:hover { color: #079F34; }
.product-grid .product-card .wishlist.on { color: #e11d48; }
.product-grid .product-card .wishlist.on i { color: #e11d48; }

/* ============================================================
   WATER-DROP GLASS THEME — shop-by-category boxes
   (same language as the hero: floating droplets + glass card)
   ============================================================ */
.shop-category-section { position: relative; overflow: hidden; }
.shop-category-section .shop-category-grid { position: relative; z-index: 2; }

/* floating droplets behind the boxes */
.shop-drops { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.shop-drops .sd {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.30) 38%, rgba(180,225,255,.18) 62%, rgba(255,255,255,0) 78%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.85), 0 6px 18px rgba(30,80,140,.10);
  animation: sdFloat 9s ease-in-out infinite;
}
@keyframes sdFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(0,-16px,0) scale(1.06); }
}

.shop-category-section .category-card {
  background: rgba(255,255,255,.42) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 10px 26px rgba(25,65,100,.10), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.shop-category-section .category-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 20px 40px rgba(25,65,100,.18), inset 0 1px 0 rgba(255,255,255,.95);
}
.shop-category-section .category-image { opacity: .92; }
.shop-category-section .category-info {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 4px 14px rgba(25,65,100,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.shop-category-section .category-arrow {
  background: rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(8,36,92,.18);
  transition: transform .25s ease, background .25s ease;
}
.shop-category-section .category-card:hover .category-arrow {
  background: #079F34;
  color: #fff;
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .shop-drops .sd { animation: none; }
}

/* ============================================================
   PAGINATION + LIST VIEW (reference categories.html style)
   ============================================================ */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 22px 0 6px; flex-wrap: wrap; }
.pager .pg {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
  border: 1px solid rgba(120,140,165,.28); background: rgba(255,255,255,.8);
  color: #3c4d61; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.pager .pg:hover:not(:disabled) { border-color: #079F34; color: #1c7a3d; }
.pager .pg.on { background: #079F34; border-color: #079F34; color: #fff; }
.pager .pg:disabled { opacity: .4; cursor: default; }
.pager .pg-gap { color: #9aa8b6; font-size: 12px; padding: 0 2px; }


/* toolbar bits */
.product-toolbar select.sort-button {
  border: 1px solid rgba(120,140,165,.3); border-radius: 10px; padding: 8px 12px;
  font-size: 12.5px; font-family: inherit; background: rgba(255,255,255,.8); color: #24364b; cursor: pointer;
}
.view-button.active { background: rgba(7,159,52,.14) !important; color: #1c7a3d !important; border-color: rgba(7,159,52,.4) !important; }

/* ============================================================
   FILTERS — accordion blocks (reference categories.html)
   ============================================================ */
.adv-filters .af-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(120,140,165,.2);
}
.adv-filters .af-head h3 { font-size: 14px; font-weight: 800; color: #16283c; }
.adv-filters .af-clear-top {
  background: #079F34; color: #fff; border: none; border-radius: 8px;
  font-size: 10.5px; font-weight: 800; padding: 5px 11px; cursor: pointer; font-family: inherit;
}
.adv-filters .af-clear-top:hover { filter: brightness(1.08); }
.af-block { border-bottom: 1px solid rgba(120,140,165,.16); }
.af-block > h4 {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  margin: 0; padding: 13px 2px; font-size: 12px; color: #16283c; text-transform: none; letter-spacing: 0;
  user-select: none;
}
.af-block > h4::after {
  content: "\f077"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 10px; color: #9aa8b6; transition: transform .2s ease;
}
.af-block.closed > h4::after { transform: rotate(-90deg); }
.af-block.closed > *:not(h4) { display: none; }
.af-block > h4:hover { color: #079F34; }
.af-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.af-inputs input {
  width: 100%; border: 1px solid rgba(120,140,165,.3); border-radius: 9px;
  padding: 8px 10px; font-size: 12px; font-family: inherit; background: rgba(255,255,255,.85); color: #24364b;
}
.af-inputs span { color: #9aa8b6; font-size: 12px; }
.af-range { position: relative; height: 26px; margin-top: 4px; }
.af-range input[type=range] { position: absolute; left: 0; top: 6px; width: 100%; margin: 0; pointer-events: none; -webkit-appearance: none; background: transparent; height: 20px; }
.af-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #079F34; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(7,159,52,.45); cursor: pointer; }
.af-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #079F34; border: 2px solid #fff; cursor: pointer; }
.af-range input[type=range]::-webkit-slider-runnable-track { height: 4px; background: rgba(7,159,52,.25); border-radius: 999px; }

/* list view uses the reference list-view classes */
.product-grid.list-view .product-card h3 { height: auto; -webkit-line-clamp: 2; }

/* ============================================================
   PRODUCT CARD UNIFORMITY — same height for every card
   ============================================================ */
.products-section .product-grid { align-items: stretch; }
.products-section .product-card { height: 100%; display: flex; flex-direction: column; }
/* Two lines here is deliberate on desktop, where a card is ~230px wide and a
   long name would push the price and Buy button out of alignment across the
   row. The min-height is what reserves that two-line slot so every card
   lines up.

   On a phone the card is ~113px wide, so two lines at 18px is all the room
   there is - the box gets capped at exactly 36px and a 197px title is cut
   to 36px with no way to show more, which is what left the names unreadable.
   category-mobile.css overrides both the clamp and this min-height at the
   phone breakpoint. */
.products-section .product-card h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 36px; line-height: 18px;
}
.products-section .product-card .product-price { min-height: 24px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.products-section .product-card .rating { min-height: 18px; }
.products-section .product-card .stock { min-height: 18px; }
.products-section .product-card .card-buy { margin-top: auto; }
/* the badge is sized and spaced in product-card.css; this only keeps it in
   the same spacing rhythm as the row above it */
.products-section .product-card .store-logo { margin-top: 10px; }
.products-section .product-card .compare-check { margin-top: 8px; }
.section-top { display: flex; flex-direction: column; gap: 8px; }
.section-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-top-row h2 { font-size: 19px; font-weight: 800; color: #0e1f36; margin: 0; white-space: nowrap; }