/* The product page on a phone (up to 767.98px, where the fixed bottom bar exists).
   Linked from Kits/Catalogue/item.template.php, in the body: after style.legacy-safari.css and after
   the template's own <style>, whose mobile rules these repeat in specificity and override by order.
   Sizes are in px: the root font is 12px at these widths, so rem values would shrink.
   Nothing here applies from 768px up; desktop is untouched. */
@media (max-width: 767.98px) {
	/* 1. The fixed bottom bar of a product with a shown price: the price on the left, the action on
	      the right. The bar keeps its height (76px), so the page's bottom padding stays right; it has
	      it from its first frame too: the bar is the end of a long page, and when the price came in one
	      piece of it and the button in the next, the bar grew by 28px and moved (audit 07.10, P-6).
	      A product without a shown price has no .hasPrice and keeps the full-width button. */
	.goodPage .goodMobileDiscuss.hasPrice {
		display: flex;
		align-items: center;
		min-height: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	/* The space between the price and the button is a margin, not a flex gap: Safari before 14.5
	   ignores gap in a flex row and the two would touch. */
	.goodPage .goodMobileDiscuss.hasPrice .goodMobilePrice {
		flex: 0 0 auto;
		margin-right: 12px;
		color: var(--Green-Light, #0DA287);
		font-family: Montserrat,MontserratFallback, Raleway,RalewayFallback, sans-serif;
		font-size: clamp(17px, 5.6vw, 22px);
		font-style: normal;
		font-weight: 800;
		line-height: 1.2;
		white-space: nowrap;
	}

	/* A price on sale: the price before the discount, crossed out and grey as in the card, on its own line
	   above the current one (owner 13.10). Two lines (16px + 26px) stay inside the 54px of the button. */
	.goodPage .goodMobileDiscuss.hasPrice .goodMobileOldPrice {
		display: block;
		color: var(--Grey-2, #898F8E);
		font-size: 13px;
		font-weight: 700;
		line-height: 16px;
		text-decoration: line-through;
	}

	.goodPage .goodMobileDiscuss.hasPrice button {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		min-height: 54px;
		padding: 0 12px;
		font-size: 15px;
		line-height: 18px;
		white-space: nowrap;
	}

	/* 2. A new visitor sees the cookie notice first, and most visitors from search are new. The
	      template hides the bar under the notice; a bar with a price stays instead, and the notice
	      stands right above it: 76px of the bar + 4px, so the notice (52px on a phone since the audit
	      of 07.10) reaches as little of the product's name as it can. The notice is still the topmost
	      layer and nothing covers its button; the site keeps the chat button away while it is shown.
	      A bar without a price keeps the template's rule. A browser without :has() drops the rule below
	      and behaves as before. The notice is lifted by the page's class (hasPriceBar, the bar's own
	      condition), not by :has(.goodMobileDiscuss): the notice is in the footer and the bar after it,
	      so on a slow line the notice was drawn at 8px and jumped up when the bar arrived (audit 07.10, P-6). */
	body:has(#cookieNotify.active) .goodPage .goodMobileDiscuss.hasPrice {
		display: flex;
	}

	.goodPage.hasPriceBar #cookieNotify {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}

	/* 3. The chat button comes with an inline bottom:20px and lies on the right end of the bar, over
	      its button. It sits above the bar instead: 76px of the bar + 10px. An opened chat (inline
	      height:100%) must not move. With the cookie notice shown the site's own rule (96px) wins. */
	#__replain_widget:not([style*="height: 100%"]) {
		bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* The «Изделие добавлено в корзину» message appears at the bottom left: above the bar, not on the price. */
	.toastify.toastify-bottom {
		margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	/* 4. The controls under the price in the page body: 48px high, «В корзину» takes the rest of the row
	      («Обсудить изделие» is in the bottom bar). */
	.goodPage .good .goodPurchaseActions {
		align-items: stretch;
		gap: 12px;
	}

	.goodPage .good .right .content .basketOps.goodPurchase .goodCartButton {
		flex: 1 1 auto;
		height: auto;
		min-height: 48px;
		padding: 0 18px;
		gap: 8px;
		border-radius: 12px;
		font-size: 15px;
		line-height: 20px;
	}

	.goodPage .good .right .content .basketOps.goodPurchase .goodCartButton.isInBasket {
		padding: 0 12px;
		font-size: 13px;
	}

	.goodPage .good .goodChangesButton {
		flex: 0 0 auto;
		min-height: 48px;
		gap: 8px;
		font-size: 14px;
		line-height: 17px;
	}

	.goodPage .good .goodChangesButton .goodChangesTitle {
		line-height: 17px;
	}

	.goodPage .good .goodChangesBox {
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
	}

	/* «Срок изготовления»: the hint in px, the button full width and 44px tall, the date line under the text. */
	.goodPage .good .goodTermHint {
		gap: 12px;
		padding: 14px;
	}

	.goodPage .good .goodTermHint .goodTermText,
	.goodPage .good .goodTermHint .goodTermFaster {
		font-size: 12px;
		line-height: 17px;
	}

	.goodPage .good .goodTermHint .goodTermButton {
		padding: 0 18px;
		font-size: 14px;
		line-height: 18px;
	}

	.goodPage .good .goodTermHint .goodTermDate {
		margin-top: 4px;
	}

	.goodPage .good .goodTermHint .goodTermDate a {
		display: inline-block;
		padding: 6px 0 2px;
	}

	/* «Узнать срок изготовления»: 44px fields with 16px text, so iOS does not zoom in; a 44px close area. */
	#termModal.modal.bright .modal-header button {
		width: 44px;
		height: 44px;
		margin: -10px -10px -10px 0;
		background-size: 20px;
	}

	#termModal.modal.bright.def form input.dark {
		height: 44px;
		padding: 0 14px;
		font-size: 16px;
	}

	#termModal .formProduct {
		margin-top: 4px;
		font-size: 12px;
		line-height: 16px;
	}

	#termModal.modal.bright.def .modal-body .content p.text3 {
		margin-top: 14px;
		font-size: 13px;
		line-height: 18px;
	}

	#termModal .formDate {
		gap: 5px;
	}

	#termModal .formDateLabel {
		font-size: 12px;
		line-height: 16px;
	}

	#termModal.modal.bright.def .modal-body .content p.formMessengers {
		gap: 0 8px;
		margin-top: -6px;
		font-size: 13px;
		line-height: 18px;
	}

	#termModal .formMessengers a {
		min-height: 44px;
	}

	#termModal .formMessengers img {
		width: 18px;
		height: 18px;
	}

	#termModal.modal.bright.def .modal-body .content p.policy {
		margin-top: 6px;
	}
}

/* The narrowest phones (320px): an eight-digit price with «от» and the button still fit in one line. */
@media (max-width: 359.98px) {
	.goodPage .goodMobileDiscuss.hasPrice .goodMobilePrice {
		margin-right: 10px;
		font-size: 16px;
	}

	.goodPage .goodMobileDiscuss.hasPrice .goodMobileOldPrice {
		font-size: 12px;
		line-height: 15px;
	}

	.goodPage .goodMobileDiscuss.hasPrice button {
		padding: 0 8px;
		font-size: 14px;
	}
}