/* ==========================================================================
   SDP — Responsive layer
   Loaded last, so it can correct anything in the layers before it.

   The big gap this closes: WooCommerce's own woocommerce-smallscreen.css is
   dequeued (inc/woocommerce.php), and nothing replaced it. Cart and checkout
   are HTML tables — on a 360px screen an unstyled cart table is unusable, and
   that is the single worst thing about the site on a phone. Those tables are
   restacked as cards below, using the data-title attributes Woo already emits.
   ========================================================================== */

/* ==========================================================================
   A. Global guards
   ========================================================================== */

/* Nothing may push the page sideways. */
html, body { max-inline-size: 100%; overflow-x: hidden; }

@media (max-width: 782px) {
	/* iOS Safari zooms the whole page when a focused input is under 16px.
	   That zoom never fully reverses and is the classic "the mobile site is
	   broken" complaint on checkout. 16px minimum stops it at the source. */
	input[type="text"], input[type="email"], input[type="url"],
	input[type="password"], input[type="search"], input[type="number"],
	input[type="tel"], input[type="date"], select, textarea {
		font-size: 16px;
	}

	/* Comfortable thumb targets. 44px is the accessibility floor. */
	.sdp-iconbtn { inline-size: 2.75rem; block-size: 2.75rem; }
	.sdp-btn { min-block-size: 2.75rem; }
	.sdp-nav a { min-block-size: 2.75rem; display: flex; align-items: center; }
	.sdp-footer__action { min-block-size: 2.75rem; }
	.sdp-social a { inline-size: 3rem; block-size: 3rem; }

	/* Long product names and SKUs must never force a scrollbar. */
	.sdp-product__title, .product_title, .woocommerce-loop-product__title {
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   B. Header
   ========================================================================== */

@media (max-width: 782px) {
	.sdp-header { padding-block: var(--sdp-2); }
	.sdp-header__bar {
		gap: var(--sdp-2);
		padding: var(--sdp-2) var(--sdp-2) var(--sdp-2) var(--sdp-3);
	}
	.sdp-header__actions { gap: .35rem; }

	/* The login pill collapses to its icon; the burger stays full size. */
	.sdp-header__actions .sdp-btn--sm {
		padding: 0;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: 50%;
	}
	.sdp-header__actions .sdp-btn--sm svg { margin: 0; }

	.sdp-brand { gap: var(--sdp-2); }
	.sdp-brand__mark { inline-size: 2.25rem; block-size: 2.25rem; }
}

@media (max-width: 400px) {
	/* On the narrowest phones the wordmark alone carries the brand. */
	.sdp-brand__tag { display: none; }
	.sdp-brand__name { font-size: 1rem; }
}

/* Drawers should not exceed the viewport on small phones. */
@media (max-width: 480px) {
	.sdp-nav, .sdp-minicart { inline-size: min(94vw, 20rem); }
	.sdp-minicart { padding: var(--sdp-5) var(--sdp-4); }
}

/* ==========================================================================
   C. Hero
   ========================================================================== */

@media (max-width: 782px) {
	.sdp-hero { padding-block: var(--sdp-5) 0; }
	.sdp-hero__inner { gap: var(--sdp-6); padding-bottom: var(--sdp-8); }

	.sdp-hero__title { font-size: clamp(1.85rem, 7.5vw, 2.5rem); }
	.sdp-hero__lede  { font-size: 1rem; max-inline-size: 100%; margin-bottom: var(--sdp-6); }

	/* Full-width stacked buttons: easier to hit, and they stop the row
	   wrapping into a ragged two-and-a-half-button shape. */
	.sdp-hero__actions { display: grid; gap: var(--sdp-3); }
	.sdp-hero__actions > * { inline-size: 100%; justify-content: center; }

	.sdp-hero__art { min-block-size: auto; }
	.sdp-hero__panel { padding: var(--sdp-4); border-radius: var(--sdp-r-xl); }

	/* Blobs are decoration; at this size they only cost paint. */
	.sdp-hero__art .clay-blob { display: none; }

	.sdp-features { padding: var(--sdp-5) var(--sdp-4); border-radius: var(--sdp-r-lg); }
	.sdp-features__grid { grid-template-columns: 1fr 1fr; gap: var(--sdp-4); }
}

@media (max-width: 420px) {
	.sdp-features__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   D. Sections, categories, deal banner
   ========================================================================== */

@media (max-width: 782px) {
	.sdp-section__head { gap: var(--sdp-3); margin-bottom: var(--sdp-6); }
	.sdp-section__title { font-size: 1.5rem; }

	/* Two tiles across reads better than one giant tile per row. */
	.sdp-cats { grid-template-columns: 1fr 1fr; gap: var(--sdp-3); }
	.sdp-cat { padding: var(--sdp-5) var(--sdp-2); gap: var(--sdp-3); }
	.sdp-cat .clay-icon { --clay-icon-size: 4rem; }
	.sdp-cat__name { font-size: .9375rem; }

	.sdp-deal { padding: var(--sdp-6) var(--sdp-5); gap: var(--sdp-5); }
	.sdp-deal__title { font-size: 1.5rem; margin-bottom: var(--sdp-5); }

	/* The rosette was overlapping the headline once the banner stacked.
	   It now sits inline above the copy instead of floating over it. */
	.sdp-deal__badge {
		position: static;
		inline-size: 4.5rem;
		block-size: 4.5rem;
		margin: 0 auto;
		order: -1;
	}
	.sdp-deal__badge strong { font-size: 1.15rem; }
	.sdp-deal__art svg { inline-size: min(100%, 15rem); }
}

/* ==========================================================================
   E. Shop grid and product cards
   ========================================================================== */

@media (max-width: 782px) {
	ul.products,
	.columns-3 ul.products,
	.columns-4 ul.products {
		grid-template-columns: 1fr 1fr;
		gap: var(--sdp-3);
	}

	.sdp-product__body { padding: var(--sdp-4) var(--sdp-3); gap: var(--sdp-1); }
	.sdp-product__title { font-size: .875rem; }
	.sdp-product__cat { font-size: .625rem; }
	.price { font-size: 1rem; }

	/* Price above, full-width button below — side by side is too cramped
	   to give the button a real tap target at this width. */
	.sdp-product__foot {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sdp-2);
	}
	.sdp-product .button {
		inline-size: 100%;
		min-block-size: 2.75rem;
		font-size: .8125rem;
	}

	.sdp-shop__toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sdp-3);
		border-radius: var(--sdp-r-lg);
		padding: var(--sdp-4);
	}
	.woocommerce-ordering select { inline-size: 100%; }
}

