/* Things on this shop that a finger cannot hit.

   The theme was drawn for a mouse pointer, which is a single pixel and never
   misses. A fingertip covers roughly 9mm - about 44 CSS pixels - and the
   guidance everyone follows (WCAG 2.5.5) asks for a target no smaller than
   that. Several controls here are well under it, so the tap lands on the gap
   beside the button and nothing happens at all. That reads as "it is broken",
   not as "I missed".

   Only the size of the target changes. Nothing moves, nothing is restyled,
   and on a desktop, where the pointer is exact, everything is left alone. */

@media (max-width: 1024px), (pointer: coarse) {

	/* The quantity stepper. The box is 80px wide with a 26px button at each
	   end, so more than half of every tap on "+" was landing on the number
	   between them - which is why the quantity would not go past 1. The box
	   grows and the buttons grow with it; the number keeps the middle. */
	.summary .quantity .number-button,
	.woocommerce div.product form.cart .quantity .number-button {
		width: 132px;
	}

	.summary .quantity .minus,
	.summary .quantity .plus,
	.woocommerce div.product form.cart .quantity .minus,
	.woocommerce div.product form.cart .quantity .plus {
		width: 46px;
		line-height: 48px;
	}

	/* the theme draws the little − and + glyphs as :before/:after on the box,
	   sitting under the invisible buttons - they have to move out to the same
	   edges, or the sign and the thing you press drift apart */
	.summary .quantity .number-button:before,
	.summary .quantity .number-button:after,
	.woocommerce div.product form.cart .quantity .number-button:before,
	.woocommerce div.product form.cart .quantity .number-button:after {
		width: 46px;
		line-height: 48px;
	}

	.summary .quantity input.qty,
	.woocommerce div.product form.cart .quantity input.qty {
		padding-left: 46px;
		padding-right: 46px;
		line-height: 46px;
	}

	/* A number field on a phone must not be tiny either - iOS zooms the whole
	   page in on any field whose text is under 16px, and the page never zooms
	   back out. */
	.quantity input.qty,
	.woocommerce div.product form.cart .quantity input.qty {
		font-size: 16px;
	}

	/* The key that opens a category in the drawer. It was a 20px square in the
	   corner of a full-width row; the row itself has opened the category since
	   the menu was reworked, but the key is still what the eye aims at, so it
	   is given a finger's worth of room. */
	#group-icon-header .ts-menu-drop-icon {
		min-width: 44px;
		min-height: 44px;
	}

	/* The icons in the header. The hamburger is 28x30 and sits hard against
	   the edge of the screen, where a thumb is least accurate.

	   Only the area that answers to a tap grows - the icon is not redrawn and
	   nothing moves, so the header looks exactly as it did. Width is the one
	   thing that cannot grow: the hamburger and the search sit 3px apart, and
	   two targets that overlap are worse than two that are small, because then
	   the wrong one opens. So they are widened just into that gap and given
	   their height instead, which is free - there is nothing above or below
	   them to collide with. The bag, alone at the other end, can have all
	   44px. */
	.ts-mobile-icon-toggle .icon,
	.ts-header .search-button .icon,
	.ts-header .shopping-cart-wrapper .cart-control {
		position: relative;
	}
	.ts-mobile-icon-toggle .icon:after,
	.ts-header .search-button .icon:after,
	.ts-header .shopping-cart-wrapper .cart-control:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 30px;
		height: 46px;
		/* it only has to catch the tap - it is never seen */
		background: transparent;
	}
	.ts-header .shopping-cart-wrapper .cart-control:after {
		width: 44px;
	}

	/* The size swatches on a product. They were drawn to a text width, so
	   "S" and "M" ended up narrower than "XXL" and narrower than a finger. */
	.summary .ts-product-attribute .attribute-value,
	.summary .cfvsw-swatches-container .cfvsw-swatches-option {
		min-width: 46px;
		min-height: 46px;
	}
}