/*
 * Linne responsive fixes (2026-10-26).
 * Phones, tablets and touch screens; desktop with a mouse is only touched
 * where something was broken for everyone (add-to-cart popup, wide menu).
 * To disable, remove the 'linne-mobile-fixes' enqueue in functions.php.
 */

/* ======================================================================
 * All screens
 * ==================================================================== */

/* "Product added to cart" popup: was pinned at left:35% and ran off phones */
.blockUI.blockMsg.blockPage {
	left: 50% !important;
	transform: translateX(-50%);
	width: min(380px, calc(100vw - 32px)) !important;
	max-width: calc(100vw - 32px) !important;
	box-sizing: border-box !important;
	padding: 20px 16px !important;
	border-radius: 12px !important;
}

.blockUI.blockMsg.blockPage .button {
	min-height: 44px;
	min-width: 140px;
	margin: 6px 4px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* 404 page: grid row was wider than the screen */
body.error404 .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.error404 .search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 12px auto 0;
	padding: 0 16px;
}

body.error404 .search-form label {
	flex: 1 1 auto;
}

body.error404 .search-form .search-field,
body.error404 .search-form .search-submit {
	width: 100%;
	min-height: 44px;
	font-size: 16px;
	border-radius: 8px;
	border: 1px solid #d6d6d6;
	padding: 0 12px;
}

body.error404 .search-form .search-submit {
	width: auto;
	background: #5ab4d3;
	color: #fff;
	border-color: #5ab4d3;
	cursor: pointer;
}

/* Desktop header (>=1024px): the top row was pulled 15px above the screen,
 * cutting off the logo and company links; the tagline sat on the logo and
 * the company links sat on the search box. */
@media (min-width: 1024px) {
	.main-header__content {
		margin-top: 0 !important;
	}

	.main-header .logo_title {
		top: 2px !important;
	}

	.main-header .navbar--company {
		top: -19px !important;
	}

	.main-header .main-header__content > .input__wrap--search {
		margin-top: 14px !important;
	}
}

/* Category menu was wider than the screen between 1024 and 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
	.navbar--market a.navbar-link {
		font-size: 16px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* leave room for the dropdown arrow */
	.navbar--market a.navbar-link:not(.is-arrowless) {
		padding-right: 26px !important;
	}
}

/* Header top row was crowded between 1024 and 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
	.main-header .logo_title {
		white-space: nowrap !important;
		font-size: 10px !important;
		width: auto !important;
	}

	.main-header .phoneNumber {
		font-size: 18px !important;
	}

	/* phone number spilled into the login block */
	.main-header .user-cart {
		margin-left: 36px !important;
	}
}

/* ======================================================================
 * Product cards: phones and small tablets (theme's own mobile mode, <=846px)
 * ==================================================================== */
@media (max-width: 846px) {

	.columns > li.product.column.card {
		display: grid !important;
		grid-template-columns: 110px minmax(0, 1fr);
		grid-template-areas:
			"img info"
			"bottom bottom";
		column-gap: 12px;
		row-gap: 12px;
		align-items: start;
		align-content: start;
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		height: auto !important;
		padding: 12px !important;
	}

	.columns > li.product.column.card > a.woocommerce-LoopProduct-link {
		grid-area: img;
		width: 110px !important;
		height: 110px !important;
		position: relative;
	}

	.columns > li.product.column.card .card__img {
		width: 110px !important;
		height: 110px !important;
		position: relative;
		overflow: hidden;
	}

	.columns > li.product.column.card .card__img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain;
	}

	/* Hover photo covers the whole card on touch screens */
	.columns > li.product.column.card .card__img .secondary-image {
		display: none !important;
	}

	/* Title + price block */
	.columns > li.product.column.card > .wpb_wl_quick_view_content {
		grid-area: info;
		width: auto !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		margin: 0 !important;
	}

	/* quick-view plugin splits this box into photo + narrow summary on wider screens */
	.columns > li.product.column.card > .wpb_wl_quick_view_content .wpb_wl_images {
		display: none !important;
	}

	.columns > li.product.column.card > .wpb_wl_quick_view_content .wpb_wl_summary {
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.columns > li.product.column.card .wpb_wl_product_title {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		display: block !important;
		-webkit-line-clamp: unset !important;
		font-size: 15px !important;
		line-height: 1.3 !important;
		margin: 0 0 6px !important;
		word-break: normal;
		overflow-wrap: anywhere;
	}

	.columns > li.product.column.card .wpb_wl_product_price {
		font-size: 18px !important;
	}

	/* "Quick view" button needs hover */
	.columns > li.product.column.card > .wpb_wl_preview_area {
		display: none !important;
	}

	/* Options, quantity and add-to-cart */
	.columns > li.product.column.card > .card__bottom {
		grid-area: bottom;
		display: block !important;
		width: 100% !important;
		position: static !important;
		margin: 0 !important;
	}

	/* Stock count is already shown under the price */
	.columns > li.product.column.card > .card__bottom > .stock {
		display: none !important;
	}

	.columns > li.product.column.card .card__bottom form.cart {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
	}

	.columns > li.product.column.card .woocommerce-variation-add-to-cart,
	.columns > li.product.column.card .single_variation_wrap {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		width: 100% !important;
		padding-left: 0 !important;
	}

	.columns > li.product.column.card .card__bottom .single_add_to_cart_button {
		flex: 1 1 140px;
		min-height: 44px;
		justify-content: center;
		margin: 0 !important;
	}

	.columns > li.product.column.card .card__bottom table.variations,
	.columns > li.product.column.card .card__bottom .variations {
		width: 100% !important;
	}

	.columns > li.product.column.card .card__bottom .variations th,
	.columns > li.product.column.card .card__bottom .variations td.label {
		width: 76px;
	}

	.columns > li.product.column.card .card__bottom select {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 42px;
		font-size: 16px; /* prevents iOS zoom on focus */
	}

	/* Sale badge: keep inside the card */
	.columns > li.product.column.card .onsale {
		left: 6px !important;
		top: 6px !important;
	}

	/* Sort dropdown */
	.woocommerce-ordering select.orderby {
		min-height: 44px;
		font-size: 16px;
	}
}

