/**
 * Product rails.
 *
 * Shared by the homepage rows and the cart page's featured collection — see
 * inc/assets.php for where it loads. It lives on its own rather than inside
 * home.css because the cart needs the rail without the rest of the homepage.
 */

/* A horizontal rail rather than a wrapping grid.
   The live site uses a JS carousel for these rows; scroll-snap does the same
   job natively, so there is no slider library on the page. The Product
   Collection block still lays out a grid, so the column flow is flipped here
   rather than fought in the block's own attributes. */
.gp-product-rail .wc-block-product-template {
	display: grid;
	grid-auto-flow: column;
	/* A FIXED track width, not minmax(..., 1fr). Inside a scrolling grid the
	   1fr max resolves against the container, so the tracks divide the visible
	   width between them and five cards squeeze to a sliver instead of
	   overflowing into a scroll. */
	/* Four per view, matching the live rows exactly: the live container is
	   1240px and its cards are 298px with a 16px gap, which is this same
	   division. A clamp cannot hold that relationship as the container moves. */
	grid-auto-columns: calc((100% - 3 * var(--wp--preset--spacing--40)) / 4);
	grid-template-columns: none !important;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--wp--preset--spacing--10);
	overscroll-behavior-x: contain;
	/* Inline only. The block axis is set once, below, and a physical
	   shorthand here would shadow that logical declaration. */
	margin-inline: 0;
	list-style: none;
	/* The live rows are a carousel with arrows and no visible scrollbar; a
	   scrollbar sitting under the cards is the one thing that gives this away
	   as a scroller rather than a carousel. The arrows come from view.js. */
	scrollbar-width: none;
}

.gp-product-rail .wc-block-product-template::-webkit-scrollbar { display: none; }

/* overflow-x: auto forces overflow-y to auto as well, so anything the card
   paints outside its border box is shaved top and bottom without room inside
   the scroll box. The negative margin puts the row back where it was.

   20px, not 4px: 4px cleared the 1px border but not the hover state, which is
   a 0 4px 16px lift over a 2px rise — 20px below the card and 14px above. The
   shadow was being cut off flat along the scroll box's edge.

   Two classes on the wrapper, not one, because the block margin is spoken for
   twice already and a single class loses both fights: WooCommerce zeroes the
   top through an empty-notices adjacency selector worth three classes, and
   WordPress's own flow-layout CSS zeroes the bottom from a :last-child rule
   that ties on specificity and is printed later in the page. */
.gp-product-rail.wp-block-woocommerce-product-collection .wc-block-product-template {
	padding-block: 20px;
	margin-block: -20px;
}

/* The arrows sit over the row's edges, so the row is their containing block. */
.gp-product-rail { position: relative; }

/* Placement only. The disc, the glyph, the hover and the slide-in come from
   the shared carousel control in the helper plugin — see
   assets/css/carousel-nav.css there — so that every carousel on the site
   draws the same button.

   The disc straddles the rail edge: its centre sits 13px outside, which puts
   its near edge 35px out. The vertical centring is written into the transform
   the shared rule animates, so it is stated on both states rather than here. */
/* Doubled: the rail is a flow group, so WordPress hands every child after the
   first a 24px top margin and prints that rule after this file — which is what
   the negative half-height here has to beat to centre the disc on the row. */
.gp-rail-nav.gp-rail-nav {
	position: absolute;
	inset-block-start: 50%;
	margin-block-start: -22px;
	z-index: 2;
}

/* Inside the row by default. Hanging the disc over the edge needs a gutter to
   hang into, and below the width where there is one the page just gains a
   horizontal scrollbar. */
.gp-rail-nav--prev { inset-inline-start: 8px; }
.gp-rail-nav--next { inset-inline-end: 8px; }

/*
 * Wide enough to hang over: the disc's centre sits 13px outside the row, which
 * puts its near edge 35px out — the live figure.
 *
 * 1352 is where the gutter first covers that 35px: the row is 1280 wide, so
 * the gutter is (100vw - 1280) / 2 and 35px of it needs 1350.
 */
@media (min-width: 1352px) {
	.gp-rail-nav--prev { inset-inline-start: -35px; }
	.gp-rail-nav--next { inset-inline-end: -35px; }
}

