e
nessuna riga con due | . Le tabelle di confronto restano tabelle vere.
═══════════════════════════════════════════════════════════════════════ */
.ptabs__prose table[data-evox-coppie] {
display: block;
width: 100%;
border: 0;
border-collapse: separate;
border-spacing: 0;
margin-block: 0 1rem;
}
.ptabs__prose table[data-evox-coppie] > tbody {
display: block;
column-width: 24rem;
column-gap: clamp(1.75rem, .75rem + 1.2vw, 2.75rem);
column-rule: 1px solid var(--evo-line);
}
.ptabs__prose table[data-evox-coppie] > tbody > tr {
display: flex;
gap: 1rem;
align-items: baseline;
break-inside: avoid;
padding-block: .6rem;
border-block-end: 1px solid var(--evo-line);
}
.ptabs__prose table[data-evox-coppie] > tbody > tr > th,
.ptabs__prose table[data-evox-coppie] > tbody > tr > td {
display: block;
border: 0;
padding: 0;
background: none;
box-shadow: none; /* le righe zebrate di Bootstrap dipingono con una
ombra interna: qui spezzerebbe la riga in due */
text-align: start;
hyphens: none;
}
.ptabs__prose table[data-evox-coppie] > tbody > tr > th {
flex: 0 0 46%;
width: auto;
font-weight: 600;
color: var(--evo-muted);
font-size: .9375rem;
line-height: 1.4;
}
.ptabs__prose table[data-evox-coppie] > tbody > tr > td {
flex: 1 1 0;
min-width: 0;
color: var(--evo-text);
line-height: 1.4;
}
/* ── Le note sotto la tabella ──────────────────────────────────────────── */
/* Sono le uniche righe del pannello "Scheda tecnica" che non stanno dentro
una cella. Lasciate libere prendevano tutta la fascia: misurate 155
caratteri su una riga sola a 1920 (nota fonte dati della Athlon Midas) e
128 sulla nota di confronto della Hypershell X Ultra. Una nota non si
impagina su due colonne — sono due righe — quindi qui il limite di lettura
e' quello giusto: il testo lungo resta sotto gli 85 caratteri e la tabella
sopra continua a occupare tutta la fascia.
Le celle della tabella non c'entrano: hanno gia' la loro colonna. */
.ptabs__panel--scheda .ptabs__prose p {
max-width: 42rem;
}
.ptabs__panel--scheda .ptabs__prose table p {
max-width: none;
}
.ptabs__prose p.specs-source,
.ptabs__prose p.table-note {
max-width: 36rem; /* corpo .875rem: piu' piccolo, quindi piu'
caratteri a parita' di larghezza */
margin-block-start: 1rem;
font-size: .875rem;
line-height: 1.55;
color: var(--evo-muted);
}
/* ── Dettagli del prodotto dentro il pannello "Scheda tecnica" ─────────── */
/* Erano un elenco incolonnato largo al massimo 46rem: su una fascia da 1236
ne restavano vuoti 500. Ora sono targhette affiancate che si dispongono da
sole (auto-fit) e riempiono la riga. */
.product-details {
margin-block-start: 2.25rem;
max-width: none;
}
.product-details__title {
font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
margin-block-end: .9rem;
}
.ptabs__panel .details__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: .75rem;
margin-block-end: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
list-style: none;
}
.ptabs__panel .details__item {
display: block;
background-color: var(--evo-bg);
border: 1px solid var(--evo-line);
border-radius: var(--evo-r-sm);
padding: .85rem 1rem;
}
.ptabs__panel .details__left,
.ptabs__panel .details__right {
width: auto;
max-width: none;
}
.ptabs__panel .details__title {
display: block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--evo-muted);
margin-block-end: .3rem;
}
.ptabs__panel .details__right {
font-weight: 600;
color: var(--evo-text);
line-height: 1.4;
}
.ptabs__panel .details__manufacturer-logo {
max-height: 2.5rem;
width: auto;
}
/* ── Allegati ──────────────────────────────────────────────────────────── */
.ptabs__panel .product__attachments {
display: grid;
gap: .75rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.ptabs__panel .attachment {
position: relative;
background-color: var(--evo-bg);
border: 1px solid var(--evo-line);
border-radius: var(--evo-r-sm);
padding: 1rem 1.15rem;
transition: border-color .2s var(--evo-ease);
}
.ptabs__panel .attachment:hover {
border-color: var(--evo-action);
}
.ptabs__panel .attachment__name {
font-weight: 600;
margin-block-end: .25rem;
}
.ptabs__panel .attachment__description {
color: var(--evo-muted);
font-size: .875rem;
margin-block-end: .5rem;
}
.ptabs__panel .attachment__link {
display: inline-flex;
align-items: center;
gap: .35rem;
font-weight: 600;
color: var(--evo-action);
}
.ptabs__panel .attachment__link .material-icons {
font-size: 20px;
}
/* ── Recensioni ────────────────────────────────────────────────────────── */
/* Con zero commenti il pannello conteneva una riga di testo larga 156px in
mezzo a 1236 di bianco. Il contenuto e' poco per davvero, ma non c'e'
motivo perche' sia anche stretto: intestazione con filo di chiusura e
avviso in un riquadro, entrambi a tutta fascia. */
.ptabs__panel .product-comments-wrapper {
width: 100%;
}
.ptabs__panel #product-comments-list-header {
display: block;
width: 100%;
border-block-end: 1px solid var(--evo-line);
padding-block-end: .75rem;
margin-block-end: 1.25rem;
}
.ptabs__panel #product-comments-list-header .section-title {
font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
margin: 0;
}
.ptabs__panel #empty-product-comment {
display: block;
width: 100%;
background-color: var(--evo-bg);
border: 1px solid var(--evo-line);
border-radius: var(--evo-r-sm);
padding: 1.15rem 1.25rem;
color: var(--evo-muted);
}
.ptabs__panel #product-comments-list,
.ptabs__panel .product-comment-list-item,
.ptabs__panel #product-comments-list-footer {
width: 100%;
}
.ptabs__panel #product-comments-list-footer {
margin-block-start: 1.25rem;
}
/* ════════════════════════════════════════════════════════════════════════
Sotto i 768px le linguette affiancate non ci stanno: diventano una
fisarmonica. Il JavaScript sposta ogni etichetta davanti al proprio
pannello e le cambia ruolo (da role="tab" a pulsante con aria-expanded);
qui si fa solo la grafica. La prima sezione, Descrizione, resta aperta.
═══════════════════════════════════════════════════════════════════════ */
.ptabs--acc .ptabs__tablist {
display: none;
}
.ptabs--acc .ptabs__panels {
padding-inline: 1rem;
padding-block: 0 .5rem;
}
/* L'intestazione di sezione creata dal JS: e' un |