/* Home page: plugin slider. Uses the theme's global vars (--color-primary etc.). */
.home-plugins { position: relative; overflow: hidden; }
.home-plugins .hp-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.home-plugins .hp-slider { position: relative; padding: 6px 4px 54px; }
.home-plugins .swiper-slide { height: auto; display: flex; }
.hp-card { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; background: #fff; border: 1px solid #edf0f3; border-radius: 16px; padding: 22px; text-decoration: none; color: inherit; transition: box-shadow .2s, border-color .2s; }
.hp-card:hover, .hp-card:focus-visible { box-shadow: 0 8px 24px rgba(16, 24, 40, .08); border-color: #d9e2ef; color: inherit; }
.hp-card, .hp-card:hover, .hp-card:focus, .hp-card:active, .hp-card:hover *, .hp-card:focus * { text-decoration: none !important; }
.hp-card:focus-visible { outline: 3px solid rgba(var(--color-primary-rgb), .35); outline-offset: 2px; }
.hp-top { display: flex; align-items: center; gap: 12px; }
.hp-logo { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 13px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 23px; }
.hp-name { font-weight: 700; font-size: 17px; line-height: 1.25; margin: 0; color: #111827; }
.hp-by { font-size: 12px; color: #8a8f98; }
.hp-desc { color: #4b5563; font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1; }
.hp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.hp-pill { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; background: #f1f2f4; color: #6b7280; }
.hp-more { font-size: 13.5px; font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.hp-all { align-items: center; justify-content: center; text-align: center; gap: 16px; background: linear-gradient(145deg, var(--color-primary), rgba(var(--color-primary-rgb), .78)); border-color: transparent; color: #fff; min-height: 260px; }
.hp-all:hover, .hp-all:focus-visible { color: #fff; border-color: transparent; }
.hp-all .hp-arrow { width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; font-size: 26px; transition: transform .2s, background .2s; }
.hp-all:hover .hp-arrow, .hp-all:focus-visible .hp-arrow { transform: translateX(6px); background: rgba(255, 255, 255, .3); }
.hp-all strong { font-size: 19px; line-height: 1.3; }
.hp-all span.hp-sub { font-size: 14px; opacity: .9; }
.home-plugins .hp-nav { position: absolute; bottom: 0; right: 4px; display: flex; gap: 10px; }
.home-plugins .hp-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e3e8ef; background: #fff; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.home-plugins .hp-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.home-plugins .hp-btn:disabled, .home-plugins .hp-btn.swiper-button-disabled { opacity: .35; cursor: default; }
.home-plugins .hp-pagination { position: absolute; bottom: 14px; left: 4px; display: flex; gap: 6px; width: auto !important; }
.home-plugins .hp-pagination .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; opacity: 1; margin: 0 !important; }
.home-plugins .hp-pagination .swiper-pagination-bullet-active { background: var(--color-primary); width: 24px; border-radius: 6px; }
@media (max-width: 575px) { .hp-card { padding: 18px; } }