/*
 * Layered on top of assets/style.css, which is kept byte-for-byte as recovered.
 * Loaded after it so these rules win without editing the original file.
 */
/* ---------------------------------------------------------------------------
   Responsive product archive grid.

   The recovered stylesheet pins the WooCommerce loop to
   `grid-template-columns: repeat(5, 1fr) !important` at every viewport width,
   with no media queries. Below roughly 1000px that pushes the grid wider than
   the screen and the page scrolls sideways — the source site does this too.

   These breakpoints mirror the ones the theme already uses for its homepage
   row sliders (1080 / 860 / 520), so the archive now steps down in the same
   places the rest of the design does. Desktop layout at >=1081px is unchanged:
   still five columns.
   --------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.gds-wc ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 860px) {
	.gds-wc ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 620px) {
	.gds-wc ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Two columns hold on every common phone width (360-430px): at 375px that is a
   146px card, which still fits the 160px-tall image well. Only genuinely tiny
   viewports drop to one. */
@media (max-width: 340px) {
	.gds-wc ul.products { grid-template-columns: 1fr !important; }
}

/* The "pin the first card to row 1 / column 1" rule in the recovered stylesheet
   is written for a 5-column grid; it stays valid at every column count, but the
   dense auto-flow needs the explicit start to remain unset on later items. */
@media (max-width: 1080px) {
	.gds-wc ul.products li.product:first-child {
		grid-column-start: 1 !important;
		grid-row-start: 1 !important;
	}
}

/* ---------------------------------------------------------------------------
   Grid blowout on the single product layout.

   `.gds-product-grid` uses `grid-template-columns: 1fr`, which resolves to
   `minmax(auto, 1fr)`. The `auto` minimum is the item's min-content width, so
   the column refuses to shrink below roughly 300px and the layout pushes past
   very narrow viewports. `minmax(0, 1fr)` lets it shrink; `min-width: 0` on the
   children lets their own content wrap rather than setting the floor.
   --------------------------------------------------------------------------- */

@media (max-width: 860px) {
	.gds-product-grid { grid-template-columns: minmax(0, 1fr); }
	.gds-product-grid > * { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Row-slider arrows.

   `.gds-row-prev/-next` sit at -14px, i.e. deliberately outside the slider.
   That works while the 1280px container is centred with margin to spare, but
   once the viewport is narrow enough that the container runs edge to edge the
   arrows hang past it and the whole page scrolls sideways by 14px.

   The theme already defines an inside position (4px) for its own narrow
   breakpoint; it is reused here from the width at which the container stops
   having 14px of margin (1280 + 2 x 14 = 1308), rounded to 1320.
   --------------------------------------------------------------------------- */

@media (max-width: 1320px) {
	.gds-row-prev { left: 4px; }
	.gds-row-next { right: 4px; }
}


/* Indicative-currency note shown when a non-base currency is selected.
   Conversion is display-only; the cart and order are in the base currency. */
.gds-currency-note {
	margin: -4px 0 12px;
	font-size: .82rem;
	line-height: 1.4;
	color: #5d6b7a;
}