/* =========================================================
   YOKUCHI — CARBON BLOCK — KALKULATOR GEN
   ========================================================= */

.gen-calculator-section {
	padding: 118px 20px 105px;
	background: #fbfaf8;
}

.gen-calculator {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	color: #1d1d1b;
}

.gen-calculator__header {
	max-width: 1220px;
	margin: 0 auto 58px;
}

.gen-calculator__title {
	margin: 0 !important;
	color: #1d1d1b;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	letter-spacing: 8px !important;
	line-height: 40px !important;
	text-transform: uppercase !important;
}

.gen-calculator__line {
	display: block;
	width: 62px;
	height: 2px;
	margin: 28px 0 28px;
	background: #ec1d23;
}

.gen-calculator__description {
	margin: 0;
	color: #6f6f6f;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 24px;
}

.gen-calculator__downloads {
	width: 100%;
	max-width: 1220px;
	margin: 0 auto 48px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 104px;
}

.gen-calculator__download-group {
	display: grid;
	gap: 14px;
}

.gen-calculator__button {
	min-height: 46px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px;
	border: 1px solid #333;
	background: #fff;
	color: #333;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 24px;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		border-color 150ms ease,
		color 150ms ease;
}

.gen-calculator__button:hover,
.gen-calculator__button:focus {
	border-color: #ec1d23;
	color: #333;
}

.gen-calculator__button strong {
	color: #ec1d23;
	font-weight: 700;
}

.gen-calculator__file-icon {
	position: relative;
	flex: 0 0 22px;
	width: 22px;
	height: 26px;
	border: 1px solid #b8b8b8;
	background: #fff;
}

.gen-calculator__file-icon::before {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 8px;
	height: 8px;
	border-left: 1px solid #b8b8b8;
	border-bottom: 1px solid #b8b8b8;
	background: #f5f5f5;
}

.gen-calculator__file-icon::after {
	content: "PDF";
	position: absolute;
	left: 3px;
	bottom: 3px;
	color: #ec1d23;
	font-size: 6px;
	font-weight: 800;
	letter-spacing: 0;
}

.gen-calculator__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 104px;
	align-items: start;
	max-width: 1220px;
	margin: 0 auto;
}

.gen-calculator__card {
	position: relative;
	min-width: 0;
	background: #fff;
	border: 1px solid #ededed;
	overflow: hidden;
	padding: 0;
}

yokuchi-gen-calculator-native,
yokuchi-ishiko-calculator-native {
	display: block;
	width: 100%;
	background: #fff;
}

.gen-tool__brand {
	margin-bottom: 30px;
}

.gen-tool__brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.gen-tool__brand img {
	display: block;
	width: 164px !important;
	height: auto !important;
	max-height: none !important;
}

.gen-tool__logo-text {
	color: #1d1d1b;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 2px;
}

.gen-tool__header {
	padding-bottom: 26px;
	margin-bottom: 30px;
	border-bottom: 1px solid #dedede;
}

.gen-tool__kicker {
	display: block;
	margin-bottom: 8px;
	color: #777;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 24px;
	text-transform: uppercase;
}

.gen-tool__header h3 {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	margin: 0;
	color: #1d1d1b;
}

.gen-tool__header h3 span {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 58px;
	font-weight: 500;
	letter-spacing: 5px;
	line-height: 40px;
	text-transform: uppercase;
}

.gen-tool__header h3 small {
	max-width: 168px;
	padding-bottom: 4px;
	color: #777;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.25;
}

.gen-tool__links {
	margin-bottom: 34px;
}

.gen-tool__links a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #e8e8e8;
	color: #555;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 24px;
	text-decoration: none;
}

.gen-tool__links a::after {
	content: "→";
	color: #ec1d23;
	font-size: 16px;
	line-height: 1;
}

.gen-native-fertilizers {
	margin-top: 34px;
}

.gen-native-fertilizer,
.gen-tool__row,
.gen-tool__export {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
	align-items: center;
	margin: 0 0 20px;
}

.gen-native-fertilizer {
	grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr);
}

.gen-tool__row--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gen-tool label {
	color: #555;
	font-size: 12px;
	font-weight: 700;
}

.gen-tool input,
.gen-tool select {
	width: 100%;
	height: 42px;
	min-height: 42px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #d8d8d8;
	border-radius: 0;
	background: #fff;
	color: #555;
	font-family: inherit;
	font-size: 11px;
	line-height: 1.2;
	outline: none;
	box-shadow: none;
}

.gen-tool input[type="number"] {
	-moz-appearance: textfield;
}

.gen-tool input[type="number"]::-webkit-outer-spin-button,
.gen-tool input[type="number"]::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.gen-native-fertilizer__remove {
	width: 26px;
	height: 26px;
	min-height: 26px;
	padding: 0;
	border: 1px solid #ec1d23;
	background: #ec1d23;
	color: #fff;
	font-size: 10px;
}

.gen-native-fertilizer__remove[disabled] {
	border-color: transparent;
	background: transparent;
	color: transparent;
}

