/* ===========================================================================
   mobile.css — the source's phone-width type scale.

   WHY THIS FILE EXISTS
   The style-diff harness was hard-coded to a 1440px viewport, so every "0
   DIFFER" it ever reported was a DESKTOP-ONLY result. Run at 390px for the
   first time it found 19 differences: the source steps its type down at phone
   widths (Astra's responsive typography) and this build did not, so almost
   every string on a phone was a pixel or two too large, the card titles were
   centred instead of left-aligned, and the sale badge was too small.

   That is the gap the client saw. VISUAL-FIDELITY.md trap 4 says to measure at
   every breakpoint you support; the tool could not, so nobody did.

   EVERY VALUE BELOW WAS READ OFF THE SOURCE RENDER AT 390px
   (tools/diff-styles.mjs with NX_WIDTH=390). None of it is judgement. If a
   value here looks wrong, re-measure before changing it — do not adjust by eye.

   Loaded LAST so these win at equal specificity against the component sheets
   rather than needing inflated selectors.
   =========================================================================== */

@media (max-width: 767px) {

	/* --- Chrome ---------------------------------------------------------- */

	/* Fluid, not a fixed 133px. Measured on the source across the whole phone
	   range — 360:122  390:133  480:168  600:213  700:251 — which is a straight
	   line at 0.379 x viewport - 14.5px, capped at the 258px desktop size (the
	   cap is reached around 720px). A single value matched at 390 and nowhere
	   else, and 390 happens to be the width this harness renders at. */
	.nx-logo img {
		width: calc(37.9vw - 14.5px);
		max-width: 258px;
	}

	.nx-footer__list a { font-size: 15px; }

	/* --- Home hero ------------------------------------------------------- */

	.nx-hero__lede {
		font-size: 11px;
		line-height: 21px;
	}

	/* --- Product card ----------------------------------------------------
	   The title is LEFT aligned on a phone, not centred — the single most
	   visible of the nineteen, because it changes the shape of every grid. */

	.nx-card__badge { font-size: 13px; }

	.nx-card__title {
		font-size: 15px;
		text-align: left;
	}

	.nx-card__price { font-size: 13px; }

	.nx-card__buttons .button { font-size: 14px; }

	/* --- Product detail --------------------------------------------------- */

	.product_title { font-size: 27px; }

	.nx-product__summary .price { font-size: 22px; }

	.single_add_to_cart_button { font-size: 14px; }

	.nx-crypto-bar { font-size: 15px; }

	/* --- Cart, checkout, account ------------------------------------------ */

	.woocommerce-cart-form__contents th { font-size: 15px; }

	.cart_item td.product-name a { font-size: 15px; }

	.cart_totals h2 { font-size: 18px; }

	.checkout-button { font-size: 16px; }

	.woocommerce-MyAccount-navigation-link a { font-size: 15px; }

	.woocommerce-MyAccount-content { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   The eight that needed more specificity.

   The plain selectors above lost even though this file loads last, because
   WooCommerce (and our own component sheets) reach these elements with heavier
   selectors. VISUAL-FIDELITY.md trap 5. The specificity of the rule being
   beaten is noted against each so the next person can check the arithmetic
   instead of reaching for `!important`.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* card.css reaches this element as `.nx-card__buttons a.button` (0,2,1) —
	   an ELEMENT-qualified branch of a grouped selector, which my (0,2,0) plain
	   version could not beat. Matching its shape and relying on load order.
	   The homepage grid is `.nx-products`, not Woo's `ul.products`, so the
	   archive form is listed separately rather than assumed. */
	.nx-card__buttons a.button,
	.nx-card__buttons button.button,
	.woocommerce .nx-products li.product .nx-card__buttons a.button {
		font-size: 14px;
	}

	/* beats .woocommerce div.product .product_title  (0,2,2) */
	.woocommerce div.product .nx-product__summary .product_title {
		font-size: 27px;
	}

	/* product.css uses `p.price`, not `.price` — (0,3,2) against my (0,3,1).
	   One element qualifier was the whole difference. */
	.woocommerce div.product .nx-product__summary p.price {
		font-size: 22px;
	}

	/* beats .woocommerce div.product form.cart .button  (0,3,2) */
	.woocommerce div.product .single_add_to_cart_button.button {
		font-size: 14px;
	}

	/* beats .woocommerce table.shop_table th  (0,2,2) */
	.woocommerce table.shop_table.woocommerce-cart-form__contents th {
		font-size: 15px;
	}

	/* beats .woocommerce table.cart td.product-name a  (0,3,2) */
	.woocommerce table.cart tr.cart_item td.product-name a {
		font-size: 15px;
	}

	/* beats .woocommerce a.button.checkout-button  (0,3,1) */
	.woocommerce .wc-proceed-to-checkout a.button.checkout-button {
		font-size: 16px;
	}

	/* beats .woocommerce-MyAccount-navigation li a  (0,1,2) */
	.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
		font-size: 15px;
	}
}