/*
 * Mashin Irani — single-product tweaks (loaded on product pages only). Tokens from mi.css.
 */

/* Gallery main image: 4/5 is very tall on phones — square it up (noticeably smaller) on mobile. */
@media (max-width: 640px) {
	.gal-main { aspect-ratio: 1 / 1; }
}

/* Q&A tab empty state. */
.mi-qa-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4, 16px);
	text-align: center;
	padding: var(--space-8, 32px) var(--space-4, 16px);
}
.mi-qa-empty p { color: var(--text-secondary, #404751); margin: 0; }
.mi-qa-empty .btn { display: inline-flex; align-items: center; gap: 6px; }

/*
 * Quantity stepper (+ / −) key styling.
 *
 * The parent theme's reset (hello-elementor/assets/css/reset.css) styles EVERY bare <button> with
 * `border:1px solid; border-radius:3px; padding:.5rem 1rem`. It loads after the frozen product.css,
 * whose `button{border:0}` carries the same specificity (0,0,1) and therefore loses. On the stepper
 * that drew a 1px box around each key and, worse, the 16px inline padding squeezed the 18px icon
 * box down to 10px — so the + and − rendered tiny inside a stray frame. `.stepper button` is
 * (0,1,1), so it wins cleanly without !important.
 */
.stepper button {
	border: 0;
	border-radius: 0;
	padding: 0;
}
.stepper button svg {
	width: 18px;
	height: 18px;
}

/*
 * Mobile horizontal overflow of the whole product grid.
 *
 * The frozen product.css collapses the grid at 900px with `.pmain{grid-template-columns:1fr}`.
 * A bare `1fr` is `minmax(auto,1fr)`, so the track can never shrink below its content's
 * min-content width. Here that floor is the buy row: 138px stepper + 190.84px add-to-cart
 * + 54px wish button + 2x12px gap = 406.84px — which is exactly the column width the browser
 * resolved at every phone size. The .info column (and every child) therefore rendered 406.84px
 * wide inside a 288-396px container, and in RTL the overhang fell off the inline-start edge,
 * hiding the wish button. `html{overflow-x:clip}` swallowed it silently: no scrollbar, no error.
 *
 * minmax(0,1fr) removes the min-content floor so the column tracks the container. That alone
 * would squeeze the stepper (it is `flex:0 1 auto`, so it shrinks before .btn-buy, whose
 * `flex:1` sets basis 0 but keeps a min-width:auto floor) — hence `flex:none` on the stepper
 * and `min-width:0` on the button, which together give the button the leftover space instead.
 */
@media (max-width: 900px) {
	.pmain { grid-template-columns: minmax(0, 1fr); }
	.buyrow .stepper { flex: none; }
	.buyrow .btn-buy { min-width: 0; }
}

/*
 * Below ~345px viewport the leftover (container - 216px) is narrower than the add-to-cart
 * label's min-content, so the text would render outside the navy button. Wrap the row and give
 * the CTA its own full-width line; `order:1` moves it past the wish button so the stepper and
 * wish share line 1 (source order is stepper, button, wish).
 */
@media (max-width: 374px) {
	.buyrow { flex-wrap: wrap; }
	.buyrow .wish-btn { flex: none; }
	.buyrow .btn-buy { flex: 1 1 100%; order: 1; }
}