/* ======================================================================
   ZHB AND SONS — BLOG / SPECIFICATIONS PAGE STYLES
   Load this file AFTER css/custom-fixes.css
   ====================================================================== */

/* ======================================================================
   VARIETY PICKER — the "choose a banana" grid shown first
   ====================================================================== */
.variety-picker-section {
	padding: 70px 0 90px;
	background-color: #fbfaf6;
}

.variety-pick-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid rgba(26, 60, 42, 0.10);
	border-radius: 18px;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	margin-bottom: 28px;
	box-shadow: 0 6px 18px rgba(26, 60, 42, 0.07);
}

.variety-pick-card:hover,
.variety-pick-card:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 22px 44px rgba(26, 60, 42, 0.18);
	border-color: #1a3c2a;
	outline: none;
}

.variety-pick-card img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.4s ease;
}

.variety-pick-card:hover img {
	transform: scale(1.06);
}

.variety-pick-card span {
	display: block;
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	color: #1a3c2a;
	text-align: center;
	padding: 18px 16px 22px;
	background-color: #ffffff;
}

/* Decorative top accent bar that appears on hover for a premium feel */
.variety-pick-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background-color: #f5b400;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
	z-index: 2;
}
.variety-pick-card:hover::before {
	transform: scaleX(1);
}

/* Small "View Specifications" hint that fades in on hover, reinforcing
   that the card is clickable */
.variety-pick-card::after {
	content: "View Specifications →";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #ffffff;
	background-color: #1a3c2a;
	text-align: center;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	z-index: 1;
}
.variety-pick-card:hover::after {
	transform: translateY(0);
}

@media (max-width: 575px) {
	.variety-pick-card img {
		height: 200px;
	}
	.variety-pick-card span {
		font-size: 16px;
		padding: 14px 12px 18px;
	}
}


/* ======================================================================
   SPECIFICATION DETAIL — header row: image, title, back button
   ====================================================================== */
.spec-detail-section {
	padding: 60px 0 90px;
	background-color: #fbfaf6;
}

.spec-detail-top {
	display: grid;
	grid-template-columns: 160px 1fr auto;
	align-items: center;
	gap: 28px;
	margin-bottom: 40px;
}

.spec-detail-top-media img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba(26, 60, 42, 0.18);
}

.spec-detail-top-text h1 {
	font-size: 32px;
	font-weight: 800;
	color: #1a3c2a;
	margin-bottom: 8px;
	line-height: 1.2;
}

.spec-detail-top-text p {
	font-size: 15px;
	color: #5b6760;
	margin-bottom: 0;
	max-width: 520px;
}

.back-to-varieties-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1.5px solid #1a3c2a;
	color: #1a3c2a;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	align-self: start;
}

.back-to-varieties-btn:hover {
	background-color: #1a3c2a;
	color: #ffffff;
}


/* ======================================================================
   THREE-COLUMN SPEC CARDS — Product Details / Logistics / Trade
   ====================================================================== */
.spec-cards-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 50px;
}

.spec-card {
	background-color: #ffffff;
	border-radius: 14px;
	border-top: 4px solid #1a3c2a;
	padding: 26px 26px 22px;
	box-shadow: 0 8px 24px rgba(26, 60, 42, 0.06);
}

.spec-card h3 {
	font-size: 17px;
	font-weight: 800;
	color: #1a3c2a;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(26, 60, 42, 0.1);
}

.spec-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spec-card ul li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px dashed rgba(26, 60, 42, 0.1);
	font-size: 14px;
}

.spec-card ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.spec-card .spec-label {
	color: #5b6760;
	font-weight: 500;
	flex-shrink: 0;
}

.spec-card .spec-value {
	color: #1a3c2a;
	font-weight: 700;
	text-align: right;
}


/* ======================================================================
   "EXPLORE OTHER VARIETIES" chips below the spec cards
   ====================================================================== */
.spec-other-varieties h3 {
	font-size: 16px;
	font-weight: 800;
	color: #1a3c2a;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 16px;
	text-align: center;
}

.spec-other-varieties-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.spec-other-chip {
	background-color: #ffffff;
	border: 1.5px solid rgba(26, 60, 42, 0.18);
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	color: #1a3c2a;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.spec-other-chip:hover {
	background-color: #1a3c2a;
	color: #ffffff;
	border-color: #1a3c2a;
}


/* ======================================================================
   "CONNECT WITH US" thin strip above the footer
   ====================================================================== */
.connect-with-us-strip {
	background-color: #1a3c2a;
	padding: 22px 0;
	text-align: center;
}

.connect-with-us-strip p {
	margin: 0;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}


/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 991px) {
	.spec-cards-row {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.spec-detail-top {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 16px;
	}

	.spec-detail-top-media {
		display: flex;
		justify-content: center;
	}

	.spec-detail-top-text p {
		max-width: 100%;
		margin: 0 auto;
	}

	.back-to-varieties-btn {
		align-self: center;
	}
}

@media (max-width: 575px) {
	.variety-picker-section {
		padding: 50px 0 60px;
	}

	.spec-detail-section {
		padding: 40px 0 60px;
	}

	.spec-detail-top-text h1 {
		font-size: 24px;
	}

	.spec-detail-top-media img {
		width: 120px;
		height: 120px;
	}

	.spec-card {
		padding: 20px;
	}

	.spec-card ul li {
		font-size: 12.5px;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.spec-card .spec-label {
		white-space: nowrap;
	}

	.spec-card .spec-value {
		text-align: right;
		white-space: nowrap;
	}
}

@media (max-width: 380px) {
	.spec-card ul li {
		font-size: 11px;
		gap: 6px;
	}
}