/**
 * Paripoorn Spec Table widget.
 *
 * Two-column label/value table on a soft rounded panel — nutrition facts,
 * ingredients, shipping specs. Uses theme design tokens (--pp-*) so it
 * follows the active Paripoorn Settings brand colors/fonts; Elementor
 * style controls (see SpecTable.php) override these per-instance.
 */

.pp-st {
	--pp-st-indent: 16px;
	background-color: #FBF3E4;
	border-radius: 18px;
	padding: 28px 32px;
	box-sizing: border-box;
}

/*
 * A real <table>, so reset the borders/spacing the browser and most themes
 * apply to tables rather than fighting them per-cell later. table-layout
 * is left auto so a long label can still claim the space it needs.
 */
.pp-st__table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	background: none;
	/* Caption is authored first in the markup (correct reading order for
	   screen readers) but belongs visually below the data. */
	caption-side: bottom;
}

.pp-st__table tr,
.pp-st__table th,
.pp-st__table td {
	background: none;
	border: 0;
}

.pp-st__cell {
	padding: 13px 8px;
	vertical-align: middle;
	/* Dividers are opt-in; declaring the style/width here means toggling a
	   colour on is all the control has to do. */
	border-top: 0 solid transparent;
	transition: background-color 0.18s ease;
}

.pp-st--divided .pp-st__row + .pp-st__row .pp-st__cell {
	border-top-width: 1px;
	border-top-color: #EADFC8;
}

/* thead sits in its own section, so target it explicitly rather than
   relying on the adjacent-sibling rule above. */
.pp-st--divided tbody .pp-st__row:first-child .pp-st__cell {
	border-top-width: 1px;
	border-top-color: #EADFC8;
}

.pp-st--striped tbody .pp-st__row:nth-child(even) .pp-st__cell {
	background-color: rgba(255, 255, 255, 0.45);
}

/* ---------- Columns ---------- */

.pp-st__label {
	width: 55%;
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: 13px;
	/* <th> defaults to bold in most UAs; this is a row label, not a
	   heading, so it reads as body copy unless the row is emphasised. */
	font-weight: 400;
	line-height: 1.5;
	color: #5C5C5C;
	text-align: center;
}

.pp-st__value {
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #5C5C5C;
	text-align: center;
	/* Tabular figures keep the decimal points in a column aligned even
	   when the digits differ in width. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Sub-items (e.g. Dietary Fiber under Total Carbohydrates). Uses padding
   rather than margin so the cell background/stripe still spans the row. */
.pp-st__row--indent .pp-st__label {
	padding-left: calc(8px + var(--pp-st-indent));
}

.pp-st__row--emphasis .pp-st__cell {
	font-weight: 700;
	color: #1B1B1B;
}

/* ---------- Header ---------- */

.pp-st__head-cell {
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1B1B1B;
}

/* ---------- Caption ---------- */

.pp-st__caption {
	font-family: var(--pp-font-body, "Manrope", sans-serif);
	font-size: 11.5px;
	line-height: 1.5;
	color: #8A8A8A;
	text-align: center;
	padding-top: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.pp-st {
		padding: 22px 18px;
	}

	.pp-st__cell {
		padding-left: 4px;
		padding-right: 4px;
	}

	.pp-st__label,
	.pp-st__value {
		font-size: 12.5px;
	}

	.pp-st__row--indent .pp-st__label {
		padding-left: calc(4px + var(--pp-st-indent));
	}
}