/* Mobile polish — the phone is the shop window.
 *
 * Measured on a 390px screen across 59 pages: headings ran 32–40px, sections carried 48px of
 * padding top and bottom with an empty spacer row between each pair, buttons came in four
 * different heights on one page, and the home page ran past 20,000px. Each of those reads as
 * "unfinished" long before a visitor can say why. Everything here is phone-only; the desktop
 * layout is untouched.
 *
 * Portable by design: only the theme's own class names, no site, brand or domain specifics, so a
 * new site built from this child theme gets it automatically.
 */

@media (max-width: 767px) {

	/* ---- type scale ------------------------------------------------------
	 * One scale, set for a 390px screen: 27 / 22 / 18, with the tighter
	 * tracking that large type needs to stop looking like default HTML.
	 */
	h1, .page-title, .entry-title, .yb-hero2__title, .yb-page-head__title {
		font-size: 27px !important;
		line-height: 1.18 !important;
		letter-spacing: -0.015em;
	}
	h2, .yb-head__title, .yb-sec__title {
		font-size: 22px !important;
		line-height: 1.22 !important;
		letter-spacing: -0.01em;
	}
	h3, .yb-sub__title { font-size: 18px !important; line-height: 1.3 !important; }
	h4 { font-size: 16px !important; line-height: 1.35 !important; }

	/* Google's mobile usability floor for body text is 16px — below it a phone
	 * forces pinch-and-zoom, which is reported as an error in Search Console.
	 * See SITE-AUDIT/MOBILE-DESIGN-STANDARD.md. */
	.yb-sec p, .entry-content p, .yb-rte p, .yb-sec li, .entry-content li {
		font-size: 16px;
		line-height: 1.6;
	}

	/* ---- vertical rhythm -------------------------------------------------
	 * 28px between sections instead of 48+48 plus a spacer row. The page still
	 * breathes; it just stops looking like something failed to load.
	 */
	.yb-sec { padding-top: 28px !important; padding-bottom: 28px !important; }
	.yb-sec--hero2, .yb-sec--hero { padding-top: 0 !important; padding-bottom: 18px !important; }
	.vc_empty_space { height: 8px !important; }
	.wpb_content_element, .wpb_text_column { margin-bottom: 14px !important; }
	.yb-head { margin-bottom: 14px !important; }
	.yb-head__title + p, .yb-head p { margin-top: 6px; }

	/* ---- hero ------------------------------------------------------------
	 * Edge to edge. A hero inset by the page gutter looks like a banner ad;
	 * full-bleed looks like the brand.
	 */
	.yb-sec--hero2 .yb-wrap, .yb-sec--hero .yb-wrap { padding-left: 0; padding-right: 0; }
	.yb-hero2__media { margin: 0; }
	.yb-hero2__img { width: 100%; display: block; }
	.yb-hero2__inbtn { padding: 0 16px; margin-top: -28px; position: relative; z-index: 2; }
	.yb-hero2__inbtn .yb-btn { width: 100%; }
	.yb-sec--hero2 + .vc_row .yb-sec,
	.yb-sec--hero2 ~ .vc_row:first-of-type { padding-top: 20px !important; }

	/* ---- buttons ---------------------------------------------------------
	 * One height. Four button heights on a single page is the clearest tell
	 * that a theme was never finished for mobile.
	 */
	.yb-btn, .button, .btn, .single_add_to_cart_button, .checkout-button,
	.wc-block-components-button, input[type="submit"] {
		min-height: 48px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 20px !important;
		font-size: 14px !important;
		line-height: 1.2 !important;
	}
	.yb-btn--full, .yb-hero2__inbtn .yb-btn, .single_add_to_cart_button, .checkout-button {
		width: 100%;
	}

	/* ---- product cards ---------------------------------------------------
	 * Picture first, then two tight lines. The quick-view link doubles every
	 * card's text block for something a thumb rarely wants on a phone.
	 */
	.yb-grid, .yb-grid--home { gap: 12px 8px !important; }
	/* A card must carry enough to decide without opening it, with the name and
	 * the price clearly separated (Baymard). 14px keeps two lines readable. */
	.yb-card__title {
		font-size: 14px !important;
		line-height: 1.35 !important;
		margin: 8px 0 3px !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.yb-card__price { font-size: 14px !important; margin: 0 !important; font-weight: 500; }
	/* Quick Shop stays — it is genuinely useful on a phone. It just gets a
	 * calmer size so the picture keeps the card. */
	/* Quick Shop stays. Google asks for 48px of tappable height with 8px of
	 * clear space, so the link keeps its quiet look and gains the height
	 * through padding rather than through type size. */
	.yb-card .yb-card__quick, .yb-card__quick.quick-view-button {
		font-size: 13px !important;
		margin-top: 8px !important;
		padding: 14px 0 13px !important;
		line-height: 1.4 !important;
	}
	/* The product name is the other tap target on a card; give it real height
	 * without moving the price away from it. */
	.yb-card__title a { display: block; padding-block: 4px; }
	.yb-card__wish { transform: scale(.88); }

	/* ---- consent bar -----------------------------------------------------
	 * It covered a third of the screen and wrapped its first button onto two
	 * lines. It is a notice, not a section of the page.
	 */
	.wd-cookies-popup { padding: 12px 14px !important; }
	.wd-cookies-popup .wd-cookies-inner { gap: 10px; }
	.wd-cookies-popup p, .wd-cookies-popup .wd-cookies-text {
		font-size: 12.5px !important;
		line-height: 1.4 !important;
		margin-bottom: 8px !important;
	}
	.wd-cookies-popup .btn, .wd-cookies-popup .button, .wd-cookies-popup a.btn {
		min-height: 40px !important;
		font-size: 12.5px !important;
		padding: 0 12px !important;
		white-space: nowrap;
	}

	/* ---- tables and wide blocks -----------------------------------------
	 * Let a size chart scroll inside itself rather than pushing the page
	 * sideways.
	 */
	.yb-sec table, .entry-content table { display: block; overflow-x: auto; max-width: 100%; }

	/* ---- inline links ----------------------------------------------------
	 * Links inside running text are still tap targets; a little extra leading
	 * keeps neighbouring lines from being hit by mistake.
	 */
	.yb-sec p a, .entry-content p a { padding-block: 2px; }
}

@media (max-width: 767px) {

	/* ---- tap targets, to Google's 48px ------------------------------------
	 * Measured before the fix: card names 34px, inline links 21px, footer
	 * links 24px. The height comes from padding so nothing visibly grows.
	 */
	.yb-footer a, .yb-links a, .widget a, .yb-help a {
		display: inline-block;
		padding-block: 12px;
		line-height: 1.3;
	}
	.yb-nav a, .mobile-nav a, .wd-nav-mobile a { min-height: 48px; display: flex; align-items: center; }

	/* Headings that arrive from the page builder carry their own sizes, so the
	 * scale has to reach them by their builder classes too. */
	.wpb_content_element h2, .wpb_text_column h2, .vc_custom_heading h2,
	.wd-section-title h2, .yb-sub h2 { font-size: 22px !important; line-height: 1.22 !important; }
	.wpb_content_element h3, .wpb_text_column h3, .vc_custom_heading h3,
	.wd-section-title h3, .yb-sub h3 { font-size: 18px !important; line-height: 1.3 !important; }

	/* ---- images keep their box -------------------------------------------
	 * An image that arrives without reserved space shifts everything under it,
	 * which is what pushes CLS past 0.1 on its own.
	 */
	.yb-card__media, .yb-card__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
	.yb-hero2__img { aspect-ratio: 2400 / 1059; object-fit: cover; }
}

/* ---------------------------------------------------------------------------
 * Second measured pass (59 pages, 390px). Everything here was read off the
 * live pages, not guessed: the sizes on the left are what the audit found.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Tile headings came out at 28px, above the 22px step of the scale in
	 * SITE-AUDIT/MOBILE-DESIGN-STANDARD.md. The tiles are promos, so they keep
	 * the H2 step rather than dropping to the 18px H3 step. */
	.yb .yb-tile__title, .yb.home .yb-tile__title, .yb .yb-tiles h3, .yb .yb-cat-grid-promo__title {
		font-size: 22px !important;
		line-height: 1.22 !important;
	}

	/* Header tools measured 44px and the wishlist heart 39px. Google asks for
	 * 48px. The padding grows, the icon does not, so nothing looks bigger. */
	/* WoodMart sets a fixed height: 44px on these, and a fixed height beats min-height, so the
	   height is released first and the 48px comes from min-height/min-width. */
	.whb-flex-row .wd-tools-element > a,
	.whb-flex-row .wd-tools-element,
	.whb-flex-row .searchform > button,
	.wd-header-mobile-nav > a,
	.wd-header-search > a,
	.wd-header-cart > a,
	.wd-header-wishlist > a,
	.wd-header-my-account > a,
	.skip-link, .yb-skip-link {
		height: auto !important;
		min-height: 48px !important;
		min-width: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	/* Card overlay buttons measured 39px. */
	.wd-add-btn-replace > a, .wd-wishlist-btn > a,
	.wd-buy-now-btn > a, .product-grid-item .wd-action-btn > a {
		height: auto !important;
		min-height: 48px !important;
		min-width: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Body copy read 14–15px in places. Google's mobile guidance is a 16px
	 * floor for copy you read; prices, badges, card names and other labels stay
	 * at 14px on purpose (see the standard file). */
	.yb .entry-content p, .yb .entry-content li,
	.yb .yb-sec p, .yb .yb-sec li,
	.yb .yb-help p, .yb .yb-help li,
	.yb .yb-info p, .yb .yb-info li,
	.yb .yb-term-intro, .yb .yb-term-intro p,
	.yb .woocommerce-info, .yb .yb-acc-card__text,
	.yb .yb-auth .yb-auth__benefits li,
	.yb .yb-faq__a, .yb .yb-faq__a p {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Third measured pass: the last targets still under Google's 48px.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Footer legal row and the support address read 44-45px: the padding that
	   gives them their height is 12px, and 14px is what reaches 48. */
	html body.yb .yb-footer__legal a,
	html body.yb .yb-footer__mail a,
	html body.yb .yb-footer__bottom a {
		display: inline-block;
		padding-block: 14px !important;
		line-height: 1.3;
	}

	/* WoodMart scales the card action buttons down (transform), so a 48px button
	   is painted at 42px and Google measures the painted box. The scale sits on the
	   wrapper, so the wrapper is the one that has to stop scaling. */
	html body.yb .yb-card__wish,
	html body.yb .yb-card .wd-action-btn,
	html body.yb .product-grid-item .wd-action-btn,
	html body.yb .wd-wishlist-btn {
		transform: none !important;
	}
	html body.yb .yb-card .wd-action-btn > a,
	html body.yb .product-grid-item .wd-action-btn > a,
	html body.yb .wd-wishlist-btn > a {
		transform: none !important;
		width: 48px !important;
		height: 48px !important;
	}

	/* Footer links fight a padding rule elsewhere, so the height comes from
	   min-height and the text is centred instead. */
	html body.yb .yb-footer__legal a,
	html body.yb .yb-footer__mail a,
	html body.yb .yb-footer__bottom a {
		min-height: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	/* Card names (46px) and the review / pagination links sit next to other
	   targets, so Google counts them too. */
	html body.yb .yb-card__title a,
	html body.yb .product-grid-item .wd-entities-title a,
	html body.yb .woocommerce-review-link,
	html body.yb .yb-gp-nav a,
	html body.yb .woocommerce-pagination a,
	html body.yb .page-numbers {
		min-height: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
}

/* ---------------------------------------------------------------------------
 * Fourth measured pass: the last findings of the 59-page run.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* WoodMart's "You May Also Like" slider title measured 28px (scale: 22px). */
	html body.yb .related-products .title,
	html body.yb .slider-title,
	html body.yb .wd-products-element .title,
	html body.yb h2.yb-s2-h3 {
		font-size: 22px !important;
		line-height: 1.22 !important;
	}

	/* The hero title is the page's own headline, so it keeps the H1 step (27px)
	   as an H1 and drops to 26px where the builder prints it as an H2. */
	html body.yb h2.yb-hero2__title { font-size: 26px !important; }

	/* 64px above the category SEO block was the biggest real gap left on the
	   archives; the section rhythm on phones is 28px. */
	html body.yb .yb-cat-grid-seo { margin-top: 32px !important; }

	/* Rating row on the product page: the count link was 44px, "Write a review" 47px. */
	html body.yb .yb-rating-row a,
	html body.yb .yb-rating-row__count {
		min-height: 48px !important;
		min-width: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	/* Pagination numbers were 32px wide. */
	html body.yb .page-numbers,
	html body.yb .woocommerce-pagination a,
	html body.yb .yb-gp-nav a { min-width: 48px !important; justify-content: center !important; }
}

/* ---------------------------------------------------------------------------
 * Product gallery: the phone layout has to be the final one the moment the grid
 * is inserted. pdp-top.js builds a 2-column grid (224px tall) and fix-a4-pdp.js
 * then turns it into a full-width swiper (450px): two stages, one shift.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
	html body.yb.single-product .product-image-summary .yb-pdp-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	html body.yb.single-product .product-image-summary .yb-pdp-grid > .yb-pdp-grid__item {
		flex: 0 0 100%;
		width: 100%;
		scroll-snap-align: start;
	}
}

/* ---------------------------------------------------------------------------
 * Fifth pass: the 12px leftovers. 13px is the floor for a label on a phone
 * (Google's floor of 16px is for copy you read, and these are labels), and the
 * blocks that really are prose go to 16px.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* Labels and eyebrows measured 12px. */
	html body.yb .yb-utility a,
	html body.yb .yb-utility__region,
	html body.yb .yb-info__eyebrow,
	html body.yb .yb-look span,
	html body.yb .wd-add-btn .add_to_cart_button span,
	html body.yb .hover-content-inner p,
	html body.yb .yb-cat-grid-promo__btn { font-size: 13px !important; }

	/* Prose: the PDP shipping/returns cards, the review note, the archive promo
	   and the cookie bar are sentences someone reads. */
	html body.yb .yb-pdp-card__text,
	html body.yb .yb-pdp-card__text a,
	html body.yb .yb-reviews__note { font-size: 16px !important; line-height: 1.5 !important; }
	/* 30 Sep 2026: yeh dono bhi poore jumle hain jo koi parhta hai, is liye 14px se 16px —
	   MOBILE-DESIGN-STANDARD.md ka matn ka farsh. Audit me /shop/ ka promo isi rule se 14px par
	   atka hua tha (yahan !important hai, is liye baad wali file bhi ise nahi hara pa rahi thi). */
	html body.yb .yb-cat-grid-promo__text,
	html body.yb .cookies-info-text { font-size: 16px !important; line-height: 1.5 !important; }
	/* 1 Oct 2026: blog ke post meta ka category link WoodMart me 12px par aata hai. Yeh ek link
	   hai jise ungli se dabaya jata hai, sirf parha nahi jata, is liye matn ka farsh aur tap ki
	   oonchai dono lagti hain. Audit (41 safhe) par yehi akela baqi masla tha. */
	html body.yb .wd-post-meta a[rel~="category"],
	html body.yb .wd-post-cat a,
	html body.yb .post-meta a[rel~="category"],
	html body.yb .meta-post-categories a { font-size: 16px !important; line-height: 1.5 !important; }
	html body.yb .wd-post-cat a,
	html body.yb .meta-post-categories a {
		display: inline-flex;
		align-items: center;
		min-height: 48px;
	}
}

/* ---------------------------------------------------------------------------
 * Sixth pass: the related-products title. pdp-below.css and zw-desktop-fixes.css
 * set 28px !important at `body.yb.single-product .related-and-upsells ...`, which
 * outranks a plain `html body.yb .slider-title`, so the phone rule has to carry
 * the same ancestors plus one more.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
	html body.yb.single-product .related-and-upsells .slider-title,
	html body.yb.single-product .related-and-upsells .title,
	html body.yb.single-product .related-products .slider-title {
		font-size: 22px !important;
		line-height: 1.22 !important;
	}
}

/* ---------------------------------------------------------------------------------------------
   Filter sidebar par ungli ke targets — MOBILE-DESIGN-STANDARD.md: 48x48 px se kam kuch nahi.
   30 Sep 2026 ke audit me /shop/ par yeh 42px aur 34px par thay: widget ke unwan (Categories,
   Size, Color) aur unke andar ke link (All products, Show All, har category). Yeh sab master se
   aate hain, is liye fix yahin phone-only CSS me hai, kisi ek site par nahi.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.yb .sidebar-container .wd-widget .widget-title,
	.yb .wd-sidebar .wd-widget .widget-title,
	.yb .wd-side-hidden .wd-widget .widget-title {
		display: flex;
		align-items: center;
		min-height: 48px;
		margin-bottom: 0;
	}
	.yb .sidebar-container .wd-widget li > a,
	.yb .wd-sidebar .wd-widget li > a,
	.yb .wd-side-hidden .wd-widget li > a,
	.yb .sidebar-container .wd-widget > ul > li > a,
	.yb .sidebar-container .yb-cf-tree__item > a,
	.yb .sidebar-container .yb-cf-more,
	.yb .sidebar-container .wd-widget .wd-filter-show-more {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	/* Do targets ke darmiyan 8px ki khali jagah bhi isi standard ka hissa hai. */
	.yb .sidebar-container .wd-widget li + li,
	.yb .wd-side-hidden .wd-widget li + li { margin-top: 8px; }

}