/*
 * The shop and category header.
 *
 * Values follow the product card, so a category page and the cards on it read as
 * one design: the #e8e6e1 hairline, 8px radii, 13px/600, #161616 and the same
 * muted greys.
 */

/*
 * The theme's sort control in the page title, once ours is rendering below the
 * category links. Hidden rather than unhooked because it lives in Flatsome's
 * page title template rather than on a filter, and the FILTER toggle beside it
 * belongs to their off canvas sidebar and is left alone.
 *
 * Scoped to .shop-page-title and no further. It was first written through
 * .category-filter-row, the block holding the FILTER toggle, but the ordering
 * form is not inside it: it sits directly in .page-title-inner, so the rule
 * matched nothing and the page rendered two sort dropdowns.
 */
body.pearlory-shophead-moved .shop-page-title .woocommerce-ordering {
	display: none;
}

/*
 * The theme's heading block, replaced by ours.
 *
 * It printed get_queried_object()->name, which on the shop archive is the post
 * type and rendered the literal word "product", and a count span left empty with
 * an HTML comment where the number should have been. Both are hidden rather than
 * unhooked: the function that draws them also draws the category links, and that
 * whole function is already removed when the tiles are on, so this only covers
 * the case where tiles are off and the links are the theme's.
 */
body.pearlory-shophead .filter-top-text {
	display: none;
}

/*
 * The category tiles.
 *
 * Text pills were tried four ways and every one read as chrome: 22px boxes with
 * a 0.5px border, 36px boxes on a hairline, underlined text tabs, and a joined
 * segmented control. For a shop where the product is the thing being looked at,
 * the category row should be looked at too, so it carries the photograph rather
 * than describing it.
 *
 * A round crop because these are square product shots and a circle reads as a
 * category mark rather than as another product card competing with the grid
 * below it.
 */
/*
 * No horizontal padding on any of these three blocks.
 *
 * They all render inside .shop-container, which is already inset: measured at
 * left 15 and right 360 on a 375px viewport, and the visible edge of the first
 * card image sits at exactly 15 too. Adding 15px of my own on top pushed the
 * heading and the Filter button to 30 and pulled the sort control's right edge
 * back to 345, so the header sat 15px inside the grid it belongs to on one side
 * and 15px short of it on the other.
 */
.pearlory-shophead__top {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 4px 0 14px;
}

.pearlory-shophead__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: #161616;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pearlory-shophead__count {
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(0, 0, 0, 0.42);
	white-space: nowrap;
}

.pearlory-cats {
	margin: 0 0 16px;
}

.pearlory-cats__list {
	display: flex;
	/*
	 * space-between so four tiles fill the row instead of ending two thirds of
	 * the way across. Atolea never needs this because its row carries ten short
	 * named tiles and overflows, measured at 833px of content inside 375px. This
	 * store's top level is four categories, so the same fixed columns left the
	 * right hand third empty. When a category page does overflow, space-between
	 * packs to the start on its own and the row scrolls as before.
	 */
	/*
	 * No distribution and no gap: the 92px column is the pitch, so the spacing is
	 * identical between every pair. space-between was here to stop four tiles
	 * ending two thirds of the way across, which stopped being a problem once the
	 * row carried eight and overflowed.
	 */
	justify-content: flex-start;
	gap: 0;
	margin: 0;
	padding: 4px 0;
	overflow-x: auto;
	/* The row runs past the edge on a phone, so it snaps rather than drifting. */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	list-style: none;
}

.pearlory-cats__list::-webkit-scrollbar {
	display: none;
}

.pearlory-cats__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

/*
 * Sizes measured off Atolea at a 375px viewport, which is the reference for this
 * row: a 51px photo, a 63px column, and no gap between columns. Their ring is
 * 55px because it carries a 2px white border around the photo, invisible against
 * a white page, so 12px of clear space falls between one photo and the next. A
 * 51px photo in a 63px column reproduces that spacing exactly.
 *
 * The first build used 74px, which read as a row of small product photos rather
 * than as navigation.
 */
