/* ============================================================
   BCC Product Ingredients — afișare frontend
   Paletă nuanțată, borduri clare, 100% responsive.
   ============================================================ */
.bcc-pi-content {
	--bcc-pi-accent:      #2f855a; /* verde-teal discret */
	--bcc-pi-accent-soft: #e6f4ec;
	--bcc-pi-border:      #dfe3e8;
	--bcc-pi-head-bg:     #f2f5f9;
	--bcc-pi-stripe:      #f8fafc;
	--bcc-pi-hover:       #f0f6f2;
	--bcc-pi-text:        #2b2f36;
	--bcc-pi-muted:       #6b7280;

	margin: 0 0 1em;
	color: var(--bcc-pi-text);
}

.bcc-pi-heading {
	font-size: 1.1em;
	margin: 1.4em 0 .6em;
	padding-left: .55em;
	border-left: 4px solid var(--bcc-pi-accent);
	line-height: 1.2;
}
.bcc-pi-content > .bcc-pi-heading:first-child { margin-top: 0; }

/* ---- Tabel ---- */
.bcc-pi-table {
	width: 100%;
	max-width: 100%;
	margin: 0 0 1em;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--bcc-pi-border);
	border-radius: 10px;
	overflow: hidden;
	font-size: .95em;
	background: #fff;
}

.bcc-pi-table th,
.bcc-pi-table td {
	padding: .8em 1em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--bcc-pi-border);
	border-right: 1px solid var(--bcc-pi-border);
	word-break: break-word;
	overflow-wrap: anywhere;
}
.bcc-pi-table th:last-child,
.bcc-pi-table td:last-child { border-right: 0; }
.bcc-pi-table tr:last-child th,
.bcc-pi-table tr:last-child td { border-bottom: 0; }

.bcc-pi-table thead th {
	background: var(--bcc-pi-head-bg);
	color: var(--bcc-pi-text);
	font-weight: 700;
	font-size: .82em;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid var(--bcc-pi-accent);
}

/* Zebra + hover */
.bcc-pi-table tbody tr:nth-child(even) td,
.bcc-pi-table tbody tr:nth-child(even) th { background: var(--bcc-pi-stripe); }
.bcc-pi-table tbody tr:hover td,
.bcc-pi-table tbody tr:hover th { background: var(--bcc-pi-hover); }

/* Coloana 1 = ingredient (mai lată) */
.bcc-pi-table thead th:first-child,
.bcc-pi-table td:first-child { width: 62%; }

.bcc-pi-name {
	display: block;
	font-weight: 600;
	font-size: 1.02em;
	color: var(--bcc-pi-text);
}
.bcc-pi-desc {
	display: block;
	margin-top: .25em;
	font-size: .88em;
	color: var(--bcc-pi-muted);
	line-height: 1.4;
}

/* Concentrație ca badge */
.bcc-pi-table--ing td:last-child {
	white-space: nowrap;
	vertical-align: middle;
}
.bcc-pi-amount {
	display: inline-block;
	padding: .18em .6em;
	border-radius: 999px;
	background: var(--bcc-pi-accent-soft);
	color: var(--bcc-pi-accent);
	font-weight: 700;
	font-size: .88em;
	line-height: 1.5;
	white-space: nowrap;
}
.bcc-pi-muted { color: var(--bcc-pi-muted); }

/* ---- Tabel detalii suplimentare ---- */
.bcc-pi-table--extra th[scope="row"] {
	width: 36%;
	font-weight: 600;
	background: var(--bcc-pi-head-bg);
	color: var(--bcc-pi-text);
	white-space: normal;
}
.bcc-pi-table--extra tbody tr:nth-child(even) th[scope="row"] {
	background: #eef1f6;
}

/* ============================================================
   Responsive — pe ecrane mici, rândurile devin carduri
   ============================================================ */
@media (max-width: 640px) {
	.bcc-pi-table {
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	.bcc-pi-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		border: 0;
	}
	.bcc-pi-table,
	.bcc-pi-table tbody,
	.bcc-pi-table tr,
	.bcc-pi-table th,
	.bcc-pi-table td {
		display: block;
		width: 100% !important;
	}
	.bcc-pi-table tr {
		margin: 0 0 .75em;
		border: 1px solid var(--bcc-pi-border);
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	}
	.bcc-pi-table th,
	.bcc-pi-table td {
		border: 0;
		border-bottom: 1px solid var(--bcc-pi-border);
		padding: .7em .9em;
	}
	.bcc-pi-table tr > :last-child { border-bottom: 0; }

	/* Eticheta câmpului (din data-label) deasupra valorii */
	.bcc-pi-table td[data-label]::before,
	.bcc-pi-table--extra th[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: .25em;
		font-size: .7em;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--bcc-pi-accent);
	}

	/* Rândul cu ingredientul: fundal ușor accentuat sus */
	.bcc-pi-table--ing td:first-child { background: var(--bcc-pi-accent-soft); }
	.bcc-pi-table--ing td:first-child .bcc-pi-name { font-size: 1.05em; }

	.bcc-pi-table--extra th[scope="row"] {
		width: 100% !important;
		background: var(--bcc-pi-accent-soft);
		color: var(--bcc-pi-accent);
	}
	.bcc-pi-table--extra th[data-label]::before { display: none; }

	/* dezactivează hover/zebra care nu au sens pe carduri */
	.bcc-pi-table tbody tr:nth-child(even) td,
	.bcc-pi-table tbody tr:nth-child(even) th,
	.bcc-pi-table tbody tr:hover td,
	.bcc-pi-table tbody tr:hover th { background: #fff; }
	.bcc-pi-table--ing tbody tr td:first-child { background: var(--bcc-pi-accent-soft); }
}