/**
 * The row is a carousel, as it is on live.
 *
 * Live runs this section on a swiper: seven tiles abreast from 1100, three
 * between 750 and 1099, and three and a half below that — the half-tile is
 * what tells a reader there is more to the right. Its gutter is 16, and 6 on a
 * phone.
 *
 * No swiper here: a scroll-snap track scrolls, swipes and snaps on its own,
 * and view.js adds only the two arrows. The per-view count is a variable so
 * the three breakpoints say one thing each.
 */
.gp-category-icons {
	position: relative;
	--gp-per: var(--gp-columns, 7);
	--gp-gap: 16px;
}

@media (max-width: 1099px) {
	.gp-category-icons { --gp-per: 3; }
}

/* Small laptops and the wider tablets: five abreast from 992 up to the width
   at which all seven fit. Stated after the rule above so it wins on order —
   the two weigh the same. */
@media (min-width: 992px) and (max-width: 1099px) {
	.gp-category-icons { --gp-per: 5; }
}

@media (max-width: 749px) {
	.gp-category-icons {
		--gp-per: 3.5;
		--gp-gap: 6px;
	}
}

/* Each icon carries a 3px ring drawn 3px outside its circle, so the artwork
   reaches 6px past its own box on every side. A scroll container clips both
   axes — asking for overflow-x makes the cross axis auto as well — and the
   ring was being cut off flat across the top. The track is given that 6px back
   as padding and pulled the same amount out again with a negative margin, so
   the ring has room inside the scroll box and nothing on the page moves. */
.gp-category-icons__list {
	display: flex;
	gap: var(--gp-gap);
	/* 8 rather than the ring's own 6: an outline drawn exactly on the edge of
	   a scroll box still loses a hair to rounding on a fractional zoom. */
	margin: -8px;
	padding: 8px;
	list-style: none;
	overflow-x: auto;
	/* A swipe that runs out of row should not start scrolling the page. */
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	/* The tiles start 8px inside the box now, so a snap lands on the tile, not
	   on the padding in front of it. */
	scroll-padding-inline: 8px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gp-category-icons__list::-webkit-scrollbar { display: none; }

/* n tiles and n-1 gutters share the width. */
.gp-category-icons__item {
	flex: 0 0 calc((100% - (var(--gp-per) - 1) * var(--gp-gap)) / var(--gp-per));
	min-inline-size: 0;
	scroll-snap-align: start;
}

/* ---------- arrows ---------- */

/* Centred on the artwork rather than on the tile: the label below it runs to
   one line or two depending on the name, and an arrow that moves with it reads
   as unsteady. 134 is the circle, 3 the ring, 3 its offset. */
.gp-category-icons__controls {
	position: absolute;
	inset-block-start: calc(8px + 134px / 2);
	inset-inline: 0;
	z-index: 2;
	pointer-events: none;
}

/* Centred the way the product rails centre theirs: half the disc's height as
   a negative margin, not a transform. The shared stylesheet animates transform
   to slide the disc in, and a transform stated here would be overwritten the
   moment it did. */
.gp-category-icons__button {
	position: absolute;
	inset-block-start: 0;
	margin-block-start: -22px;
	pointer-events: auto;
}

.gp-category-icons__button.gp-carousel-nav--prev { inset-inline-start: 8px; }
.gp-category-icons__button.gp-carousel-nav--next { inset-inline-end: 8px; }

/* Live hides them from 1100 up: the seven fit, so there is nothing to scroll.
   view.js reaches the same answer by measuring the track, and this states it
   outright so the controls cannot appear on a wide screen even if a row is
   given more tiles than it has room for. */
@media (min-width: 1100px) {
	.gp-category-icons__controls { display: none; }
}

/* The circle shrinks with its tile below 1100, so the arrows follow it. A
   44px disc over a 103px tile covers most of the artwork, so on a phone the
   control comes down to 34 and sits hard against the edge — enough to read as
   a control, little enough to leave the icon underneath legible. */
@media (max-width: 749px) {
	.gp-category-icons__controls { inset-block-start: calc(8px + 104px / 2); }

	.gp-category-icons__button.gp-carousel-nav--prev { inset-inline-start: 4px; }
	.gp-category-icons__button.gp-carousel-nav--next { inset-inline-end: 4px; }
}



.gp-category-icons__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

/* 134px of artwork inside a 3px ring, as on the live site. The ring is an
   outline rather than a border so it does not change the circle's size, and
   its colour comes from the item because it belongs to the artwork. */
.gp-category-icons__media {
	display: grid;
	place-items: center;
	inline-size: 134px;
	/* Square by ratio, not by a fixed height: the width shrinks with the
	   column on narrow screens and a fixed height turned the circle into an
	   oval. */
	max-inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	outline: 3px solid var(--gp-ring, var(--wp--preset--color--border));
	outline-offset: 3px;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.gp-category-icons__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.gp-category-icons__initial {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	color: var(--wp--preset--color--brand-green);
	line-height: 1;
}

/* The live ring does not move, grow or recolour on hover — the whole tile is
   static under the pointer. Animating outline-offset here made the ring snap
   outward, because outline-offset is not an interpolable property in every
   engine and the jump reads as a glitch rather than a hover. */

/* Keyboard focus still needs a visible ring, but it recolours in place: no
   geometry change, so nothing jumps. */
.gp-category-icons__link:focus-visible .gp-category-icons__media {
	outline-color: var(--wp--preset--color--brand-green);
}

.gp-category-icons__label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* theme.json underlines every link on hover; live's category tile draws no
   rule at all, so the label would pick one up that live does not have. */
.gp-category-icons__link:hover { text-decoration: none; }

/* ---------- phone spacing ---------- */

/* Live's phone tile is 104 wide holding a 96 circle, with the ring drawn tight
   against the circle rather than 3px off it — so 4px of tile either side plus
   the 6px gutter is what holds two rings apart. Ours filled its tile edge to
   edge and the ring then reached 6px into the gutter, so adjacent rings
   overlapped by 6 and the row read as one joined strip.

   Stated at the end of the file rather than up in the carousel block: the base
   circle rule below it is one class too, and a tie goes to whichever comes
   last. */
@media (max-width: 749px) {
	.gp-category-icons__media {
		inline-size: calc(100% - 8px);
		outline-offset: 0;
	}
}