Canapé Outzy Mini Enfant Intérieur/Extérieur

Description

/* —— Acordeão que herda o tema do tema Shopify —— */
.t-accordion {
margin-block: 0.75rem;
border: 1px solid var(–color-border, currentColor);
border-radius: var(–radius-base, 0.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: 500px; padding: .75rem 1rem 1rem; }

/* Texto introdutório: só 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; }
}

// Mantém o comportamento original: cada secção abre/fecha de forma independente
document.addEventListener(‘DOMContentLoaded’, function () {
const groups = document.querySelectorAll(‘.t-accordion__group’);

groups.forEach(group => {
const btn = group.querySelector(‘.t-accordion__header’);
const content = group.querySelector(‘.t-accordion__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);
});
});
});