/* ==========================================================================
   CMS-safe hub helpers (New Products grid, etc.)
   These avoid Tailwind purge issues in CMS content.
   ========================================================================== */

/* Make ring card borders work even without Tailwind's `border` class */
.sbo-ring-card{
  background: var(--sbo-bg, #fff);
  border-style: solid !important; /* IMPORTANT */
  border-color: var(--sbo-ring, #63ff00) !important;
  border-width: 3px !important;
}

/* Grid */
.sbo-hub-grid{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 640px){
  .sbo-hub-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px){
  .sbo-hub-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .sbo-hub-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Card link shell */
.sbo-hub-link{
  display: block;
  padding: 16px;
  border-radius: 16px;
  text-decoration: none;
  color: rgb(0 0 0);
}
.sbo-hub-link:hover{ text-decoration: none; }

/* Text styles (match your “categories page” vibe: black + gray) */
.sbo-hub-title{
  font-size: 1.125rem; /* ~text-lg */
  line-height: 1.25;
  font-weight: 600;
  color: rgb(0 0 0);
}

.sbo-hub-sub{
  margin-top: 0.25rem;
  font-size: 0.875rem; /* ~text-sm */
  line-height: 1.25;
  color: rgb(75 85 99); /* ~gray-600 */
}

/* Hover + lift (match Categories feel) */
.sbo-hub-card{
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  will-change: transform;
}

.sbo-hub-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* CMS-safe focus (if Tailwind focus ring ever gets purged) */
.sbo-hub-card:focus{
  outline: 2px solid rgb(var(--sbo-accent-rgb) / 0.40);
  outline-offset: 2px;
}

/* Optional: ONLY fallback shadow when NO Tailwind hover:shadow-* exists */
.sbo-ring-card:not([class*="hover:shadow-"]):hover{
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.08);
}