/* Mobile Header & Tab Bar v4 — glassmorphism
   Scope: only rendered when $USER->IsAdmin() && $bMedia.
   Palette ref: /faq/style.css
   Viewport: ≤896px (matches site's mobile breakpoint in media.css).
*/

@media (max-width: 896px) {

/* ===== Reset legacy v3 bars on pages using v4 ===== */
body.has-mobile-v4 .header__media-menu,
body.has-mobile-v4 header > .header-top,
body.has-mobile-v4 header > .header-middle { display: none !important; }
body.has-mobile-v4 { margin: 0; }
body.has-mobile-v4 header { margin: 0; padding: 0; }

/* ===== Top header ===== */
.header-v4 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	z-index: 1040;
	padding: 10px 12px;
	background: linear-gradient(160deg, rgba(168,217,154,0.95) 0%, rgba(194,232,176,0.95) 40%, rgba(142,204,122,0.95) 100%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255,255,255,0.55);
	box-shadow: 0 4px 18px rgba(49,169,0,0.10);
}
.header-v4__inner {
	display: flex;
	align-items: center;
}
.header-v4__search {
	flex: 1 1 auto;
	min-width: 0;
}
.header-v4__search form { margin: 0; }
.header-v4__search #title-search {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.65);
	border: 1px solid rgba(255,255,255,0.8);
	border-radius: 14px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 2px 10px rgba(49,169,0,0.08);
	overflow: hidden;
}
.header-v4__search #title-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 14px;
	font-size: 16px;
	line-height: 52px;
	background: transparent;
	border: 0;
	outline: none;
	color: #1f3d14;
}
.header-v4__search #title-search-input::placeholder {
	color: rgba(31,61,20,0.55);
}
.header-v4__search #title-search button {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #31a900;
	font-size: 18px;
	cursor: pointer;
}
.header-v4__search #title-search button:hover,
.header-v4__search #title-search button:focus { color: #267e00; }

/* ===== Bottom tab bar ===== */
.tabbar-v4 {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1045;
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
	background: rgba(255,255,255,0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(255,255,255,0.8);
	box-shadow: 0 -6px 20px rgba(49,169,0,0.12);
}
body.has-mobile-v4 { padding-top: 40px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

.tabbar-v4__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 2px;
	background: transparent;
	border: 0;
	color: #2d4a20;
	font-size: 11px;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s ease, transform .15s ease;
}
.tabbar-v4__item:hover,
.tabbar-v4__item:focus { color: #31a900; text-decoration: none; }
.tabbar-v4__item.is-active { color: #31a900; }
.tabbar-v4__item.is-active .tabbar-v4__icon {
	background: #31a900;
	border-color: #31a900;
	color: #fff;
	box-shadow: 0 3px 10px rgba(49,169,0,0.35);
}

.tabbar-v4__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 34px;
	margin-bottom: 2px;
	background: rgba(199,232,176,0.55);
	border: 1px solid rgba(49,169,0,0.35);
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(49,169,0,0.12);
	font-size: 16px;
	color: #31a900;
}
.tabbar-v4__label {
	display: block;
	font-size: 11px;
	letter-spacing: -0.01em;
}
.tabbar-v4__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #31a900;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	font-weight: 600;
	text-align: center;
	border-radius: 9px;
	box-shadow: 0 2px 6px rgba(49,169,0,0.4);
}

/* ===== Catalog bottom sheet ===== */
.catalog-sheet-v4 {
	position: fixed;
	inset: 0;
	z-index: 1050;
	visibility: hidden;
	pointer-events: none;
}
.catalog-sheet-v4.is-open { visibility: visible; pointer-events: auto; }

.catalog-sheet-v4__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31,61,20,0.35);
	opacity: 0;
	transition: opacity .25s ease;
}
.catalog-sheet-v4.is-open .catalog-sheet-v4__backdrop { opacity: 1; }

