/* ============================================================================
   20-mobile.css — dgayurvedic.com
   Jul 2026 review refs: DGA-027, DGA-057, DGA-058, DGA-059, DGA-060, DGA-061,
                         DGA-082, DGA-084, DGA-136, DGA-138.

   Two review findings are POSITIVE and must survive every rule in this file:
     DGA-175  the WooCommerce checkout form markup is accessible — nothing here
              touches a field, a label or an autocomplete token.
     DGA-176  no horizontal overflow at 390px on any page. The only rule that
              could break that is the `.body-wrapper` overflow relaxation below,
              which uses `overflow-x: clip` precisely because clip still clips.

   Breakpoints follow the Bootstrap 3 tiers the theme is built on:
       <= 767px   phone
       768-991px  tablet portrait  (the tier where the sidebar breaks)
       >= 992px   desktop
   ========================================================================= */

/* ============================================================================
   DGA-060 — the header eats half the first mobile screen and then scrolls away
   ========================================================================= */

/* `.body-wrapper` is `overflow: hidden`, which makes it a scroll container and
   silently defeats `position: sticky` on anything inside it. `overflow-x: clip`
   clips exactly the same way without creating that container, so the green bar
   can stick and the stray `a.quickview-close` at x=405 still cannot produce a
   horizontal scrollbar. Guarded by @supports: where `clip` is unsupported the
   header simply is not sticky, which is today's behaviour. */
@supports (overflow: clip) {
	@media (max-width: 991px) {
		/* `body .body-wrapper` matches the parent theme's own selector
		   (app-default.css:40); a bare `.body-wrapper` is one point short and
		   loses. */
		body .body-wrapper {
			overflow-x: clip;
			overflow-y: visible;
		}
	}
}

/* A sticky element can only travel inside its own containing block, so sticking
   `.header-bottom` on its own achieves nothing — it is boxed inside a 328px
   #header. #header sticks instead, offset upwards by exactly the height of the
   announcement and logo rows, so those scroll away and the green bar (hamburger,
   search, cart, account) parks at the top of the viewport.
   --dga-sticky-offset is measured and set by the child theme's footer script on
   load and on resize; until it exists the rule is a no-op and the header behaves
   exactly as it does today. */
@media (max-width: 991px) {
	#header {
		position: -webkit-sticky;
		position: sticky;
		top: calc(-1 * var(--dga-sticky-offset, 0px));
		z-index: 1002;
	}

	#header .header-bottom {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
	}

	/* The off-canvas menu and the mini-cart drawer both open from inside the now
	   sticky bar; they must paint above the page, not be clipped by it. */
	#header .header-bottom .vertical_megamenu,
	#header .header-bottom .wrapp-minicart {
		z-index: 1003;
	}
}

/* The announcement bar: 155px of the 396px header at 390px, spread over four
   text lines. Nothing is hidden — the lines are set tighter and allowed to flow
   into each other instead of each taking a full line of its own. */
@media (max-width: 991px) {
	#header .header-top {
		font-size: 11px;
		line-height: 1.35;
	}

	#header .header-top .textwidget {
		padding: 4px 0;
	}

	/* NOT trimmed: `.header-mid`'s padding. At <=991px the theme moves the search
	   bar out of `.header-bottom` and positions it against `.header-mid`'s box,
	   so shrinking that box drops the search field on top of the announcement
	   text and the logo. Tested; reverted. The announcement compression above
	   plus the removal of the duplicate Login widget already take the header
	   from 396px to 328px, and the sticky green bar is what actually fixes the
	   "no way back to the menu" half of DGA-060. */

	#header .header-top .contact-us {
		display: inline;
		margin: 0;
	}

	#header .header-top .contact-us br {
		display: none;
	}

	#header .header-top .contact-us + .contact-us::before {
		content: " · ";
	}

	#header .header-top .contact-us .text,
	#header .header-top .contact-us .phone {
		white-space: nowrap;
	}

	#header .header-top .contact-us .text + .phone::after,
	#header .header-top .contact-us .phone + .text::before {
		content: "";
	}
}

/* Desktop: the same four lines cost ~116px of a 900px viewport (DGA-082). */
@media (min-width: 992px) {
	#header .header-top .contact-us {
		display: inline;
	}

	#header .header-top .contact-us br {
		display: none;
	}

	#header .header-top .contact-us + .contact-us::before {
		content: " · ";
		padding: 0 4px;
	}
}

