Kit Downhill

Description

/* —— Acordeão que herda o tema Shopify —— */
.tacc { margin-top: 1rem; border: 1px solid var(–color-border, currentColor); border-radius: var(–radius-base, .5rem); overflow: hidden; background: var(–color-bg, transparent); }
.tacc__group { border-bottom: 1px solid var(–color-border, currentColor); }
.tacc__group:last-child { border-bottom: 0; }

.tacc__btn {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .875rem 1rem; background: inherit; color: inherit; font: inherit; line-height: inherit;
border: 0; text-align: left; cursor: pointer; appearance: none;
position: relative;
}

/* Ícone +/− herdando tipografia do tema */
.tacc__btn::after {
content: « ➕ »; font: inherit; opacity: .9;
}
.tacc__btn[aria-expanded= »true »]::after {
content: « ➖ »;
}

.tacc__content {
max-height: 0; overflow: hidden; padding: 0 1rem;
transition: max-height .3s ease-out, padding .3s ease-out;
background: inherit; color: inherit; font: inherit;
}
.tacc__content.is-open {
max-height: 1000px; /* suficientemente alto p/ conteúdo longo */
padding: .75rem 1rem 1rem;
}

/* Texto introdutório: apenas espaçamento; herda tipografia/cores */
.tacc-desc { margin-bottom: 1.25rem; }

/* Listas internas com espaçamento suave, sem redefinir bullets/cores */
.tacc__content ul { margin: .5rem 0 0; padding-inline-start: 1.25rem; }
.tacc__content li { margin: .4rem 0; }

@media (prefers-reduced-motion: reduce) {
.tacc__content { transition: none; }
}

document.addEventListener(‘DOMContentLoaded’, function () {
const groups = document.querySelectorAll(‘.tacc__group’);

groups.forEach(group => {
const btn = group.querySelector(‘.tacc__btn’);
const content = group.querySelector(‘.tacc__content’);

btn.addEventListener(‘click’, () => {
const isOpen = btn.getAttribute(‘aria-expanded’) === ‘true’;
btn.setAttribute(‘aria-expanded’, String(!isOpen));
content.hidden = isOpen;
content.classList.toggle(‘is-open’, !isOpen);
});
});
});