/*
 * CDS Set-Nährwerte – Produktseite.
 * Alle Bestandteile sofort sichtbar, 3 nebeneinander, ab dem 4. die nächste Reihe.
 * Farben und Schrift kommen vom Theme.
 */

.cds-set-food {
	container-type: inline-size;
	margin: 0 0 1.5em;
}

.cds-set-food__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 2.5em;
	row-gap: 0;
}

/*
 * Jede Karte erstreckt sich über 6 Zeilen des Rasters (Name, Zutaten, Allergene,
 * Nährwerte, Kakaoanteil, Link). Mit subgrid stehen diese Abschnitte in einer
 * Reihe auf gleicher Höhe – die Nährwerttabellen beginnen also bündig.
 */
.cds-set-food__item {
	display: grid;
	grid-row: span 6;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
	min-width: 0;
	padding: 1.1em 0 2.2em;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.cds-set-food .cds-set-food__name {
	font-size: 1.15em;
	line-height: 1.3;
	margin: 0 0 .2em;
	padding: 0;
}

.cds-set-food__qty {
	opacity: .7;
	margin-right: .2em;
}

.cds-set-food__part {
	min-width: 0;
}

.cds-set-food__part > :last-child {
	margin-bottom: 0;
}

.cds-set-food .cds-set-food__heading {
	font-size: 1em;
	line-height: 1.4;
	margin: .9em 0 .35em;
	padding: 0;
	font-weight: 600;
}

.cds-set-food .wc-gzd-product-food-information p {
	margin: 0 0 .5em;
}

.cds-set-food .wc-gzd-product-food-information p:last-child {
	margin-bottom: 0;
}

/* Manche Zutatenlisten wurden als Tabelle eingefügt – wie normalen Text darstellen. */
.cds-set-food .wc-gzd-ingredients table,
.cds-set-food .wc-gzd-ingredients tbody,
.cds-set-food .wc-gzd-ingredients tr,
.cds-set-food .wc-gzd-ingredients td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Nährwerttabelle */
.cds-set-food .wc-gzd-food-table {
	width: 100%;
	max-width: none;
	border-collapse: collapse;
	margin: 0;
	table-layout: auto;
}

.cds-set-food .wc-gzd-food-table th,
.cds-set-food .wc-gzd-food-table td {
	padding: .35em .5em .35em 0;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	background: none;
}

.cds-set-food .wc-gzd-food-table th {
	font-weight: normal;
}

.cds-set-food .wc-gzd-food-table td {
	text-align: right;
	white-space: nowrap;
	padding-right: 0;
}

.cds-set-food .wc-gzd-nutrient-table-item-is-child th {
	padding-left: 1em;
}

.cds-set-food .wc-gzd-nutrient-table-item-is-title th {
	font-weight: 600;
	padding-top: .8em;
}

.cds-set-food .wc-gzd-nutrient-reference-value {
	margin: 0 0 .35em;
}

.cds-set-food__part--extras:not(:empty) {
	padding-top: .9em;
}

.cds-set-food .cds-set-food__extra {
	margin: 0;
}

.cds-set-food__part--link:not(:empty) {
	padding-top: .6em;
}

/* Schmaler Inhaltsbereich (Tablet): 2 nebeneinander */
@container (max-width: 820px) {
	.cds-set-food__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2em;
	}
}

/* Smartphone: untereinander */
@container (max-width: 520px) {
	.cds-set-food__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}