/* ============================================================================
   DGA-082 — header polish
   ========================================================================= */

/* The green-bar Login renders as an unstyled bulleted list item. */
.header-bottom .top-login ul,
.header-bottom .top-login li,
.header-top .top-login ul,
.header-top .top-login li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The cart count badge is positioned -5px/-5px and clips off the top edge of the
   green bar. Pull it inside its own icon. */
.header-bottom .top-minicart-icon,
.header-bottom .cart-contents {
	position: relative;
	overflow: visible;
}

.header-bottom .minicart-number {
	top: -2px;
	right: -8px;
}

/* ============================================================================
   DGA-027 / DGA-061 — tap targets
   Half of the interactive controls on a phone are under 44x44, including all
   three quantity controls in the buy path and the shop pagination.
   ========================================================================= */

/* --- quantity stepper: input 30x30 with .minus/.plus 30x32 either side ----
   These are three adjacent 30px targets in the buy path, the single worst
   mis-tap risk the review measured. The cart page's own quantity cell is styled
   from a six-class selector, hence !important. */
.quantity input.qty,
.woocommerce .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-cart td.product-quantity .quantity input.qty {
	min-width: 56px !important;
	min-height: 44px !important;
	height: auto !important;
	font-size: 16px;
	text-align: center;
}

.quantity .minus,
.quantity .plus,
.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
	min-width: 44px !important;
	min-height: 44px !important;
	height: auto !important;
	line-height: 1;
	/* The +/- glyphs are drawn by a pseudo-element at #898989 — 3.5:1, which
	   clears WCAG 1.4.11 for a control but reads as disabled next to a 16px
	   quantity. */
	color: #595959 !important;
}

.quantity .minus::before,
.quantity .plus::before,
.quantity .minus::after,
.quantity .plus::after {
	color: #595959;
}

/* The stepper's own box is 32px tall, i.e. shorter than the controls inside it. */
.quantity,
.woocommerce .quantity {
	min-height: 44px;
}

/* --- pagination: 20x40 links with 16px of dead space between them --------- */
.woocommerce-pagination .page-numbers li,
.pagination .page-numbers li {
	margin: 0 3px 6px;
}

/* The theme pins these to `width: 20px; height: 40px` from a four-class
   selector, which is why the review measured 20px-wide page links with 16px of
   dead space between them. */
.products-wrapper .woocommerce-pagination .page-numbers > li .page-numbers,
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span,
.pagination .page-numbers li a,
.pagination .page-numbers li span {
	display: inline-block;
	box-sizing: border-box;
	width: auto !important;
	min-width: 44px !important;
	height: auto !important;
	min-height: 44px !important;
	padding: 0 6px;
	line-height: 42px;
	text-align: center;
}

/* --- listing and product buttons ------------------------------------------ */
.item-bottom .button,
.item-bottom .add_to_cart_button,
.products-loop .button,
.products-loop .added_to_cart {
	min-height: 40px;
	padding-top: 9px;
	padding-bottom: 9px;
	line-height: 1.35;
}

.tinvwl_add_to_wishlist_button,
.item-bottom .tinvwl_add_to_wishlist_button {
	display: inline-block;
	min-height: 40px;
	padding: 10px 6px;
	line-height: 1.35;
}

/* --- header controls ------------------------------------------------------ */
.top-login a,
.header-bottom .top-login a,
.header-top .top-login a {
	display: inline-block;
	min-height: 40px;
	padding: 11px 4px;
	line-height: 18px;
}

.header-bottom .cart-contents {
	display: inline-block;
	min-width: 44px;
	min-height: 44px;
}

.grid-list-nav a,
.catalog-ordering a,
.view-mode a,
.sort-count a {
	display: inline-block;
	min-width: 40px;
	min-height: 40px;
	line-height: 38px;
	text-align: center;
}

