Emmaillotage Confort Premium

Description

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

.t-accordion__header {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .75rem 1rem;
background: inherit; color: inherit; font: inherit; line-height: inherit;
border: 0; text-align: left; cursor: pointer; appearance: none;
}
.t-accordion__header::after { content: « ➕ »; font: inherit; opacity: .9; }
.t-accordion__header[aria-expanded= »true »]::after { content: « ➖ »; }

.t-accordion__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;
}
.t-accordion__content.is-open { max-height: 1000px; padding: .75rem 1rem 1rem; }

/* Texto introdutório: apenas espaçamento; herda tipografia/cores do tema */
.t-desc { margin-block-end: 1.25rem; }
.t-accordion__content ul { margin: .25rem 0 0; padding-inline-start: 1.25rem; }
.t-accordion__content li { margin: .35rem 0; }

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

// Uma secção aberta de cada vez + ARIA/hidden
document.addEventListener(‘DOMContentLoaded’, function () {
const groups = document.querySelectorAll(‘.t-accordion__group’);

function closeAll() {
groups.forEach(g => {
const b = g.querySelector(‘.t-accordion__header’);
const c = g.querySelector(‘.t-accordion__content’);
b.setAttribute(‘aria-expanded’, ‘false’);
c.classList.remove(‘is-open’);
c.hidden = true;
});
}

groups.forEach(g => {
const b = g.querySelector(‘.t-accordion__header’);
const c = g.querySelector(‘.t-accordion__content’);

b.addEventListener(‘click’, () => {
const isOpen = b.getAttribute(‘aria-expanded’) === ‘true’;
closeAll();
if (!isOpen) {
b.setAttribute(‘aria-expanded’, ‘true’);
c.hidden = false;
requestAnimationFrame(() => c.classList.add(‘is-open’));
}
});
});
});