/**
 * Mobile + tablet polish.
 *
 * Loaded after overrides.css. Mobile-first edits + targeted breakpoints for
 * checkout, cart, menu drawer, forms, and tap targets.
 */

/* ---------- Universal: prevent iOS form-input zoom + better tap behaviour ---------- */

input, select, textarea, button {
	font-size: 16px;          /* iOS Safari zooms when font < 16px on focus */
	font-family: inherit;
}
button, [role="button"], a, label, summary, input[type="submit"], input[type="checkbox"], input[type="radio"] {
	touch-action: manipulation;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* All interactive controls get a 44px touch area (Apple HIG / Material guidelines). */
@media (hover: none) and (pointer: coarse) {
	.noble-button,
	.noble-header__util,
	.noble-header__menu-toggle,
	input[type="submit"],
	button,
	.noble-faq__question,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce-page a.button,
	.woocommerce-page button.button {
		min-height: 44px;
	}
}

/* ---------- Body lock when mobile menu is open ---------- */

body.is-menu-open { overflow: hidden; }

/* ---------- Mobile breakpoint: <= 999px ---------- */
@media (max-width: 999px) {

	/* Body type bumps so default reading copy doesn't shrink with the chrome. */
	body { font-size: 1rem; }

	/* ---- Container ---- */
	.noble-container { padding-inline: 1rem; }

	/* ---- Header ---- */
	.noble-header__inner {
		grid-template-columns: 44px 1fr auto;
		gap: 0.5rem;
		min-height: 56px;
	}
	.noble-header__brand { justify-self: center; }
	.noble-header__brand .custom-logo,
	.noble-header__brand img { max-height: 32px; }
	.noble-header__wordmark { font-size: 1.125rem; }
	.noble-header__menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.noble-header__utils { gap: 0.25rem; }
	.noble-header__util { width: 44px; height: 44px; }

	/* ---- Mobile nav drawer ---- */
	.noble-header__nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(85vw, 360px);
		max-width: 100%;
		background: rgb(var(--noble-bg));
		padding: 5rem 1.5rem 2rem;
		box-shadow: var(--noble-shadow-md);
		transform: translateX(-100%);
		transition: transform 280ms var(--noble-ease);
		z-index: 200;
		overflow-y: auto;
	}
	.noble-header__nav.is-open { transform: translateX(0); }

	/* Backdrop behind the drawer */
	.noble-header__nav.is-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgb(0 0 0 / 0.4);
		z-index: -1;
	}

	.noble-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.noble-nav-list li { border-block-end: 1px solid rgb(var(--noble-border) / 0.1); }
	.noble-nav-list a {
		display: block;
		padding: 1rem 0;
		font-size: 1rem;
		font-weight: 500;
	}

	/* ---- Hero ---- */
	.noble-hero__track,
	.noble-hero__slide { min-height: 70vh; }
	.noble-hero__content { padding-block: 3rem; }
	.noble-hero__heading {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
		line-height: 1.1;
	}
	.noble-hero__kicker { letter-spacing: 0.16em; font-size: 0.625rem; }

	/* ---- Section spacing tightens ---- */
	.noble-section { padding-block: 2.5rem; }
	.noble-section__title { font-size: clamp(1.5rem, 6vw, 2rem); }
	.noble-section__description { font-size: 0.9375rem; }

	/* ---- Product grid ---- */
	.noble-product-grid,
	.noble-archive__main ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem 0.5rem;
	}
	.noble-product-card__info { padding: 0.75rem 0.5rem; }
	.noble-product-card__title { font-size: 0.8125rem; line-height: 1.25; }
	.noble-product-card__price { font-size: 0.8125rem; }
	.noble-badge { font-size: 0.625rem; padding: 0.2em 0.55em; top: 0.5rem; left: 0.5rem; }

	/* ---- Collection cards ---- */
	.noble-collection-grid { gap: 0.75rem; }
	.noble-collection-card { aspect-ratio: 4/5; }
	.noble-collection-card__title { font-size: 1.125rem; }
	.noble-collection-card__info { padding: 1rem; }

	/* ---- Image-with-text-overlay ---- */
	.noble-overlay { min-height: 65vh; }
	.noble-overlay__content { padding-block: 3rem; max-width: 100%; }
	.noble-overlay__heading { font-size: clamp(1.75rem, 7vw, 2.25rem); }
	.noble-overlay__description { font-size: 0.9375rem; }

	/* ---- Trust strip ---- */
	.noble-trust { padding-block: 2.5rem; }
	.noble-trust__grid { gap: 1.5rem; }
	.noble-trust__icon { width: 28px; height: 28px; }
	.noble-trust__title { font-size: 0.8125rem; }
	.noble-trust__text { font-size: 0.8125rem; }

	/* ---- FAQ ---- */
	.noble-faq__question { padding: 1rem 0; font-size: 0.9375rem; }
	.noble-faq__chevron { font-size: 1.25rem; }

	/* ---- Footer ---- */
	.noble-footer { padding-block: 2.5rem 0; }
	.noble-footer__menu { columns: 1; }
	.noble-footer__menu li { padding: 0.5rem 0; margin: 0; border-block-end: 1px solid rgb(var(--noble-border) / 0.06); }
	.noble-footer__menu a { font-size: 0.875rem; padding: 0.25rem 0; display: block; }
	.noble-footer__bar { margin-top: 2rem; }

	/* ---- Editorial ---- */
	.noble-editorial__hero { min-height: 50vh; }
	.noble-editorial__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
	.noble-editorial__body { padding-block: 2.5rem; }

	/* ---- Marquee ---- */
	.noble-marquee__item { font-size: 0.625rem; }

	/* ---- Skip link ---- */
	.skip-link:focus { top: 0.5rem; left: 0.5rem; }
}

