/* ---------- Packaging page ---------- */
.er-packaging-title {
	color: #fff;
}
.er-packaging-guide-title {
	font-size: 36px;
}

/* Guide & Information heading stays left-aligned at every width (some
   theme-level mobile typography settings otherwise center all headings). */
#er-packaging .er-guide-eyebrow,
#er-packaging .er-packaging-guide-title {
	text-align: left !important;
}
#er-packaging .er-guide-eyebrow {
	justify-content: flex-start !important;
}

/* Hero image: match production's taller box + bottom-anchored crop so the
   tea boxes stay fully visible instead of being cut off under the default
   400px/center-position sizing. */
#er-packaging .er-two-col__image--bg {
	min-height: 500px;
	background-position: 50% 100%;
}
@media (max-width: 900px) {
	#er-packaging .er-two-col__image--bg {
		min-height: 250px;
	}
}

/* Components Explained rows: title+tag stack vertically (not side by side)
   and a vertical divider line separates each column, matching production. */
#er-packaging .er-component-row {
	gap: 20px;
}
#er-packaging .er-component-row__label {
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	border-right: 1px solid rgba(195, 228, 179, 0.35);
	padding-right: 20px;
}
#er-packaging .er-component-row__desc {
	border-right: 1px solid rgba(195, 228, 179, 0.35);
	padding-right: 20px;
}
#er-packaging .er-component-row__tag {
	font-weight: 400;
}
@media (max-width: 900px) {
	#er-packaging .er-component-row__label,
	#er-packaging .er-component-row__desc {
		border-right: none;
		padding-right: 0;
	}
}

/* Guide & Information cards: icon + sage border by default, dark green
   fill with white text/icon on hover. */
#er-packaging .er-info-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--er-sage);
	transition: background-color 0.25s ease;
}
#er-packaging .er-info-card__icon {
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	color: var(--er-dark-green);
	transition: color 0.25s ease;
}
#er-packaging .er-info-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
#er-packaging .er-info-card h3,
#er-packaging .er-info-card p {
	position: relative;
	transition: color 0.25s ease;
}
#er-packaging .er-info-card:hover {
	background: var(--er-dark-green);
}
#er-packaging .er-info-card:hover h3,
#er-packaging .er-info-card:hover p {
	color: #fff;
}
#er-packaging .er-info-card:hover .er-info-card__icon {
	color: #fff;
}

/* Decorative leaf glyph that slides/fades in at the bottom-right corner on
   hover, matching production's "icon-hover" overlay. */
#er-packaging .er-info-card__hover-icon {
	position: absolute;
	bottom: -20px;
	right: -10px;
	width: 90px;
	height: 90px;
	color: rgba(255, 255, 255, 0);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
	pointer-events: none;
	z-index: 0;
}
#er-packaging .er-info-card__hover-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	transform: scaleY(-1);
}
#er-packaging .er-info-card:hover .er-info-card__hover-icon {
	opacity: 1;
	transform: translateY(0);
	color: rgba(255, 255, 255, 0.47);
}