.item-detail-wrapper {
    max-width: 880px;
    margin: 0 auto;
    /* Paleta azul/slate — alinhada com a pagina monsters (mesma textura e tons).
       Estas variaveis --item-detail-* eram usadas sem nunca terem sido definidas;
       agora carregam o tema slate frio. */
    --item-detail-background-color: #0b0f17;                   /* card: slate frio (= --m-bg-card) */
    --item-detail-border-color:     rgba(148, 163, 184, 0.18); /* bordas slate */
    --item-detail-header-bg:        #2b3547;                   /* header de tabela (th): slate azul */
    --item-detail-text:             #e2e8f0;                   /* texto slate-200 */
    --item-detail-accent:           #94a3b8;                   /* links slate-400 */
}

.item-detail-card {
    position: relative;
    background-color: var(--item-detail-background-color);
    background-image:
        radial-gradient(ellipse at top, rgba(148, 163, 184, 0.05), transparent 60%),
        var(--texture-noise);
    border: 1px solid var(--item-detail-border-color);
    padding: 24px;
    border-radius: 10px;
    color: var(--item-detail-text);
    margin-bottom: 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.3);
}

/* Flag de item especial (Daily Raid Reward, etc.) — lugar exclusivo no canto
   superior direito do card. Sem flag, o canto fica vazio. */
.item-special-flag {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
}

.item-detail-card h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 28px;
}

.item-breadcrumb {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-breadcrumb a {
    color: #ffd479;
    text-decoration: none;
    font-weight: 600;
}

.item-header {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.item-header img {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    background-color: rgba(0,0,0,0.35);
    padding: 12px;
    border: 1px solid var(--item-detail-border-color);
    object-fit: contain;
}

.item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.item-meta__entry {
    font-size: 14px;
    color: #e0e0e0;
    background: rgba(0,0,0,0.35);
    padding: 6px 10px;
    border-radius: 6px;
}

/* Link da Category em tom discreto (slate-muted): a categoria ja aparece no
   breadcrumb acima, entao nao precisa roubar a cena como primeira coisa. */
.item-meta__entry a {
    color: #9aa6b5;
    text-decoration: none;
}

.item-meta__badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0,0,0,0.25);
    color: #fff;
    padding: 6px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
}

.item-meta__badge a {
    color: #fff;
    text-decoration: none;
}

/* Cards de atributo (.item-attribute) — layout grid em .item-attributes,
   ver bloco final do arquivo. Aqui ficam só as regras especializadas pra
   conteudo composto (attr-list em absorb/reflect/skills). */

.item-attribute__value a {
    color: var(--accent-color, #ffd167);
    text-decoration: none;
}

.item-attribute__value a:hover {
    text-decoration: underline;
}

/* Link de item com sprite — usado no "Assembles Into" (móvel que o kit produz ao usar). */
.item-link-img {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.item-link-img__sprite {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    flex: 0 0 auto;
}
.item-link-img:hover span {
    text-decoration: underline;
}

/* Atributos compostos vindos de absorb_json/reflect_*_json: lista vertical
   com nome (esquerda, cor por elemento) + valor (direita, dourado). */
.item-attribute__value .attr-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: normal;
    width: 100%;
}

.item-attribute__value .attr-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    line-height: 1.3;
    width: 100%;
    box-sizing: border-box;
}

.item-attribute__value .attr-name {
    color: #d4d4d4;
    font-weight: 500;
}