@media (max-width: 400px) {
	ul.products,
	.columns-3 ul.products,
	.columns-4 ul.products { grid-template-columns: 1fr; }
}

/* ==========================================================================
   F. Single product
   ========================================================================== */

@media (max-width: 782px) {
	.woocommerce-product-gallery { padding: var(--sdp-4); border-radius: var(--sdp-r-xl); }
	.product_title { font-size: 1.5rem; }
	.summary .price { font-size: 1.5rem; }

	form.cart {
		padding: var(--sdp-4);
		gap: var(--sdp-3);
		flex-direction: column;
		align-items: stretch;
	}
	form.cart .quantity, form.cart .quantity .qty { inline-size: 100%; }
	form.cart .single_add_to_cart_button { inline-size: 100%; min-block-size: 3rem; }

	.sdp-product__wa { inline-size: 100%; justify-content: center; }

	.variations { display: block; }
	.variations tbody, .variations tr, .variations td, .variations th { display: block; inline-size: 100%; }
	.variations th { padding: 0 0 var(--sdp-1); }
	.variations td { padding: 0 0 var(--sdp-3); }
	.variations select { inline-size: 100%; }

	.woocommerce-tabs ul.tabs { gap: var(--sdp-1); }
	.woocommerce-tabs ul.tabs a { padding: .5rem 1rem; font-size: .8125rem; }
	.woocommerce-Tabs-panel { padding: var(--sdp-5) var(--sdp-4); }

	.sdp-product__trust { padding: var(--sdp-4); }
}

