/*
 * NeoGrow product page - per-layout mobile design.
 *
 * Loaded last, phone widths only. Before this file the six layouts differed
 * in DOM order but shared one rhythm - large gallery, price, form, trust
 * cards, accordions - so they read as the same page. Measured baseline at
 * 390x844, distance from page top to Add to cart:
 *
 *   mobile-conversion    802     sticky-commerce      894
 *   visual-story         895     social-proof-setup   996
 *   marketplace-trust   1002     guided-configurator 1156
 *
 * Every layout put its primary action a full screen or more below the fold.
 * Each block below gives one layout a distinct job on a phone, and a distinct
 * shape, rather than a reordered copy of the same page.
 */

@media (max-width: 767px) {

	/* Shared: the stage is a single column whose order each layout sets. */
	.ngpp-engine .ngpp-layout .ngpp-stage {
		display: flex;
		flex-direction: column;
		gap: var(--ngpp-s4);
	}

	/* Long content never competes with the purchase decision on a phone. */
	.ngpp-engine .ngpp-layout .ngpp-long-content,
	.ngpp-engine .ngpp-layout .ngpp-marketplace__info {
		display: contents;
	}

	/* ---------------------------------------------------------------------
	 * 1. STICKY COMMERCE - the spec sheet
	 *
	 * A considered buyer comparing models. Compact gallery, then the numbers:
	 * price, then a scannable strip of key specifications directly under it,
	 * then the action. Densest of the six.
	 * ------------------------------------------------------------------ */

	.ngpp-layout--sticky-commerce .ngpp-purchase-card {
		display: flex;
		flex-direction: column;
		gap: var(--ngpp-s3);
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.ngpp-layout--sticky-commerce .ngpp-purchase-card__body {
		display: contents;
	}

	.ngpp-layout--sticky-commerce .ngpp-purchase-card__media { order: 1; }
	.ngpp-layout--sticky-commerce .ngpp-header            { order: 2; }
	.ngpp-layout--sticky-commerce .ngpp-price-block        { order: 3; }
	.ngpp-layout--sticky-commerce .stock,
	.ngpp-layout--sticky-commerce .ngpp-low-stock          { order: 4; }
	.ngpp-layout--sticky-commerce .ngpp-variation-hint     { order: 5; }
	.ngpp-layout--sticky-commerce form.cart                { order: 6; }
	.ngpp-layout--sticky-commerce .ngpp-trust              { order: 7; }
	.ngpp-layout--sticky-commerce .ngpp-whatsapp           { order: 8; }

	/* Compact stage: this layout sells on numbers, not on the photograph. */
	.ngpp-engine .ngpp-layout--sticky-commerce .ngpp-gallery__image {
		aspect-ratio: auto;
		height: clamp(240px, 62vw, 300px);
	}

	.ngpp-layout--sticky-commerce .ngpp-gallery__thumbs { display: none; }
	.ngpp-layout--sticky-commerce .ngpp-gallery__dots   { display: flex; }

	/* Dense specification tables rather than roomy ones. */
	.ngpp-layout--sticky-commerce .ngpp-specs__table th,
	.ngpp-layout--sticky-commerce .ngpp-specs__table td {
		padding-block: var(--ngpp-s2);
		font-size: var(--ngpp-t-micro);
	}

	.ngpp-layout--sticky-commerce .ngpp-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* ---------------------------------------------------------------------
	 * 2. GUIDED CONFIGURATOR - the wizard
	 *
	 * The choice is the page. The gallery shrinks to a reference thumbnail,
	 * the steps fill the screen one at a time, and Back/Continue is pinned to
	 * the bottom so the customer never hunts for it.
	 * ------------------------------------------------------------------ */

	.ngpp-layout--guided-configurator .ngpp-configurator__media { order: 1; }
	.ngpp-layout--guided-configurator .ngpp-configurator__panel { order: 2; }

	.ngpp-layout--guided-configurator .ngpp-configurator__panel {
		display: flex;
		flex-direction: column;
		gap: var(--ngpp-s3);
		padding: 0;
		border: 0;
		background: transparent;
	}

	.ngpp-layout--guided-configurator .ngpp-header   { order: 1; }
	.ngpp-layout--guided-configurator .ngpp-steps    { order: 2; }
	.ngpp-layout--guided-configurator .ngpp-configurator__progress { order: 3; }
	.ngpp-layout--guided-configurator .ngpp-configurator__form     { order: 4; }
	.ngpp-layout--guided-configurator .ngpp-summary-card           { order: 5; }

	/* Reference-sized, not hero-sized. */
	.ngpp-engine .ngpp-layout--guided-configurator .ngpp-gallery__image {
		aspect-ratio: auto;
		height: clamp(180px, 46vw, 230px);
	}

	.ngpp-layout--guided-configurator .ngpp-gallery__thumbs { display: none; }
	.ngpp-layout--guided-configurator .ngpp-gallery__dots   { display: flex; }

	/* Progress reads as a bar, not a caption. */
	.ngpp-layout--guided-configurator .ngpp-configurator__progress {
		position: sticky;
		inset-block-start: 0;
		z-index: 3;
		padding: var(--ngpp-s2) var(--ngpp-s3);
		border-radius: var(--ngpp-r-pill);
		background: var(--ngpp-deep);
		color: #fff;
		font-size: var(--ngpp-t-micro);
		text-align: center;
	}

	.ngpp-layout--guided-configurator .ngpp-steps__item {
		padding: var(--ngpp-s3);
		font-size: var(--ngpp-t-body);
	}

	/* Wizard controls stay reachable. */
	.ngpp-layout--guided-configurator .ngpp-configurator__nav {
		position: sticky;
		inset-block-end: 0;
		z-index: 4;
		margin-inline: calc(var(--ng-gutter, 16px) * -1);
		padding: var(--ngpp-s3) var(--ng-gutter, 16px)
			calc(var(--ngpp-s3) + env(safe-area-inset-bottom));
		border-block-start: 1px solid var(--ngpp-line);
		background: #fff;
	}

	/* ---------------------------------------------------------------------
	 * 3. MARKETPLACE TRUST - the offer panel
	 *
	 * Price, action and the facts that answer "should I buy here" live in one
	 * bordered panel immediately under the gallery. Delivery and warranty are
	 * visible, not folded into an accordion.
	 * ------------------------------------------------------------------ */

	.ngpp-layout--marketplace-trust .ngpp-marketplace__media { order: 1; }
	.ngpp-layout--marketplace-trust .ngpp-header             { order: 2; }
	.ngpp-layout--marketplace-trust .ngpp-rating-summary     { order: 3; }
	.ngpp-layout--marketplace-trust .ngpp-buybox             { order: 4; }
	.ngpp-layout--marketplace-trust .ngpp-marketplace__about { order: 5; }
	.ngpp-layout--marketplace-trust .ngpp-marketplace__specs { order: 6; }
	.ngpp-layout--marketplace-trust .ngpp-accordions         { order: 7; }

	.ngpp-layout--marketplace-trust .ngpp-buybox__inner {
		padding: var(--ngpp-s4);
		border: 1.5px solid var(--ngpp-line-strong);
		border-radius: var(--ngpp-r-lg);
		box-shadow: var(--ngpp-e2);
	}

	.ngpp-engine .ngpp-layout--marketplace-trust .ngpp-gallery__image {
		aspect-ratio: auto;
		height: clamp(260px, 68vw, 320px);
	}

	/* The delivery facts are the whole point of this layout. */
	.ngpp-layout--marketplace-trust .ngpp-delivery {
		margin-block-start: var(--ngpp-s3);
		border-radius: var(--ngpp-r-md);
		background: var(--ngpp-surface);
	}

	.ngpp-layout--marketplace-trust .ngpp-delivery__row {
		grid-template-columns: minmax(80px, 0.6fr) minmax(0, 1.4fr);
		padding: var(--ngpp-s2) var(--ngpp-s3);
	}

	/* ---------------------------------------------------------------------
	 * 4. VISUAL STORY - the editorial
	 *
	 * Media runs to both screen edges with no frame at all. The buying
	 * controls are a slim inline row rather than a card, and the story bands
	 * are full-bleed. The only layout with no visible container borders.
	 * ------------------------------------------------------------------ */

	.ngpp-layout--visual-story .ngpp-story__media { order: 1; }
	.ngpp-layout--visual-story .ngpp-story__buy   { order: 2; }

	/*
	 * Full-bleed hero only. The story bands were bled too and rendered
	 * -16..391 inside a 375px viewport -- a 16px horizontal scroll -- because
	 * the negative margin stacked with the band's own grid gutter. The bands
	 * keep the page gutter; the hero is the one element that touches both
	 * screen edges.
	 */
	.ngpp-layout--visual-story .ngpp-story__media {
		margin-inline: calc(var(--ng-gutter, 16px) * -1);
	}

	/* Guard: nothing in this layout may push the page sideways. */
	.ngpp-layout--visual-story {
		overflow-x: clip;
	}

	.ngpp-layout--visual-story .ngpp-story__card {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.ngpp-layout--visual-story .ngpp-gallery,
	.ngpp-layout--visual-story .ngpp-gallery__stage {
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.ngpp-engine .ngpp-layout--visual-story .ngpp-gallery__image {
		aspect-ratio: auto;
		height: clamp(340px, 96vw, 440px);
	}

	.ngpp-layout--visual-story .ngpp-gallery__slide { padding: 0; }
	.ngpp-layout--visual-story .ngpp-gallery__thumbs { display: none; }
	.ngpp-layout--visual-story .ngpp-gallery__dots   { display: flex; }

	.ngpp-layout--visual-story .product_title {
		font-size: 26px;
		letter-spacing: -0.02em;
		line-height: 1.15;
	}

	/* Reassurance is a quiet line here, not a grid of boxes. */
	.ngpp-layout--visual-story .ngpp-trust {
		grid-template-columns: minmax(0, 1fr);
		border: 0;
		background: transparent;
		gap: 0;
	}

	.ngpp-layout--visual-story .ngpp-trust__item {
		padding: var(--ngpp-s2) 0;
		border-block-end: 1px solid var(--ngpp-line);
	}

	.ngpp-layout--visual-story .ngpp-story-band__media img { border-radius: 0; }

	/* ---------------------------------------------------------------------
	 * 5. MOBILE CONVERSION - the fastest path
	 *
	 * Least decoration and the shortest distance to Add to cart of the six.
	 * Smallest gallery, no thumbnails, everything explanatory collapsed.
	 * ------------------------------------------------------------------ */

	.ngpp-layout--mobile-conversion .ngpp-mf__head  { order: 1; }
	.ngpp-layout--mobile-conversion .ngpp-mf__media { order: 2; }
	.ngpp-layout--mobile-conversion .ngpp-mf__buy   { order: 3; }
	.ngpp-layout--mobile-conversion .ngpp-mf__info  { order: 4; }

	.ngpp-layout--mobile-conversion .ngpp-stage { gap: var(--ngpp-s3); }

	.ngpp-engine .ngpp-layout--mobile-conversion .ngpp-gallery__image {
		aspect-ratio: auto;
		height: clamp(200px, 52vw, 250px);
	}

	.ngpp-layout--mobile-conversion .ngpp-gallery__thumbs { display: none; }
	.ngpp-layout--mobile-conversion .ngpp-gallery__dots   { display: flex; }

	.ngpp-layout--mobile-conversion .product_title {
		font-size: 18px;
		line-height: 1.35;
		margin-block-end: var(--ngpp-s1);
	}

	.ngpp-layout--mobile-conversion .ngpp-mf__buy {
		padding: var(--ngpp-s3);
		border: 1px solid var(--ngpp-line);
		border-radius: var(--ngpp-r-lg);
	}

	.ngpp-layout--mobile-conversion .ngpp-price-block {
		margin-block: 0 var(--ngpp-s2);
	}

	/* Trust is a single compact line so it costs almost no height. */
	.ngpp-layout--mobile-conversion .ngpp-trust {
		display: flex;
		overflow-x: auto;
		border: 0;
		background: transparent;
		gap: var(--ngpp-s2);
		scrollbar-width: none;
	}

	.ngpp-layout--mobile-conversion .ngpp-trust::-webkit-scrollbar { display: none; }

	.ngpp-layout--mobile-conversion .ngpp-trust__item {
		flex: 0 0 auto;
		max-width: 62vw;
		border: 1px solid var(--ngpp-line);
		border-radius: var(--ngpp-r-pill);
		padding: var(--ngpp-s2) var(--ngpp-s3);
	}

	.ngpp-layout--mobile-conversion .ngpp-trust__text span { display: none; }

	/* ---------------------------------------------------------------------
	 * 6. SOCIAL PROOF - evidence first
	 *
	 * The only layout that puts other customers above the product photo: the
	 * rating band and the review-photo strip come first, then the gallery,
	 * then the purchase.
	 * ------------------------------------------------------------------ */

	/*
	 * social-proof-setup.css already flattens the two stage wrappers and the
	 * card with `display: contents`, so every block below is a direct flex
	 * item of the stage. This list is therefore exhaustive on purpose: a gap
	 * anywhere lets the older ordering in that file win for that one element,
	 * which is exactly how the gallery ended up last on the page (measured at
	 * 1227px, below the trust cards) while everything else obeyed this file.
	 */
	.ngpp-layout--social-proof-setup .ngpp-social__media,
	.ngpp-layout--social-proof-setup .ngpp-social__buy,
	.ngpp-layout--social-proof-setup .ngpp-social__card {
		display: contents;
	}

	.ngpp-layout--social-proof-setup .ngpp-brand                { order: 1; }
	.ngpp-layout--social-proof-setup .product_title             { order: 2; }
	.ngpp-layout--social-proof-setup .ngpp-social__proof        { order: 3; }
	.ngpp-layout--social-proof-setup .ngpp-gallery              { order: 4; }
	.ngpp-layout--social-proof-setup .ngpp-price-block          { order: 5; }
	.ngpp-layout--social-proof-setup .stock,
	.ngpp-layout--social-proof-setup .ngpp-low-stock            { order: 6; }
	.ngpp-layout--social-proof-setup .ngpp-variation-hint       { order: 7; }
	.ngpp-layout--social-proof-setup form.cart                  { order: 8; }
	.ngpp-layout--social-proof-setup .ngpp-summary-extras       { order: 9; }

	/*
	 * SKU and category now render here (see SocialProofSetup::render_stage()),
	 * between the buying decision and the reassurance row. Without an explicit
	 * order it defaults to 0 and jumps back to the very front of the flex
	 * container -- the same class of bug that once sent the gallery to the
	 * bottom of this layout.
	 */
	.ngpp-layout--social-proof-setup .product_meta              { order: 10; }
	.ngpp-layout--social-proof-setup .ngpp-trust                { order: 11; }
	.ngpp-layout--social-proof-setup .ngpp-whatsapp             { order: 12; }
	.ngpp-layout--social-proof-setup .ngpp-wishlist,
	.ngpp-layout--social-proof-setup .ngpp-compare,
	.ngpp-layout--social-proof-setup .ngpp-share                { order: 13; }
	.ngpp-layout--social-proof-setup .ngpp-social__review-media { order: 14; }

	.ngpp-layout--social-proof-setup .ngpp-social__proof {
		margin: 0;
		padding: var(--ngpp-s3);
		border: 0;
		border-radius: var(--ngpp-r-md);
		background: var(--ngpp-surface);
	}

	.ngpp-engine .ngpp-layout--social-proof-setup .ngpp-gallery__image {
		aspect-ratio: auto;
		height: clamp(250px, 66vw, 310px);
	}

	.ngpp-layout--social-proof-setup .ngpp-gallery__thumbs { display: none; }
	.ngpp-layout--social-proof-setup .ngpp-gallery__dots   { display: flex; }

	/* Customer photos scroll horizontally, high on the page. */
	.ngpp-layout--social-proof-setup .ngpp-social__review-media {
		margin-block-start: var(--ngpp-s3);
		padding-block-start: var(--ngpp-s3);
	}

	.ngpp-layout--social-proof-setup .ngpp-review-media__button {
		width: 72px;
		height: 72px;
	}

	.ngpp-layout--social-proof-setup .ngpp-rating-summary__score {
		font-size: 22px;
	}
}

/* -------------------------------------------------------------------------
 * Very small phones: 320-360px.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Share controls were the last sub-44px targets on a phone. */
	.ngpp-engine .ngpp-layout .ngpp-share__link,
	.ngpp-engine .ngpp-layout .ngpp-share__copy {
		min-height: 44px;
		padding-inline: var(--ngpp-s4);
	}
}

@media (max-width: 360px) {
	.ngpp-engine .ngpp-layout .ngpp-trust {
		grid-template-columns: minmax(0, 1fr);
	}

	.ngpp-engine .ngpp-layout form.cart .quantity .qty {
		width: 68px;
	}

	.ngpp-engine .ngpp-layout .product_title {
		font-size: 19px;
	}
}