/* ===========================================================================
   Phones and tablets.

   The adjustments that only make sense under a finger, in one place and loaded
   last, so they can adjust rules from every other sheet without raising their
   specificity. Desktop is untouched: everything here sits inside a query for
   screens up to 60rem, where Astra also switches to its phone header, or for
   devices whose main pointer is a finger.

   The type sizes for small screens are tokens and live in tokens.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Form fields at 16px.

   Safari on iPhone zooms the whole page into any field whose text is smaller
   than 16px the moment it is tapped, and does not zoom back out. On checkout
   that was every field. Astra's 14.592px root made the theme's 1rem fields
   14.8px; the sort dropdown, the newsletter field and the header search were
   smaller still.

   A fixed 16px because the threshold is a fixed 16px, and !important because
   the fields are styled by five sources (this theme, WooCommerce, Astra,
   Select2, Advanced Woo Search) at up to three classes of specificity. This is
   a platform rule, not a design choice any of them should win.
   --------------------------------------------------------------------------- */
@media (max-width: 60rem), (pointer: coarse) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="number"],
	input[type="password"],
	input[type="url"],
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* ---------------------------------------------------------------------------
   Tap targets.

   The aim is nothing a thumb has to hit that is much under 40px tall. Two
   techniques, depending on whether the space around the link can change:

   - In lists, the gap between items moves into the links as padding. The
     rhythm stays close to what it was, but the whole row becomes the target
     and a tap between two lines no longer lands on neither.
   - Inline, where extra height would push the layout apart, padding with an
     equal negative margin grows the hit area without moving anything.
   --------------------------------------------------------------------------- */
@media (max-width: 60rem) {

	/* Footer link columns: 14px-tall links with 22px of dead space between. */
	.lb-footer__col:not(.lb-footer__contact) .lb-footer__list { gap: 0; }

	.lb-footer__col:not(.lb-footer__contact) .lb-footer__list a,
	.lb-footer__linkbutton {
		display: inline-block;
		padding-block: 0.9em;
	}

	/* Footer contact: numbers stay under their label, a little taller each. */
	.lb-footer__contact .lb-footer__list { gap: var(--lb-space-sm); }
	.lb-footer__contact .lb-footer__list a { padding-block: 0.7em; }

	/* ANPC, SOL and the other statutory links. */
	.lb-footer__statutory a {
		display: inline-block;
		padding-block: 0.7em;
		margin-block: -0.7em;
	}

	/* "Toate produsele →" and the other quiet text buttons were 20px tall. */
	.lb-btn--quiet { padding-block: 0.9em; }

	/* Add to cart on product cards: 30px. */
	.woocommerce ul.products li.product .button { padding-block: 1.15em; }

	/* Product page tabs: 31px. */
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding-block: 0.9em; }

	/* Breadcrumbs, the reassurance links beside the price, the coupon toggle:
	   inline text, so the hit area grows without moving the line. */
	.woocommerce .woocommerce-breadcrumb a,
	.lb-reassure__note a,
	.woocommerce-info a.showcoupon {
		display: inline-block;
		padding-block: 0.8em;
		margin-block: -0.8em;
	}

	/* Phone numbers on the Contact page: 26px. */
	.lb-contact__value { padding-block: 0.35em; }

	/* The × that removes a product from the cart: 20px. */
	.woocommerce a.remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		line-height: 1;
	}

	/* The terms checkbox at checkout and "Ține-mă minte" at login: 13px
	   squares. The label beside each is clickable too, but the box is where
	   people aim. */
	.woocommerce form .input-checkbox,
	.woocommerce-form__input-checkbox {
		width: 1.25rem;
		height: 1.25rem;
		vertical-align: -0.25em;
	}
}