/* =========================================================================
   browse.css — "რას ეძებთ?", the category browse band on the front page.

   The reference is the old bedishop.ge's grouped-category block: white cards
   two across, each one a department heading with a "see all" link beside it and
   a row of tinted subcategory tiles under it.

   THE TINT IS THE PART THAT MAKES IT READ AS A FAMILY. Four pastels cycle
   across the cards rather than being chosen per category — which is what the
   reference does, and why its cards look like one component rather than four
   labels. All four are the accent, the navy, the ink and a warm neutral taken
   down to a wash; none of them is a colour this theme does not already own.
   ========================================================================= */

.bedi-browse {
	margin-block: var(--bedi-space-8);
}

.bedi-browse__title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--bedi-space-5);
}

.bedi-browse__grid {
	display: grid;
	gap: var(--bedi-space-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * ONE COLUMN ON A CATEGORY ARCHIVE, AND THE REASON IS THE DATA.
 *
 * Two columns only works when the cards are roughly the same height. On the
 * front page they are — four cards, four tiles each, chosen. On an archive the
 * card holds every child there is, and on this shop that is eleven for
 * კომპიუტერის ნაწილები and none at all for ჭკვიანი სახლი. Side by side that is
 * a wall with a hole in it; stacked it is a list.
 */
.bedi-browse__grid[data-bedi-cols="1"] {
	grid-template-columns: minmax(0, 1fr);
}

/* --- the card --------------------------------------------------------- */

.bedi-browse__card {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	display: flex;
	flex-direction: column;
	padding: var(--bedi-space-5);
	row-gap: var(--bedi-space-5);
}

.bedi-browse__head {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
	justify-content: space-between;
}

.bedi-browse__name {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-lg);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	min-inline-size: 0;
}

/*
 * The "see all" link keeps its label on a desk and drops to the arrow alone on
 * a phone. The heading beside it is a real category name in Georgian — twice
 * the set width of the English this layout was drawn in — and the two of them
 * on one line is what forces the heading to wrap at narrow widths.
 */
.bedi-browse__all {
	align-items: center;
	color: var(--bedi-ink-muted);
	column-gap: var(--bedi-space-2);
	display: inline-flex;
	flex: none;
	font-size: var(--bedi-text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-browse__all:hover {
	color: var(--bedi-accent-strong);
}

.bedi-browse__allicon {
	align-items: center;
	background-color: var(--bedi-accent);
	border-radius: var(--bedi-radius-round);
	block-size: 24px;
	color: #FFFFFF;
	display: inline-flex;
	flex: none;
	inline-size: 24px;
	justify-content: center;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-browse__all:hover .bedi-browse__allicon {
	background-color: var(--bedi-accent-strong);
}

/* --- the tiles -------------------------------------------------------- */

.bedi-browse__tiles {
	display: grid;
	gap: var(--bedi-space-4);
	/*
	 * THE TRACK COUNT FOLLOWS THE CARD, AND ONE RULE FOR BOTH DID NOT WORK.
	 *
	 * `auto-fill, minmax(140px, 1fr)` reads like it covers every case and it
	 * quietly broke the front page: a two-up card is 630px, less 40 of padding
	 * is 590, and four tracks of 140 plus three 16px gaps is 608. Eight pixels
	 * short, so auto-fill dropped to three and the four-tile cards wrapped one
	 * tile onto a second row.
	 *
	 * So the two-column card states four outright, and only the full-width
	 * archive card — which has room, and holds as many children as exist —
	 * fills automatically.
	 */
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * THE TILES SIT UNDER THE HEADING, NOT AT THE FOOT OF THE CARD.
 *
 * `margin-block-start: auto` was here to line the image rows up across the
 * gutter when one heading wrapped to two lines. It does that, and it also
 * pushes a SHORT card's tiles to the bottom: აქსესუარები has two tiles beside a
 * card with four, so its pair sank to the floor under a card's worth of empty
 * blue. The alignment it bought was worth less than the hole it made.
 */
/*
 * A FLOOR ON THE TILE, NOT A FIXED COUNT — AND THE FIXED COUNT IS WHAT BROKE.
 *
 * `repeat(6, 1fr)` is six columns of whatever is going, and what is going
 * depends on the filter sidebar: the product column is 944px at 1400, so six
 * tracks came out at 131px. That was fine when the tile was a picture with a
 * caption underneath. It is not fine now the name lives INSIDE the tile —
 * measured, "კაბელები & ადაპტერები" wrapped to three lines and sat on top of
 * the photograph.
 *
 * auto-fill with a 170px floor gives six columns wherever there is room for
 * six and fewer where there is not, and a category with two children gets two
 * tiles at their proper size rather than two slivers in a six-track grid.
 */
.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__tiles {
	/*
	 * SIX, STATED, AND THE TILE SHRINKS TO FIT RATHER THAN THE COUNT CHANGING.
	 *
	 * auto-fill with a 160px floor gave five in the 944px product column and
	 * six only on a wide screen, so the row's rhythm changed with the window.
	 * Six tracks of (944 - 5x16) / 6 is 144px, which is enough for a tile that
	 * carries its name at 13px and its photograph in the corner — see the size
	 * reductions below, which is what "make the components smaller" means here.
	 */
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * FOUR ON A DESKTOP, WHATEVER THE MARKUP CARRIES.
 *
 * front-page.php now asks for every child so the phone's strip can be honest
 * about how many there are. This card is a single row of four and always has
 * been: the fifth tile onward would start a second row, the four cards would
 * stop lining up with each other, and the band would grow by however many
 * subcategories the biggest department happens to have.
 *
 * Hidden rather than not rendered, because one template feeds both and the
 * difference between them is a viewport, which only CSS knows.
 */
@media (min-width: 48em) {
	.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tile:nth-child(n+5) {
		display: none;
	}
}

/* =========================================================================
   THE FRONT PAGE KEEPS THE ORIGINAL TILE.

   The name-inside/photo-in-the-corner tile was built for the archive, where
   one block sits alone in a wide column and five tiles get 176px each. The
   front page is four of these blocks two-up: a tile there is 135px, and the
   whole point of that design — a name reading across the top with a large
   product shot under it — does not survive at that size.

   So this is the earlier arrangement, restored: a tinted square with the photo
   centred in it and the name below. Same markup, reordered — the label is
   first in the source because a screen reader should hear the name before the
   image it describes, and `order` moves it under the box visually.
   ====================================================================== */

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tilelink {
	aspect-ratio: auto;
	background-color: transparent;
	border-radius: 0;
	display: grid;
	overflow: visible;
	padding: 0;
	position: static;
	row-gap: var(--bedi-space-2);
}

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tilelink:hover {
	box-shadow: none;
	transform: none;
}

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__thumb {
	align-items: center;
	aspect-ratio: 1;
	background-color: var(--bedi-tint, var(--bedi-bg-2));
	border-radius: var(--bedi-radius-lg);
	display: flex;
	inline-size: auto;
	inset: auto;
	justify-content: center;
	order: 1;
	overflow: clip;
	padding: var(--bedi-space-3);
	position: static;
}

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__thumb img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: contain;
}

/*
 * The lift goes back on the BOX rather than on the image, which is safe here
 * for the reason the archive tile's is not: this thumb carries the tint
 * itself, so the transform's stacking context contains the very background the
 * image multiplies against. Nothing gets between them.
 */
.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tilelink:hover .bedi-browse__thumb {
	transform: translateY(-3px);
}

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__thumb,
.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__thumb img {
	transition: transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tilelink:hover .bedi-browse__thumb img {
	transform: none;
}

.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__label {
	font-size: var(--bedi-text-sm);
	font-weight: 500;
	max-inline-size: none;
	order: 2;
	text-align: center;
}

/* =========================================================================
   THE ARCHIVE BLOCK — no card around it.

   On the front page the white card with its hairline is what separates eight
   departments from each other. On a category archive there is only ever ONE of
   them, sitting under the page's own H1 and above the product grid — so the
   card was a box drawn around a thing that had nothing to be separated from,
   and it made the subcategories look like a widget rather than like part of
   the page.

   The element stays. It loses its background, its border and its padding, and
   keeps `position: relative` and `overflow: clip` — because it is still the box
   that the corner picture is cropped against. "No wrapper" is about what you
   can see, not about what lays out.
   ====================================================================== */

/*
 * THE ARCHIVE TILE IS SMALLER THAN THE FRONT PAGE'S, because six across a
 * 944px column is 144px where the front page's three across a 630px card is
 * 185px. Same component, two sizes, set here rather than by adding a modifier
 * class to the markup.
 */
.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__tilelink {
	padding: var(--bedi-space-3) var(--bedi-space-3) var(--bedi-space-2);
}

/*
 * 12px, NOT 13. The tile is 144px with 12px of padding either side, so the
 * label's containing block is 120px and 84% of it is 101px. "ფოტოაპარატები"
 * sets about 104px at 13px — three pixels over — and base.css puts
 * `overflow-wrap: break-word` on every li, which this span inherits, so the
 * word did the only thing it was allowed to do and broke after the twelfth
 * letter. Georgian has no hyphen to signal that, so it read as a typo.
 *
 * A pixel off the type and eight points onto the cap gives 110px of room for
 * about 96px of text, which is margin rather than a coin toss.
 */
.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__label {
	font-size: 12px;
	line-height: 1.25;
	max-inline-size: 92%;
}

.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__thumb {
	inline-size: 64%;
	inset-block-end: -8%;
	inset-inline-end: -6%;
}

.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__card {
	background-color: transparent;
	border: 0;
	/*
	 * Every side, and `row-gap` with it. The card was reported as still having
	 * "outer paddings or an invisible wrapper" after the background came off,
	 * and it did: the base rule's 20px padding was only being zeroed on the
	 * shorthand while the flex gap kept a 16px band under a heading that no
	 * longer exists. With no heading and no background there is nothing left
	 * for either to space.
	 */
	padding: 0;
	row-gap: 0;

	/*
	 * THESE TWO ARE THE WHOLE REASON THE CORNER PICTURE WORKS, AND LEAVING THEM
	 * OFF IS WHY IT DID NOT.
	 *
	 * The card was never a positioned element — the comment above this block
	 * claimed it "keeps position: relative and overflow: clip", and it had
	 * neither. So the absolutely-positioned visual resolved its insets against
	 * the nearest ancestor that WAS positioned, several levels up, and
	 * percentage insets resolved against that element's height instead of the
	 * card's. Measured: the picture landed at y=776 with the block ending near
	 * y=390 — four hundred pixels below the box it was supposed to be cropped
	 * by, and clipped by nothing.
	 *
	 * `clip` rather than `hidden` for the reason auth-modal.css gives: it crops
	 * without making a scroll container out of a box that contains links.
	 */
	overflow: clip;
	position: relative;
}

/*
 * NO MARGIN ABOVE, AND HALF OF IT BELOW.
 *
 * The section carries margin-block: 40px, which is right on the front page
 * where it separates one band from the next. On an archive it lands directly
 * under `.woocommerce-products-header`, which already contributes 32px of its
 * own — 72px of nothing between the title and the first tile, and because the
 * block has no background any more, that reads as the page having lost
 * something rather than as spacing.
 */
.bedi-browse:has(.bedi-browse__grid[data-bedi-cols="1"]) {
	margin-block: 0 var(--bedi-space-6);
}

/* =========================================================================
   AND THE CONTAINER'S OWN GUTTER GOES WITH IT.

   THIS was the "invisible wrapper", through three rounds of looking for it in
   the wrong place. The part wraps its contents in `.bedi-container` — correct
   on the front page, where the band spans the window and needs the site
   gutter and the 1360px cap. On a category archive the block is already inside
   `.bedi-woo__main`, which is a column that has been positioned and padded
   already, so the container added a SECOND gutter: measured, the toolbar
   started at x=596 and the first tile at x=636. Forty pixels, on one element
   and not its neighbour, which is exactly what it looked like.

   Zeroing the padding also gives the grid back 80px of column — which is the
   difference between four tile tracks and five.
   ====================================================================== */

.bedi-browse:has(.bedi-browse__grid[data-bedi-cols="1"]) .bedi-container {
	max-inline-size: none;
	padding-inline: 0;
}

/*
 * The heading sits top-left INSIDE the block, on the same line the tiles start
 * from, rather than in a bar across the top of a card.
 */
.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__head {
	justify-content: flex-start;
}

.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__name {
	font-size: var(--bedi-text-xl);
}

/* --- the corner picture ------------------------------------------------
 * Bottom right, oversized, and CROPPED BY TWO EDGES rather than sitting inside
 * them. A decoration that fits entirely within its box reads as a small
 * picture somebody placed; one that runs off the corner reads as the surface
 * continuing past the frame, which is the whole trick the B2B banner uses with
 * its cut-out.
 *
 * 8% opacity, behind everything, and pointer-events off: it must never be
 * mistaken for one of the tiles, and it must never eat a click meant for one.
 * ------------------------------------------------------------------- */




/* Everything real sits above it. */
.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__head,
.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__tiles {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   THE TILE IS THE BLOCK.

   It was a tinted square with a caption underneath. Six of those in a row read
   as six identical light squares — the picture is a product shot on a pale
   ground, so at 180px the tiles differ by a few dark pixels in the middle and
   the only thing actually distinguishing them is 13px of grey text outside the
   box.

   Now the name is INSIDE, top left, at full ink; the photograph is dropped in
   the bottom right corner big enough to run off two edges, and the tile clips
   it. The shape of the thing being sold is what you see from across the room,
   the name is what you read, and the two are in one object instead of two.
   ====================================================================== */

.bedi-browse__tilelink {
	/*
	 * 5:4 rather than square. A Georgian subcategory name wraps to three lines
	 * at the width these get — "საოფისე & სახლის მოწყობილობები" is the worst
	 * of them — and a square leaves the third line sitting on the photograph.
	 */
	aspect-ratio: 5 / 4;
	background-color: var(--bedi-tint, var(--bedi-bg-2));
	border-radius: var(--bedi-radius-lg);
	display: block;
	/* The corner picture is cropped against THIS box, so it has to be the
	   containing block and it has to clip. */
	overflow: clip;
	padding: var(--bedi-space-3);
	position: relative;
	text-decoration: none;
	transition:
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-browse__tilelink:hover {
	box-shadow: 0 12px 26px -14px rgba(7, 0, 36, 0.35);
	transform: translateY(-2px);
}

.bedi-browse__tilelink:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

/*
 * A square, always, whatever the picture inside it is. Category images on this
 * shop are 240x240 and product photographs are not — mixing the two in one row
 * without a fixed box gives a ragged baseline under the labels.
 */
/*
 * BOTTOM RIGHT, AND THROUGH TWO EDGES RATHER THAN INSIDE THEM.
 *
 * The negative insets are the point: a tenth of the picture is past the right
 * edge and a tenth below the bottom, so the tile's `overflow: clip` cuts it.
 * A photograph that fits entirely within its box reads as a thumbnail somebody
 * placed; one that runs off the corner reads as an object sitting in the tile.
 */
.bedi-browse__thumb {
	display: block;
	inline-size: 68%;
	inset-block-end: -10%;
	inset-inline-end: -8%;
	position: absolute;
}

/*
 * THE HOVER TRANSFORM IS ON THE IMAGE, NOT ON THE WRAPPER AROUND IT, AND
 * PUTTING IT ON THE WRAPPER IS WHAT TURNED THE PICTURE'S BACKGROUND WHITE.
 *
 * The photograph blends into the tile's tint with `mix-blend-mode: multiply` —
 * that is the only reason a product shot on a white ground sits on a blue
 * square without a white box around it. Blending happens against the backdrop
 * of the nearest ancestor STACKING CONTEXT, and `transform` creates one. So a
 * transform on .bedi-browse__thumb inserted an empty, transparent stacking
 * context between the image and the tinted background it was supposed to
 * multiply with: nothing to multiply against, and the white came back. Only on
 * hover, which is what made it look like a hover bug rather than a blending
 * one.
 *
 * The image itself is safe to transform. An element with mix-blend-mode is
 * already its own stacking context; what breaks it is a NEW one in between.
 */
.bedi-browse__thumb img {
	transition: transform var(--bedi-dur) var(--bedi-ease-out);
}

.bedi-browse__tilelink:hover .bedi-browse__thumb img {
	transform: scale(1.06) rotate(-2deg);
}

.bedi-browse__thumb img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	/*
	 * contain, not cover. These are cut-out product shots on a white ground;
	 * cover crops a cable or a keyboard through the middle and the tile stops
	 * saying what it is.
	 */
	object-fit: contain;
	mix-blend-mode: multiply;
}

/*
 * Top left, above the picture, and capped at about two thirds of the tile so a
 * long name never runs across the photograph it is sitting on.
 */
.bedi-browse__label {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-sm);
	font-weight: 700;
	line-height: 1.25;
	max-inline-size: 72%;
	position: relative;
	z-index: 1;
}

.bedi-browse__tilelink:hover .bedi-browse__label {
	color: var(--bedi-accent-strong);
}

/* --- the see-all block --------------------------------------------------- */

/*
 * THE FIFTH BLOCK. It spans every column of the grid at every width, so it is
 * one wide button under four cards on a desktop and one wide button under four
 * stacked cards on a phone — the same object either way, which is the point of
 * it being a sibling of the cards rather than something inside one.
 *
 * `1 / -1` rather than a column count: the grid is two columns at 62em and one
 * below it, and -1 is the last line whichever it is.
 */
.bedi-browse__more {
	align-items: center;
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width, 1px) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-accent-strong);
	column-gap: var(--bedi-space-3);
	display: flex;
	font-size: var(--bedi-text-base);
	font-weight: var(--bedi-weight-bold);
	grid-column: 1 / -1;
	justify-content: center;
	min-block-size: 64px;
	padding: var(--bedi-space-4) var(--bedi-space-5);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		border-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-browse__more:hover,
.bedi-browse__more:focus-visible {
	background-color: var(--bedi-bg-2);
	border-color: var(--bedi-accent);
}

.bedi-browse__allmark {
	align-items: center;
	background-color: var(--bedi-accent);
	block-size: 32px;
	border-radius: var(--bedi-radius-pill, 999px);
	color: #FFFFFF;
	display: inline-flex;
	flex: none;
	inline-size: 32px;
	justify-content: center;
}

/* --- the four tints ---------------------------------------------------- */

/*
 * DEEPER THAN THEY LOOK ON A SWATCH, AND THE FIRST SET WAS NOT.
 *
 * These began at --bedi-bg-2 and three neighbours of it, which read as four
 * shades of white on the page: the tiles looked unfilled rather than tinted,
 * and the cycle that is supposed to make the eight cards one family did
 * nothing. Each is now about two steps further from the surface — still a
 * wash, still quiet enough for a product photograph to sit on, but visible as
 * a colour rather than as a rendering artefact.
 */
.bedi-browse__card[data-bedi-tint="1"] { --bedi-tint: #DFE9FB; }
.bedi-browse__card[data-bedi-tint="2"] { --bedi-tint: #EAE2F7; }
.bedi-browse__card[data-bedi-tint="3"] { --bedi-tint: #F2E8DA; }
.bedi-browse__card[data-bedi-tint="4"] { --bedi-tint: #DCEFE6; }

/* --- narrower ---------------------------------------------------------- */

@media (max-width: 61.9375em) {
	.bedi-browse__grid {
		grid-template-columns: minmax(0, 1fr);
	}


}

@media (max-width: 47.9375em) {
	.bedi-browse {
		margin-block: var(--bedi-space-6);
	}

	.bedi-browse__card {
		padding: var(--bedi-space-4);
		row-gap: var(--bedi-space-4);
	}

	/*
	 * Two across, not four. Four tiles in a 335px card leaves each one about
	 * 70px wide, which is below the size at which a photograph of a cable is
	 * distinguishable from a photograph of an adapter.
	 *
	 * AND IT HAS TO SAY [data-bedi-cols="2"] TO MEAN IT.
	 *
	 * This rule was right and inert. It was written as a bare
	 * `.bedi-browse__tiles` when that was the only rule setting the columns;
	 * restoring the front page's own tile later added
	 * `.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tiles`, which is a
	 * class and an attribute and a class against one class, and it won at every
	 * width. The phone kept four tracks of 64.75px, the names would not fit in
	 * 64px and could not be clipped, and every label lay across the two tiles
	 * to its right. That is the whole of "messy mobile" in this section.
	 */
	/*
	 * 2.3 ACROSS AND SCROLLING, NOT TWO AND WRAPPING.
	 *
	 * Two-up was the fix for four-up being 65px wide, and it was still the
	 * wrong shape: a department with eleven children showed four of them in two
	 * rows and gave no sign the other seven existed. The strip shows all of
	 * them in the height of one row, and the part-tile at the edge is what says
	 * to keep going.
	 *
	 * EDGE TO EDGE AGAINST THE CARD, not the viewport — this one sits inside a
	 * white card with its own padding, so the bleed matches that padding rather
	 * than the page gutter. Negative margin pulls the scroller out to the
	 * card's edges, equal padding puts the tiles back where they were, and the
	 * last one runs under the card's corner instead of stopping short of it.
	 */
	.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tiles {
		display: flex;
		gap: var(--bedi-space-3);
		grid-template-columns: none;
		margin-inline: calc(var(--bedi-space-4) * -1);
		overflow-x: auto;
		padding-inline: var(--bedi-space-4);
		scroll-padding-inline-start: var(--bedi-space-4);
		scroll-snap-type: x mandatory;
		/* The tiles are the affordance; a permanent grey bar under them is not. */
		scrollbar-width: none;
	}

	.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tiles::-webkit-scrollbar {
		display: none;
	}

	/*
	 * 2.3 visible: n tiles and (n - 1) gaps, so 2.3 tiles carry 1.3 gaps.
	 * Measured against the scroller's content box, which after the padding
	 * above is exactly the card's inner width.
	 */
	.bedi-browse__grid[data-bedi-cols="2"] .bedi-browse__tile {
		flex: 0 0 calc((100% - var(--bedi-space-3) * 1.3) / 2.3);
		scroll-snap-align: start;
	}

	/*
	 * And a floor under it. A grid item's automatic minimum size is its
	 * content, so a single unbreakable Georgian word is enough to push a track
	 * wider than its share and shove the next one off the card. `min-width: 0`
	 * lets the track hold its 1fr and hands the wrapping back to the text.
	 */
	.bedi-browse__tile,
	.bedi-browse__tilelink,
	.bedi-browse__label {
		min-inline-size: 0;
	}

	/* =====================================================================
	 * THE ARCHIVE ROW SCROLLS ON A PHONE, IT DOES NOT WRAP.
	 *
	 * Two big tiles per row is fine for the front page's four, and wrong here:
	 * კომპიუტერის ნაწილები has eleven children, so a 2-up grid is six rows of
	 * subcategories standing between the category's title and its first
	 * product. A strip you flick through costs one row.
	 *
	 * 2.5 visible rather than 2 or 3, and the same formula the product rail
	 * uses one file over — the half tile at the edge is what says there is
	 * more, which a row of exactly two or three does not.
	 *
	 * EDGE TO EDGE, by the rail's method: negative margin pulls the SCROLLER
	 * out to the full viewport, equal padding puts the CONTENT back. So the
	 * first tile still lines up with the heading above it and the last runs
	 * off the real edge of the screen rather than under a 20px margin.
	 * scroll-padding matches, or a snapped tile rests against the glass
	 * instead of against the gutter it is meant to align to.
	 * ================================================================== */

	.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__tiles {
		display: flex;
		gap: var(--bedi-space-3);
		grid-template-columns: none;
		margin-inline: calc(var(--bedi-gutter) * -1);
		overflow-x: auto;
		padding-inline: var(--bedi-gutter);
		scroll-padding-inline-start: var(--bedi-gutter);
		scroll-snap-type: x mandatory;
		/* The tiles are the affordance; a permanent grey bar under them is not. */
		scrollbar-width: none;
	}

	.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__tiles::-webkit-scrollbar {
		display: none;
	}

	.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__tile {
		flex: 0 0 calc((100% - var(--bedi-space-3) * 1.5) / 2.5);
		scroll-snap-align: start;
	}

	/*
	 * Smaller type inside a smaller tile. At 2.5 across a phone the tile is
	 * about 126px, and the 14px label that suits a 176px desk tile wraps to
	 * three lines and lands on the photograph.
	 */
	/*
	 * MEASURED, NOT GUESSED. The strip's tile is 127px with 8px of padding
	 * either side, so the label's box at 86% was 104px — and "მოწყობილობები",
	 * the longest single word in these category names, sets 111px at 12px.
	 * Seven pixels over, and li's inherited `overflow-wrap: break-word` did the
	 * only thing it is allowed to: broke after the eleventh letter. Georgian has
	 * no hyphen to mark that, so it read as a misspelling.
	 *
	 * 11px brings the word to 102px and 92% opens the box to 111px, which is
	 * nine pixels of margin rather than a rounding error either way.
	 */
	.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__label {
		font-size: 11px;
		line-height: 1.25;
		max-inline-size: 92%;
	}

	.bedi-browse__grid[data-bedi-cols="1"] .bedi-browse__tilelink {
		padding: var(--bedi-space-2);
	}


	/*
	 * The label goes, the arrow stays. It is the same destination either way,
	 * and the heading needs the width more than the words do.
	 */
	.bedi-browse__all span:not(.bedi-browse__allicon):not(.screen-reader-text) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bedi-browse__thumb,
	.bedi-browse__all,
	.bedi-browse__allicon { transition: none; }

	.bedi-browse__tilelink:hover .bedi-browse__thumb { transform: none; }
}