@media (max-width: 991px) {
	/* !important throughout this block: these are the parent theme's and the
	   wishlist plugin's own fixed heights, several of which are !important
	   themselves. A tap target is not a place to lose a specificity argument.
	   Inline links inside a paragraph are deliberately NOT included — WCAG 2.5.8
	   exempts them, and padding them out would wreck the copy. */
	.item-bottom .button,
	.item-bottom .add_to_cart_button,
	.products-loop .button,
	.add_to_cart_button,
	.added_to_cart,
	.tinvwl_add_to_wishlist_button,
	.top-login a,
	.grid-list-nav a,
	.view-mode a,
	.grid-view,
	.list-view,
	.accordion-toggle,
	select.orderby,
	.catalog-ordering select,
	.woocommerce-ordering select {
		min-height: 44px !important;
	}

	.grid-view,
	.list-view {
		min-width: 44px !important;
	}

	/* Deliberately NOT resized: .woocommerce-product-gallery__trigger. It is
	   40x40 (over the WCAG 2.5.8 floor), the theme renders two of them stacked
	   over the image, and enlarging them makes an existing visual quirk louder
	   for one px of tap target. */

	.accordion-toggle {
		display: block;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	button.navbar-toggle.bt_menusb {
		min-width: 44px;
		min-height: 44px;
	}

	/* Off-canvas menu rows already measure 44px — keep them there. */
	#ResMenuSB .nav > li > a {
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* ============================================================================
   DGA-057 — 14px inputs make iOS Safari zoom on every checkout field
   16px is the threshold; below it Safari re-scales the viewport on focus and the
   customer has to pinch back out between fields.
   ========================================================================= */

@media (max-width: 991px) {
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.woocommerce-checkout input[type="text"],
	.woocommerce-checkout input[type="tel"],
	.woocommerce-checkout input[type="email"],
	.woocommerce-checkout input[type="password"],
	.woocommerce-checkout input[type="number"],
	.woocommerce-checkout textarea,
	.woocommerce-checkout select,
	.woocommerce-cart input[type="text"],
	.woocommerce-cart input[type="number"],
	.woocommerce-account input[type="text"],
	.woocommerce-account input[type="email"],
	.woocommerce-account input[type="password"],
	#login_ajax input.input-text,
	.select2-container .select2-selection--single,
	.select2-container .select2-search__field {
		font-size: 16px !important;
	}

	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce-checkout input[type="text"],
	.woocommerce-checkout input[type="tel"],
	.woocommerce-checkout input[type="email"],
	.woocommerce-checkout input[type="password"],
	.woocommerce-account input[type="text"],
	.woocommerce-account input[type="email"],
	.woocommerce-account input[type="password"],
	#login_ajax input.input-text {
		min-height: 46px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.select2-container--default .select2-selection--single {
		height: 46px;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 44px;
	}

	/* The theme pins Place Order to `width: auto` from a two-id selector, so it
	   renders 150px wide at the bottom of a 3,800px checkout. */
	.woocommerce .checkout #payment #place_order,
	.woocommerce-page .checkout #payment #place_order,
	.woocommerce #place_order,
	.woocommerce .checkout-button,
	.woocommerce form.login button,
	.woocommerce form.register button,
	#login_ajax .btn-submit-login {
		width: 100%;
		min-height: 50px;
		font-size: 16px;
	}
}

/* ============================================================================
   DGA-138 — 12-13px price, badge and button text at 390px, under a 14px body
   ========================================================================= */

@media (max-width: 991px) {
	/* The price is the highest-value text on a listing and the smallest type on
	   the screen: 12px against a 14px body. !important because the sizes come
	   from the parent theme's own responsive stylesheet. */
	.item-price,
	.item-price .amount,
	.item-price bdi,
	.item-price ins,
	.item-price del,
	.products-content .price,
	.products-content .price .amount,
	.ayudawp-prefix {
		font-size: 15px !important;
	}

	.item-price del,
	.item-price del bdi {
		font-size: 13px !important;
	}

	.sale-off {
		font-size: 13px !important;
	}

	.item-bottom .button,
	.item-bottom .add_to_cart_button,
	.item-bottom .added_to_cart,
	.add_to_cart_button,
	.added_to_cart,
	.product_type_variable,
	.product_type_simple,
	.tinvwl_add_to_wishlist_button {
		font-size: 14px !important;
	}
}

/* ============================================================================
   DGA-058 — category archives 11,000-13,745px tall at 390px

   With the duplicate loop gone (see inc/20-ux.php) 40 subcategories render once
   instead of 80. They are still 40 placeholder squares — 98% of product_cat
   terms have no thumbnail — so on a phone the tiles become a compact list of
   labelled links, and anything past the twelfth sits behind a "Show all"
   button.

   The collapse rules are scoped to `html.dga-js`, set by an inline head script
   before first paint. With JavaScript off nothing is ever hidden.
   ========================================================================= */

@media (max-width: 767px) {
	.products-wrapper > ul.products-loop:not([id]) {
		display: block;
		margin: 0 0 20px;
		padding: 0;
		border-top: 1px solid #e6e6e6;
	}

	.products-wrapper > ul.products-loop:not([id]) > li.product-category {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #e6e6e6;
		text-align: left;
	}

	.products-wrapper > ul.products-loop:not([id]) > li.product-category > a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 46px;
		padding: 4px 10px;
		gap: 10px;
		text-align: left;
	}

	/* A 200x200 grey placeholder is not information. Real category images, where
	   they exist, shrink to a thumbnail instead of being dropped. */
	.products-wrapper > ul.products-loop:not([id]) > li.product-category img[src*="woocommerce-placeholder"] {
		display: none;
	}

	.products-wrapper > ul.products-loop:not([id]) > li.product-category img {
		width: 34px !important;
		height: 34px !important;
		max-width: 34px;
		flex: 0 0 34px;
		margin: 0 !important;
		object-fit: contain;
	}

	.products-wrapper > ul.products-loop:not([id]) > li.product-category h2,
	.products-wrapper > ul.products-loop:not([id]) > li.product-category .woocommerce-loop-category__title {
		flex: 1 1 auto;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 14px;
		line-height: 1.35;
		font-weight: 600;
		text-transform: none;
		text-align: left !important;
	}

	.products-wrapper > ul.products-loop:not([id]) > li.product-category .count {
		font-weight: 400;
		color: #595959;
		background: none;
	}
}

