.cacao-compare,
.cacao-compare-control {
    --compare-ink: #592203;
    --compare-accent: #993800;
    --compare-muted: #805d49;
    --compare-line: #dfcbb3;
    --compare-paper: #fffaf1;
    --compare-cream: #faf4e8;
    --compare-sand: #f0e3ca;
    --compare-amber: #f1be53;
    color: var(--compare-ink);
}
.cacao-compare [hidden],
.cacao-compare-control [hidden],
.cacao-compare-control[hidden] { display: none !important; }
.cacao-compare-control { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; margin-top: .65rem; }
.cacao-compare-toggle,
.cacao-compare__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .4rem .8rem;
    border: 1px solid var(--compare-line);
    border-radius: 6px;
    background: var(--compare-paper);
    color: var(--compare-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.cacao-compare-toggle:hover,
.cacao-compare-toggle[aria-pressed="true"] { background: var(--compare-sand); border-color: var(--compare-muted); }
.cacao-compare-control a,
.cacao-compare a { color: var(--compare-accent); text-underline-offset: .18em; }
.cacao-compare-control a { padding-block: .55rem; text-decoration: underline; }
.cacao-compare-control [role="status"]:empty { display: none; }
.cacao-compare-control [role="status"] { flex-basis: 100%; color: var(--compare-muted); font-size: .85em; }
.cacao-compare :focus-visible,
.cacao-compare-control :focus-visible { outline: 2px solid var(--compare-accent); outline-offset: 2px; }
.cacao-compare {
    max-width: 1300px;
    margin-inline: auto;
    padding: clamp(1.4rem, 5vw, 4rem) clamp(.75rem, 3vw, 2rem);
    box-sizing: border-box;
}
.cacao-compare__header p { margin: .65rem 0; }
.cacao-compare__header .cacao-compare__kicker { margin-top: 1.75rem; color: var(--compare-muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.cacao-compare__header h1 {
    margin: .35rem 0 .7rem;
    color: var(--compare-ink);
    font: 400 clamp(2.2rem, 5vw, 4.4rem)/1.08 Lora, Georgia, serif;
    letter-spacing: -.035em;
}
.cacao-compare__header h1 em { color: var(--compare-accent); }
.cacao-compare__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .6rem 1.25rem;
    margin: 1.45rem 0 1rem;
    padding: .9rem 0;
    border-block: 1px solid var(--compare-line);
}
.cacao-compare__add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .6rem; width: min(100%, 27rem); margin: 0; }
.cacao-compare__add label { grid-column: 1 / -1; font-weight: 600; }
.cacao-compare__add select { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--compare-line); border-radius: 6px; background-color: var(--compare-paper); color: var(--compare-ink); }
.cacao-compare__button { background: var(--compare-amber); border-color: transparent; }
.cacao-compare__button:hover { background: #ffd47f; }
.cacao-compare__filter,
.cacao-compare__clear { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.cacao-compare__filter input { accent-color: var(--compare-accent); margin: 0; }
.cacao-compare__empty { margin: 1.6rem 0 0; padding: 1.1rem; background: var(--compare-cream); border: 1px solid var(--compare-line); }
.cacao-compare__hint, .cacao-compare__scroll-hint { color: var(--compare-muted); font-size: .9rem; }
.cacao-compare__scroll-hint { display: none; }
.cacao-compare__table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--compare-line); border-radius: 6px; background: var(--compare-paper); }
.cacao-compare__table { border-collapse: separate; border-spacing: 0; width: 100%; }
.cacao-compare__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cacao-compare__table th, .cacao-compare__table td {
    min-width: 9.4rem;
    padding: .75rem clamp(.55rem, 1.3vw, 1.2rem);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--compare-line);
}
.cacao-compare__table tr > :first-child:not([colspan]) {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    width: clamp(6.25rem, 18%, 12.5rem);
    min-width: 6.25rem;
    background: var(--compare-cream);
    border-inline-end: 1px solid var(--compare-line);
}
.cacao-compare__table thead th:not(:first-child) { width: 27%; }
.cacao-compare__table tbody:last-child tr:last-child > * { border-bottom: 0; }
.cacao-compare__section th { background: var(--compare-sand); font-weight: 700; }
.cacao-compare__card { display: grid; gap: .48rem; font-weight: 400; text-decoration: none; }
.cacao-compare__photo { display: block; width: 100%; height: auto; max-height: 11rem; object-fit: cover; border-radius: 4px; aspect-ratio: 1.7; }
.cacao-compare__country { display: flex; gap: .4rem; align-items: center; color: var(--compare-muted); font-size: .78rem; }
.cacao-compare__name { color: var(--compare-ink); font: 400 clamp(1.02rem, 2.15vw, 1.62rem)/1.2 Lora, Georgia, serif; }
.cacao-compare__card:hover .cacao-compare__name { text-decoration: underline; }
.cacao-compare__remove { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; font-weight: 400; }
@media (max-width: 700px) {
    .cacao-compare__scroll-hint { display: block; }
    .cacao-compare__table th, .cacao-compare__table td { font-size: .86rem; min-width: 8.1rem; }
    .cacao-compare__table tr > :first-child:not([colspan]) { box-sizing: border-box; width: 6.25rem; }
}