/* =========================================================================
   LIBERATION — SITE LAYER
   Loaded on every page: storefront.css is only enqueued on WooCommerce
   screens, and the header, the footer and the home page live outside of it.

   1. Section layout on the home page
   2. Side gutter for phones and tablets
   ========================================================================= */


/* =========================================================================
   1. HOME — SECTION LAYOUT
   Every section is a 1100px flex column with align-items:flex-start, so its
   blocks shrank to their own content and sat pinned to the left: the section
   headings looked centered inside their own box while that box hugged the
   left edge, and the trust strip only reached 734px of the 1100 available.
   Stretching those blocks to the full width lets their own centering work
   against the section, and lines every element up on the same axis.
   ========================================================================= */
body.lp-storefront #brxe-1byfqn,   /* "Best Sellers / Featured Research Peptides" */
body.lp-storefront #brxe-o4l5sf,   /* "Browse / Shop by Category"                 */
body.lp-storefront #brxe-u0ykc5,   /* trust strip: the four badges                */
body.lp-storefront #brxe-0kvjhh {  /* the three category cards                    */
	width: 100%;
	align-self: stretch;
}

/* The intro line keeps a readable measure instead of running the full 1100px. */
body.lp-storefront #brxe-y9kk21 {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}

/* Trust strip: the four badges spread across the section instead of bunching
   up on the left. Phones keep the 2x2 wrap they already had. */
@media (min-width: 761px) {
	body.lp-storefront #brxe-u0ykc5 {
		justify-content: space-between;
	}
}

/* Category cards: three cards share the row evenly instead of leaving a
   330px hole on the right. Phones keep them stacked full width — sharing a
   390px row would leave each card 97px wide. */
@media (min-width: 761px) {
	body.lp-storefront #brxe-0kvjhh > * {
		flex: 1 1 0;
	}
}


/* =========================================================================
   2. SIDE GUTTER (phones and tablets)
   Bricks containers are 1100px wide with max-width:100%, so on anything
   narrower they run edge to edge: the logo was clipped by the left edge and
   the home content touched both sides of the screen. Measured live, the gap
   ran from 1100px all the way down to 390px, iPad portrait included.

   The 8 containers on the home page are all top-level — none nested inside
   another — so the gutter is never applied twice.
   ========================================================================= */
@media (max-width: 1136px) {
	body.lp-storefront .brxe-container {
		padding-left: 18px;
		padding-right: 18px;
	}
	/* These two already carry their own margin: the red bar 16px, footer 32px. */
	body.lp-storefront #brxe-n1c25y,
	body.lp-storefront #brxe-10kyaw {
		padding-left: 0;
		padding-right: 0;
	}

	/* WooCommerce screens (shop, category, single product). storefront.css
	   already gutters these below 760px; on tablets they were still flush. */
	body.lp-storefront main.site-main {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Cart, checkout and account have no <main class="site-main">: their
	   content hangs straight off #brx-content, so they miss the rule above. */
	body.lp-storefront.woocommerce-cart #brx-content,
	body.lp-storefront.woocommerce-checkout #brx-content,
	body.lp-storefront.woocommerce-account #brx-content {
		padding-left: 18px;
		padding-right: 18px;
	}
	/* The Woo block grid carries -8px side margins, which pushed 8px of
	   content off-screen (horizontal scrollbar on cart and checkout). */
	body.lp-storefront .wc-block-grid__products {
		margin-left: 0;
		margin-right: 0;
	}

	/* Product card: its single auto column could not shrink below the
	   min-content width of the image (179px), so on a 158px card the photo
	   was cropped 21px on the right by the card's overflow:hidden.
	   minmax(0,1fr) lets the column follow the card instead. */
	body.lp-storefront ul.products li.product {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Trust strip on phones only: the gutter narrows each column and
   "Discreet Shipping" wrapped onto two lines. Tightening the icon gap
   (14 -> 10px) fits all four labels back on a single line. */
@media (max-width: 760px) {
	body.lp-storefront #brxe-pxzg2j > .brxe-div > .brxe-div {
		gap: 10px;
	}
}