/*
 * Phone and tablet fixes found by the Oct 2026 responsive sweep (every page
 * at 375 px and 768 px). Each block names the problem it solves.
 */

/* --- Shop cards on touch screens -------------------------------------------
 * The shop template (Elementor 19433) shows "Add to Cart" only on mouse
 * hover. A phone has no hover, so the button stayed invisible but still took
 * its space — a 60 px blank band under every row. On touch screens it is now
 * simply shown, so shoppers can add to cart straight from the list. */
@media (hover: none) {
	.woocommerce ul.products li.product .astra-shop-summary-wrap .button.add_to_cart_button {
		opacity: 1 !important;
		visibility: visible !important;
	}
}
@media (max-width: 600px) {
	.woocommerce ul.products li.product .astra-shop-summary-wrap .button.add_to_cart_button {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		min-height: 40px;
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 13px !important;
		justify-content: center;
	}
}

/* --- Category banner artwork ----------------------------------------------
 * The banners are wide strips with the category name in the middle; at phone
 * width they shrank to ~40 px tall and the name was unreadable. Give them a
 * real height and crop the sides instead (the name stays centred). */
@media (max-width: 600px) {
	div.adr-cat-banner > img {
		height: 96px !important;
		object-fit: cover;
		object-position: center;
	}
}

/* --- Empty basket: "New in store" ------------------------------------------
 * WooCommerce's block grid showed one huge tile per row with 11 px links and
 * buttons. Two tiles per row, readable text, full-width buttons. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 24px 16px;
	margin: 0 !important;
}
@media (min-width: 768px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
	text-align: center;
	display: flex !important;
	flex-direction: column;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	background: #f2f1ef;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	font-size: 15px !important;
	line-height: 1.3;
	text-decoration: none !important;
	color: #242c3f;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	font-size: 15px !important;
	margin: 6px 0 10px !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	margin-top: auto !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	width: 100%;
	min-height: 40px;
	justify-content: center;
	font-size: 14px !important;
}

/* --- Gelato page (Elementor 18992) -----------------------------------------
 * Phone: the copy ran edge to edge with no side margin.
 * Tablet: the "View gelato equipment" button would not wrap and pushed the
 * page 17 px wider than the screen. */
@media (max-width: 767px) {
	.elementor-18992 .elementor-widget-heading,
	.elementor-18992 .elementor-widget-text-editor,
	.elementor-18992 .elementor-widget-button,
	.elementor-18992 .e-heading-base,
	.elementor-18992 .e-paragraph-base {
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}
	/* Wide-tracked display headings: a touch smaller so long words fit. */
	.elementor-18992 h2.e-heading-base {
		font-size: 26px !important;
		letter-spacing: 3px !important;
	}
}
@media (max-width: 1024px) {
	.elementor-18992 .elementor-button {
		white-space: normal !important;
		max-width: 100%;
		text-align: center;
	}
}

/* --- Small tap targets ------------------------------------------------------
 * Share icons on blog posts were 18 px; the shop filter icon 20 px. Fingers
 * need about 40 px. The icons keep their size; the tap area grows. */
@media (hover: none) {
	.adr-post-share { gap: 6px; }
	.adr-share {
		min-width: 40px;
		min-height: 40px;
	}
	.elementor-page-19433 .elementor-widget-icon a.elementor-icon {
		min-width: 40px;
		min-height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}