/* ==========================================================================
   Xicart — mobile usability fixes
   --------------------------------------------------------------------------
   Loaded last (after xc-chrome.css). Every rule lives inside a max-width
   media query, so desktop rendering is untouched.

   Each block below corresponds to a measured problem on a 360 / 390 px
   viewport — see the comment on the line for the original measurement.
   ========================================================================== */

/* --- Tablet and below ---------------------------------------------------- */
@media (max-width: 991px) {

	/* Footer link rows measured 20px tall — well under the 34px comfortable
	   touch target, and 4 stacked links per column made mis-taps likely. */
	.xc-footer__links a {
		display: block;
		padding: 7px 0;
		min-height: 34px;
	}

	.xc-footer__legal a {
		display: inline-block;
		padding: 8px 0;
		min-height: 34px;
	}

	.xc-footer__title {
		margin-bottom: 6px;
	}

	/* Product-card category link measured 10px / 15px tall. */
	.porto-tb-meta.tb-meta-product_cat a {
		display: inline-block;
		font-size: 11.5px;
		line-height: 1.5;
		padding: 3px 0;
	}

	/* Hero product chips: a 9px label is unreadable on a phone.
	   (the theme sets 9px with !important inside its own media query) */
	.xc-hero__chip-label {
		font-size: 10.5px !important;
		line-height: 1.35 !important;
	}

	/* Trending-card arrow measured 19 x 23px. */
	.xc-trend-card__arrow {
		width: 34px;
		height: 34px;
		min-width: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* The trending card's "add to cart" strip is only 25px tall (the grid
	   card variant is 38px). */
	.xc-trend .porto-tb-addcart {
		min-height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* "Shop All Products" is a text link with inline padding:0 → 20px tall. */
	a.vc_btn3[style*="padding:0px"] {
		padding: 9px 0 !important;
		min-height: 34px;
		display: inline-flex;
		align-items: center;
	}

	/* Carousel prev/next buttons measured 30 x 30px. */
	.owl-carousel .owl-nav button.owl-prev,
	.owl-carousel .owl-nav button.owl-next {
		width: 38px !important;
		height: 38px !important;
		line-height: 38px !important;
	}

	/* Breadcrumb links measured 19px tall (Porto uses .breadcrumb / .breadcrumbs-wrap) */
	.breadcrumb li a,
	.breadcrumbs-wrap a,
	.woocommerce-breadcrumb a {
		display: inline-block;
		padding: 6px 0;
	}

	/* Newsletter disclaimer links in the footer ("Terms of Use", "Privacy Policy") */
	.xc-news__note a {
		display: inline-block;
		padding: 6px 0;
	}

	/* Shipping-help buttons under the cart / checkout totals: 31-33px. */
	.xc-ship-help__btn {
		min-height: 38px;
	}

	/* Payment card chips: 9px was a touch small once the strip wraps. */
	.xc-tb-chip {
		font-size: 10px;
	}
}

/* --- Phones ------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Cart / checkout remove link measured 21 x 21px (sized by the parent theme). */
	.product-remove a.remove,
	a.remove.remove-product {
		width: 30px !important;
		height: 30px !important;
		line-height: 28px !important;
		font-size: 18px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	/* Product-page contact strip (phone / email / WhatsApp) measured 32px. */
	.xc-metabar__link {
		min-height: 38px;
	}

	/* Checkout coupon toggle measured 20px tall. */
	.showcoupon {
		display: inline-block;
		padding: 7px 0;
	}

	/* The shop toolbar row measured 412px inside a 350px column, so its right
	   edge (sort dropdown) was clipped. */
	.shop-loop-before,
	.shop-loop-after {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Pagination measured 402px wide inside a 390px viewport, so the last page
	   numbers and the "next" arrow were clipped by the parent's overflow.
	   Let it wrap onto a second row instead. */
	ul.page-numbers {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		max-width: 100%;
		width: 100%;
	}

	ul.page-numbers li {
		margin: 0 !important;
	}

	/* Order-review controls sit right next to each other on a phone; give the
	   coupon / variation rows a little more breathing room. */
	.woocommerce-checkout-review-order-table .product-remove,
	.woocommerce-cart table.cart .product-remove {
		padding-top: 4px;
	}
}

/* --- Small phones ------------------------------------------------------- */
@media (max-width: 575px) {

	/* Keep the hero chips legible without letting them eat the image. */
	.xc-hero__chip-label {
		font-size: 10px !important;
		-webkit-line-clamp: 2;
	}

	/* Footer stacks to one column here — keep the rhythm consistent. */
	.xc-footer__links a {
		padding: 8px 0;
		min-height: 36px;
	}

	.xc-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: 0 14px;
	}
}