/* ==========================================================================
   G. Cart — tables restacked as cards
   ========================================================================== */

@media (max-width: 782px) {
	.woocommerce-cart-form { padding: 0; background: none; box-shadow: none; }

	.woocommerce-cart-form .shop_table thead { display: none; }
	.woocommerce-cart-form .shop_table,
	.woocommerce-cart-form .shop_table tbody,
	.woocommerce-cart-form .shop_table tr,
	.woocommerce-cart-form .shop_table td { display: block; inline-size: 100%; }

	.woocommerce-cart-form .shop_table tr.cart_item {
		position: relative;
		margin-bottom: var(--sdp-4);
		padding: var(--sdp-4);
		border-radius: var(--sdp-r-lg);
		background: var(--sdp-white);
		box-shadow: var(--sdp-clay-sm);
	}

	.woocommerce-cart-form .shop_table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sdp-3);
		padding: var(--sdp-2) 0;
		border: 0;
		text-align: end;
	}

	/* Woo already labels every cell; surface that as the row heading. */
	.woocommerce-cart-form .shop_table td::before {
		content: attr(data-title);
		font-family: var(--sdp-font-head);
		font-size: var(--sdp-text-sm);
		font-weight: 600;
		color: var(--sdp-ink-faint);
		text-align: start;
	}

	.woocommerce-cart-form .shop_table td.product-thumbnail {
		justify-content: center;
		padding-bottom: var(--sdp-3);
	}
	.woocommerce-cart-form .shop_table td.product-thumbnail::before { content: none; }
	.woocommerce-cart-form .shop_table td.product-thumbnail img { inline-size: 6rem; }

	.woocommerce-cart-form .shop_table td.product-name { font-weight: 600; }
	.woocommerce-cart-form .shop_table td.product-quantity .quantity { inline-size: auto; }
	.woocommerce-cart-form .shop_table td.product-quantity .qty { inline-size: 5rem; }

	/* Remove sits as a corner control rather than its own labelled row. */
	.woocommerce-cart-form .shop_table td.product-remove {
		position: absolute;
		inset-block-start: var(--sdp-2);
		inset-inline-end: var(--sdp-2);
		inline-size: auto;
		padding: 0;
	}
	.woocommerce-cart-form .shop_table td.product-remove::before { content: none; }

	.woocommerce-cart-form .shop_table td.actions {
		display: grid;
		gap: var(--sdp-3);
		padding: var(--sdp-4) 0 0;
	}
	.woocommerce-cart-form .shop_table td.actions::before { content: none; }
	.woocommerce-cart-form .coupon { display: grid; gap: var(--sdp-2); }
	.woocommerce-cart-form .shop_table td.actions .button { inline-size: 100%; }

	.cart-collaterals { grid-template-columns: 1fr; margin-top: var(--sdp-6); }
	.cart_totals { padding: var(--sdp-5) var(--sdp-4); }
	.cart_totals table, .cart_totals tbody, .cart_totals tr { display: block; inline-size: 100%; }
	.cart_totals th, .cart_totals td {
		display: flex;
		justify-content: space-between;
		gap: var(--sdp-3);
		padding: var(--sdp-3) 0;
		text-align: end;
	}
	.cart_totals th { text-align: start; }
	.wc-proceed-to-checkout .button { inline-size: 100%; min-block-size: 3rem; }
}

/* ==========================================================================
   H. Checkout — order review restacked
   ========================================================================== */