.pearlory-cats__link {
	display: block;
	/*
	 * One width for every column, so the circles are evenly spaced.
	 *
	 * Sizing each column to its own label was the previous attempt, and it made
	 * the row lopsided: measured, the centre to centre gaps ran 79, 87, 90, 84,
	 * 63, 63, 63px, a 27px spread, because Waterproof jewelry needs 92px of label
	 * and Rings needs 51px. The long names spread themselves out and the short
	 * ones bunched together.
	 *
	 * 92px is the widest label this taxonomy produces. Every circle now sits on a
	 * 92px pitch whatever it is called. The row is 8 columns wide and scrolls,
	 * which it already did.
	 *
	 * A future category name longer than 92px wraps onto a second line rather
	 * than colliding with its neighbour, which is why white-space stays normal on
	 * the label below.
	 */
	width: 92px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

/*
 * display: block is stated because this is a span, and width and height do not
 * apply to an inline box. Left inline, the first build rendered tall rectangles
 * instead of circles.
 */
.pearlory-cats__ring {
	display: block;
	width: 51px;
	height: 51px;
	margin: 0 auto;
	overflow: hidden;
	background: #f2f0ed;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.15s ease;
}

.pearlory-cats__img {
	display: block;
	width: 51px;
	height: 51px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

/*
 * Atolea's label type, measured: 10px, weight 400, 0.5px of tracking and a
 * 16.5px line height, which is also what separates it from the photo, so there
 * is no top margin. Colour stays #161616 rather than their pure black, because
 * that is the text colour used across the rest of this design and the two are
 * indistinguishable at 10px.
 */
.pearlory-cats__label {
	display: block;
	font-size: 10px;
	font-weight: 400;
	line-height: 16.5px;
	color: #161616;
	letter-spacing: 0.5px;
	/*
	 * normal, not nowrap. Every current label fits the 92px column on one line, so
	 * nothing wraps today; a longer name added later wraps instead of overlapping
	 * the tile beside it.
	 */
	white-space: normal;
}


/* The category being viewed, ringed rather than filled. */
.pearlory-cats__link.is-current .pearlory-cats__ring {
	box-shadow: 0 0 0 2px #161616;
}

.pearlory-cats__link:hover .pearlory-cats__ring,
.pearlory-cats__link:focus-visible .pearlory-cats__ring {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}

/*
 * The sort control, now below the links.
 *
 * Right aligned on its own line, quiet, because it is a control for the few
 * people who want it rather than something to announce.
 */
body.pearlory-shophead .pearlory-shopbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
}

/* With the Filter button moved in, the two controls sit at either end. */
body.pearlory-shophead .pearlory-shopbar.has-filter {
	justify-content: space-between;
}

/*
 * margin: 0 is the whole fix for the two controls not lining up. The theme gives
 * .filter-button a margin of 6.5px 0 0, which made the flex row 42.5px tall
 * around two 36px controls: the button was pushed down by the margin while the
 * sort control centred in the taller box, leaving them 3.3px out of step.
 */
body.pearlory-shophead .pearlory-shopbar .filter-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	margin: 0;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #e8e6e1;
	border-radius: 8px;
	color: #161616;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
}

body.pearlory-shophead .pearlory-shopbar .filter-button strong {
	font-weight: 600;
	text-transform: none;
}

body.pearlory-shophead .pearlory-shopbar .filter-button:hover,
body.pearlory-shophead .pearlory-shopbar .filter-button:focus-visible {
	background: rgba(0, 0, 0, 0.03);
	border-color: #d8d5cf;
}

/*
 * The row the button came from. Emptied by the move it still held 62px of
 * height above the promotional banner, which read as a gap rather than as
 * anything removed.
 *
 * Keyed on a class the script adds after the move succeeds, not on the body
 * class. If the script never runs, the row keeps the button and stays visible,
 * so a failure costs the new position rather than the ability to filter.
 */
body.pearlory-shophead-moved .shop-page-title .category-filter-row.pearlory-emptied {
	display: none;
}

/*
 * WooCommerce's ordering form measured 46px tall around a 36px select, so the
 * select sat 3px above the Filter button beside it and the bar took its height
 * from the gap rather than the control. A flex box of the select's own height
 * removes the slack.
 */
body.pearlory-shophead .pearlory-shopbar .woocommerce-ordering {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

body.pearlory-shophead .pearlory-shopbar .woocommerce-ordering select {
	margin: 0;
}

body.pearlory-shophead .pearlory-shopbar select {
	min-height: 36px;
	padding: 0 30px 0 12px;
	background-color: #fff;
	border: 1px solid #e8e6e1;
	border-radius: 8px;
	color: #161616;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

@media (min-width: 850px) {
	body.pearlory-shophead .filter-child-category ul,
	body.pearlory-shophead .pearlory-shopbar {
		padding-left: 0;
		padding-right: 0;
	}
}