.item-attribute__value .attr-num {
    color: var(--accent-color, #ffd479);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Regen: HP em verde (estilo barra de vida do client), MP em azul. */
.item-attribute__value .regen-part {
    font-weight: 700;
    white-space: nowrap;
}
.item-attribute__value .regen-part--hp    { color: #4ade80; }
.item-attribute__value .regen-part--mp    { color: #5fa8ff; }
.item-attribute__value .regen-part--heal  { color: #ffe066; }
.item-attribute__value .regen-part--magic { color: #b377ff; }
.item-attribute__value .regen-sep {
    color: #777;
    font-weight: 400;
    margin: 0 2px;
}

/* Cor por elemento — paleta Tibia: fogo quente, gelo ciano, energy roxo,
   earth verde, holy dourado, death púrpura. Mantém legibilidade no fundo
   escuro do card. */
.item-attribute__value .attr-name--physical  { color: #d4d4d4; }
.item-attribute__value .attr-name--fire      { color: #ff6b35; }
.item-attribute__value .attr-name--ice       { color: #5fcfff; }
.item-attribute__value .attr-name--energy    { color: #b377ff; }
.item-attribute__value .attr-name--earth     { color: #7bc950; }
.item-attribute__value .attr-name--holy      { color: #ffe066; }
.item-attribute__value .attr-name--death     { color: #b07acc; }
.item-attribute__value .attr-name--healing   { color: #4ade80; }
.item-attribute__value .attr-name--lifedrain { color: #e8634a; }
.item-attribute__value .attr-name--manadrain { color: #4d8dff; }
.item-attribute__value .attr-name--drown     { color: #4d9eff; }
.item-attribute__value .attr-name--undefined { color: #cfcfcf; }

.item-description {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #f2f2f2;
    background: rgba(0,0,0,0.35);
    padding: 14px;
    border-radius: 8px;
}

.item-vendors {
    margin-top: 26px;
}

.item-vendors__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.item-vendors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.item-vendors__grid .vendor-table {
    background: rgba(148, 163, 184, 0.04);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.vendor-table h3 {
    margin: 0;
    padding: 12px 16px;
    background: var(--item-detail-primary-color);
    color: #fff;
    font-size: 16px;
}

.vendor-table table {
    width: 100%;
    border-collapse: collapse;
}

.vendor-table th {
    background: var(--item-detail-border-color);
    color: #fff;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.vendor-table td {
    padding: 10px 14px;
    font-size: 14px;
    color: #f2f2f2;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.vendor-table tbody tr:nth-child(odd) td {
    background: rgba(0,0,0,0.25);
}

.vendor-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.05);
}

.npc-price {
    font-weight: 600;
    color: #ffd479;
}

.npc-name a {
    color: #f7f7f7;
    text-decoration: none;
}

.npc-name a:hover {
    text-decoration: underline;
}

.item-vendors__empty {
    padding: 12px 16px;
    font-size: 13px;
    color: #d9d9d9;
}

.item-vendors__loading {
    margin-bottom: 10px;
    font-size: 13px;
    color: #e0e0e0;
}

.item-vendors__error {
    margin-bottom: 10px;
    font-size: 13px;
    color: #ff8080;
}

.item-back-link {
    color: #ffd479;
    text-decoration: none;
    font-weight: 600;
}

.item-back-link:hover {
    text-decoration: underline;
}

.item-droppers {
    margin-top: 26px;
}

.item-droppers__table {
    background: rgba(148, 163, 184, 0.04);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
    /* Respiro embaixo — sem ele a tabela/botão termina colado na borda do card. */
    padding-bottom: 16px;
}

.item-detail-card--error {
    background: rgba(80,20,20,0.75);
    border-color: #aa4444;
}

.item-detail-card--error a {
    color: #ffd479;
}

@media (max-width: 640px) {
    .item-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.items-search-table{
    border-collapse: collapse;
    width: 95%;
}

.items-search-table th,
.items-search-table td{
    padding: 4px 8px;
}

.items-search-table th{
    background: var(--items-vdarkborder);
    color: #ffffff;
    text-align: left;
    white-space: nowrap;
}

.items-search-table td{
    color: #f2f2f2;
}

/* Cores especiais por tag */
.items-search-table .item-tag-raid {
    color: palevioletred;
}

.items-search-table .item-tag-shop {
    color: #54a0ff;
}

.items-search-table .item-tag-old {
    color: sandybrown;
}

.items-search-table .item-tag-santa {
    color: #2ea35a;
}

/* Tabela de resultados da busca */
#tableItems {
    font-size: 13px;
}

/* Cabeçalho: um pouco menor e menos gritante que o conteúdo */
#tableItems .items-search-header th {
    font-size: 11px;
    font-weight: 600;
    color: #d2d2d2;              /* cinza claro, não branco puro */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Linhas da tabela: texto principal mais branco, mas não estourando */
#tableItems .items-search-row td {
    font-size: 13px;
    color: #f3f3f3;              /* quase branco */
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Nome do item: destaque (cor semelhante ao site) */
/* Nome padrão do item (não-tagged) */
#tableItems .items-search-row td:nth-child(2) a.item-name-link:not(.item-tag-raid):not(.item-tag-shop):not(.item-tag-old):not(.item-tag-santa) {
    color: #bfa66f;
    font-weight: 600;
    text-decoration: none;
}
#tableItems .items-search-row td:nth-child(2) a.item-name-link:hover:not(.item-tag-raid):not(.item-tag-shop):not(.item-tag-old) {
    text-decoration: underline;
}

/* Overrides para itens especiais na busca */
#tableItems a.item-tag-raid {
    color: palevioletred !important;
    font-weight: 600;
}
#tableItems a.item-tag-shop {
    color: #54a0ff !important;
    font-weight: 600;
}
#tableItems a.item-tag-old {
    color: sandybrown !important;
    font-weight: 600;
}
#tableItems a.item-tag-santa {
    color: #2ea35a !important;
    font-weight: 600;
}


/* Category e Weight: um pouco mais apagados que o nome */
#tableItems .items-search-row td:nth-child(3),
#tableItems .items-search-row td:nth-child(4) {
    color: #d0d0d0;
    font-size: 12px;
}

/* Description: legível, mas sem competir com o nome do item */
#tableItems .items-search-row td:nth-child(5) {
    color: #e5e5e5;
    font-size: 13px;
}

.items-panel {
    background: rgba(5, 5, 15, 0.85);
    border-radius: 10px;
    border: 1px solid #242438;
    width: 90%;
    margin: 15px auto 25px;
    padding: 15px 18px 20px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}

.category-title {
    background: #242438;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 20px;
    margin: 10px 0 6px;          /* antes tinha auto; agora usa largura total */
    width: 100%;                 /* ocupa toda a largura interna do painel */
    color: #e6e6e6;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;      /* respeita o padding igualmente dos dois lados */
}

.grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 760px;
    margin: 8px auto 16px;
    text-align: center;
}

.grid-items a {
    color: #f2f2f2;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    padding: 4px 2px;
    border-radius: 6px;
    transition: 0.12s ease-in-out;
}

.grid-items a:hover {
    background: rgba(255,255,255,0.04);
    transform: translateY(-1px);
}

.grid-items img {
    width: 40px;
    height: 40px;
    margin-bottom: 3px;
}

.grid-items-equipment {
    grid-template-columns: repeat(5, 1fr); /* 5 colunas fixas */
}

.grid-spacer {
    visibility: hidden;   /* ocupa espaço mas não aparece */
    pointer-events: none;
}

.items-pagination-current{
    font-weight:bold;
    color:#ffd479; /* mesma cor dos links das categorias / nomes de item */
}/* ── Search bar ── */
.items-search-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.items-search-bar input[type="text"] { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-border); background: rgba(0,0,0,0.45); color: #fff; font-size: 14px; width: 220px; }
.items-search-bar input[type="text"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(255,212,121,0.2); }
.items-search-bar input[type="button"] { padding: 8px 16px; border-radius: 8px; border: none; background: var(--color-primary); color: #000; font-weight: 700; cursor: pointer; font-size: 13px; }
.items-search-bar input[type="button"]:hover { opacity: 0.85; }

/* Padding lateral do wrapper da pagina items — afasta search bar, nav e
   tabelas da borda do textnew_content_inside (que tem so 20px de margin). */
#items-root { padding: 0 12px; }

/* Indicadores de sort no header da tabela de categoria. Link inteiro fica
   clicavel; seta sutil pra coluna ativa, ↕ neutro pras outras. */
.items-sort-idle { color: rgba(255,255,255,0.25); font-size: 10px; }
.items-sort-active { color: var(--color-primary, #ffd479); font-size: 11px; font-weight: 700; }

/* ── Category navigation ── */
/* Single-row, fonte cinza pequena. Wrap natural se nao couber. Active fica
   destacado em dourado/bold. Hover so mostra realce sutil de cor. */
.items-cat-nav { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.items-cat-nav a { color: #888; text-decoration: none; font-size: 11px; font-weight: 500; padding: 1px 2px; transition: color 0.12s; }
.items-cat-nav a:hover { color: #ddd; }
.items-cat-nav__active { color: var(--color-primary, #ffd479) !important; font-weight: 700; }

/* ── Origin filter sub-nav ──
   Linha extra logo abaixo da nav de categoria. Mais discreta, com cores
   alinhadas a .item-tag-* pra leitura visual rapida. */
.items-origin-nav { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 10px; }
.items-origin-nav__label { color: #666; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.items-origin-nav__link { text-decoration: none; padding: 1px 4px; border-radius: 3px; opacity: 0.7; transition: opacity 0.12s; font-weight: 600; }
.items-origin-nav__link:hover { opacity: 1; }
.items-origin-nav__link--raid  { color: palevioletred; }
.items-origin-nav__link--shop  { color: #54a0ff; }
.items-origin-nav__link--old   { color: #a29bfe; }
.items-origin-nav__link--santa { color: #2ea35a; }
.items-origin-nav__active { opacity: 1 !important; outline: 1px solid currentColor; outline-offset: 1px; }
.items-origin-nav__clear { color: #888; font-size: 10px; padding: 1px 4px; text-decoration: none; margin-left: 6px; }
.items-origin-nav__clear:hover { color: #ddd; }

/* ── Grid view ── */
.items-section { margin-bottom: 18px; }
.items-section-table { width: 100%; }
.items-grid-cell { text-align: center; padding: 12px 8px; vertical-align: top; }
.items-grid-link { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: #ffd479; font-size: 12px; font-weight: 600; }
.items-grid-link img { width: 40px; height: 40px; object-fit: contain; background: rgba(0,0,0,0.35); border-radius: 8px; padding: 4px; border: 1px solid var(--color-border); }
.items-grid-link:hover span { text-decoration: underline; }

/* ── Category table ── */
.items-col-icon { width: 40px; text-align: center; }
.items-col-icon img { width: 32px; height: 32px; object-fit: contain; }

/* ── Item name / tag links ── */
.item-name-link { color: #ffd479; text-decoration: none; font-weight: 600; }
.item-name-link:hover { text-decoration: underline; }
.item-tag-raid  { color: palevioletred; }
.item-tag-shop  { color: #54a0ff; }
.item-tag-old   { color: #a29bfe; }
.item-tag-santa { color: #2ea35a; }

/* ── Search results table ── */
.items-search-table td:last-child { max-width: 340px; font-size: 12px; color: #d0d0d0; }

/* ── Pagination ── */
.items-pagination { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 13px; color: #d0d0d0; }
.items-pagination a { color: #ffd479; text-decoration: none; font-weight: 600; }
.items-pagination a:hover { text-decoration: underline; }

/* ── Detail view ── */
.item-detail-wrapper { max-width: 960px; margin: 0 auto; }

.item-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #d9d9d9; margin-bottom: 8px; }
.item-breadcrumb a { color: #ffd479; text-decoration: none; font-weight: 600; }
.item-breadcrumb a:hover { text-decoration: underline; }
.item-breadcrumb__origin { font-weight: 600; }
.item-breadcrumb__origin--raid  { color: palevioletred; }
.item-breadcrumb__origin--shop  { color: #54a0ff; }
.item-breadcrumb__origin--old   { color: #a29bfe; }
.item-breadcrumb__origin--santa { color: #2ea35a; }
.item-breadcrumb span { opacity: 0.6; }

.item-detail-card {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 16px 26px rgba(0,0,0,0.35);
    color: #f2f2f2;
}
.item-detail-card--error { text-align: center; padding: 40px 20px; }
.item-detail-card--error h2 { color: var(--color-heading); text-shadow: var(--text-shadow-heading); margin-bottom: 10px; }

.item-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.item-header img { width: 64px; height: 64px; object-fit: contain; background: rgba(0,0,0,0.35); border-radius: 10px; padding: 6px; border: 1px solid var(--color-border); flex-shrink: 0; }
.item-header h2 { margin: 0 0 8px; font-size: 26px; color: var(--color-heading); text-shadow: var(--text-shadow-heading); }

/* Sprite composta (BP + overlay) na página de detalhe — maior que na list. */
.item-sprite-bundle--detail {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 64px;
    background: rgba(0,0,0,0.35);
    border-radius: 10px;
    padding: 6px;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    flex-shrink: 0;
}
.item-sprite-bundle--detail .base {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    object-fit: contain;
}
.item-sprite-bundle--detail .overlay {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 55%;
    height: 55%;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    image-rendering: pixelated;
    pointer-events: none;
    object-fit: contain;
}

.item-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #e0e0e0; }
.item-meta__entry strong { color: #fff; }
.item-meta__entry a { color: #ffd479; text-decoration: none; font-weight: 600; }
.item-meta__entry a:hover { text-decoration: underline; }
.item-meta__badge { background: rgba(255,212,121,0.12); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.item-meta__badge a { color: #ffd479; text-decoration: none; }
.item-meta__badge a:hover { text-decoration: underline; }

/* Restrição de vocação ("Knights only") — cinza/slate neutro: lê como
   "restrito/bloqueado" e não compete com os badges de origin coloridos. */
.item-meta__entry--vocation {
    background: rgba(136,136,136,0.10);
    border-radius: 6px;
    padding: 3px 10px;
    color: #b8b8b8;
    font-weight: 600;
}

/* Badges por origin: paleta alinhada com .item-tag-* (cor da tag na lista bate com cor da badge no detalhe). */
/* palevioletred = rgb(219, 112, 147) */
.item-meta__badge--raid  { background: rgba(219,112,147,0.12); border-color: rgba(219,112,147,0.4); }
.item-meta__badge--raid  a { color: palevioletred; }
.item-meta__badge--shop  { background: rgba(84,160,255,0.12);  border-color: rgba(84,160,255,0.4); }
.item-meta__badge--shop  a { color: #54a0ff; }
.item-meta__badge--old   { background: rgba(162,155,254,0.12); border-color: rgba(162,155,254,0.4); }
.item-meta__badge--old   a { color: #a29bfe; }
.item-meta__badge--santa { background: rgba(46,163,90,0.14);   border-color: rgba(46,163,90,0.45); }
.item-meta__badge--santa a { color: #2ea35a; }

/* Atributos do detalhe do item — grid responsivo, células de >=180px pra
   acomodar attr-list (absorb composto) sem invadir vizinho. min-width: 0 no
   __value permite que conteudo largo encolha sem empurrar a celula. */
.item-attributes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; margin-top: 18px; margin-bottom: 18px; }
.item-attribute {
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid var(--item-detail-border-color);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.item-attribute__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #97a3b4; margin-bottom: 4px; }
.item-attribute__value { font-size: 15px; font-weight: 700; color: #f1f5f9; min-width: 0; word-break: break-word; line-height: 1.35; }

.item-description { background: rgba(148, 163, 184, 0.05); border-radius: 8px; padding: 14px; font-size: 13px; line-height: 1.55; color: var(--item-detail-text); margin-bottom: 18px; font-style: italic; }

/* Atributos ocultos (<attribute key="wikiHide"> no items.xml) — "?" de mistério, apagado. */
.item-hidden-note,
.item-description--hidden {
    color: var(--color-text-muted);
    font-style: italic;
    letter-spacing: 1px;
}
/* Padding lateral padrão dos vendor-tables (12px 16px) pra o texto não colar na borda. */
.item-hidden-note {
    padding: 12px 16px;
    margin: 0;
    font-size: 13px;
}

/* ── Vendor tables ── */
.item-vendors { margin-bottom: 18px; }
.item-vendors__loading { font-size: 13px; color: #d0d0d0; padding: 10px 0; }
.item-vendors__error { font-size: 13px; color: #ff8080; padding: 10px 0; }
.item-vendors__error--muted { color: #9aa3ad; }
.item-vendors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vendor-table h3 { margin: 0 0 8px; font-size: 14px; color: var(--color-heading); }
.vendor-table table { width: 100%; border-collapse: collapse; background: transparent; border: 1px solid var(--item-detail-border-color); border-radius: 8px; overflow: hidden; }
.vendor-table th { background: var(--item-detail-header-bg); color: var(--color-heading); text-align: left; padding: 9px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.vendor-table td { padding: 9px 16px; font-size: 12px; color: var(--item-detail-text); border-top: 1px solid var(--item-detail-border-color); }
.vendor-table tbody tr:nth-child(odd) td { background: #20222c; }
.vendor-table tbody tr:nth-child(even) td { background: #1b1e26; }
.vendor-table td a { color: var(--item-detail-accent); text-decoration: none; }
.vendor-table td a:hover { color: var(--color-accent-text); text-decoration: underline; }
/* Dropped By: a tabela encolhe pro conteudo e centraliza (em vez de esticar a
   pagina toda); o titulo h3 centraliza junto. */
.item-droppers__table h3 { text-align: center; }
/* O wrapper encolhe pra largura da tabela e centraliza; a tabela e o botao
   "Show all" preenchem o wrapper (mesma largura, como nas tasks do characters). */
.item-drops-collapse { width: fit-content; min-width: 440px; max-width: 100%; margin: 0 auto; }
.item-droppers__table table { width: 100%; }
/* Colapsado: mostra ~8 linhas com fade no fim; expande/recolhe com SLIDE
   (max-height transicionado no viewport). O botao fica FORA do viewport pra
   nao ser cortado. */
.item-drops-collapse.is-collapsible .item-drops-viewport {
    max-height: 360px;
    overflow: hidden;
    transition: max-height 0.35s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent);
    mask-image: linear-gradient(to bottom, #000 84%, transparent);
}
.item-drops-collapse.is-collapsible.is-expanded .item-drops-viewport {
    max-height: 16000px;
    -webkit-mask-image: none;
    mask-image: none;
}
.item-drops-collapse.is-collapsible table { border-radius: 8px 8px 0 0; }
/* Botao discreto: sem borda, fundo slate bem leve, texto muted — rodape sutil
   da tabela, sem competir por atencao. */
.item-drops-collapse .char-tasks-toggle {
    margin-top: 0;
    border: none;
    border-radius: 0 0 8px 8px;
    background: rgba(148, 163, 184, 0.05);
    color: var(--color-text-muted);
    font-weight: 500;
}
.item-drops-collapse .char-tasks-toggle:hover {
    background: rgba(148, 163, 184, 0.10);
    color: var(--item-detail-text);
}
.item-vendors__empty { font-size: 12px; color: #d0d0d0; padding: 10px 16px; }

.item-back-link { color: #ffd479; text-decoration: none; font-weight: 600; font-size: 13px; }
.item-back-link:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .item-vendors__grid { grid-template-columns: 1fr; }
    .item-attributes { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
    .item-header img { width: 48px; height: 48px; }
}

/* Mobile: nas tabelas largas de armas corpo-a-corpo (clubs/axes/swords) a coluna
   Description estoura a tela — escondê-la libera espaço. As outras categorias com
   description (decorations/scrolls/valuables/others) têm tabela estreita e não
   recebem a classe items-hide-desc-mobile. */
@media (max-width: 600px) {
    .items-hide-desc-mobile .items-col-description { display: none; }
    .items-hide-weight-mobile .items-col-weight { display: none; }

    /* Mesmo sem a Description, as 5 colunas (Item/Name/Attack/Defense/Weight)
       ainda estouravam no celular. Reduz fonte (cabeçalho + células) + padding
       e estreita a coluna do ícone pra caber sem rolagem lateral. */
    .items-hide-desc-mobile td { font-size: 11px; padding-left: 4px; padding-right: 4px; }
    .items-hide-desc-mobile .items-col-icon { width: 30px; }
    .items-hide-desc-mobile .items-col-icon img { max-width: 28px; height: auto; }
}