/* ===========================================================
   BikesDirect — Category Buttons Polish (opt-in stylesheet)
   Purpose: Equal-width category pills via CSS Grid (2 cols mobile / 4 cols desktop)
   Link this file to enable. Remove link to disable.
   =========================================================== */

/* --- GRID LAYOUT (new) --- */
#bd-category-buttons {
  display: grid;                               /* NEW: use grid */
  grid-template-columns: repeat(2, 1fr);       /* mobile: 2 columns */
  gap: 0.75em;                                 /* mobile spacing */
}
@media (min-width: 768px) {
  #bd-category-buttons {
    grid-template-columns: repeat(4, 1fr);     /* desktop/tablet: 4 columns */
    gap: 0.9em 1em;                             /* desktop spacing */
  }
}

/* --- OLD spacing-only block (kept for reference, but redundant with grid above) ---
#bd-category-buttons {
  gap: 0.45em;
}
@media (min-width: 768px) {
  #bd-category-buttons {
    gap: 0.675em 0.9em;
  }
}
*/

/* Button chrome: equal-width pills that fill their grid cell */
#bd-category-buttons .bd-category-btn {
  box-sizing: border-box;
  display: inline-block;

  /* OLD (commented): hug text width conflicts with equal-width grid
  width: auto !important;                 /* snap outline to text length */
  */

  width: 100% !important;                  /* NEW: fill grid cell → equal widths */
  max-width: 100%;

  padding: 0.24em 1.0em;                   /* inner padding */
  border: 1px solid #e8eaf0;               /* consistent 1px outline (px, not vw) */
  border-radius: 4px;
  background: #fff;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 4px rgba(32, 84, 164, 0.08); /* light blue/gray shadow */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover/Focus pop (keep border width the same to avoid layout shift) */
#bd-category-buttons .bd-category-btn:hover,
#bd-category-buttons .bd-category-btn:focus {
  border-color: #d6e4ff;
  box-shadow: 0 2px 6px rgba(32, 84, 164, 0.14);
  transform: translateY(-1px);
  outline: none;
}

/* Tooltip (unchanged) */
#bd-category-buttons .bd-category-btn { position: relative; }
#bd-category-buttons .bd-category-btn:hover::after,
#bd-category-buttons .bd-category-btn:focus::after {
  content: 'Click to Shop More:';     /* No JS required */
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 0.8em;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
#bd-category-buttons .bd-category-btn:hover::before,
#bd-category-buttons .bd-category-btn:focus::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 3px 3px 0 3px;
  border-style: solid;
  border-color: rgba(0,0,0,0.82) transparent transparent transparent;
}

/* Optional: if legacy CSS elsewhere sets .bd-category-btn widths (48%/22%),
   this neutralizes them without editing that file. */
@media (max-width: 767px) { .bd-category-btn { width: auto !important; } }  /* neutral baseline */
@media (min-width: 768px) { .bd-category-btn { width: auto !important; } }  /* neutral baseline */

/* Force category pill text to black and kill any inherited link styling */
#bd-category-buttons .bd-category-btn,
#bd-category-buttons .bd-category-btn:link,
#bd-category-buttons .bd-category-btn:visited {
  color: #000 !important;
  text-decoration: none !important;
  background: #fff;           /* or transparent, whichever you prefer */
}

/* Optional: keep hover clean without turning blue/purple */
#bd-category-buttons .bd-category-btn:hover,
#bd-category-buttons .bd-category-btn:focus {
  color: #000 !important;
  text-decoration: none !important;
}