.gen-tool__outline-button,
.gen-tool__primary-button,
.gen-tool__export button,
.gen-tool__clear {
	width: 100%;
	min-height: 42px;
	margin: 0 0 28px;
	padding: 0 18px;
	border: 1px solid #333;
	border-radius: 0;
	background: transparent;
	color: #555;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
}

.gen-tool__outline-button::after,
.gen-tool__primary-button::after,
.gen-tool__export button::after {
	content: " →";
	color: #ec1d23;
	font-size: 15px;
	letter-spacing: 0;
}

.gen-tool__outline-button:hover,
.gen-tool__primary-button:hover,
.gen-tool__export button:hover,
.gen-tool__clear:hover {
	border-color: #ec1d23;
	color: #ec1d23;
}

.gen-tool__primary-button,
.gen-tool__export button {
	border-color: #ec1d23;
}

.gen-tool__result {
	min-height: 168px;
	margin: 0 0 28px;
	padding: 18px;
	background: #f6f6f6;
	color: #555;
	font-size: 12px;
	line-height: 1.5;
}

.gen-tool__result:empty::before {
	content: "";
}

.gen-tool__result table {
	width: 100%;
	border-collapse: collapse;
}

.gen-tool__result th,
.gen-tool__result td {
	padding: 7px 8px;
	border: 1px solid #e2e2e2;
	text-align: left;
}

.gen-tool__result th {
	background: #777;
	color: #fff;
}

.gen-tool__export {
	grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
	margin-bottom: 15px;
}

.gen-tool__export button,
.gen-tool__clear {
	margin: 0;
}

.gen-tool__clear {
	margin-bottom: 18px;
	border-color: #333;
}

.gen-tool__history {
	background: #eee;
	color: #555;
	font-size: 12px;
}

.gen-tool__history summary {
	padding: 13px 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.gen-tool__history > div {
	padding: 0 14px 14px;
	background: #fff;
}

.gen-tool__history-entry {
	padding: 12px 0;
	border-bottom: 1px solid #e8e8e8;
}

.gen-tool__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	color: #777;
	font-size: 12px;
}

.gen-tool__toggle input {
	width: 14px;
	height: 14px;
	min-height: 14px;
	accent-color: #ec1d23;
}

.gen-tool__mix {
	margin: 0 0 20px;
	padding: 18px;
	background: #f6f6f6;
}

.gen-tool__mix[hidden] {
	display: none;
}

.gen-tool__mix-title {
	margin: 16px 0;
	color: #555;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.gen-tool__addon {
	display: grid;
	grid-template-columns: .62fr .86fr .3fr 1fr;
	gap: 12px;
	align-items: center;
	margin-bottom: 14px;
}

.gen-tool__addon label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	color: #555;
	font-size: 11px;
	font-weight: 800;
}

.gen-tool__addon--gen-bg label { background: #a9c76f; }
.gen-tool__addon--gen-n label { background: #efd56d; }
.gen-tool__addon--gen-p label { background: #d99cc6; }
.gen-tool__addon--gen-k label { background: #a9d8cf; }

.gen-tool__addon span {
	color: #777;
	font-size: 10px;
}

.gen-calculator__videos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 104px;
	max-width: 1220px;
	margin: 110px auto 0;
}

.gen-calculator__video {
	position: relative;
	min-height: 260px;
	background: #f6f6f6;
	overflow: hidden;
}

.gen-calculator__video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

@media (max-width: 1100px) {
	.gen-calculator-section {
		padding: 92px 30px 88px;
	}

	.gen-calculator__header,
	.gen-calculator__downloads,
	.gen-calculator__grid,
	.gen-calculator__videos {
		max-width: none;
	}

	.gen-calculator__downloads,
	.gen-calculator__grid,
	.gen-calculator__videos {
		gap: 32px;
	}

	.gen-tool__header h3 {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.gen-tool__header h3 span {
		font-size: 58px;
	}

	.gen-tool__header h3 small {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.gen-calculator-section {
		padding: 70px 20px 76px;
	}

	.gen-calculator__header {
		margin-bottom: 42px;
	}

	.gen-calculator__title {
		font-size: 18px !important;
		font-weight: 500 !important;
		line-height: 25px !important;
		letter-spacing: 4px !important;
	}

	.gen-calculator__downloads,
	.gen-calculator__grid,
	.gen-calculator__videos {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.gen-calculator__downloads {
		margin-bottom: 42px;
	}

	.gen-calculator__button {
		font-size: 16px;
		letter-spacing: 2px;
		line-height: 24px;
	}

	.gen-calculator__card {
		padding: 0;
	}

	.gen-tool__header h3 span {
		font-size: 58px;
		letter-spacing: 5px;
		line-height: 40px;
	}

	.gen-tool__header h3 small {
		max-width: 140px;
		font-size: 13px;
	}

	.gen-native-fertilizer,
	.gen-tool__row,
	.gen-tool__row--three,
	.gen-tool__export,
	.gen-tool__addon {
		grid-template-columns: 1fr;
	}

	.gen-calculator__videos {
		margin-top: 56px;
	}
}