/* Listino prezzi Costa - stili di base, facilmente sovrascrivibili dal template */
.listino-costa {
	max-width: 56rem;
	margin: 0 auto;
}

.listino-costa .listino-intro {
	margin-bottom: 1rem;
}

.listino-costa .listino-update {
	margin: 0 0 2rem;
	font-size: .9em;
	opacity: .75;
}

.listino-costa .listino-group {
	margin-bottom: 2.25rem;
}

.listino-costa .listino-group-title {
	margin: 0 0 .5rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid currentColor;
	letter-spacing: .03em;
}

.listino-costa .listino-group-subtitle {
	font-size: .6em;
	font-weight: 400;
	letter-spacing: 0;
	opacity: .75;
	white-space: nowrap;
}

.listino-costa .listino-table {
	width: 100%;
	border-collapse: collapse;
}

.listino-costa .listino-table th,
.listino-costa .listino-table td {
	padding: .4rem .25rem;
	border-bottom: 1px solid rgba(128, 128, 128, .25);
	vertical-align: top;
	text-align: left;
	font-weight: 400;
}

.listino-costa .listino-table tr:last-child th,
.listino-costa .listino-table tr:last-child td {
	border-bottom: 0;
}

.listino-costa .listino-name {
	width: 100%;
}

.listino-costa .listino-note {
	display: block;
	margin-top: .1rem;
	font-size: .78em;
	font-style: italic;
	opacity: .75;
}

.listino-costa .listino-symbol {
	margin-left: .15em;
	font-weight: 700;
}

.listino-costa .listino-price {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.listino-costa .listino-price-text {
	display: inline-block;
	max-width: 14rem;
	white-space: normal;
	font-size: .8em;
	font-style: italic;
	font-weight: 400;
	opacity: .8;
}

.listino-costa .listino-price-suffix {
	font-weight: 400;
}

.listino-costa .listino-legend {
	margin-top: 1.5rem;
	font-size: .85em;
	opacity: .8;
}

.listino-costa .listino-legend .listino-symbol {
	margin-right: .35em;
	margin-left: 0;
}

@media (max-width: 480px) {
	.listino-costa .listino-price-text {
		max-width: 8rem;
	}
}

/* ---- Menu dei gruppi (pulsanti a pillola) ---- */
.listino-costa .listino-nav {
	margin: 0 0 2rem;
	padding: .6rem 0;
	background: var(--listino-nav-bg, var(--brand-beige, #fff));
}

.listino-costa .listino-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.listino-costa .listino-nav-link {
	display: inline-block;
	padding: .45rem 1.1rem;
	border: 1px solid var(--listino-nav-color, var(--brand-red-dark, #b81700));
	border-radius: 999px; /* lati verticali completamente tondi */
	color: var(--listino-nav-text, inherit);
	font-size: .85em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}

.listino-costa .listino-nav-link:hover,
.listino-costa .listino-nav-link:focus-visible {
	background: var(--listino-nav-color, var(--brand-red-dark, #b81700));
	color: #fff;
	text-decoration: none;
}

.listino-costa .listino-nav-link:focus-visible {
	outline: 3px solid rgba(128, 128, 128, .5);
	outline-offset: 2px;
}

/* Scorrimento morbido e arrivo preciso sul titolo del gruppo */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.listino-costa .listino-group {
	scroll-margin-top: 1rem;
}

.listino-costa.listino-nav-sticky .listino-nav {
	position: sticky;
	top: var(--listino-sticky-top, 0);
	z-index: 20;
	box-shadow: 0 1px 0 rgba(128, 128, 128, .25);
}

.listino-costa.listino-nav-sticky .listino-group {
	scroll-margin-top: calc(var(--listino-sticky-top, 0px) + 5.5rem);
}

@media (max-width: 767px) {
	.listino-costa.listino-nav-sticky .listino-nav-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: .25rem;
		-webkit-overflow-scrolling: touch;
	}

	.listino-costa.listino-nav-sticky .listino-group {
		scroll-margin-top: calc(var(--listino-sticky-top, 0px) + 4rem);
	}
}