/* Collapse: phone for the subcategory grid, phone + tablet for the sidebar tree
   (which is the thing that pushes the first product 4,000px down at 768px). */
.dga-js .products-wrapper > ul.products-loop.dga-collapsible li.dga-more-wrap,
.dga-js .widget_product_categories ul.product-categories.dga-collapsible li.dga-more-wrap {
	display: none;
}

@media (max-width: 991px) {
	.dga-js .products-wrapper > ul.products-loop.dga-collapsible > li.product-category:nth-child(n + 13) {
		display: none;
	}

	.dga-js .products-wrapper > ul.products-loop.dga-collapsible.dga-open > li.product-category {
		display: block;
	}

	.dga-js .products-wrapper > ul.products-loop.dga-collapsible li.dga-more-wrap {
		display: block;
		padding: 10px 0 0;
		clear: both;
	}
}

@media (max-width: 991px) {
	.dga-js .widget_product_categories ul.product-categories.dga-collapsible > li.cat-item:nth-child(n + 13) {
		display: none;
	}

	.dga-js .widget_product_categories ul.product-categories.dga-collapsible.dga-open > li.cat-item {
		display: block;
	}

	.dga-js .widget_product_categories ul.product-categories.dga-collapsible li.dga-more-wrap {
		display: block;
		padding: 10px 0 0;
	}

	.widget_product_categories ul.product-categories > li.cat-item > a {
		display: inline-block;
		min-height: 40px;
		padding: 10px 0;
		line-height: 20px;
	}
}

/* ============================================================================
   DGA-059 — 768-991px: the sidebar is col-sm-12, so the whole expanded taxonomy
   stacks ABOVE the product grid and the first product lands ~4,000px down.
   Bootstrap 3 floats the columns; a flex row with explicit order puts the
   products first without touching the markup or any other breakpoint.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 991px) {
	.container > .row.sidebar-row {
		display: flex;
		flex-wrap: wrap;
	}

	.row.sidebar-row > #contents,
	.row.sidebar-row > #contents-detail {
		order: 1;
		float: none;
		width: 100%;
	}

	.row.sidebar-row > aside#left.sidebar {
		order: 2;
		float: none;
		width: 100%;
	}

	.row.sidebar-row > aside#right.sidebar {
		order: 3;
		float: none;
		width: 100%;
	}
}

/* ============================================================================
   DGA-084 — listing grids

   * the PRICE filter is the last widget in a sidebar taller than the grid, so it
     lands ~1,000px below the products it filters;
   * product titles are ALL-CAPS Roboto Slab and wrap anywhere from 2 to 5 lines,
     which is what makes the tile heights ragged.
   ========================================================================= */

