.merch-request {
	grid-column: 1 / -1;
	min-width: 0;
	width: calc(100% - 40px);
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 110px) 0;
}

.merch-request__intro {
	max-width: 760px;
	margin-bottom: 42px;
}

.merch-request__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.merch-request__intro h1 {
	margin: 0 0 16px;
	font-size: clamp(36px, 6vw, 72px);
	line-height: .98;
}

.merch-form {
	padding: clamp(24px, 4vw, 48px);
	border: 1px solid var(--dof-line);
	border-radius: 2px;
	background: var(--dof-bg-2);
}

.merch-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.merch-form__field {
	display: grid;
	gap: 8px;
	margin: 0;
	font-weight: 600;
}

.merch-form__field--wide { grid-column: 1 / -1; }

.merch-form input,
.merch-form select,
.merch-form textarea {
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--dof-line-strong);
	border-radius: 2px;
	background: var(--dof-bg-2);
	color: var(--dof-ink, #12263b);
}

.merch-form textarea { resize: vertical; }

.merch-form input:focus-visible,
.merch-form select:focus-visible,
.merch-form textarea:focus-visible,
.merch-form__submit:focus-visible {
	border-color: var(--dof-ink);
	outline: 2px solid var(--dof-accent);
	outline-offset: 2px;
}

.merch-form [aria-invalid="true"] { border-color: #b42318; }
.merch-form__error { min-height: 1.25em; color: #b42318; font-size: 13px; font-weight: 500; }
.merch-form__field small { color: var(--dof-ink-3, #5c7590); font-weight: 400; }
.merch-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.merch-form__status {
	margin: 0 0 24px;
	padding: 0;
	color: #b42318;
}

.merch-form__status:empty { display: none; }
.merch-form__status.is-success { padding: 16px; border: 1px solid var(--dof-accent); border-radius: 2px; background: var(--dof-accent-lt); color: var(--dof-ink); }
.merch-form__status p:last-child { margin-bottom: 0; }

.merch-form__context {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 14px 16px;
	border-radius: 2px;
	background: var(--dof-bg-2);
}

.merch-form__context span { color: var(--dof-ink-3, #5c7590); }
.merch-form__context a { margin-left: auto; color: inherit; text-decoration: underline; }

.merch-form__submit {
	width: auto;
	min-height: 52px;
	margin-top: 28px;
	padding: 14px 28px;
	border: 1px solid var(--dof-accent);
	border-radius: 2px;
	background: var(--dof-accent);
	color: var(--dof-ink);
	font-weight: 600;
	cursor: pointer;
}

.merch-form__submit:disabled { cursor: wait; opacity: .65; }
.merch-form__submit:hover { border-color: var(--dof-accent-dk); background: var(--dof-accent-dk); color: var(--dof-ink); }

.dh-bridge__form { min-width: 0; }
.dh-bridge__form .merch-form { padding: clamp(20px, 3vw, 32px); }
.merch-form--home_short .merch-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.merch-form--home_short .merch-form__submit { margin-top: 20px; }

@media (max-width: 767px) {
	.merch-request { width: calc(100% - 24px); padding: 44px 0 64px; }
	.merch-request__intro { margin-bottom: 28px; }
	.merch-form { padding: 20px 16px; border-radius: 2px; }
	.merch-request { padding-bottom: max(64px, calc(64px + env(safe-area-inset-bottom))); }
	.merch-form__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.merch-form__field--wide { grid-column: auto; }
	.merch-form__submit { width: 100%; }
	.merch-form--home_short .merch-form__grid { grid-template-columns: minmax(0, 1fr); }
	.merch-form__context { align-items: flex-start; flex-direction: column; }
	.merch-form__context a { margin-left: 0; }
}

/* FORMY-1 (acceptance sweep, 2026-08-13) — the client circled this and it was
 * still live. MEASURED on /request/ select[name=interest]: height 44px with
 * padding 14px top and bottom leaves a 14px content box for a 21px line, so
 * Chromium slices the value — «Оберіть варіант» was cut through the lower
 * third of its letters while the input directly above it, same x and width,
 * sat correctly centred. Same on the home form and the sample-request page.
 * Fix the box, and give the control the chevron it never had so it stops
 * reading as a broken text input. */
.merch-form select,
.dh-fbox select,
.merch-form__field select {
	-webkit-appearance: none !important;
	appearance: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 40px !important;
	line-height: normal !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23181818' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
}