/* w8 F7 (06.09.2026) — вкладка «Купить оптом» на карточке: ряд из двух кнопок + попап заявки.
   Стиль снят с кнопок карточки (g4dpdp.css:240–273): 44px, радиус 12, #FF6600.
   z-index попапа 10080 — выше липкой плашки #g4dbar (10030), мобильной #g4buy (9997)
   и попапов шапки (10070); чат (2147480000) остаётся сверху, как и у попапов F2. */

.g4optbtn { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.g4optbtn__b {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 20px; border-radius: 12px;
	font: 700 15px/1 "Open Sans", Arial, sans-serif; text-align: center;
	border: 1px solid #FF6600; cursor: pointer; text-decoration: none !important;
	transition: background .15s ease-out, color .15s ease-out;
}
.g4optbtn__b--w { background: #fff; color: #FF6600 !important; }
.g4optbtn__b--w:hover { background: #fff4ec; color: #FF6600 !important; }
.g4optbtn__b--o { background: #FF6600; color: #fff !important; }
.g4optbtn__b--o:hover { background: #e65c00; }
.g4optbtn__b:active { transform: scale(.99); }

/* ── попап ── */
.g4optpop {
	position: fixed; inset: 0; z-index: 10080; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.45); padding: 16px; opacity: 0; transition: opacity .16s ease-out;
}
.g4optpop.is-on { opacity: 1; }
.g4optpop__w {
	position: relative; width: 440px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto;
	background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
	font-family: "Open Sans", Arial, sans-serif; color: #222;
}
.g4optpop__x {
	position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: none;
	cursor: pointer; padding: 0; line-height: 0; border-radius: 8px; color: #707070;
}
.g4optpop__x:hover { background: #f4f4f4; color: #222; }
.g4optpop__h { font-size: 20px; font-weight: 700; margin: 0 34px 4px 0; }
.g4optpop__sub { font-size: 14px; color: #707070; margin: 0 0 16px; line-height: 1.4; }
.g4optpop__f { display: block; }
.g4optpop__i, .g4optpop__t {
	display: block; width: 100%; border: 1px solid #e5e5e5; border-radius: 12px; padding: 0 14px;
	font: 14px/44px "Open Sans", Arial, sans-serif; color: #222; background: #fff; margin-bottom: 10px;
	height: 44px; outline: none; transition: border-color .15s ease-out;
}
/* w8 F7 r1: тема перебивала высоту полей — input[type="text"],…{height:auto} (0,1,1)
   выигрывала у .g4optpop__i (0,1,0), поля были 37 px вместо 44. Селектор из двух классов. */
/* w8 F7 r2: тема же задаёт input[type=text|tel]{font-size:13px} — поля «Имя»/«Телефон» рендерились
   13 px против 14 px у textarea. Кегль задан тем же селектором из двух классов (0,2,1). */
.g4optpop input.g4optpop__i { height: 44px; line-height: 42px; padding: 0 14px; box-sizing: border-box; font-size: 14px; }
.g4optpop textarea.g4optpop__t { min-height: 92px; padding: 11px 14px; box-sizing: border-box; }
.g4optpop__t { height: auto; line-height: 1.45; padding: 11px 14px; resize: vertical; min-height: 92px; }
.g4optpop__i:focus, .g4optpop__t:focus { border-color: #FF6600; }
.g4optpop__i.is-bad, .g4optpop__t.is-bad { border-color: #e53935; }
.g4optpop__ag { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #707070; margin: 4px 0 14px; line-height: 1.35; cursor: pointer; }
.g4optpop__ag input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #FF6600; flex: none; }
.g4optpop__ag a { color: #FF6600; }
.g4optpop__s {
	display: block; width: 100%; height: 44px; border: 0; border-radius: 12px; background: #FF6600;
	color: #fff; font: 700 16px/1 "Open Sans", Arial, sans-serif; cursor: pointer; transition: background .15s ease-out;
}
.g4optpop__s:hover { background: #e65c00; }
.g4optpop__s[disabled] { background: #f7a76c; cursor: default; }
.g4optpop__err { font-size: 13px; color: #e53935; margin: 10px 0 0; min-height: 0; }
.g4optpop__ok { font-size: 15px; line-height: 1.5; color: #222; padding: 8px 0 4px; }
.g4optpop__ok b { color: #00A046; }

@media (max-width: 767px) {
	.g4optbtn { flex-direction: column; gap: 8px; }
	.g4optbtn__b { width: 100%; }
	.g4optpop__w { padding: 20px 16px; }
	/* w8 F7 r2: на iOS поле с кеглем < 16 px вызывает автозум страницы при фокусе */
	.g4optpop input.g4optpop__i { font-size: 16px; }
	/* предзаполненный текст на 390px занимает 5 строк — иначе конец («(арт. …)») обрезан.
	   r2: кегль сообщения тоже 16 px, строк стало больше — высота увеличена, замер ниже в отчёте. */
	.g4optpop textarea.g4optpop__t { min-height: 172px; font-size: 16px; }
}