/* Aladan: original category illustrations, October 2026. */
@media (min-width: 992px) {
  .widget-categories-container { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .widget-categories-container .home-widget-categories-item {
    min-width: 0; max-width: none; height: 148px; grid-row: auto;
    padding: 15px 16px; border-radius: 20px; background: #f5f6f8;
    transition: background-color .18s ease, box-shadow .18s ease;
  }
  .widget-categories-container .home-widget-categories-item > div {
    font-size: 14px; line-height: 1.25; font-weight: 500; color: #20252c;
    max-width: 100%; align-self: flex-start;
  }
  .widget-categories-container .home-widget-categories-item > img {
    width: 94px; height: 94px; object-fit: contain; right: 5px; bottom: 0;
  }
  .widget-categories-container .home-widget-categories-item:hover,
  .widget-categories-container .home-widget-categories-item:focus-visible {
    background: #eaf3fc; box-shadow: inset 0 0 0 1px #d4e7f7;
  }
  .widget-categories-container .home-widget-categories-item:hover > div { color: #20252c !important; }
  .widget-categories-container .home-widget-categories-item:focus-visible { outline: 2px solid #008fdb; outline-offset: 3px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .widget-categories-container { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .widget-categories-container {
    display: grid !important; grid-template-rows: repeat(2, 142px);
    grid-auto-flow: column; grid-auto-columns: 145px; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 10px;
    scroll-snap-type: x proximity;
  }
  .widget-categories-container .home-widget-categories-item {
    grid-row: auto; min-width: 0; max-width: none; height: 142px;
    padding: 12px; border-radius: 18px; background: #f5f6f8; scroll-snap-align: start;
  }
  .widget-categories-container .home-widget-categories-item > div {
    font-size: 13px; line-height: 1.25; font-weight: 500; color: #20252c;
  }
  .widget-categories-container .home-widget-categories-item > img {
    width: 85px; height: 85px; object-fit: contain; right: 4px; bottom: 0;
  }
  .widget-categories-container .home-widget-categories-item:hover > div { color: #20252c !important; }
}