@media (max-width: 767px) {
	/* Doubled: the shared carousel stylesheet ships after this one and sets
	   display on the same single class, so a plain rule here loses to it. */
	.gp-rail-nav.gp-rail-nav { display: none; }
}

/* The grid item must fill its track and the stretch must reach the card.
   WooCommerce's product template leaves the <li> at its content width, and the
   card sits another level down inside the template-part wrapper, so both links
   in the chain need to pass the width through. */
.gp-product-rail .wc-block-product-template.is-flex-container > li,
.gp-product-rail .wc-block-product-template > li {
	scroll-snap-align: start;
	/* !important because WooCommerce's own flex-container layout sizes these
	   items as a percentage of the row. Inside a fixed-width rail track that
	   percentage collapses the card to about 48px. */
	inline-size: 100% !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	display: flex;
}

.gp-product-rail .wc-block-product-template > li > .wp-block-template-part {
	display: flex;
	flex: 1;
	min-inline-size: 0;
}

/* Three per view across the tablet range, 768 to 1023: four cards in that
   width leave each one around 230 and the row reads cramped. From 1024 the
   four at the top of this file take over again, and below 768 the phone rule
   further down uses a fixed card width instead. */
@media (min-width: 768px) and (max-width: 1023px) {
	.gp-product-rail .wc-block-product-template {
		grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--40)) / 3);
	}
}

/* Two per view on a phone.
 *
 * This was a fixed card — clamp(170px, 55vw, 200px) — which at 390px of device
 * resolved to 200px against a 360px track: one card and 144px of the next, cut
 * mid-button. The other two breakpoints in this file divide the track by the
 * number of cards they want, and this one now does the same, so a card is
 * whatever half the row is rather than a number that happens to suit one
 * screen width.
 *
 * The divisor is the gap between the two, so the pair fills the track exactly:
 * 360 - 16 = 344, 172 each. */
@media (max-width: 767px) {
	.gp-product-rail .wc-block-product-template {
		grid-auto-columns: calc((100% - var(--wp--preset--spacing--40)) / 2);
	}
}

/* ---------- featured collection (cart) ---------- */

/* Live closes the cart with this band: full width, its own off-white ground,
   60px of air above and below. */
.gp-featured-rail {
	padding-block: 60px;
	background: var(--wp--preset--color--surface-alt);
}

/* Two classes: the constrained layout WordPress prints for this group zeroes
   the margins of its children, and a single class ties with it. */
.gp-featured-rail .gp-featured-rail__title {
	/* 32px, the nearest step to the 35px the live band leaves between its
	   heading and the first card. */
	margin: 0 0 var(--wp--preset--spacing--60);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.1;
	color: #000;
}

/* The cart band keeps its arrows up in the heading row, top right, where the
   live one puts them. */
.gp-featured-rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

/* Two classes, for the same reason as the slot below: WordPress prints its
   own block-gap margin for this group after this file. 32px is the nearest
   step to the 35px the live band leaves under its heading. */
.gp-featured-rail > .gp-featured-rail__head {
	margin-block-end: var(--wp--preset--spacing--60);
}

.gp-featured-rail__nav {
	display: flex;
	gap: 8px;
	flex: none;
}

/* WordPress gives every block after the first in a flow group a 24px top
   margin, and prints that rule after this file. Three classes to outrank it:
   the slot is a flex item in the heading row, where the margin pushed the
   discs below the heading instead of beside it. */
.gp-featured-rail .gp-featured-rail__head > .gp-featured-rail__nav {
	margin-block: 0;
}

.gp-featured-rail__nav:empty { display: none; }

/* The row owns the gap under the heading once the heading sits inside it. */
.gp-featured-rail .gp-featured-rail__head .gp-featured-rail__title { margin-block-end: 0; }

.gp-featured-rail__nav .gp-rail-nav.gp-rail-nav {
	position: static;
	inset: auto;
	/* The slot is a block group as far as WordPress is concerned, so its
	   second child is handed a 24px top margin — which here dropped the next
	   arrow a row below the previous one. The negative top margin the
	   absolutely placed arrows use to centre themselves goes with it. */
	margin: 0;
}

@media (max-width: 780px) {
	.gp-featured-rail { padding-block: 40px; }
	.gp-featured-rail__title { font-size: 24px; }
}