/* =====================================================================
   Brina Marketplace — Homepage V2 (Stage 2: desktop layout foundation)
   Loaded on the front page only. Geometry only: no colours, borders,
   shadows or typography live here (those belong to later stages).

   Structure (classes set on page 32 Bricks elements):
     .brina-home-section    full-width section: owns the background and the
                            vertical rhythm, no horizontal padding
     .brina-home-container  centred content box aligned with the LOCKED
                            header rows (max-width 1680px, 20px gutter)
     .brina-home-rail       product rail grid (6 / 7 / 8 columns)
     .brina-home-dept-grid  Shop by Department grid
     .brina-home-deals      Today's Deals tile grid (the deals container)

   Scope: body.home at >= 1201px (above Bricks' tablet_landscape_
   breakpoint). Tablet and phone keep their existing Bricks layout.

   Bricks writes element styles as #brxe-<id> rules. ":not(#brina-v2)"
   adds one ID of specificity so these rules win without !important.
   Nothing here targets the hero (#brxe-rrmeoe and descendants) or the
   locked Trust / Support Strip (#brxe-tmqxli and its children).
   ===================================================================== */

@media (min-width: 1201px) {
	body.home {
		--brina-home-max: 1680px;      /* = header --bh-max */
		--brina-home-gutter: 20px;     /* = header --bh-gutter */
		--brina-home-module-gap: 40px; /* space between modules */
		--brina-home-grid-gap: 16px;
	}

	/* Section: full-width band, half the module gap above and below, so
	   two adjacent sections are exactly one module gap apart. */
	body.home .brina-home-section:not(#brina-v2) {
		padding: calc(var(--brina-home-module-gap) / 2) 0;
	}

	/* Content container: the single horizontal gutter. */
	body.home .brina-home-container:not(#brina-v2) {
		width: 100%;
		max-width: var(--brina-home-max);
		margin: 0 auto;
		padding-left: var(--brina-home-gutter);
		padding-right: var(--brina-home-gutter);
	}

	/* Product rails: one row; cards fill their track. Surplus cards are
	   hidden rather than wrapping to a second row. */
	body.home .brina-home-rail:not(#brina-v2) {
		grid-template-columns: repeat(var(--brina-rail-cols, 6), minmax(0, 1fr));
		gap: var(--brina-home-grid-gap);
		justify-content: stretch;
		padding-bottom: 0;
	}

	body.home .brina-home-rail:not(#brina-v2) > * {
		max-width: none;
		justify-self: stretch;
	}

	/* Shop by Department: one column per card (7 today), 8 as soon as an
	   8th card exists. */
	body.home .brina-home-dept-grid:not(#brina-v2) {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: var(--brina-home-grid-gap);
		justify-content: stretch;
		padding-bottom: 0;
	}

	body.home .brina-home-dept-grid:not(#brina-v2):has(> :nth-child(8)) {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	body.home .brina-home-dept-grid:not(#brina-v2) > * {
		max-width: none;
		justify-self: stretch;
	}

	body.home .brina-home-dept-grid:not(#brina-v2) > :nth-child(n+9) {
		display: none;
	}

	/* Today's Deals: same content edges; the section provides the rhythm. */
	body.home .brina-home-deals:not(#brina-v2) {
		margin-bottom: 0;
	}
}

/* Product rail density. */
@media (min-width: 1201px) and (max-width: 1365.98px) {
	body.home { --brina-rail-cols: 6; }

	body.home .brina-home-rail:not(#brina-v2) > :nth-child(n+7) {
		display: none;
	}
}

@media (min-width: 1366px) and (max-width: 1599.98px) {
	body.home { --brina-rail-cols: 7; }

	body.home .brina-home-rail:not(#brina-v2) > :nth-child(n+8) {
		display: none;
	}
}

@media (min-width: 1600px) {
	/* Up to 8 cards. Rails currently receive 7 products (Stage 1 slots), so
	   the 8th track stays empty until the allocation is raised to 8. */
	body.home { --brina-rail-cols: 8; }

	body.home .brina-home-rail:not(#brina-v2) > :nth-child(n+9) {
		display: none;
	}
}