.post-type-archive-vulkk_item .site-content {
    padding: 0;
    overflow-x: clip;
}

.cd-item-archive {
    --cd-archive-accent: #D93;
    color: #ececd1;
    overflow-x: clip;
    color-scheme: dark;
}

/* Breadcrumb styles live in breadcrumbs.css — shared with the breadcrumbs block. */

/* --- Header --- */

.cd-item-archive__header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cd-item-archive__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: #ececd1;
}

.cd-item-archive__count {
    font-size: 0.9rem;
    color: #ececd199;
}

.cd-item-archive__description {
    margin: -0.5rem 0 1.25rem;
    color: #ececd199;
}

.cd-item-archive__description p {
    margin: 0 0 0.75em;
}

.cd-item-archive__description > :first-child {
    margin-top: 0;
}

.cd-item-archive__description > :last-child {
    margin-bottom: 0;
}

.cd-item-archive__description a {
    color: #dd9933;
}

/* --- View toggle --- */

.cd-view-toggle {
    display: inline-flex;
    gap: 0;
    flex: 0 0 auto;
}

.cd-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: #1a1a1a;
    border: 1px solid #2c2c2c;
    color: #ececd166;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cd-view-toggle__btn:hover {
    background: #2c2c2c;
    color: #ececd1;
}

/* Icon-only variant — square buttons that sit alongside the toolbar buttons.
   The label stays in the DOM for screen readers only. */
.cd-view-toggle--icons {
    gap: 0.625rem;
}

.cd-view-toggle--icons .cd-view-toggle__btn {
    gap: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #111;
    color: #ececd199;
    box-sizing: border-box;
}

.cd-view-toggle--icons .cd-view-toggle__btn:hover {
    background: #000;
    color: #ececd1;
    border-color: #444;
}

