/* Мобильная починка каталога — apteka-med.ru
 *
 * Зачем: блок товара в каталоге сделан жёстким — .offer получает
 * inline-стилем width:660px, внутри .of_descr шириной 644px, а кнопка
 * «В корзину» стоит float:right в самом конце этой колонки. На экране 390px
 * это значит, что кнопка находится на координате x≈554–636, то есть целиком
 * за правым краем экрана: с телефона положить товар в корзину невозможно,
 * пока не догадаешься проскроллить страницу вбок.
 *
 * Здесь блок товара становится резиновым, а кнопка — нормальной кнопкой,
 * по которой можно попасть пальцем (было 82×26 px).
 *
 * Отключается независимо от шторки: закомментировать enqueue
 * 'aqo-catalog-mobile' в apteka-quick-order.php.
 */

@media (max-width: 700px) {

	/* ── блок товара: снимаем фиксированные ширины ── */
	.offer,
	.offer .of_cont,
	.offer .of_descr,
	.offer .basketline,
	.offer .priceline,
	.offer .of_descr > p,
	.offer .of_descr > p.name {
		width: auto !important;
		max-width: 100% !important;
	}

	.offer {
		box-sizing: border-box;
		overflow: hidden;   /* подчищаем float-ы внутри */
	}

	/* фото больше не обтекается текстом — на узком экране это только мешает */
	.offer .of_photo {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		margin: 0 auto 10px !important;
	}
	.offer .of_photo img,
	.offer .of_photo_cont,
	.offer .of_photo_cont a,
	.offer .of_photo_cont img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* длинные названия и описания не должны растягивать блок */
	.offer .of_descr,
	.offer .of_descr p {
		overflow-wrap: anywhere;
	}

	/* ── кнопка «В корзину»: из 82×26 в палец ── */
	.offer .basketline,
	.offer form.aptekamed-add-to-cart-form {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		width: auto !important;
	}

	.offer .buttoncont,
	.offer .basketform {
		float: none !important;
		margin: 0 !important;
		width: auto !important;
	}

	/* декоративные скругления по бокам кнопки заменяем настоящим border-radius */
	.offer .buttoncont img {
		display: none !important;
	}
	.offer .buttoncont {
		flex: 1 1 180px;
		min-width: 160px;
	}
	.offer input.aptekamed-add-to-cart {
		width: 100% !important;
		min-height: 46px !important;
		height: auto !important;
		padding: 0 18px !important;
		border: 0 !important;
		border-radius: 50px !important;
		background: linear-gradient(#7fae2f, #55840f) !important;
		color: #fff !important;
		font: bold 16px/1.2 Arial, Helvetica, sans-serif !important;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	/* поле количества — тоже пальцем */
	.offer .basketform {
		flex: 0 0 auto;
		font-size: 13px;
	}
	.offer input.countbasket {
		width: 56px !important;
		height: 46px !important;
		box-sizing: border-box;
		text-align: center;
		font-size: 16px !important;   /* меньше 16px — Safari зумит страницу */
		/* у поля был декоративный фон-картинка со скруглением — на новой
		   высоте он растягивается некрасиво, гасим */
		background: #fff !important;
		border: 1px solid #c3cfa4;
		border-radius: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	/* цена — крупно и слева, а не мелким шрифтом справа */
	.offer .priceline {
		text-align: left !important;
		font-size: 15px;
	}
	.offer .priceline .price {
		font-size: 20px;
		font-weight: bold;
		color: #336900;
	}
}