/* ---------- WooCommerce mobile polish ---------- */

@media (max-width: 999px) {

	/* Single-column for archive / shop */
	.noble-archive__body { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.5rem; }
	.noble-archive__sidebar { display: none; } /* filters hidden on mobile by default */
	.noble-archive__header { padding-block: 2rem; }

	/* WC notices: make readable on mobile */
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-noreviews {
		font-size: 0.9375rem;
		padding: 0.75rem 1rem;
	}

	/* Single product page: single column, tighter spacing */
	.noble-single-product .product { gap: 1.5rem; }
	.noble-single-product .product .images,
	.noble-single-product .product .summary { width: 100%; float: none; }
	.noble-single-product .product .summary { padding: 0; }
	.noble-single-product .product .summary .price { font-size: 1.5rem; }
	.noble-single-product .product .quantity .qty {
		min-height: 44px; min-width: 60px;
		text-align: center;
	}
	.noble-single-product .product .single_add_to_cart_button {
		width: 100%;
		min-height: 48px;
		font-size: 0.9375rem;
	}

	/* Cart page: compact table */
	.woocommerce-cart .shop_table { font-size: 0.875rem; }
	.woocommerce-cart .shop_table_responsive thead { display: none; }
	.woocommerce-cart .shop_table_responsive tr {
		display: block;
		margin-bottom: 1rem;
		padding: 1rem;
		border: 1px solid rgb(var(--noble-border) / 0.12);
		border-radius: var(--noble-radius);
	}
	.woocommerce-cart .shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0;
		border: none;
	}
	.woocommerce-cart .shop_table_responsive td::before {
		content: attr(data-title);
		font-weight: 600;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		opacity: 0.7;
	}
	.woocommerce-cart .shop_table_responsive td.product-thumbnail::before { display: none; }
	.woocommerce-cart .shop_table_responsive td.product-thumbnail { justify-content: center; }
	.woocommerce-cart .shop_table_responsive td.product-thumbnail img { max-width: 80px; }
	.woocommerce-cart .shop_table_responsive td.actions {
		flex-direction: column;
		gap: 0.5rem;
		align-items: stretch;
	}
	.woocommerce-cart .shop_table_responsive td.actions .button { width: 100%; min-height: 44px; }
	.woocommerce-cart .cart_totals { padding: 1rem; }
	.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
		width: 100%; min-height: 48px; font-size: 1rem;
	}

	/* CHECKOUT — single-column, big inputs, sticky place-order ---------------- */
	.woocommerce-checkout form.checkout {
		display: flex !important;
		flex-direction: column !important;
		gap: 1.5rem;
	}
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #order_review_heading {
		width: 100% !important;
		float: none !important;
	}
	.woocommerce-checkout .col2-set,
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		width: 100% !important;
		float: none !important;
		padding: 0 !important;
		margin-bottom: 0;
	}
	.woocommerce-checkout .col2-set .col-2 { margin-top: 1.5rem; }

	/* Form rows */
	.woocommerce-checkout .form-row {
		float: none !important;
		width: 100% !important;
		margin-bottom: 1rem;
	}
	.woocommerce-checkout .form-row label {
		display: block;
		margin-bottom: 0.4rem;
		font-size: 0.875rem;
		font-weight: 600;
	}
	.woocommerce-checkout .form-row input,
	.woocommerce-checkout .form-row select,
	.woocommerce-checkout .form-row textarea,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea {
		width: 100%;
		min-height: 48px;
		font-size: 16px;
		padding: 0.75rem 0.875rem;
		border: 1px solid rgb(var(--noble-border) / 0.2);
		border-radius: var(--noble-radius-input);
		background: #fff;
	}
	.woocommerce-checkout .form-row .select2-container .select2-selection {
		min-height: 48px;
		border-radius: var(--noble-radius-input);
	}
	.woocommerce-checkout .form-row .select2-container .select2-selection__rendered {
		line-height: 48px;
		padding: 0 0.875rem;
		font-size: 16px;
	}

	/* Order summary table compact */
	.woocommerce-checkout-review-order-table { font-size: 0.875rem; }
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td { padding: 0.5rem; }

	/* Payment methods: stack and pad */
	.woocommerce-checkout #payment {
		background: rgb(var(--noble-surface));
		border-radius: var(--noble-radius);
		padding: 1rem;
	}
	.woocommerce-checkout #payment ul.payment_methods { padding: 0; margin: 0; }
	.woocommerce-checkout #payment ul.payment_methods li {
		padding: 0.75rem 0;
		border-block-end: 1px solid rgb(var(--noble-border) / 0.08);
		list-style: none;
	}
	.woocommerce-checkout #payment ul.payment_methods li:last-child { border-block-end: 0; }
	.woocommerce-checkout #payment ul.payment_methods li label {
		font-size: 0.9375rem;
		font-weight: 600;
	}
	.woocommerce-checkout #payment .payment_box {
		font-size: 0.875rem;
		padding: 0.75rem;
		margin-top: 0.5rem;
		background: rgb(var(--noble-bg));
		border-radius: var(--noble-radius-sm);
	}

	/* Place-order button is the most important affordance — make it impossible to miss. */
	.woocommerce-checkout #payment #place_order,
	.woocommerce-checkout button#place_order {
		width: 100%;
		min-height: 52px;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		margin-top: 1rem;
	}

	/* Coupon row */
	.woocommerce-checkout .checkout_coupon { margin-bottom: 1rem; }
	.woocommerce-checkout .checkout_coupon input.input-text { margin-bottom: 0.5rem; }
	.woocommerce-checkout .checkout_coupon button {
		width: 100%; min-height: 44px;
	}

	/* WooCommerce account / login pages */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100% !important;
		float: none !important;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex; flex-wrap: wrap; gap: 0.5rem;
		padding: 0; margin: 0; list-style: none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		display: inline-flex; align-items: center;
		padding: 0.5rem 0.875rem;
		border: 1px solid rgb(var(--noble-border) / 0.15);
		border-radius: var(--noble-radius-full);
		font-size: 0.8125rem;
	}

	/* Order tracking form (used on /track-order/) */
	.track_order .form-row { margin-bottom: 1rem; }
	.track_order button[type="submit"] { width: 100%; min-height: 48px; }
}

/* ---------- Very small phones (<= 380px) ---------- */
@media (max-width: 380px) {
	.noble-header__inner { gap: 0.25rem; }
	.noble-header__util { width: 40px; height: 40px; }
	.noble-product-grid,
	.noble-archive__main ul.products { gap: 0.75rem 0.375rem; }
}

/* ---------- Tablet refinements (700–999px) ---------- */
@media (min-width: 700px) and (max-width: 999px) {
	.noble-product-grid,
	.noble-archive__main ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem 0.75rem;
	}
	.noble-collection-grid { grid-template-columns: repeat(2, 1fr); }
}