.cd-view-toggle--icons .cd-view-toggle__btn--active,
.cd-view-toggle--icons .cd-view-toggle__btn--active:hover {
    background: #2c2c2c;
    border-color: var(--cd-archive-accent, #D93);
    color: var(--cd-archive-accent, #D93);
}

.cd-view-toggle__btn svg {
    flex: 0 0 auto;
}

.cd-view-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cd-view-toggle__btn--active {
    background: #2c2c2c;
    border-color: var(--cd-archive-accent, #D93);
    color: var(--cd-archive-accent, #D93);
}

.cd-view-toggle__btn--active:hover {
    color: var(--cd-archive-accent, #D93);
}

.cd-view-toggle__btn svg {
    display: block;
}

/* --- Column visibility --- */

.cd-col-visibility {
    position: relative;
    flex: 0 0 auto;
}

[data-view="cards"] .cd-col-visibility {
    display: none;
}

.cd-col-visibility__trigger {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 2rem 0 0.75rem;
    background: #111;
    border: 1px solid #2c2c2c;
    border-radius: 0;
    color: #ececd1;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    white-space: nowrap;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.cd-col-visibility__trigger:hover,
.cd-col-visibility__trigger:active,
.cd-col-visibility__trigger[aria-expanded="true"] {
    background-color: #000;
    border-color: #444;
}

.cd-col-visibility__trigger:focus-visible {
    border-color: var(--cd-archive-accent, #D93);
}

.cd-col-visibility__panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 40;
    min-width: 12rem;
    max-height: min(24rem, 70vh);
    overflow: auto;
    margin: 0;
    padding: 0.35rem 0;
    background: #111;
    border: 1px solid var(--cd-archive-accent, #c69145);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.cd-col-visibility__options {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-col-visibility__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.45rem 0.75rem;
    color: #ececd1;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.cd-col-visibility__option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cd-col-visibility__option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cd-col-visibility__label {
    flex: 1 1 auto;
}

.cd-col-visibility__check {
    flex: 0 0 auto;
    width: 1rem;
    color: var(--cd-archive-accent, #c69145);
    text-align: center;
    opacity: 0;
}

.cd-col-visibility__option input:checked + .cd-col-visibility__label + .cd-col-visibility__check {
    opacity: 1;
}

/* --- Card sort dropdown --- */

.cd-item-archive__card-sort {
    display: none;
}

[data-view="cards"] .cd-item-archive__card-sort {
    display: block;
}

.cd-item-archive__sort-select {
    width: 100%;
    min-width: 0;
}

/* --- View visibility --- */

[data-view="table"] .cd-item-archive__table-wrap { display: block; }
[data-view="table"] .cd-item-archive__card-grid  { display: none;  }
[data-view="cards"] .cd-item-archive__table-wrap  { display: none;  }
[data-view="cards"] .cd-item-archive__card-grid   { display: grid;  }

/* --- Filters --- */

.cd-item-archive__filters {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.cd-item-archive__filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.625rem;
}

.cd-item-archive__filters-row--toolbar {
    flex-wrap: nowrap;
}

/* Search and the button block share one 4-track grid so they break on the
   same column line as item-archive selects. Live search hides the submit. */
.cd-item-archive .cd-item-archive__filters-row--toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
}

.cd-item-archive .cd-item-archive__filters-row--toolbar > .cd-item-archive__search-wrap,
.cd-item-archive .cd-item-archive__filters-row--toolbar > .cd-item-archive__toolbar-actions {
    grid-column: span 2;
}

.cd-item-archive .cd-item-archive__filters-row--toolbar > [class$="__search-submit"] {
    display: none;
}

.cd-item-archive__toolbar-actions {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cd-item-archive__toolbar-actions .cd-item-archive__reset {
    flex: 1 1 0;
    min-width: 0;
}

/* Collapsible panel: everything below the toolbar divider. */
.cd-item-archive__filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cd-item-archive__filter-panel[hidden] {
    display: none;
}

.cd-item-archive__filters-row--dropdowns {
    --cd-filter-gap: 0.625rem;
    --cd-filter-max-cols: 4;
    display: grid;
    gap: var(--cd-filter-gap);
    /* auto-fit collapses unused tracks, so 3 filters stretch; min track is 1/4
       of the row (minus gutters) so a fourth filter still fits, a fifth wraps. */
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            min(100%, calc((100% - (var(--cd-filter-max-cols) - 1) * var(--cd-filter-gap)) / var(--cd-filter-max-cols))),
            1fr
        )
    );
}

/* Item archive: two fixed rows of four equal cells.
   Row 2: Category | Subcategory | Type | Rarity.
   Row 3: Class | Must have stat | Must have effect | Column visibility. */
#cd-item-archive .cd-item-archive__filters-row--dropdowns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cd-item-archive__filters-row--dropdowns[hidden] {
    display: none;
}

.cd-item-archive__filters-row--matchers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
}

.cd-item-archive__filters-row--dropdowns .cd-item-archive__filter-group,
.cd-item-archive__filters-row--matchers .cd-item-archive__filter-group {
    width: 100%;
    min-width: 0;
}

/* Column visibility (table view) and card sort share one cell. */
.cd-item-archive__filter-group--tools > * {
    width: 100%;
    min-width: 0;
}

.cd-item-archive__filter-group--tools .cd-col-visibility__trigger {
    width: 100%;
}

.cd-item-archive__filters-row--restrictions {
    display: none; /* TODO: re-enable restriction filters when ready */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
}

.cd-item-archive__filters-row--restrictions .cd-item-archive__filter-group {
    width: 100%;
}

.cd-item-archive__search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.cd-item-archive__search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #ececd199;
    pointer-events: none;
}

.cd-item-archive input[type="search"].cd-item-archive__search {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 0.75rem 0 2rem !important;
    background: #111 !important;
    border: 1px solid #2c2c2c !important;
    border-radius: 0 !important;
    color: #ececd1 !important;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.cd-item-archive input[type="search"].cd-item-archive__search:focus {
    border-color: var(--cd-archive-accent, #D93) !important;
}

.cd-item-archive input[type="search"].cd-item-archive__search--active {
    border-color: var(--cd-archive-accent, #D93) !important;
}

.cd-item-archive__filter-group {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cd-item-archive__filters-row--dropdowns .cd-item-archive__filter-group {
    width: 100%;
}

.cd-stat-filter {
    position: relative;
    width: 100%;
}

.cd-stat-filter__trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 2rem 0 0.75rem;
    background: #111;
    border: 1px solid #2c2c2c;
    border-radius: 0;
    color: #ececd1;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    text-align: left;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.cd-stat-filter__trigger:hover,
.cd-stat-filter__trigger[aria-expanded="true"] {
    border-color: #444;
}

.cd-stat-filter__trigger--active:hover,
.cd-stat-filter__trigger--active[aria-expanded="true"] {
    border-color: var(--cd-archive-accent, #D93);
}

.cd-stat-filter__trigger:hover {
    background-color: #111;
}

.cd-stat-filter__trigger:focus,
.cd-stat-filter__trigger:focus-visible,
.cd-stat-filter__trigger[aria-expanded="true"] {
    background-color: #111;
}

.cd-stat-filter__trigger:focus-visible {
    border-color: var(--cd-archive-accent, #D93);
}

.cd-stat-filter__trigger--active {
    border-color: var(--cd-archive-accent, #D93);
}

.cd-stat-filter__prefix {
    flex: 0 0 auto;
    color: #ececd199;
    font-size: 0.875rem;
    white-space: nowrap;
}

.cd-stat-filter__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.cd-stat-filter__trigger--active .cd-stat-filter__value {
    color: var(--cd-archive-accent, #D93);
    /* The theme uppercases every button. Keep that for the "Any stat" starting
       point, but show chosen stat / effect names as written. */
    text-transform: none;
}

.cd-stat-filter__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0.75rem;
    background: #171717;
    border: 1px solid #2c2c2c;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Beat theme input[type="search"] text color the same way the toolbar search does. */
.cd-item-archive .cd-effect-filter input[type="search"].cd-stat-filter__search {
    display: block;
    width: 100%;
    height: 32px;
    margin: 0 0 0.625rem;
    padding: 0 0.625rem;
    background: #111;
    border: 1px solid #2c2c2c;
    border-radius: 0;
    color: #ececd1 !important;
    -webkit-text-fill-color: #ececd1;
    font-size: 0.875rem;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.cd-item-archive .cd-effect-filter input[type="search"].cd-stat-filter__search:focus,
.cd-item-archive .cd-effect-filter input[type="search"].cd-stat-filter__search:focus-visible {
    border-color: var(--cd-archive-accent, #D93);
    background-color: #111;
    color: #ececd1 !important;
    -webkit-text-fill-color: #ececd1;
}

.cd-item-archive .cd-effect-filter input[type="search"].cd-stat-filter__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.cd-effect-filter .cd-stat-filter__options {
    max-height: min(16rem, calc(100vh - 12rem));
    overflow-x: hidden;
    overflow-y: auto;
}

/* The panel matches the trigger's width (base .cd-stat-filter__panel), so long
   effect names wrap onto more lines instead of scrolling sideways. */
.cd-effect-filter .cd-stat-filter__option {
    align-items: flex-start;
    line-height: 1.35;
}

.cd-effect-filter .cd-stat-filter__option input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 0.1em;
}

.cd-effect-filter .cd-stat-filter__option span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cd-stat-filter__hint {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #ececd199;
}

.cd-stat-filter__options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.cd-stat-filter__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.9375rem;
    color: #ececd1;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.1s;
}

.cd-stat-filter__option:hover {
    background: #222;
}

.cd-stat-filter__option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--cd-archive-accent, #D93);
    cursor: pointer;
}

.cd-item-archive__filter-group .cd-item-archive__select {
    width: 100%;
    min-width: 0;
}

.cd-item-archive__filter-label {
    display: none;
}

.cd-item-archive select.cd-item-archive__select {
    height: 40px;
    padding: 0 2rem 0 0.75rem;
    background-color: #111 !important;
    border: 1px solid #2c2c2c !important;
    border-radius: 0 !important;
    color: #ececd1 !important;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-shadow: none !important;
    transition: border-color 0.15s;
}

.cd-item-archive__select option {
    background-color: #111;
    color: #ececd1;
    text-transform: none;
}

/* Starting point ("All Categories", "Sort by Name") in capitals, like the
   filter buttons. A chosen value shows as written. */
.cd-item-archive select.cd-item-archive__select:has(option[value=""]:checked),
.cd-item-archive select.cd-item-archive__sort-select:has(option[value="name"]:checked) {
    text-transform: uppercase;
}

.cd-item-archive select.cd-item-archive__select:focus,
.cd-item-archive select.cd-item-archive__select:focus-visible,
.cd-item-archive select.cd-item-archive__select:active {
    background-color: #111 !important;
    border-color: var(--cd-archive-accent, #D93) !important;
    box-shadow: none !important;
    outline: none;
}

.cd-item-archive select.cd-item-archive__select.cd-item-archive__select--active {
    border-color: var(--cd-archive-accent, #D93) !important;
    color: var(--cd-archive-accent, #D93) !important;
}

.cd-item-archive__select--active {
    border-color: var(--cd-archive-accent, #D93) !important;
}

.cd-item-archive__select--empty,
.cd-item-archive__select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #ececd180;
}

.cd-item-archive__select--empty:focus,
.cd-item-archive__select--empty:focus-visible,
.cd-item-archive__select--empty:active,
.cd-item-archive__select:disabled:focus,
.cd-item-archive__select:disabled:focus-visible,
.cd-item-archive__select:disabled:active {
    background-color: #111 !important;
    border-color: #2c2c2c !important;
}

.cd-stat-filter__trigger--empty,
.cd-stat-filter__trigger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.cd-stat-filter__trigger--empty:hover,
.cd-stat-filter__trigger:disabled:hover {
    border-color: #2c2c2c;
}

.cd-item-archive__reset {
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #2c2c2c;
    border-radius: 0;
    color: #ececd199;
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, opacity 0.15s;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
}

.cd-item-archive__reset--inactive {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.cd-item-archive__reset:not(.cd-item-archive__reset--inactive):hover {
    color: #ececd1;
    border-color: #444;
}

.cd-item-archive__reset-icon,
.cd-item-archive__reset-label {
    flex: 0 0 auto;
}

.cd-item-archive .cd-item-archive__reset {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Table --- */

.post-type-archive-vulkk_item .content-area,
.post-type-archive-vulkk_item .inside-article,
.tax-vulkk_item_category .content-area,
.tax-vulkk_item_category .inside-article,
.tax-vulkk_item_subcategory .content-area,
.tax-vulkk_item_subcategory .inside-article,
.tax-vulkk_equip_type .content-area,
.tax-vulkk_equip_type .inside-article {
    overflow-x: clip;
}

/* Horizontal scroll on the wrap keeps the page width stable; JS pins the archive thead when scrolling vertically. */
.cd-item-archive__table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.cd-item-archive__table {
    width: 100%;
    min-width: 56.5rem;
    border-collapse: collapse;
    border: none;
    table-layout: fixed;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    --cd-archive-sticky-icon-width: 4.5rem;
}

.cd-item-archive__table col.cd-col-icon {
    width: 4.5rem;
}

.cd-item-archive__table col.cd-col-stat--attack,
.cd-item-archive__table col.cd-col-stat--defense {
    width: 6.5rem;
}

.cd-item-archive__table col.cd-col-stat--guard_rate,
.cd-item-archive__table col.cd-col-stat--critical_rate {
    width: 5.5rem;
}

.cd-item-archive__table col.cd-col-stat--attack_speed,
.cd-item-archive__table col.cd-col-stat--movement_speed {
    width: 6.5rem;
}

.cd-item-archive__table col.cd-col-sockets {
    width: 7rem;
}

.cd-item-archive__table col.cd-col-effects {
    width: 7rem;
}

/* Stat / socket columns — explicit widths above, not equal shares of leftover space. */

.cd-col-sockets {
    text-align: center;
}

/* Width comes from col.cd-col-icon — the table is table-layout: fixed. */
.cd-col-icon {
    white-space: nowrap;
}

.cd-item-archive__table.vdb-sticky-nav-pinned th {
    top: auto;
    box-sizing: border-box;
    min-width: 0;
}

.cd-item-archive__table.vdb-sticky-nav-pinned th.cd-col-name {
    min-width: 10rem;
}

.cd-item-archive__table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.6rem 0.5rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ececd1;
    background: #212121;
    border: none;
    border-bottom: 2px solid #2c2c2c;
    white-space: nowrap;
    user-select: none;
}

/* Icon + name stay visible during horizontal scroll inside the table wrap. */
.cd-item-archive__table th.cd-col-icon,
.cd-item-archive__table td.cd-col-icon {
    position: sticky;
    left: 0;
    z-index: 1;
}

.cd-item-archive__table th.cd-col-name,
.cd-item-archive__table td.cd-col-name {
    position: sticky;
    left: var(--cd-archive-sticky-icon-width);
    z-index: 1;
}

.cd-item-archive__table.cd-h-scrolled th.cd-col-name,
.cd-item-archive__table.cd-h-scrolled td.cd-col-name {
    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.45);
}

.cd-item-archive__table th.cd-col-icon,
.cd-item-archive__table th.cd-col-name {
    z-index: 4;
}

.cd-item-archive__table th.cd-col-name {
    z-index: 10 !important;
}

.cd-item-archive__table.vdb-sticky-nav-pinned th.cd-col-icon,
.cd-item-archive__table.vdb-sticky-nav-pinned th.cd-col-name {
    z-index: 5;
}

.cd-item-archive__table td.cd-col-icon,
.cd-item-archive__table td.cd-col-name {
    background: #141414;
}

.cd-item-archive__table tr.cd-item-row:nth-child(even) td.cd-col-icon,
.cd-item-archive__table tr.cd-item-row:nth-child(even) td.cd-col-name {
    background: #171717;
}

.cd-item-archive__table tr.cd-item-row:hover td.cd-col-icon,
.cd-item-archive__table tr.cd-item-row:hover td.cd-col-name {
    background: #2c2c2c;
}

.cd-empty-row td.cd-col-icon {
    background: #141414;
}

.cd-sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

/* Sort controls are buttons; drop the theme's button skin so they read as header text. */
button.cd-sort-link,
button.cd-sort-link:hover,
button.cd-sort-link:focus,
button.cd-sort-link:active {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.cd-sort-link__label {
    min-width: 0;
}

.cd-sort-arrow {
    flex: 0 0 auto;
    font-size: 0.65em;
    line-height: 1;
}

.cd-sort-link:hover,
.cd-sort-link.cd-sorted {
    color: var(--cd-archive-accent, #D93);
}

.cd-empty-row .cd-col-icon {
    border-top: 1px solid #111;
    background: #141414;
}

.cd-empty-row .cd-empty {
    border-top: 1px solid #111;
    background: #141414;
}

.cd-item-archive__table td {
    padding: 0.6rem 0.5rem;
    border: none;
    border-top: 1px solid #111;
    vertical-align: middle;
}

.cd-item-row {
    background: #141414;
    transition: background 0.1s;
}

.cd-item-row:nth-child(even) {
    background: #171717;
}

.cd-item-row:hover {
    background: #2c2c2c;
}

/* The icon links to the single. Keep the target the size of the icon itself. */
.cd-col-icon a {
    display: block;
    width: fit-content;
}

.cd-col-icon img {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    object-fit: contain;
}

.cd-item-no-icon {
    display: block;
    width: 56px;
    height: 56px;
}

/* Name column */
.cd-col-name {
    text-align: left;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.cd-item-name {
    display: block;
    font-weight: 600;
    color: #ececd1;
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.25;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.cd-item-name:hover {
    text-decoration: underline;
}

.cd-item-subtitle {
    display: block;
    font-size: 0.6875rem;
    color: rgba(236, 236, 209, 0.42);
    line-height: 1.3;
    margin-top: 2px;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.cd-item-subtitle a,
.cd-cat-link {
    color: inherit;
    text-decoration: none;
}

.cd-item-subtitle a:hover,
.cd-cat-link:hover {
    color: var(--cd-archive-accent, #D93);
    text-decoration: underline;
}

/* Meta / reference links in archive tables: match cell text, not theme link color. */
.cd-item-archive__table td.cd-col-meta a,
.cd-item-archive__table td:not(.cd-col-name) a.vdb-ref-link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

.cd-item-archive__table td.cd-col-meta a:hover,
.cd-item-archive__table td:not(.cd-col-name) a.vdb-ref-link:hover {
    color: inherit;
    text-decoration: underline;
}

.cd-item-archive__table th.cd-col-effects,
.cd-item-archive__table td.cd-col-effects,
.cd-item-archive__table th.cd-col-sockets,
.cd-item-archive__table td.cd-col-sockets {
    text-align: center;
}

.cd-item-archive__table th.cd-col-stat,
.cd-item-archive__table td.cd-col-stat {
    text-align: center;
    white-space: nowrap;
    color: #ececd1;
}

.cd-item-archive__table .cd-col-hidden {
    display: none !important;
}

.cd-stat-empty {
    color: rgba(255, 255, 255, 0.15);
}

/* Sockets column */
.cd-col-sockets {
    white-space: nowrap;
}

/* Effects column */
.cd-col-effects {
    text-align: center;
}

.cd-item-effects-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    max-width: 100%;
}

.cd-item-effect-icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    outline: none;
    cursor: default;
}

.cd-item-effect-icon__img {
    display: block;
}

.cd-item-effect-icon__placeholder {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    opacity: 0.45;
}

.cd-item-effect-icon__tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}

/* The in-cell tip is the no-JS fallback; effect-icon-tips.js shows the text in a fixed layer
   so the scrolling table wrap does not clip it. */
.cd-effect-tips-js .cd-item-effect-icon__tip {
    display: none;
}

.cd-item-effect-icon__tip,
.cd-item-effect-tip-layer {
    padding: 0.3rem 0.55rem;
    background: #111;
    border: 1px solid var(--cd-archive-accent, #c69145);
    border-radius: 0;
    color: #ececd1;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 30;
}

.cd-item-effect-icon:hover .cd-item-effect-icon__tip,
.cd-item-effect-icon:focus-visible .cd-item-effect-icon__tip {
    opacity: 1;
    visibility: visible;
}

.cd-item-effect-tip-layer {
    position: fixed;
    top: 0;
    left: 0;
    max-width: calc(100vw - 16px);
    opacity: 1;
    visibility: visible;
    z-index: 100000;
}

.cd-sockets-row {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.cd-socket {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #ececd199;
    background: transparent;
    flex-shrink: 0;
}

.cd-socket--filled {
    background: var(--cd-archive-accent, #D93);
    border-color: var(--cd-archive-accent, #D93);
}

/* --- Card grid --- */

.cd-item-archive__card-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.625rem;
}

.cd-item-card {
    background: #141414;
    border: 1px solid #212121;
    transition: background 0.15s ease;
}

.cd-item-card:hover {
    background: #2c2c2c;
}

.cd-item-card__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.cd-item-card__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
}

.cd-item-card__icon img {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    object-fit: contain;
}

.cd-item-card__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cd-item-card__name {
    display: block;
    font-weight: 600;
    line-height: 1.25;
    color: #ececd1;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.cd-item-card:hover .cd-item-card__name {
    text-decoration: underline;
}

.cd-item-card__subtitle {
    display: block;
    font-size: 0.6875rem;
    color: rgba(236, 236, 209, 0.42);
    line-height: 1.3;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.cd-item-card__stats {
    display: block;
    font-size: 0.75rem;
    color: #ececd199;
    line-height: 1.3;
    margin-top: 2px;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.cd-empty-cards {
    grid-column: 1 / -1;
}

/* --- Pagination --- */

.cd-item-archive__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.cd-item-archive__pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.cd-item-archive__pagination .page-numbers li {
    margin: 0;
}

.cd-item-archive__pagination .page-numbers a,
.cd-item-archive__pagination .page-numbers span {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    background: #141414;
    border: 1px solid #2c2c2c;
    border-radius: 0;
    color: #ececd1;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.cd-item-archive__pagination .page-numbers a:hover {
    background: #2c2c2c;
    border-color: #444;
}

.cd-item-archive__pagination .page-numbers .current {
    background: var(--cd-archive-accent, #D93);
    border-color: var(--cd-archive-accent, #D93);
    color: #000;
    font-weight: 600;
}

.cd-item-archive__pagination .page-numbers .dots {
    background: transparent;
    border-color: transparent;
    color: #ececd199;
}

/* --- No-JS fallback --- */

.cd-item-archive__noscript {
    text-align: center;
    padding: 3rem 1rem;
    color: #ececd199;
}

/* --- Filter toggle --- */

.cd-item-archive__filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 40px;
    margin: 0;
    padding: 0 0.75rem;
    background: #111;
    border: 1px solid #2c2c2c;
    color: #ececd1;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.cd-item-archive__filter-toggle:hover,
.cd-item-archive__filter-toggle:active,
.cd-item-archive__filter-toggle[aria-expanded="true"] {
    background-color: #000;
    border-color: #444;
}

.cd-item-archive__filter-toggle:focus-visible {
    border-color: var(--cd-archive-accent, #D93);
}

.cd-item-archive__filter-toggle-icon {
    flex: 0 0 auto;
    color: #ececd199;
}

.cd-item-archive__filter-toggle-label {
    flex: 0 0 auto;
}

.cd-item-archive__filter-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    background: var(--cd-archive-accent, #D93);
    color: #000;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 2px;
}

.cd-item-archive__filter-toggle-chevron {
    flex: 0 0 auto;
    color: #ececd199;
    transition: transform 0.2s ease;
}

.cd-item-archive__filter-toggle[aria-expanded="true"] .cd-item-archive__filter-toggle-chevron {
    transform: rotate(180deg);
}

/* --- Archive toolbar buttons ---
   Clear filters / Show-Hide filters / Show table / Show cards share one look:
   darker than the filter controls below them, gold border + gold text when on. */

.cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__reset,
.cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__filter-toggle,
.cd-item-archive .cd-item-archive__toolbar-actions .cd-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 40px;
    margin: 0;
    padding: 0 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #2c2c2c;
    color: #ececd1;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

/* Clear filters and Show/Hide filters split whatever the search box leaves. */
.cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__reset,
.cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__filter-toggle {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.cd-item-archive .cd-item-archive__toolbar-actions .cd-view-toggle__btn {
    width: 40px;
    padding: 0;
    gap: 0;
    flex: 0 0 auto;
}

.cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__reset:hover,
.cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__filter-toggle:hover,
.cd-item-archive .cd-item-archive__toolbar-actions .cd-view-toggle__btn:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: #444;
    color: #ececd1;
}

/* On: the view this button switches to. The filters toggle has no on-state —
   the open panel and the rotated chevron already show it; the count badge
   carries the "filters are applied" signal. */
.cd-item-archive .cd-item-archive__toolbar-actions .cd-view-toggle__btn--active,
.cd-item-archive .cd-item-archive__toolbar-actions .cd-view-toggle__btn--active:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--cd-archive-accent, #D93);
    color: var(--cd-archive-accent, #D93);
}

.cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__filter-toggle:focus-visible,
.cd-item-archive .cd-item-archive__toolbar-actions .cd-view-toggle__btn:focus-visible {
    border-color: var(--cd-archive-accent, #D93);
}

/* Icons follow the button's own colour. */
.cd-item-archive .cd-item-archive__filter-toggle-icon,
.cd-item-archive .cd-item-archive__filter-toggle-chevron,
.cd-item-archive .cd-item-archive__reset-icon {
    color: inherit;
    opacity: 0.7;
}

/* --- Responsive --- */

/*
 * The name column stays auto on purpose. In table-layout: fixed a table wider
 * than the sum of its columns spreads the surplus over *every* column, which
 * makes the icon column grow past the icon. One auto column takes all of that
 * surplus instead, so the icon column keeps its exact 4.5rem.
 *
 * min-width therefore holds the floor for the name: all other item columns add
 * up to 55rem, so 65rem leaves the name 10rem when the table is at its
 * narrowest.
 */
#cd-item-archive .cd-item-archive__table,
.cd-archive-embed .cd-item-archive__table:has(col.cd-col-stat) {
    min-width: 65rem;
}

.cd-item-archive__table col.cd-col-name,
.cd-item-archive__table th.cd-col-name,
.cd-item-archive__table td.cd-col-name {
    min-width: 10rem;
}

/* Item archive: the text toolbar buttons need their own row once the
   search box takes half of a narrower one. */
@media (min-width: 769px) and (max-width: 1100px) {
    .cd-item-archive .cd-item-archive__filters-row--toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .cd-item-archive .cd-item-archive__filters-row--toolbar > .cd-item-archive__search-wrap,
    .cd-item-archive .cd-item-archive__filters-row--toolbar > .cd-item-archive__toolbar-actions {
        grid-column: auto;
    }

    /* Two across, not three: each filter row holds four cells, so an odd
       track count leaves the last one alone on its own line. */
    #cd-item-archive .cd-item-archive__filters-row--dropdowns,
    .cd-item-archive__filters-row--matchers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet + phone: only the icon column pins horizontally. Name scrolls with stats.
   Keep in sync with isMobileArchiveView() in sticky-table-nav.js (1024px). */
@media (max-width: 1024px) {
    .cd-item-archive__table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .cd-item-archive__table th.cd-col-name,
    .cd-item-archive__table td.cd-col-name {
        left: unset;
        box-shadow: none;
        max-width: none;
    }

    .cd-item-archive__table td.cd-col-name {
        position: static;
        z-index: auto;
    }

    .cd-item-archive__table th.cd-col-name {
        left: unset;
        z-index: 2 !important;
    }

    .cd-item-archive__table.cd-h-scrolled th.cd-col-name,
    .cd-item-archive__table.cd-h-scrolled td.cd-col-name {
        box-shadow: none;
    }

    .cd-item-archive__table.cd-h-scrolled th.cd-col-icon,
    .cd-item-archive__table.cd-h-scrolled td.cd-col-icon {
        box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.45);
    }

    .cd-item-archive__table td.cd-col-icon,
    .cd-item-archive__table tr.cd-item-row:nth-child(even) td.cd-col-icon,
    .cd-item-archive__table tr.cd-item-row:hover td.cd-col-icon {
        background: #141414;
    }

    .cd-item-archive__table tr.cd-item-row:nth-child(even) td.cd-col-icon {
        background: #171717;
    }

    .cd-item-archive__table tr.cd-item-row:hover td.cd-col-icon {
        background: #2c2c2c;
    }
}

@media (max-width: 768px) {
    .cd-item-archive__header {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .cd-item-archive__title {
        font-size: 1.5rem;
    }

    .cd-item-archive__filters {
        padding: 0;
    }

    .cd-item-archive__filters-row--toolbar {
        flex-wrap: wrap;
    }

    .cd-item-archive__filters-row--dropdowns,
    #cd-item-archive .cd-item-archive__filters-row--dropdowns,
    .cd-item-archive__filters-row--matchers {
        grid-template-columns: 1fr;
    }

    .cd-item-archive__search-wrap,
    .cd-item-archive__filter-group {
        width: 100%;
        flex: none;
        min-width: 0;
    }

    .cd-item-archive .cd-item-archive__filters-row--toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .cd-item-archive .cd-item-archive__filters-row--toolbar > .cd-item-archive__search-wrap,
    .cd-item-archive .cd-item-archive__filters-row--toolbar > .cd-item-archive__toolbar-actions {
        grid-column: auto;
    }

    .cd-item-archive__toolbar-actions {
        width: 100%;
        flex: none;
        flex-wrap: wrap;
    }

    .cd-item-archive__toolbar-actions .cd-item-archive__reset,
    .cd-item-archive__toolbar-actions .cd-item-archive__filter-toggle {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* A phone row is too narrow for both labels side by side, so the basis is
       the widest label: a button that cannot get it wraps to its own line. */
    .cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__reset,
    .cd-item-archive .cd-item-archive__toolbar-actions .cd-item-archive__filter-toggle {
        flex: 1 1 10.75rem;
    }

    .cd-item-archive__toolbar-actions .cd-view-toggle {
        margin-left: auto;
        flex: 0 0 auto;
    }

    .cd-item-archive__select {
        width: 100%;
    }

    .cd-item-archive__sort-select {
        width: 100%;
        min-width: 0;
    }

    /* The icon drops to 40px below, so the column is 40px + 2 × 0.5rem padding. */
    .cd-item-archive__table {
        --cd-archive-sticky-icon-width: 3.5rem;
        border-collapse: separate;
        border-spacing: 0;
    }

    .cd-item-archive__table col.cd-col-icon {
        width: 3.5rem;
    }

    .cd-col-icon img,
    .cd-item-no-icon {
        width: 40px;
        height: 40px;
    }

    .cd-item-archive__table th,
    .cd-item-archive__table td {
        padding: 0.5rem;
    }

    .cd-archive-embed {
        margin-left: 0;
        margin-right: 0;
    }

    /* Cards: single column, compact layout */
    .cd-item-archive__card-grid {
        grid-template-columns: 1fr;
    }

    .cd-item-card {
        min-width: 0;
    }

    .cd-item-card__link {
        padding: 0.75rem;
        align-items: flex-start;
    }

    .cd-item-card__stats {
        display: none;
    }

    .cd-item-card__icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .cd-item-card__icon img {
        width: 48px;
        height: 48px;
    }
}

/* Entity card archives (characters, bosses, pets, mounts) */

.vdb-entity-card-archive__filters {
    margin-bottom: 1.25rem;
}

.vdb-entity-card-archive__filters .cd-item-archive__filters-row--toolbar {
    margin-bottom: 0;
}

.vdb-entity-card-archive__search-submit {
    height: 40px;
    margin: 0;
    padding: 0 1.25rem;
    background: var(--cd-archive-accent, #D93);
    border: 1px solid var(--cd-archive-accent, #D93);
    border-radius: 0;
    color: #000;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.vdb-entity-card-archive__search-submit:hover {
    background: #c69145;
    border-color: #c69145;
    color: #000;
}

.vdb-entity-card-archive__search-submit:focus-visible {
    outline: 2px solid #ececd1;
    outline-offset: 2px;
}

.cd-archive-embed {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 1.5rem 0;
    padding: 0;
    overflow-x: clip;
}

/* Same shrink+clip as the item archive's .content-area / .inside-article so the
   table wrap (not the page) is the horizontal scroller. */
#primary:has(.cd-archive-embed),
.content-area:has(.cd-archive-embed),
#main:has(.cd-archive-embed),
article:has(.cd-archive-embed),
.inside-article:has(.cd-archive-embed),
.entry-content:has(.cd-archive-embed) {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.cd-archive-embed .cd-item-archive__table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.entry-content .cd-archive-embed .cd-item-archive__table,
.cd-archive-embed .cd-item-archive__table {
    display: table;
    width: 100%;
    min-width: 65rem;
    max-width: none !important;
    margin: 0;
}

.cd-archive-embed .cd-item-archive__header {
    margin-bottom: 0.75rem;
}

.cd-archive-embed__footer {
    margin-top: 0.85rem;
}

.cd-archive-embed__note {
    margin: 0;
    font-size: 0.875rem;
    color: #b8b89a;
}

.cd-archive-embed__actions {
    margin: 0;
}

/* .cd-archive-embed__db-link is a hook only — the theme's .button_goldborder_nobg paints it. */
.cd-archive-embed__db-link {
    text-decoration: none;
}

.cd-archive-embed__editor-hint {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: #b8b89a;
}