/*
 * NeoGrow mobile product experience.
 *
 * Designed for small screens rather than inherited from the desktop rules.
 * Breakpoint set: 320 / 360 / 375 / 390 / 412 / 430 / 768.
 */

@media (max-width: 767px) {

	/* ---------------------------------------------------------------------
	 * Gallery: one image per slide, sized to leave room for the price
	 * ------------------------------------------------------------------ */

	.ngpp-gallery {
		gap: 10px;
	}

	.ngpp-gallery__slide {
		padding: 10px;
	}

	.ngpp-gallery__image {
		/* Never a fixed 600px block: the stage tracks the viewport width. */
		height: clamp(300px, 84vw, 430px);
	}

	.ngpp-gallery__dots {
		display: flex;
	}

	/* Arrows are redundant next to a real swipe gesture. */
	.ngpp-gallery__nav {
		display: none;
	}

	.ngpp-gallery__zoom {
		width: 34px;
		height: 34px;
	}

	.ngpp-gallery__thumbs {
		gap: 6px;
		padding-block-end: 4px;
		scroll-snap-type: x proximity;
	}

	.ngpp-gallery__thumb {
		scroll-snap-align: start;
	}

	.ngpp-gallery__thumb button {
		width: 58px;
		height: 58px;
		padding: 4px;
		border-radius: 8px;
	}

	/* ---------------------------------------------------------------------
	 * Purchase actions
	 * ------------------------------------------------------------------ */

	.ngpp-engine .ng-product__buy form.cart {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 10px;
		align-items: center;
	}

	.ngpp-engine .ng-product__buy .quantity {
		grid-column: 1;
	}

	.ngpp-engine .ng-product__buy .single_add_to_cart_button {
		grid-column: 2;
		min-height: 50px;
	}

	/* Buy Now spans the full row so the label can never break in two. */
	.ngpp-engine .ngpp-buy-now {
		grid-column: 1 / -1;
		width: 100%;
		min-height: 50px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.ngpp-engine .ng-product__buy .single_add_to_cart_button,
	.ngpp-engine .ngpp-buy-now,
	.ngpp-engine .ngpp-whatsapp,
	.ngpp-engine .ngpp-bundle__submit {
		min-height: 48px;
		white-space: nowrap;
	}

	/* Variation controls sit above the action row. */
	.ngpp-engine .ng-product__buy table.variations,
	.ngpp-engine .ng-product__buy .woocommerce-variation-add-to-cart,
	.ngpp-engine .ng-product__buy .single_variation_wrap {
		grid-column: 1 / -1;
	}

	.ngpp-engine .ng-product__buy .woocommerce-variation-add-to-cart {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 10px;
		align-items: center;
	}

	.ngpp-engine .ngpp-swatch {
		min-height: 46px;
	}

	/* ---------------------------------------------------------------------
	 * Trust cards and About
	 * ------------------------------------------------------------------ */

	.ngpp-engine .ngpp-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}

	.ngpp-engine .ngpp-trust__item {
		padding: 8px;
	}

	.ngpp-engine .ngpp-highlights__row {
		grid-template-columns: minmax(84px, 0.8fr) minmax(0, 1.2fr);
		padding-block: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Mobile purchase bar
 * ---------------------------------------------------------------------- */

.ngpp-mobile-bar {
	display: none;
}

@media (max-width: 767px) {
	.ngpp-mobile-bar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 9990;

		/*
		 * Root cause of the 24px horizontal overflow measured at 390px on the
		 * live site: the bar inherited content-box sizing from the theme, so
		 * its horizontal padding was added on top of a 100% width.
		 */
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;

		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		border-block-start: 1px solid var(--ng-line, #e3eaec);
		background: #fff;
		box-shadow: 0 -6px 20px rgba(16, 23, 24, 0.1);

		/* Hidden until the real cart form scrolls away. */
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0.22s;
	}

	.ngpp-mobile-bar * {
		box-sizing: border-box;
	}

	.ngpp-mobile-bar.is-visible {
		transform: translateY(0);
		visibility: visible;
	}

	.ngpp-mobile-bar__price {
		margin: 0;
		min-width: 0;
		color: var(--ng-sale, #d63f44);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.25;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ngpp-mobile-bar__price del {
		color: var(--ng-muted, #6f8285);
		font-size: 0.7em;
		font-weight: 500;
	}

	.ngpp-mobile-bar__button {
		min-height: 48px;
		padding-inline: 22px;
		border: 0;
		border-radius: 8px;
		background: var(--ng-primary, #34dde4);
		color: var(--ng-deep, #0f4f52);
		font-size: 14px;
		font-weight: 700;
		white-space: nowrap;
		cursor: pointer;
	}

	.ngpp-mobile-bar__button.is-blocked {
		background: var(--ng-surface, #f7fafb);
		color: var(--ng-muted, #6f8285);
		cursor: not-allowed;
	}

	/* Only pad the page while the bar is actually on screen. */
	body.ngpp-has-mobile-bar {
		padding-block-end: calc(74px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ngpp-mobile-bar {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Print
 *
 * A sticky/fixed element repeats on every printed page. Both are released.
 * ---------------------------------------------------------------------- */

@media print {
	.ngpp-mobile-bar {
		display: none !important;
	}

	.ng-product-sticky-column,
	.ngpp-gallery__thumbs,
	.ngpp-gallery__nav,
	.ngpp-gallery__zoom,
	.ngpp-gallery__counter,
	.ngpp-gallery__dots {
		position: static !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.ngpp-gallery__nav,
	.ngpp-gallery__zoom,
	.ngpp-gallery__counter,
	.ngpp-gallery__dots {
		display: none !important;
	}

	.ngpp-lightbox {
		display: none !important;
	}

	body.ngpp-has-mobile-bar {
		padding-block-end: 0 !important;
	}
}

/* -------------------------------------------------------------------------
 * Mobile gallery ceiling
 *
 * Measured at 390x844 before this rule: the gallery consumed 397-523px of an
 * 844px viewport, which pushed Add to cart to 884-1184px in five of the six
 * layouts. The customer had to scroll more than a full screen to reach the
 * buy button.
 *
 * The stage is capped as a share of viewport height, not of width, because it
 * is vertical space that competes with the price and the CTA.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ngpp-engine .ngpp-gallery__image {
		aspect-ratio: 1 / 1;
		/* Wins over the per-mode heights, which are width-derived. */
		max-height: min(42vh, 360px);
	}

	/* media-social sets an explicit min height that ignored the cap. */
	.ngpp-engine .ngpp-gallery--media-social .ngpp-gallery__image,
	.ngpp-engine .ngpp-gallery--mixed-grid .ngpp-gallery__image,
	.ngpp-engine .ngpp-gallery--full-width .ngpp-gallery__image {
		height: auto;
		max-height: min(42vh, 360px);
	}

	.ngpp-engine .ngpp-gallery__thumb button {
		width: 52px;
		height: 52px;
	}

	.ngpp-engine .ngpp-gallery {
		gap: var(--ngpp-s2);
	}
}

/* -------------------------------------------------------------------------
 * Thumbnail strip is redundant on a phone
 *
 * The mobile gallery is a real swipe carousel with pagination dots and a
 * "1 / 4" counter, so a second navigation control costs about 60px of
 * vertical space directly above the price for no added capability.
 * Layouts that need a visible strip re-enable it themselves.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ngpp-engine .ngpp-gallery__thumbs {
		display: none;
	}

	.ngpp-engine .ngpp-gallery__slide {
		padding: var(--ngpp-s2);
	}

	.ngpp-engine .ngpp-price-block {
		margin-block: var(--ngpp-s2) var(--ngpp-s2);
	}

	.ngpp-engine table.variations {
		margin-block-end: var(--ngpp-s2);
	}
}