.catalog-sheet-v4__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	max-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(160deg, #a8d99a 0%, #c2e8b0 20%, #8ecc7a 45%, #b5e0a0 65%, #9ad488 85%, #b0dc98 100%);
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
	box-shadow: 0 -20px 60px rgba(0,0,0,0.25);
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.catalog-sheet-v4.is-open .catalog-sheet-v4__panel { transform: translateY(0); }

.catalog-sheet-v4__header {
	position: relative;
	flex: 0 0 auto;
	z-index: 4;
	padding: 8px 12px 6px;
}
.catalog-sheet-v4__grabber {
	width: 44px;
	height: 5px;
	margin: 0 auto;
	background: rgba(255,255,255,0.7);
	border-radius: 3px;
}
.catalog-sheet-v4__close {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 5;
	width: 44px;
	height: 44px;
	background: #fff;
	border: 1px solid rgba(49,169,0,0.45);
	border-radius: 50%;
	color: #31a900;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(49,169,0,0.25);
}
.catalog-sheet-v4__close:hover,
.catalog-sheet-v4__close:focus { background: #31a900; color: #fff; }

.catalog-sheet-v4__body {
	position: relative;
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 12px calc(20px + env(safe-area-inset-bottom));
	-webkit-overflow-scrolling: touch;
}
.catalog-menu-v4__viewport {
	position: relative;
	overflow: hidden;
}

body.catalog-sheet-v4-open { overflow: hidden; }

/* ===== Catalog menu list (sliding panes) ===== */
.catalog-menu-v4__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform .28s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.catalog-menu-v4__list > li {
	margin: 0 0 10px;
	background: rgba(255,255,255,0.62);
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 14px;
}
.catalog-menu-v4__list li.parent { position: static; }
.catalog-menu-v4__list li.parent > ul.catalog-menu-v4__sub { display: none; }
.catalog-menu-v4__list li.parent.open > ul.catalog-menu-v4__sub { display: block; }

.catalog-menu-v4__title {
	padding: 6px 4px 12px;
}
.catalog-menu-v4__title .title {
	font-size: 20px;
	font-weight: 700;
	color: #1f3d14;
}

.catalog-menu-v4__list > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 56px;
	padding: 16px 18px;
	color: #1f3d14;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}
.catalog-menu-v4__list > li > a:hover,
.catalog-menu-v4__list > li > a.selected { color: #31a900; }
.catalog-menu-v4__list > li > a .fa-chevron-right { color: #31a900; font-size: 14px; }

/* Nested panes: each ul is its own positioning ancestor so nested subs stack. */
.catalog-menu-v4__sub {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
.catalog-menu-v4__sub > li {
	margin: 0 0 10px;
	background: rgba(255,255,255,0.62);
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 14px;
}
.catalog-menu-v4__sub > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 54px;
	padding: 15px 18px;
	color: #1f3d14;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}
.catalog-menu-v4__sub > li > a:hover,
.catalog-menu-v4__sub > li > a.selected { color: #31a900; }
.catalog-menu-v4__sub > li > a .fa-chevron-right { color: #31a900; font-size: 14px; }

.catalog-menu-v4__back-row,
.catalog-menu-v4__root {
	background: rgba(49,169,0,0.10) !important;
	border-color: rgba(49,169,0,0.35) !important;
}
.catalog-menu-v4__back-row > a,
.catalog-menu-v4__root > a {
	color: #31a900 !important;
	font-weight: 700 !important;
}

.catalog-menu-v4__contacts {
	margin-top: 18px;
	padding: 18px 20px;
	background: rgba(255,255,255,0.62);
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 16px;
	line-height: 1.5;
	color: #1f3d14;
}
.catalog-menu-v4__contacts .title {
	font-size: 18px;
	font-weight: 700;
	color: #1f3d14;
	margin-bottom: 10px;
}
.catalog-menu-v4__contacts a { color: #31a900; font-weight: 600; }
.catalog-menu-v4__contacts-phone { margin-bottom: 8px; font-size: 17px; }
.catalog-menu-v4__contacts-address { font-size: 15px; }

/* =========================================================================
   Mobile cart + checkout — glassmorphism polish for v4 admins
   ========================================================================= */

/* A. Clean white body on cart + checkout. */
body.has-mobile-v4.order-mobile-page,
body.has-mobile-v4.basket-page {
	background: #fff !important;
}
body.has-mobile-v4.order-mobile-page .workspace,
body.has-mobile-v4.order-mobile-page .content,
body.has-mobile-v4.basket-page .workspace,
body.has-mobile-v4.basket-page .content { background: transparent; }

/* B. Step container (glass card) */
/* Glass backdrop behind step cards: fills the viewport down to the
   sticky totals footer so no white shows through. All corners
   rounded. Header is ~62px + search gap, tab bar is ~72px, totals
   strip ≈140px — min-height reserves the right amount. */
body.has-mobile-v4 .order-steps {
	background: rgba(49,169,0,0.18) !important;
	border: 1px solid rgba(49,169,0,0.25) !important;
	box-shadow: 0 6px 18px rgba(49,169,0,0.12) !important;
	margin: 10px 0 !important;
	padding: 10px !important;
	border-radius: 16px !important;
	min-height: calc(100vh - 62px - 72px - 150px - env(safe-area-inset-bottom)) !important;
	box-sizing: border-box !important;
}

body.has-mobile-v4 .order-page__block {
	background: rgba(49,169,0,0.08);
	border: 1px solid rgba(49,169,0,0.18);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(49,169,0,0.12);
	/* NOTE: no backdrop-filter here — it creates a new containing
	   block for position:fixed descendants, which traps the
	   .pvz-modal-v4 inside the card instead of anchoring it to the
	   viewport. The translucent bg + border give the glass feel
	   without the blur side-effect. */
	margin: 14px 0;
	overflow: visible;
}
body.has-mobile-v4 .order-page__block + .order-page__block { margin-top: 14px; }
body.has-mobile-v4 .order-page__block-content { padding: 10px 10px 14px; }
body.has-mobile-v4 .order-page__block.edit-open .order-page__block-content { padding: 14px 10px; }
body.has-mobile-v4 .order-page__block .order-user-info { background: transparent !important; }
body.has-mobile-v4 .order-page__block .form-group:first-child { margin-top: 0 !important; }
body.has-mobile-v4 .order-page__block .form-group:last-child { margin-bottom: 0 !important; }

/* C. Step-header bar (kills the solid green on .order-page__block-title if present) */
body.has-mobile-v4 .order-page__block-title {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: rgba(49,169,0,0.14) !important;
	border-bottom: 1px solid rgba(49,169,0,0.22);
	color: #1f3d14;
}
body.has-mobile-v4 .order-page__block.is-ok .order-page__block-title {
	background: rgba(49,169,0,0.10) !important;
}
body.has-mobile-v4 .order-page__block-title span.num {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background: #fff;
	color: #31a900;
	border: 1px solid rgba(49,169,0,0.35);
	line-height: 30px;
	text-align: center;
	font-weight: 700;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(49,169,0,0.15);
}
body.has-mobile-v4 .order-page__block.is-ok .order-page__block-title span.num {
	background: #31a900;
	color: #fff;
	border-color: #31a900;
}
body.has-mobile-v4 .order-page__block-title span.title {
	font-size: 15px;
	letter-spacing: 0.02em;
	color: #1f3d14;
}

/* Step tabs (.order-steps__links) — glass row, 4 in a single line */
body.has-mobile-v4 .order-steps__links {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin: 6px 0 14px;
	padding: 0;
	text-align: center;
}
body.has-mobile-v4 .order-steps__links .step {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 10px 4px 8px;
	background: rgba(255,255,255,0.55);
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(49,169,0,0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background .15s, box-shadow .15s;
}
body.has-mobile-v4 .order-steps__links .step .step-icon {
	width: 28px;
	height: 28px;
	opacity: 0.55;
}
/* Force green icons (like tab bar) regardless of step state */
body.has-mobile-v4 .order-steps__links .step .step-icon.order-step-icon-1,
body.has-mobile-v4 .order-steps__links .step.current .step-icon.order-step-icon-1 {
	background-image: url('/images/media/order-icon-data_green.svg') !important;
}
body.has-mobile-v4 .order-steps__links .step .step-icon.order-step-icon-2,
body.has-mobile-v4 .order-steps__links .step.current .step-icon.order-step-icon-2 {
	background-image: url('/images/media/order-icon-delivery_green.svg') !important;
}
body.has-mobile-v4 .order-steps__links .step .step-icon.order-step-icon-3,
body.has-mobile-v4 .order-steps__links .step.current .step-icon.order-step-icon-3 {
	background-image: url('/images/media/order-icon-pay_green.svg') !important;
}
/* When the step is current (solid green bg), make icon container white
   so the green icon stands out */
body.has-mobile-v4 .order-steps__links .step.current {
	background: #fff !important;
	border-color: rgba(49,169,0,0.4) !important;
	box-shadow: 0 6px 18px rgba(49,169,0,0.35);
}
body.has-mobile-v4 .order-steps__links .step.current .step-title { color: #31a900 !important; }
body.has-mobile-v4 .order-steps__links .step.current .step-icon { opacity: 1; }
body.has-mobile-v4 .order-steps__links .step .step-title {
	font-size: 10px;
	line-height: 1.2;
	margin-top: 4px;
	color: #2d4a20;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.has-mobile-v4 .order-steps__links .step.active .step-icon { opacity: 1; }
body.has-mobile-v4 .order-steps__links .step.active .step-title { color: #31a900; }

/* D. Далее — single visible source, only on the editing step */
body.has-mobile-v4 .order-page__block .order-total-button { display: none; }
body.has-mobile-v4 .order-page__block.edit-open .order-total-button {
	display: block;
	position: static;
	width: 100%;
	margin: 20px 0 0;
	padding: 0;
	text-align: center;
}
body.has-mobile-v4 .order-page__block.edit-open .order-total-button button {
	display: inline-block !important;
	width: auto !important;
	min-width: 60% !important;
	max-width: 100% !important;
	height: auto !important;
	padding: 14px 34px !important;
	line-height: 1.2 !important;
	background: #31a900 !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 30px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	box-shadow: 0 4px 14px rgba(49,169,0,0.28) !important;
	transition: background .15s ease, box-shadow .15s ease, transform .1s ease !important;
}
body.has-mobile-v4 .order-page__block.edit-open .order-total-button button:hover {
	background: #278400 !important;
	box-shadow: 0 6px 20px rgba(49,169,0,0.38) !important;
}
body.has-mobile-v4 .order-page__block.edit-open .order-total-button button:active {
	transform: translateY(1px);
	box-shadow: 0 3px 10px rgba(49,169,0,0.3) !important;
}
body.has-mobile-v4 .order-page__block.edit-open .order-total-button button.disable {
	background: rgba(49,169,0,0.25) !important;
	background-image: none !important;
	color: rgba(255,255,255,0.85) !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* E. Step 1 — Данные: stacked label + full-width glass input.
   Mirror the homepage subscribe-form glass input/button styling. */
body.has-mobile-v4 .order-page__block .form-group {
	display: block !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	margin: 0 0 14px !important;
}
body.has-mobile-v4 .order-page__block .form-group::after {
	content: '';
	display: block;
	clear: both;
}
body.has-mobile-v4 .order-page__block .form-field-title {
	float: none !important;
	display: block !important;
	width: auto !important;
	margin: 0 0 6px !important;
	line-height: 1.25 !important;
	font-weight: 700;
	font-size: 13px;
	color: #31a900;
}
body.has-mobile-v4 .order-page__block .form-control {
	width: 100% !important;
	height: 48px !important;
	padding: 14px 16px !important;
	font-size: 16px !important;
	color: #1f3d14 !important;
	background: rgba(255,255,255,0.65) !important;
	border: 1px solid rgba(255,255,255,0.85) !important;
	border-radius: 14px !important;
	box-shadow: 0 2px 8px rgba(49,169,0,0.06) !important;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
/* Keep block display only for inputs not currently hidden by Vue v-show */
body.has-mobile-v4 .order-page__block .form-control:not([style*="display: none"]):not([style*="display:none"]) {
	display: block !important;
}
body.has-mobile-v4 .order-page__block .form-control:focus {
	background: rgba(255,255,255,0.88) !important;
	border-color: rgba(49,169,0,0.55) !important;
	box-shadow: 0 0 0 4px rgba(49,169,0,0.14) !important;
	outline: none !important;
}
body.has-mobile-v4 .order-page__block .order-user-info__prop-val {
	display: block !important;
	line-height: 1.4 !important;
	padding: 10px 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1f3d14 !important;
}

/* F. Step 2 — Parcel (sezonnost) info card.
   Mobile DOM: .order-page__sezonnost-delivery wraps a
   .order-page__sezonnost-header (title/desc/num/remove) and sibling
   .order-page__sezonnost-weight stat rows. Render the whole thing as
   one amber glass card. */
body.has-mobile-v4 .order-page__sezonnost-delivery {
	position: relative !important;
	padding: 14px 16px !important;
	margin: 0 0 16px !important;
	background: linear-gradient(135deg, rgba(255,184,77,0.18) 0%, rgba(255,209,128,0.14) 100%) !important;
	border: 1px solid rgba(232,170,53,0.45) !important;
	border-radius: 14px !important;
	color: #4a2f00 !important;
	box-shadow: 0 4px 14px rgba(232,170,53,0.15) !important;
}
body.has-mobile-v4 .order-page__sezonnost-header {
	position: static !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	background: transparent !important;
	border: 0 !important;
	color: inherit !important;
}
body.has-mobile-v4 .order-page__sezonnost-num {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #b06f00 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	padding-right: 120px !important;
}
body.has-mobile-v4 .order-page__sezonnost-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1f3d14 !important;
	margin-top: 2px !important;
	padding-right: 120px !important;
	line-height: 1.3 !important;
}
body.has-mobile-v4 .order-page__sezonnost-desc {
	font-size: 13px !important;
	margin-top: 4px !important;
	color: #4a2f00 !important;
	opacity: 0.85 !important;
}
body.has-mobile-v4 .order-page__sezonnost-weight {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 8px !important;
	margin-top: 6px !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: #1f3d14 !important;
	line-height: 1.4 !important;
	background: transparent !important;
}
body.has-mobile-v4 .order-page__sezonnost-weight .price,
body.has-mobile-v4 .order-page__sezonnost-weight span.green {
	color: #31a900 !important;
	font-weight: 600 !important;
}
body.has-mobile-v4 .order-page__sezonnost-remove {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	width: auto !important;
	height: auto !important;
	padding: 6px 12px !important;
	background: rgba(232,170,53,0.22) !important;
	border: 1px solid rgba(232,170,53,0.55) !important;
	border-radius: 10px !important;
	color: #855200 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
body.has-mobile-v4 .order-page__sezonnost-remove i { font-size: 11px !important; }

/* G. Step 2 — Address list (pickup radio cards) */
body.has-mobile-v4 .delivery-location__address { margin: 14px 0; }
body.has-mobile-v4 .delivery-location__address h3,
body.has-mobile-v4 .order-page__block h3.text-center {
	font-size: 15px;
	color: #31a900;
	font-weight: 700;
	text-align: center;
	margin: 0 0 10px;
}
body.has-mobile-v4 .delivery-location__address-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.has-mobile-v4 .delivery-location__address-item {
	position: relative;
	display: block;
	padding: 14px 14px 14px 44px;
	background: rgba(255,255,255,0.7);
	border: 1px solid rgba(49,169,0,0.28);
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #1f3d14;
	word-break: break-word;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(49,169,0,0.06);
	transition: background .15s, border-color .15s;
}
body.has-mobile-v4 .delivery-location__address-item:hover { background: rgba(255,255,255,0.85); }
body.has-mobile-v4 .delivery-location__address-item.active {
	background: rgba(49,169,0,0.12);
	border-color: #31a900;
	box-shadow: 0 4px 14px rgba(49,169,0,0.2);
}
body.has-mobile-v4 .delivery-location__address-item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 14px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #fff;
	border: 1.5px solid rgba(49,169,0,0.5);
	border-radius: 50%;
	transition: all .15s;
}
/* Kill the legacy second circle from main.css (::after on .active) */
body.has-mobile-v4 .delivery-location__address-item::after,
body.has-mobile-v4 .delivery-location__address-item.active::after {
	display: none !important;
	content: none !important;
}

body.has-mobile-v4 .delivery-location__address-item.active::before {
	background: #31a900;
	border-color: #31a900;
	box-shadow: inset 0 0 0 4px #fff;
}
body.has-mobile-v4 .delivery-location__address-add {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}
body.has-mobile-v4 .delivery-location__address-add .button-add,
body.has-mobile-v4 .delivery-location__address-add .button-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 28px;
	background: rgba(49,169,0,0.14);
	border: 1px solid rgba(49,169,0,0.45);
	border-radius: 30px;
	color: #31a900;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(49,169,0,0.15);
	transition: background .15s ease, box-shadow .15s ease;
}
body.has-mobile-v4 .delivery-location__address-add .button-add:hover,
body.has-mobile-v4 .delivery-location__address-add .button-cancel:hover {
	background: rgba(49,169,0,0.22);
	box-shadow: 0 4px 14px rgba(49,169,0,0.25);
}

/* H. Dadata suggestion popover */
body.has-mobile-v4 .suggestions-suggestions {
	background: rgba(255,255,255,0.95) !important;
	border: 1px solid rgba(49,169,0,0.35) !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 28px rgba(49,169,0,0.18) !important;
	margin-top: 6px !important;
	overflow: hidden;
}
body.has-mobile-v4 .suggestions-suggestion {
	padding: 10px 12px !important;
	font-size: 13px !important;
	border-bottom: 1px solid rgba(49,169,0,0.12) !important;
}
body.has-mobile-v4 .suggestions-suggestion:last-child { border-bottom: 0 !important; }
body.has-mobile-v4 .suggestions-suggestion.suggestions-selected,
body.has-mobile-v4 .suggestions-suggestion:hover {
	background: rgba(49,169,0,0.12) !important;
	color: #31a900 !important;
}

/* I. Step 2 — Delivery chips + items + map button */
body.has-mobile-v4 .workspace .delivery-groups__change,
body.has-mobile-v4 .delivery-groups__change {
	display: block !important;
	margin: 14px 0 !important;
	overflow: visible !important;
}
body.has-mobile-v4 .workspace .delivery-groups__change a,
body.has-mobile-v4 .delivery-groups__change a,
body.has-mobile-v4 .workspace a.payments-group {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 0 10px !important;
	padding: 14px 22px !important;
	line-height: 1.2 !important;
	background: rgba(255,255,255,0.55) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(49,169,0,0.45) !important;
	border-radius: 30px !important;
	color: #31a900 !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: 0 2px 10px rgba(49,169,0,0.15) !important;
	transition: background .15s ease, box-shadow .15s ease !important;
}
body.has-mobile-v4 .workspace .delivery-groups__change a:last-child,
body.has-mobile-v4 .delivery-groups__change a:last-child { margin-bottom: 0 !important; }
body.has-mobile-v4 .workspace .delivery-groups__change a.active,
body.has-mobile-v4 .delivery-groups__change a.active,
body.has-mobile-v4 .workspace a.active.payments-group {
	background: #31a900 !important;
	color: #fff !important;
	border-color: #31a900 !important;
	box-shadow: 0 6px 16px rgba(49,169,0,0.35) !important;
}
body.has-mobile-v4 .delivery-groups { margin: 0 0 14px; }
body.has-mobile-v4 .delivery-group__title {
	font-size: 13px;
	color: #31a900;
	font-weight: 600;
	margin: 12px 0 8px;
}
body.has-mobile-v4 .delivery-group__items {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}
body.has-mobile-v4 .delivery-group__item {
	width: calc(50% - 4px);
	margin: 0;
	padding: 12px;
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,0.75);
	border: 1px solid rgba(49,169,0,0.28);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(49,169,0,0.08);
	color: #1f3d14;
	font-size: 12px;
	line-height: 1.3;
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}
body.has-mobile-v4 .delivery-group__item > * {
	max-width: 100% !important;
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
}
body.has-mobile-v4 .delivery-group__item-logo {
	height: 60px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	margin-bottom: 8px !important;
}
body.has-mobile-v4 .delivery-group__item-name {
	font-size: 13px !important;
	font-weight: 500 !important;
	text-align: center !important;
	margin-bottom: 6px !important;
	min-height: 34px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
}
body.has-mobile-v4 .delivery-group__item-cost {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px !important;
	margin-top: auto !important;
}
body.has-mobile-v4 .delivery-group__item-cost .price {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #31a900 !important;
}
body.has-mobile-v4 .delivery-group__item.active .delivery-group__item-cost .price { color: #fff !important; }
body.has-mobile-v4 .delivery-group__item-cost .old-price {
	font-size: 11px !important;
	color: #999 !important;
	text-decoration: line-through !important;
}
body.has-mobile-v4 .delivery-group__item-days {
	font-size: 12px !important;
	color: inherit !important;
	opacity: 0.75 !important;
}
body.has-mobile-v4 .delivery-group__item.active {
	background: #31a900 !important;
	color: #fff !important;
	border-color: #31a900;
	box-shadow: 0 6px 16px rgba(49,169,0,0.35);
}
/* Pickup-point "dropdown" (collapsed state is the empty white pill
   with the arrow at the right; expanded reveals items). */
body.has-mobile-v4 .delivery-pvz-list {
	position: relative !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 10px 0 12px !important;
	min-height: 48px !important;
	padding: 14px 44px 14px 16px !important;
	background: rgba(255,255,255,0.65) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(49,169,0,0.4) !important;
	border-radius: 14px !important;
	box-shadow: 0 2px 8px rgba(49,169,0,0.08) !important;
	color: #1f3d14 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	overflow: hidden !important;
}
/* Downward-chevron arrow */
body.has-mobile-v4 .delivery-pvz-list::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	right: 16px !important;
	width: 10px !important;
	height: 10px !important;
	margin-top: -6px !important;
	border-right: 2px solid #31a900 !important;
	border-bottom: 2px solid #31a900 !important;
	transform: rotate(45deg) !important;
	transition: transform .15s ease !important;
}
body.has-mobile-v4 .delivery-pvz-list.open::after {
	transform: rotate(-135deg) !important;
	margin-top: -2px !important;
	top: 18px !important;
}
/* Placeholder when no point selected */
body.has-mobile-v4 .delivery-pvz-list::before {
	content: 'Выберите пункт самовывоза' !important;
	color: rgba(31,61,20,0.55) !important;
	font-style: normal !important;
}
body.has-mobile-v4 .delivery-pvz-list:has(.delivery-pvz-item.active)::before,
body.has-mobile-v4 .delivery-pvz-list.open::before {
	display: none !important;
}
body.has-mobile-v4 .delivery-pvz-open {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
}
body.has-mobile-v4 .delivery-pvz-list.open {
	max-height: 320px !important;
	overflow-y: auto !important;
	padding: 8px 8px 8px 8px !important;
}
body.has-mobile-v4 .delivery-pvz-list.open::before { display: none !important; }
body.has-mobile-v4 .delivery-pvz-list .delivery-pvz-item {
	display: none !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	color: #1f3d14 !important;
}
body.has-mobile-v4 .delivery-pvz-list .delivery-pvz-item > div {
	font-size: 12px !important;
	opacity: 0.75 !important;
	margin-top: 2px !important;
}
body.has-mobile-v4 .delivery-pvz-list.open .delivery-pvz-item { display: block !important; }
body.has-mobile-v4 .delivery-pvz-list .delivery-pvz-item.active {
	display: block !important;
	background: rgba(49,169,0,0.14) !important;
}
body.has-mobile-v4 .delivery-pvz-list .delivery-pvz-item:hover {
	background: rgba(49,169,0,0.1) !important;
}

/* "На карте" glass pill, fits inside the step card */
body.has-mobile-v4 .delivery-pvz__map-wrap {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	margin: 12px 0 0 !important;
}
body.has-mobile-v4 .delivery-pvz__map {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 14px 22px !important;
	background: rgba(255,255,255,0.55) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(49,169,0,0.45) !important;
	border-radius: 30px !important;
	color: #31a900 !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	text-align: center !important;
	box-shadow: 0 2px 10px rgba(49,169,0,0.15) !important;
}
body.has-mobile-v4 .delivery-pvz__map:hover {
	background: rgba(49,169,0,0.14) !important;
	box-shadow: 0 4px 14px rgba(49,169,0,0.25) !important;
}

/* =========================================================================
   Pickup-point map — true modal (v4 mobile).
   Markup: .pvz-modal-v4 > .pvz-modal-v4__backdrop + .pvz-modal-v4__dialog
          .pvz-modal-v4__dialog > .pvz-modal-v4__close
                               > .pvz-modal-v4__map   (yandex map container)
                               > .pvz-modal-v4__info  (selected point + CTA)
   ========================================================================= */
body.has-mobile-v4 .pvz-modal-v4 {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2000 !important;
	display: block !important;
}
body.has-mobile-v4 .pvz-modal-v4__backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(31,61,20,0.45) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	z-index: 1 !important;
}
body.has-mobile-v4 .pvz-modal-v4__dialog {
	position: absolute !important;
	top: calc(12px + env(safe-area-inset-top)) !important;
	left: 12px !important;
	right: 12px !important;
	bottom: calc(12px + env(safe-area-inset-bottom)) !important;
	display: flex !important;
	flex-direction: column !important;
	background: rgba(255,255,255,0.85) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(255,255,255,0.85) !important;
	border-radius: 20px !important;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
	overflow: hidden !important;
	z-index: 2 !important;
}
body.has-mobile-v4 .pvz-modal-v4__close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: rgba(255,255,255,0.95) !important;
	background-image: none !important;
	border: 1px solid rgba(120,120,120,0.35) !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	z-index: 10 !important;
	cursor: pointer !important;
}
body.has-mobile-v4 .pvz-modal-v4__close::before,
body.has-mobile-v4 .pvz-modal-v4__close::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 20px !important;
	height: 2px !important;
	background: #555 !important;
	border-radius: 2px !important;
	transform-origin: center !important;
}
body.has-mobile-v4 .pvz-modal-v4__close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
body.has-mobile-v4 .pvz-modal-v4__close::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }
body.has-mobile-v4 .pvz-modal-v4__close:hover::before,
body.has-mobile-v4 .pvz-modal-v4__close:hover::after { background: #222 !important; }
body.has-mobile-v4 .pvz-modal-v4__map {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 100% !important;
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 260px !important;
	margin: 0 !important;
	z-index: 1 !important;
	background: #e7efe4 !important;
}
body.has-mobile-v4 .pvz-modal-v4__info {
	position: relative !important;
	inset: auto !important;
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 16px !important;
	background: rgba(255,255,255,0.92) !important;
	border: 0 !important;
	border-top: 1px solid rgba(49,169,0,0.2) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	max-height: 50% !important;
	overflow-y: auto !important;
	color: #1f3d14 !important;
	z-index: 2 !important;
}
body.has-mobile-v4 .pvz-modal-v4__info .delivery-pvz__point-item {
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #1f3d14 !important;
	margin-bottom: 4px !important;
}
body.has-mobile-v4 .pvz-modal-v4__info .delivery-pvz__point-item:first-child {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #31a900 !important;
	margin-bottom: 6px !important;
}
body.has-mobile-v4 .pvz-modal-v4__info .delivery-pvz__point-item b { font-weight: 700 !important; color: inherit !important; }
body.has-mobile-v4 .pvz-modal-v4 .delivery-pvz__point-button,
body.has-mobile-v4 .pvz-modal-v4__info .delivery-pvz__point-button {
	margin-top: 14px !important;
	padding: 0 !important;
	width: 100% !important;
	text-align: center !important;
	background: transparent !important;
}
body.has-mobile-v4 .pvz-modal-v4 .delivery-pvz__point-button button,
body.has-mobile-v4 .pvz-modal-v4__info .delivery-pvz__point-button button {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 14px 22px !important;
	line-height: 1.2 !important;
	background: linear-gradient(135deg, rgba(49,169,0,0.22) 0%, rgba(49,169,0,0.38) 100%) !important;
	background-image: linear-gradient(135deg, rgba(49,169,0,0.22) 0%, rgba(49,169,0,0.38) 100%) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(49,169,0,0.55) !important;
	border-radius: 30px !important;
	color: #1f3d14 !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(49,169,0,0.25) !important;
	cursor: pointer !important;
	transition: background .15s ease, box-shadow .15s ease !important;
}
body.has-mobile-v4 .pvz-modal-v4 .delivery-pvz__point-button button:hover,
body.has-mobile-v4 .pvz-modal-v4__info .delivery-pvz__point-button button:hover {
	background: linear-gradient(135deg, rgba(49,169,0,0.32) 0%, rgba(49,169,0,0.52) 100%) !important;
	background-image: linear-gradient(135deg, rgba(49,169,0,0.32) 0%, rgba(49,169,0,0.52) 100%) !important;
	box-shadow: 0 6px 18px rgba(49,169,0,0.35) !important;
}
/* Inline summary (map closed) — compact glass card */
body.has-mobile-v4 .delivery-pvz__point:not(.pvz-modal-v4__info) {
	position: static !important;
	margin: 12px 0 0 !important;
	padding: 14px 16px !important;
	background: rgba(255,255,255,0.7) !important;
	border: 1px solid rgba(49,169,0,0.28) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(49,169,0,0.08) !important;
	color: #1f3d14 !important;
}
body.has-mobile-v4 .delivery-pvz__point:not(.pvz-modal-v4__info) .delivery-pvz__point-item {
	font-size: 15px !important;
	line-height: 1.4 !important;
	margin-bottom: 4px !important;
}
body.has-mobile-v4 .delivery-pvz__point:not(.pvz-modal-v4__info) .delivery-pvz__point-item:first-child {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #31a900 !important;
	margin-bottom: 6px !important;
}
/* Lock body scroll while modal is open */
body.has-mobile-v4:has(.pvz-modal-v4) {
	overflow: hidden !important;
}

/* J. Step 3 — Оплата */
/* Step 3 — payment group buttons (Оплата онлайн / Оплата при получении).
   Match the delivery-groups__change pattern: stack one per row, full
   width, glass pill. The inline +NN ₽ desc renders BELOW the name
   inside the same pill (not floated outside). */
body.has-mobile-v4 .workspace .payments-groups,
body.has-mobile-v4 .payments-groups {
	display: block !important;
	margin: 14px 0 !important;
}
body.has-mobile-v4 .workspace a.payments-group,
body.has-mobile-v4 .payments-group {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 0 10px !important;
	padding: 12px 22px !important;
	line-height: 1.25 !important;
	background: rgba(255,255,255,0.55) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(49,169,0,0.45) !important;
	border-radius: 30px !important;
	color: #31a900 !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: 0 2px 10px rgba(49,169,0,0.15) !important;
	transition: background .15s ease, box-shadow .15s ease !important;
}
body.has-mobile-v4 .workspace a.payments-group:last-child,
body.has-mobile-v4 .payments-group:last-child { margin-bottom: 0 !important; }
body.has-mobile-v4 .workspace a.active.payments-group,
body.has-mobile-v4 .payments-group.active {
	background: #31a900 !important;
	color: #fff !important;
	border-color: #31a900 !important;
	box-shadow: 0 6px 16px rgba(49,169,0,0.35) !important;
}
body.has-mobile-v4 .payments-group__desc {
	display: block !important;
	margin-top: 2px !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	opacity: 0.85 !important;
	text-align: center !important;
}

/* Payment systems list: glass card grid, 2 per row, matching the
   delivery-service card look. */
body.has-mobile-v4 .workspace .pay-system__items,
body.has-mobile-v4 .pay-system__items {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 8px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 8px 0 0 !important;
}
body.has-mobile-v4 .workspace .pay-system__items .pay-system,
body.has-mobile-v4 .pay-system {
	box-sizing: border-box !important;
	width: calc(50% - 4px) !important;
	min-width: 0 !important;
	max-width: calc(50% - 4px) !important;
	margin: 0 !important;
	padding: 12px !important;
	display: flex !important;
	flex-direction: column !important;
	background: rgba(255,255,255,0.75) !important;
	border: 1px solid rgba(49,169,0,0.28) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(49,169,0,0.08) !important;
	color: #1f3d14 !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	transition: border-color .15s, background .15s !important;
}
body.has-mobile-v4 .workspace .pay-system__items .pay-system + .pay-system,
body.has-mobile-v4 .pay-system + .pay-system {
	border-top: 1px solid rgba(49,169,0,0.28) !important;
}
body.has-mobile-v4 .workspace .pay-system__items .pay-system.active,
body.has-mobile-v4 .pay-system.active {
	background: #31a900 !important;
	color: #fff !important;
	border-color: #31a900 !important;
	box-shadow: 0 6px 16px rgba(49,169,0,0.35) !important;
}
body.has-mobile-v4 .pay-system .bx_block,
body.has-mobile-v4 .pay-system .bx_element {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
body.has-mobile-v4 .workspace .pay-system__items .pay-system label,
body.has-mobile-v4 .pay-system label {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	position: relative !important;
	padding: 0 !important;
	min-height: 80px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: inherit !important;
	margin: 0 !important;
	cursor: pointer !important;
	width: 100% !important;
	text-align: center !important;
}
body.has-mobile-v4 .workspace .pay-system__items .pay-system label .pay-system-img,
body.has-mobile-v4 .pay-system-img {
	display: block !important;
	order: 1 !important;
	width: 100% !important;
	height: 42px !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	vertical-align: middle !important;
}
body.has-mobile-v4 .workspace .pay-system__items .pay-system label .pay-system-name,
body.has-mobile-v4 .pay-system-name {
	display: block !important;
	order: 2 !important;
	width: 100% !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: inherit !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
}
body.has-mobile-v4 .workspace .pay-system__items .pay-system.active label .pay-system-name,
body.has-mobile-v4 .pay-system.active .pay-system-name { color: #fff !important; }
/* Hide the radio indicator entirely — the card's active state
   (solid green fill + shadow) is enough. */
body.has-mobile-v4 .pay-system .circle-checked { display: none !important; }
body.has-mobile-v4 .pay-system input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* K. Step 4 — Balance / bonus cards */
body.has-mobile-v4 .order-page__block-balans {
	background: rgba(255,255,255,0.65);
	border: 1px solid rgba(49,169,0,0.2);
	border-radius: 12px;
	padding: 14px;
	margin: 10px 0;
}
body.has-mobile-v4 .order-page__block-balans h3 {
	font-size: 14px;
	color: #31a900;
	margin: 0 0 8px;
}
body.has-mobile-v4 .balans-content__price { color: #e8aa35; }

/* L. Sticky order-total footer (lifted + glass).
   Elevate specificity to beat body.order-mobile-page selectors in
   media.css (which gave .sale-total-mobile.order-total a solid
   #E3FCCA green background). */
body.has-mobile-v4 .sale-total-mobile,
body.has-mobile-v4 .sale-total-mobile.order-total,
body.has-mobile-v4 .order-page__fixed {
	bottom: calc(72px + env(safe-area-inset-bottom)) !important;
	background: rgba(255,255,255,0.72) !important;
	backdrop-filter: blur(18px) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	border-top: 1px solid rgba(255,255,255,0.8) !important;
	box-shadow: 0 -10px 30px rgba(49,169,0,0.18) !important;
	padding: 14px 16px 16px !important;
}
body.has-mobile-v4 .order-page__fixed .basket-sum,
body.has-mobile-v4 .sale-total-mobile .basket-sum {
	font-size: 16px;
	color: #1f3d14;
}
body.has-mobile-v4 .order-page__fixed .basket-sum span,
body.has-mobile-v4 .sale-total-mobile .basket-sum span {
	color: #31a900;
	font-weight: 700;
}
body.has-mobile-v4 .order-page__fixed .basket-total-notice,
body.has-mobile-v4 .sale-total-mobile .basket-total-notice {
	font-size: 11px;
	color: rgba(31,61,20,0.7);
	margin-top: 4px;
}

/* Checkout "Далее" button — lives INSIDE .sale-total-mobile.order-total
   (not inside .order-page__block). Un-absolute and glassify to match
   the cart's ОФОРМИТЬ ЗАКАЗ pill. */
body.has-mobile-v4 .sale-total-mobile.order-total .order-total-button {
	position: static !important;
	display: block !important;
	width: 100% !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	text-align: center !important;
	bottom: auto !important;
	right: auto !important;
}
body.has-mobile-v4 .sale-total-mobile.order-total .order-total-button button {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	padding: 14px 34px !important;
	line-height: 1.2 !important;
	background: #31a900 !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 30px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	box-shadow: 0 4px 14px rgba(49,169,0,0.28) !important;
	transition: background .15s ease, box-shadow .15s ease !important;
}
body.has-mobile-v4 .sale-total-mobile.order-total .order-total-button button:hover {
	background: #278400 !important;
	box-shadow: 0 6px 20px rgba(49,169,0,0.38) !important;
}
body.has-mobile-v4 .sale-total-mobile.order-total .order-total-button button.disable {
	background: rgba(49,169,0,0.25) !important;
	background-image: none !important;
	color: rgba(255,255,255,0.85) !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}
/* Cart totals summary: each text row flows full width (drop the
   184px right-reserve that made room for the floating CTA). */
body.has-mobile-v4 .sale-total-mobile .basket-sum,
body.has-mobile-v4 .sale-total-mobile .basket-total-notice,
body.has-mobile-v4 .sale-total-mobile .basket-total-desc {
	margin-right: 0 !important;
	width: 100% !important;
	display: block !important;
}

/* Cart's "Оформить заказ" pill — keep fixed at screen bottom, but as
   a full-width row stacked BELOW the totals strip (not overlapping
   its text). Button mirrors the homepage subscribe-form submit. */
body.has-mobile-v4 .basket-page-total__order {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: calc(72px + env(safe-area-inset-bottom)) !important;
	width: 100% !important;
	padding: 0 16px 12px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-align: center !important;
	z-index: 1000 !important;
}
body.has-mobile-v4 .basket-page-total__order .basket-page-total__block {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
body.has-mobile-v4 .basket-page-total__order .btn.order-send,
body.has-mobile-v4 .basket-page-total__order .btn-success.order-send,
body.has-mobile-v4 .basket-page-total__order a.order-send {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	padding: 14px 34px !important;
	line-height: 1.2 !important;
	background: #31a900 !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 30px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	box-shadow: 0 4px 14px rgba(49,169,0,0.28) !important;
	transition: background .15s ease, box-shadow .15s ease !important;
}
body.has-mobile-v4 .basket-page-total__order .btn.order-send:hover,
body.has-mobile-v4 .basket-page-total__order .btn-success.order-send:hover,
body.has-mobile-v4 .basket-page-total__order a.order-send:hover {
	background: #278400 !important;
	box-shadow: 0 6px 20px rgba(49,169,0,0.38) !important;
}
/* Extend the totals glass strip down to the tab bar so the button
   row sits inside the same translucent surface — no visible gap. */
body.has-mobile-v4 .sale-total-mobile {
	bottom: calc(72px + env(safe-area-inset-bottom)) !important;
	padding-bottom: 78px !important;
}
body.has-mobile-v4 .sale-total-mobile .btn-checkout,
body.has-mobile-v4 .sale-total-mobile button,
body.has-mobile-v4 .order-page__fixed .btn-order,
body.has-mobile-v4 .order-page__fixed button {
	background: #31a900;
	color: #fff;
	border: 0;
	border-radius: 30px;
	padding: 14px 34px;
	box-shadow: 0 4px 14px rgba(49,169,0,0.28);
}

/* M. Body padding reconciliation */
body.has-mobile-v4.basket-page {
	padding-bottom: calc(72px + 72px + 140px + env(safe-area-inset-bottom));
}
body.has-mobile-v4.order-mobile-page {
	padding-bottom: calc(72px + 110px + env(safe-area-inset-bottom));
}

/* N. Cookie banner sits above the fixed tab bar */
body.has-mobile-v4 .popup-banner__cookie {
	bottom: calc(72px + 12px + env(safe-area-inset-bottom));
}

} /* end @media (max-width: 896px) */