@media (max-width: 782px) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout-review-order {
		padding: var(--sdp-5) var(--sdp-4);
	}

	.woocommerce-checkout .col2-set,
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { inline-size: 100%; float: none; }

	/* Woo's own two-column form rows collapse to one. */
	.form-row-first, .form-row-last { inline-size: 100%; float: none; margin-inline: 0; }

	.woocommerce-checkout-review-order-table thead { display: none; }
	.woocommerce-checkout-review-order-table,
	.woocommerce-checkout-review-order-table tbody,
	.woocommerce-checkout-review-order-table tfoot,
	.woocommerce-checkout-review-order-table tr,
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td { display: block; inline-size: 100%; }

	.woocommerce-checkout-review-order-table tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sdp-3);
		padding: var(--sdp-3) 0;
		border-bottom: 1px solid var(--sdp-line);
	}
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td {
		inline-size: auto;
		padding: 0;
		border: 0;
		text-align: end;
	}
	.woocommerce-checkout-review-order-table th { text-align: start; font-weight: 600; }
	.woocommerce-checkout-review-order-table .order-total { font-size: 1.0625rem; }

	#payment .wc_payment_method { padding: var(--sdp-4) var(--sdp-3); }
	#place_order { inline-size: 100%; min-block-size: 3.25rem; font-size: 1rem; }

	.woocommerce-form-login, .woocommerce-form-coupon { padding: var(--sdp-4); }
}

/* ==========================================================================
   I. Account, notices, pagination
   ========================================================================== */

@media (max-width: 782px) {
	.woocommerce-MyAccount-content { padding: var(--sdp-5) var(--sdp-4); }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { gap: var(--sdp-1); }
	.woocommerce-account .woocommerce-MyAccount-navigation a { padding: .5rem .9rem; font-size: .8125rem; }

	/* Order history is a table too. */
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table, .woocommerce-orders-table tbody,
	.woocommerce-orders-table tr, .woocommerce-orders-table td { display: block; inline-size: 100%; }
	.woocommerce-orders-table tr {
		margin-bottom: var(--sdp-4);
		padding: var(--sdp-4);
		border-radius: var(--sdp-r-lg);
		background: var(--sdp-surface-alt);
	}
	.woocommerce-orders-table td {
		display: flex;
		justify-content: space-between;
		gap: var(--sdp-3);
		padding: var(--sdp-2) 0;
		border: 0;
		text-align: end;
	}
	.woocommerce-orders-table td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--sdp-ink-faint);
		text-align: start;
	}

	.woocommerce-message, .woocommerce-info, .woocommerce-error {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sdp-3);
		padding: var(--sdp-4);
		text-align: start;
	}
	.woocommerce-message .button { margin-inline-start: 0; inline-size: 100%; }

	.sdp-pagination { flex-wrap: wrap; gap: var(--sdp-1); }
}

/* ==========================================================================
   J. Prose, footer, misc
   ========================================================================== */

@media (max-width: 782px) {
	.sdp-prose { padding: var(--sdp-5) var(--sdp-4); border-radius: var(--sdp-r-lg); }
	.sdp-prose h2 { margin-top: var(--sdp-8); font-size: 1.375rem; }
	.sdp-prose h3 { margin-top: var(--sdp-6); font-size: 1.125rem; }

	/* Long policy pages contain tables and long URLs. */
	.sdp-prose table { display: block; overflow-x: auto; }
	.sdp-prose a { overflow-wrap: anywhere; }

	.sdp-pagehero { padding-block: var(--sdp-8); }
	.sdp-pagehero__title { font-size: 1.75rem; }

	.sdp-proof--footer { padding-bottom: var(--sdp-6); margin-bottom: var(--sdp-6); }
	.sdp-proof { gap: var(--sdp-3); }
	.sdp-proof > * { padding: var(--sdp-4); }

	.sdp-footer__body { padding-block: var(--sdp-8) var(--sdp-6); }
	.sdp-footer__grid { gap: var(--sdp-6); }
	.sdp-footer__base { flex-direction: column; align-items: flex-start; gap: var(--sdp-2); }

	/* The floating button must not sit over the sticky checkout button. */
	.sdp-fab { inset-block-end: var(--sdp-4); inset-inline-end: var(--sdp-4); }
}

@media (max-width: 560px) {
	.sdp-proof { grid-template-columns: 1fr; }
}

/* Landscape phones: the drawers must still scroll to their last item. */
@media (max-height: 480px) and (orientation: landscape) {
	.sdp-nav { padding-block: 4.5rem var(--sdp-6); }
	.sdp-minicart { padding-block: var(--sdp-4); }
}