/* Spacious icon banners using the original category labels and symbols. */
.category-banner-grid.quick-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}
.quick-nav .category-banner {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  min-height: 190px;
  padding: 18px !important;
  border: 1px solid #8ba49a66;
  border-radius: 20px;
  background: #fffdf9;
  color: var(--forest);
  box-shadow: 0 7px 22px #263e3409;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.category-banner-grid.quick-nav > .category-banner { border: 1px solid #8ba49a66; }
.quick-nav .category-banner:nth-child(2) { background: #f5f2e9; }
.quick-nav .category-banner:nth-child(3) { background: #edf4ef; }
.quick-nav .category-banner:nth-child(4) { background: #f2f1ed; }
.quick-nav .category-banner .banner-symbol {
  position: static;
  width: 48px;
  height: 48px;
  border: 1px solid #8ba49a30;
  border-radius: 14px;
  background: var(--sage);
  color: var(--forest);
}
.category-banner .banner-symbol svg { width: 26px; height: 26px; }
.quick-nav .category-banner .banner-copy { position: static; min-width: 0; }
.quick-nav .category-banner .banner-copy strong {
  color: var(--forest);
  font-size: 26px;
  line-height: 1.6;
}
.quick-nav .category-banner .banner-copy > span {
  color: #4a6256;
  font-size: 20px;
  line-height: 1.8;
  margin-top: 4px;
}
.quick-nav .category-banner .banner-arrow {
  position: static;
  color: var(--forest);
  opacity: .7;
  transition: transform .3s, opacity .3s;
}
.category-banner .banner-arrow svg { width: 16px; height: 16px; }
.quick-nav .category-banner:hover,
.quick-nav .category-banner.reveal.is-visible:hover {
  color: var(--forest);
  border-color: var(--moss);
  box-shadow: 0 15px 30px #263e3414;
  transform: translateY(-3px);
}
.category-banner:hover .banner-arrow { transform: translateX(4px); opacity: 1; }
.quick-nav .category-banner:focus-visible { outline: 3px solid var(--forest); outline-offset: 5px; }
@media (max-width: 1200px) {
  .category-banner-grid.quick-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .quick-nav .category-banner { grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 16px; padding: 24px !important; }
  .quick-nav .category-banner .banner-symbol { width: 56px; height: 56px; }
  .quick-nav .category-banner .banner-copy strong { font-size: 27px; }
  .quick-nav .category-banner .banner-copy > span { font-size: 20px; }
  .category-banner .banner-arrow svg { width: 20px; height: 20px; }
}
@media (max-width: 720px) {
  .category-banner-grid.quick-nav { grid-template-columns: 1fr; gap: 18px; }
  .quick-nav .category-banner { min-height: 148px; }
  .quick-nav .category-banner .banner-copy strong { font-size: 29px; }
  .quick-nav .category-banner .banner-copy > span { font-size: 21px; }
}
@media (max-width: 380px) {
  .quick-nav .category-banner { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 13px; padding: 20px !important; }
  .quick-nav .category-banner .banner-symbol { width: 48px; height: 48px; border-radius: 14px; }
  .quick-nav .category-banner .banner-copy strong { font-size: 27px; }
  .quick-nav .category-banner .banner-copy > span { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-nav .category-banner, .category-banner .banner-arrow { transition: none; }
  .quick-nav .category-banner:hover, .quick-nav .category-banner.reveal.is-visible:hover { transform: none; }
}