.guide-hub-section { --guide-visible: 3; scroll-margin-top: 105px; }
.guide-carousel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -10px 0 25px; }
.guide-carousel-controls button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 9px 14px;
  border: 1px solid #d2d8ca; border-radius: 999px;
  background: #fff; color: #273026; font: inherit; font-size: 14px; cursor: pointer;
}
.guide-carousel-controls button:hover { background: #edf1e7; border-color: #899779; }
.guide-carousel-controls button:focus-visible { outline: 2px solid #983b2b; outline-offset: 3px; }
.guide-carousel-controls .guide-carousel-arrow { padding: 8px; font-size: 22px; line-height: 1; }
.guide-carousel-controls .guide-carousel-all { margin-left: auto; }
.guide-carousel-status { min-width: 105px; color: #59644f; font-size: 13px; text-align: center; }
.guide-hub-section[data-carousel]:not([data-expanded]) .guide-card-grid {
  grid-template-columns: repeat(var(--guide-visible), minmax(0, 1fr));
}
.guide-hub-section[data-carousel] .guide-card-grid { touch-action: pan-y pinch-zoom; }
.guide-hub-section[data-carousel] .guide-card[hidden],
.guide-carousel-controls [hidden] { display: none; }
@media (max-width: 1000px) { .guide-hub-section { --guide-visible: 2; } }
@media (max-width: 600px) {
  .guide-hub-section { --guide-visible: 1; scroll-margin-top: 90px; }
  .guide-carousel-controls { gap: 8px; margin-top: -5px; }
  .guide-carousel-status { min-width: 90px; font-size: 12px; }
  .guide-carousel-controls button { font-size: 13px; padding-inline: 12px; }
  .guide-carousel-controls .guide-carousel-arrow { font-size: 22px; padding-inline: 8px; }
}