/* Small tablets: two cards per row */
@media (min-width: 600px) and (max-width: 846px) {
	.columns > li.product.column.card {
		width: calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		margin-top: 0 !important;
		margin-bottom: 16px !important;
		align-self: stretch !important;
	}

	.columns > li.product.column.card:nth-of-type(odd) {
		margin-right: 16px !important;
	}
}

/* ======================================================================
 * Touch screens above 846px (iPad landscape etc.): the theme only showed
 * quantity and "add to cart" on mouse hover, so keep them visible.
 * ==================================================================== */
@media (min-width: 847px) and (hover: none) {
	.columns > li.product.column.card:not(.splide__slide) {
		height: auto !important;
	}

	.columns > li.product.column.card:not(.splide__slide) .card__price {
		height: auto !important;
		margin-bottom: 4px !important;
	}

	.columns > li.product.column.card:not(.splide__slide) > .card__bottom {
		display: block !important;
		position: static !important;
		width: 100% !important;
		padding: 8px 0 0 !important;
		left: auto !important;
		top: auto !important;
	}

	.columns > li.product.column.card > .wpb_wl_preview_area {
		display: none !important;
	}

	.columns > li.product.column.card:not(.splide__slide) > .card__bottom select {
		width: 100% !important;
		min-height: 40px;
		font-size: 16px;
	}

	.columns > li.product.column.card:not(.splide__slide) > .card__bottom .single_add_to_cart_button {
		flex: 1 1 100%;
		min-height: 44px;
		margin-top: 6px !important;
	}
}

/* ======================================================================
 * Quantity -/+ on product cards: 20px dots -> 36px buttons
 * (phones, tablets and touch screens)
 * ==================================================================== */
@media (max-width: 846px), (hover: none) {
	.columns > li.product.column.card .card__quantity {
		display: flex !important;
		align-items: center;
		gap: 6px;
		width: auto !important;
		height: auto !important;
	}

	.columns > li.product.column.card .card__quantity-down,
	.columns > li.product.column.card .card__quantity-up {
		position: relative !important;
		flex: 0 0 36px;
		width: 36px !important;
		height: 36px !important;
		margin: 0 !important;
		border-radius: 50% !important;
		cursor: pointer;
	}

	.columns > li.product.column.card .card__quantity-down::before,
	.columns > li.product.column.card .card__quantity-up::before,
	.columns > li.product.column.card .card__quantity-up::after {
		left: 50% !important;
		top: 50% !important;
		right: auto !important;
		width: 14px !important;
		height: 3px !important;
		margin: -1.5px 0 0 -7px !important;
	}

	.columns > li.product.column.card .card__quantity-value {
		width: 58px !important;
		position: static !important;
	}

	.columns > li.product.column.card .card__quantity input.qty {
		width: 58px !important;
		height: 36px !important;
		padding: 0 !important;
		font-size: 16px !important;
		text-align: center;
		border-radius: 6px !important;
	}
}

/* ======================================================================
 * Header pop-ups and menu (phone header + burger menu is used below 1024px)
 * ==================================================================== */