aside#left.sidebar,
aside#right.sidebar {
	display: flex;
	flex-direction: column;
}

aside#left.sidebar > .widget_price_filter,
aside#right.sidebar > .widget_price_filter {
	order: -1;
}

/* Equal-height tiles: flex ignores the Bootstrap floats but honours the column
   width percentages, so the grid keeps its 2/3/4-up rhythm and rows stop
   staggering. */
ul.products-loop#product_listing {
	display: flex;
	flex-wrap: wrap;
}

ul.products-loop#product_listing > li.item {
	display: flex;
	float: none;
}

ul.products-loop#product_listing > li.item > .products-entry {
	display: flex;
	flex-direction: column;
	width: 100%;
}

ul.products-loop#product_listing > li.item .item-content,
ul.products-loop#product_listing > li.item .item-detail {
	width: 100%;
}

ul.products-loop#product_listing > li.item .item-bottom {
	margin-top: auto;
}

/* Two-line title clamp, sentence case. The titles are stored mixed-case; the
   shouting is `text-transform: uppercase` in the theme. */
.products-content h4,
.products-loop .item-content h4 {
	min-height: 2.9em;
	margin-bottom: 6px;
	text-transform: none;
}

.products-content h4 a,
.products-loop .item-content h4 a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-transform: none;
	line-height: 1.45;
}

/* ============================================================================
   DGA-136 — product page: the buy controls sit 1.2-1.7 viewports down
   On a phone the price is immediately followed by the quantity + Add To Cart +
   Buy Now block; the ingredient copy that used to sit between them moves below.
   ========================================================================= */

@media (max-width: 767px) {
	.content_product_detail {
		display: flex;
		flex-direction: column;
	}

	/* The default matters more than the explicit orders. Other workstreams add
	   blocks to this column (brand, delivery promise, review prompt) and an
	   unordered flex child takes order 0, which would shove them ABOVE the
	   product title. Everything unrecognised lands just under the buy form
	   instead, in source order. */
	.content_product_detail > * {
		order: 6;
	}

	.content_product_detail > .product_title {
		order: 1;
	}

	.content_product_detail > .reviews-content {
		order: 2;
	}

	.content_product_detail > .item-brand {
		order: 3;
	}

	.content_product_detail > [itemprop="offers"],
	.content_product_detail > .price {
		order: 4;
	}

	.content_product_detail > form.cart,
	.content_product_detail > .woocommerce-variation-add-to-cart {
		order: 5;
	}

	.content_product_detail > .product-info {
		order: 7;
	}

	.content_product_detail > .description {
		order: 8;
	}

	.content_product_detail > .item-meta {
		order: 9;
	}

	/* Full-width buy controls instead of a 118x32 button floated next to a 97x32
	   one. */
	.woocommerce div.product form.cart .single_add_to_cart_button,
	.woocommerce div.product .button-buynow {
		display: block;
		float: none;
		width: 100%;
		min-height: 50px;
		margin: 0 0 10px;
		font-size: 16px;
		line-height: 1.35;
		text-align: center;
	}

	.woocommerce div.product form.cart .quantity {
		float: none;
		margin: 0 0 10px;
	}

	.addcart-wrapper.single-buynow {
		display: block;
	}

	/* ~140px of empty white inside the gallery container below the image. */
	.slider_img_productd .woocommerce-product-gallery,
	.product_detail .product-images-container {
		margin-bottom: 6px;
	}

	.product_detail .slider.product-responsive .woocommerce-product-gallery__image img {
		max-height: 320px;
		width: auto;
		margin: 0 auto;
	}
}

/* ============================================================================
   Guard rail for DGA-176 — nothing in this file may introduce a horizontal
   scrollbar. The hidden quickview control is the one element that has always
   sat past the right edge; pin it so relaxing `.body-wrapper` cannot expose it.
   ========================================================================= */

.sw-quickview-bottom .quickview-close {
	right: 0;
}