/* Axolt Documentation — product directory only.
   The existing breadcrumb, H1, and axs_search_form('inline') remain untouched.
   No gradients, external assets, font or JS dependencies. */

#ax-main.ax-all .ax-docshub__directory {
    --docs-panel: #fff;
    --docs-ink: #1d2533;
    --docs-muted: #667386;
    --docs-border: #e5eaf1;
    --docs-link: #235bbd;
    --docs-chip: #eaf1ff;
    --docs-hover: #f3f7ff;
    padding: 34px 0 70px;
    margin-top: 48px;
    border-top: 1px solid var(--docs-border);
    color: var(--docs-ink);
}
#ax-main.ax-all .ax-docshub__directory-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 23px;
}
#ax-main.ax-all .ax-docshub__section-label-top {
    display: block;
    margin-bottom: 8px;
    color: var(--docs-link);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#ax-main.ax-all .ax-docshub__directory-head h2 {
    margin: 0;
    color: var(--docs-ink);
    font-size: clamp(23px, 2.8vw, 31px);
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: -.03em;
}
#ax-main.ax-all .ax-docshub__total {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--docs-border);
    border-radius: 999px;
    background: var(--docs-panel);
    color: var(--docs-muted);
    font-size: 13px;
    white-space: nowrap;
}
#ax-main.ax-all .ax-docshub__products {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}
#ax-main.ax-all .ax-docshub__product {
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--docs-border);
    border-radius: 20px;
    background: var(--docs-panel);
    box-shadow: 0 5px 25px rgb(25 43 77 / 4%);
}
#ax-main.ax-all .ax-docshub__product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--docs-border);
}
#ax-main.ax-all .ax-docshub__product-ident {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}
#ax-main.ax-all .ax-docshub__product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--docs-chip);
    color: var(--docs-link);
}
#ax-main.ax-all .ax-docshub__product-icon svg {
    max-width: 70%;
    max-height: 70%;
    width: 25px;
    height: 25px;
}
#ax-main.ax-all .ax-docshub__product-meta { min-width: 0; }
#ax-main.ax-all .ax-docshub__product-meta h3 {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.1vw, 24px);
    font-weight: 730;
    letter-spacing: -.025em;
    line-height: 1.25;
}
#ax-main.ax-all .ax-docshub__product-meta h3 a {
    color: var(--docs-ink);
    text-decoration: none;
}
#ax-main.ax-all .ax-docshub__product-meta h3 a:hover { color: var(--docs-link); }
#ax-main.ax-all .ax-docshub__product-meta p {
    margin: 0;
    color: var(--docs-muted);
    font-size: 13px;
    line-height: 1.5;
}
#ax-main.ax-all .ax-docshub__view-product {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 11px;
    background: var(--docs-hover);
    color: var(--docs-link);
    font-size: 13px;
    font-weight: 690;
    text-decoration: none;
    white-space: nowrap;
}
#ax-main.ax-all .ax-docshub__view-product:hover { background: var(--docs-chip); }
#ax-main.ax-all .ax-docshub__sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#ax-main.ax-all .ax-docshub__sections > li {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
#ax-main.ax-all .ax-docshub__sections a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 51px;
    padding: 12px 13px;
    border-radius: 11px;
    color: var(--docs-ink);
    font-size: 14px;
    font-weight: 520;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 130ms ease, color 130ms ease;
}
#ax-main.ax-all .ax-docshub__section-mark {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border: 1.5px solid #98afd4;
    border-radius: 2px;
    transform: rotate(45deg);
}
#ax-main.ax-all .ax-docshub__section-text { min-width: 0; }
#ax-main.ax-all .ax-docshub__section-arrow {
    margin-left: auto;
    color: var(--docs-link);
    font-size: 17px;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 130ms ease, transform 130ms ease;
}
#ax-main.ax-all .ax-docshub__sections a:is(:hover, :focus-visible) {
    background: var(--docs-hover);
    color: var(--docs-link);
}
#ax-main.ax-all .ax-docshub__sections a:is(:hover, :focus-visible) .ax-docshub__section-arrow {
    opacity: 1;
    transform: translateX(0);
}
#ax-main.ax-all .ax-docshub__directory a:focus-visible {
    outline: 3px solid rgb(33 88 189 / 30%);
    outline-offset: 3px;
}
#ax-main.ax-all .ax-docshub__empty-product {
    margin: 0;
    color: var(--docs-muted);
    font-size: 14px;
}
@media (max-width: 900px) {
    #ax-main.ax-all .ax-docshub__sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    #ax-main.ax-all .ax-docshub__directory { margin-top: 34px; padding: 28px 0 48px; }
    #ax-main.ax-all .ax-docshub__product { border-radius: 16px; }
    #ax-main.ax-all .ax-docshub__product-head { align-items: flex-start; flex-direction: column; gap: 15px; }
    #ax-main.ax-all .ax-docshub__view-product { padding: 8px 0; background: transparent; }
    #ax-main.ax-all .ax-docshub__sections { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    #ax-main.ax-all .ax-docshub__sections a { padding: 12px 7px; }
    #ax-main.ax-all .ax-docshub__section-arrow { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #ax-main.ax-all .ax-docshub__sections a,
    #ax-main.ax-all .ax-docshub__section-arrow { transition: none; }
}
/* Theme toggle: scoped to redesigned product directory, not the original search. */
:where(html[data-theme="dark"], html[data-ax-theme="dark"], html.dark, body[data-theme="dark"], body.ax-dark) #ax-main.ax-all .ax-docshub__directory {
    --docs-panel: #18253a;
    --docs-ink: #f1f5fc;
    --docs-muted: #a6b5c9;
    --docs-border: #30435d;
    --docs-link: #91b6ff;
    --docs-chip: #233f69;
    --docs-hover: #263c5c;
}