@media (max-width: 1023px) {
	/* Category submenu: links were 12px text / 14px tall */
	.navbar-dropdown-full .main-nav__category-title a,
	.navbar-dropdown-full .main-nav__category-list a {
		display: block !important;
		font-size: 16px !important;
		line-height: 1.3 !important;
		padding: 10px 0 !important;
	}

	.navbar-dropdown-full .main-nav__category-title a {
		padding: 8px 0 4px !important;
	}

	.navbar-dropdown-full .main-nav__category-list li {
		margin: 0 !important;
	}

	.navbar-dropdown-full .fa-close {
		font-size: 24px !important;
		padding: 10px !important;
		cursor: pointer;
	}

	/* Search bar under the header */
	.search-in-nav__input {
		padding: 8px 16px 12px !important;
		height: auto !important;
		background: #fff !important;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	}

	.search-in-nav__input input.input {
		height: 44px !important;
		font-size: 16px !important;
		border-radius: 8px !important;
	}
}

/* Callback pop-up ("Заказать обратный звонок") */
@media (max-width: 767px) {
	.mfp-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	#vdz_cb {
		padding: 28px 20px 24px !important;
		border-radius: 12px;
	}

	#vdz_cb h3 {
		font-size: 21px !important;
		line-height: 1.25 !important;
		padding-right: 32px;
		margin-bottom: 16px !important;
	}

	#vdz_cb form {
		width: auto !important;
		margin: 0 !important;
	}

	#vdz_cb input[type="text"],
	#vdz_cb input[type="tel"] {
		width: 100% !important;
		max-width: none !important;
		height: 46px !important;
		font-size: 16px !important;
		box-sizing: border-box;
	}

	#vdz_cb button[type="submit"],
	#vdz_cb .button {
		width: 100% !important;
		min-height: 48px;
		font-size: 17px !important;
	}
}

/* ======================================================================
 * Cart, checkout, account, product page, content pages (<=846px)
 * ==================================================================== */
@media (max-width: 846px) {

	/* Cart */
	.cart-woocommerce .woocommerce-cart-form {
		width: auto !important;
		margin: 0 16px 16px !important;
	}

	.cart-woocommerce .woocommerce-cart-form table.shop_table {
		width: 100% !important;
		margin: 0 !important;
	}

	.cart-woocommerce .cart-collaterals {
		padding: 0 16px !important;
	}

	.cart-woocommerce .cart-collaterals h2 {
		font-size: 20px !important;
		margin: 8px 0 10px !important;
	}

	.cart-woocommerce .wc-proceed-to-checkout .checkout-button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		border-radius: 8px;
		font-size: 17px !important;
		margin: 12px 0 20px !important;
	}

	.cart-woocommerce .coupon input,
	.cart-woocommerce .coupon .button,
	.cart-woocommerce .actions .button {
		width: 100% !important;
		min-height: 44px;
	}

	/* Checkout */
	.woocommerce-checkout #place_order {
		width: 100% !important;
		min-height: 50px;
		font-size: 17px !important;
		border-radius: 8px;
	}

	/* Account: login / register / lost password */
	.woocommerce-form-login .button,
	.woocommerce-form-register .button,
	.woocommerce-ResetPassword .button {
		min-height: 46px;
		font-size: 16px !important;
	}

	/* Product page */
	.single-product .variations select {
		min-height: 44px;
		font-size: 16px;
	}

	.single-product #review_form .submit,
	.single-product #review_form input[type="submit"] {
		min-height: 46px;
	}

	/* Content pages: wide tables (e.g. company details) */
	body.page .entry-content table:not(.shop_table):not(.variations),
	body.page .page-builders-content-area table:not(.shop_table):not(.variations) {
		width: 100% !important;
		table-layout: auto;
	}

	body.page .entry-content table:not(.shop_table):not(.variations) td,
	body.page .page-builders-content-area table:not(.shop_table):not(.variations) td {
		font-size: 14px;
		word-break: normal;
		overflow-wrap: break-word;
		white-space: normal !important;
	}

	body.page .entry-content table:not(.shop_table):not(.variations) td:first-child,
	body.page .page-builders-content-area table:not(.shop_table):not(.variations) td:first-child {
		width: 38%;
		overflow-wrap: normal;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* Very small phones (<360px): logo overlapped the header icons */
@media (max-width: 359px) {
	.logo-in-nav .custom-logo-link,
	.logo-in-nav .custom-logo {
		width: 96px !important;
		height: auto !important;
	}
}

/* Tablets 769-1023px: the desktop header (logo, tagline, phone, login) was
 * squeezed and overlapping, next to half of the phone header. Use the phone
 * header here, which already has logo, search, callback, account, cart and
 * the menu button. */
@media (min-width: 769px) and (max-width: 1023px) {
	.main-header > .container.is-mobile-hidden {
		display: none !important;
	}

	.top-menu .navbar--market,
	.top-menu .logo-in-nav,
	.top-menu .search-in-nav,
	.top-menu .phone-number-in-nav,
	.top-menu .user-in-nav {
		display: block !important;
	}

	/* match the phone header look */
	.top-menu .navbar--market {
		border-radius: 15px !important;
		opacity: 1 !important;
	}

	.top-menu .logo-in-nav {
		top: 10px !important;
		height: auto !important;
	}

	.top-menu .logo-in-nav .custom-logo {
		width: 130px !important;
		max-width: none !important;
		height: auto !important;
	}

	.top-menu a.navbar-burger span {
		background-color: #fff !important;
	}

	.top-menu .header-cart-block {
		box-shadow: none !important;
	}

	.top-menu .search-in-nav__input.is-active {
		display: block !important;
		position: absolute !important;
		top: 62px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
	}
}