/*
 * woocommerce-archive.css - shop, product categories, blog archives, search, 404.
 *
 * Package wp6a. Loaded only on views that need it (see rlj_wooarch_needs_styles()),
 * so an article ships none of these bytes.
 *
 * The brief for this package was not parity. Four things about the live archives
 * are worse than they need to be, and each is fixed here rather than reproduced:
 *
 *   1. Product-category pages open with 350 words of copy and no product. The
 *      split lives in inc/woocommerce-archive.php; this file gives the lede a
 *      readable measure and the "more about" section below the grid its shape.
 *   2. The price filter is a raw jQuery UI slider: a 6px solid black bar and an
 *      oversized black FILTER pill, with 140px of dead air under it. It becomes
 *      a hairline track with real handles and a quiet outline button.
 *   3. Product cards are a float grid, so rows are ragged and card heights
 *      disagree. They become a real grid of flex columns with a framed square
 *      image, so every row lines up and every button sits on the same baseline.
 *   4. Blog and tag archives render one post per row with a full-width 1440px
 *      hero each, which is why /category/opals/ is 11,895px tall. They become
 *      the same card grid the blogroll uses.
 *
 * Values come from spec/00-BUILD-SPEC.md section 4. Anything not in the token
 * set is declared once at the top of this file rather than invented inline, and
 * it is declared here rather than in tokens.css because that file belongs to
 * WP1 and these three values are local to archives.
 */

:root {
	/*
	 * The product photography is shot on #f9f9f9. The image frame uses the same
	 * value so the photograph dissolves into its frame instead of showing a
	 * rectangle inside a rectangle, and the frame reads as one soft panel
	 * against the white page.
	 */
	--rlj-tile-bg: #f9f9f9;
	--rlj-card-radius: 10px;

	/*
	 * 38px on a 3-up grid inside a 1090px column gives 268px tiles and a 14%
	 * gutter. It shipped at 28px (9%), which put $2,234 pieces shoulder to
	 * shoulder; the live site's 19% is the other extreme and shrinks the
	 * photography, which is the one thing this page is for.
	 */
	--rlj-grid-gap-x: 38px;
	--rlj-grid-row-space: 46px;

	/*
	 * Product names on this store run to 78 characters ("Abalone Pearl Pendant
	 * in 14K Yellow Gold with Diamond accents in 14K White Gold"), so a title
	 * needs a ceiling or one card in a row is three lines taller than its
	 * neighbours. Three lines holds every current title on a 268px tile;
	 * a 166px phone tile needs four.
	 */
	--rlj-title-lines: 3;
}

/* ==========================================================================
   Archive and search headers
   ========================================================================== */

.page-header .page-title {
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: var(--fw-h1);
	line-height: 1.15;
}

/* Tag names are stored lowercase ("black opal"), which reads as a typo at 34px. */
body.tag .page-header .page-title,
body.category .page-header .page-title {
	text-transform: capitalize;
}

.page-header .archive-description,
.rlj-search-intro {
	max-width: 62ch;
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 17px;
	line-height: 1.6;
}

.page-header .archive-description p:last-child {
	margin-bottom: 0;
}

/*
 * The rule under the header is what turns a heading and a list into a page with
 * a top. base.css already carries 60px of separation, so this only draws it.
 */
body.archive:not(.woocommerce) .page-header,
body.search .page-header,
body.blog .page-header {
	margin-bottom: 44px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--rule-color);
}

/* ==========================================================================
   The search field on /?s= and on the 404

   Advanced Woo Search replaces get_search_form() wholesale, and its own
   stylesheet paints a #f7f7f7 rectangle with a 1px grey border, square corners
   and a detached square button. That is the only control on these seven
   templates that does not belong to the same design system as the pill
   paginator and the outlined FILTER button, and on the search page it is the
   first interactive thing under the h1.

   So both paths get the same geometry here: one pill, hairline border, the
   field and the submit sharing a single frame that lights up on focus-within.
   Every selector is prefixed .rlj-search-form, which is the wrapper search.php
   and 404.php print, so the header's search modal (styled in header.css, 500x60
   on a white sheet) is untouched. Selectors carry .aws-container or .search-form
   as well because AWS paints its field from two- and three-class rules.
   ========================================================================== */

.rlj-search-form {
	max-width: 460px;
	margin-top: 22px;
}

.rlj-search-form .aws-container {
	width: 100%;
	max-width: 100%;
}

.rlj-search-form .aws-container .aws-search-form,
.rlj-search-form .search-form {
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	background: var(--base-3);
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: var(--radius-button);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.rlj-search-form .aws-container .aws-search-form:focus-within,
.rlj-search-form .search-form:focus-within {
	border-color: var(--contrast);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.rlj-search-form .aws-wrapper,
.rlj-search-form .search-form label {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.rlj-search-form .aws-container .aws-search-field,
.rlj-search-form .search-form .search-field {
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 8px 0 22px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 50px;
	color: var(--contrast);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.rlj-search-form .aws-container .aws-search-field:focus,
.rlj-search-form .search-form .search-field:focus {
	outline: 0;
	background: transparent;
	box-shadow: none;
}

.rlj-search-form .aws-search-field::placeholder,
.rlj-search-form .search-field::placeholder {
	color: var(--breadcrumb);
	opacity: 1;
}

/*
 * AWS parks its clear button and its spinner absolutely at the right edge of
 * the wrapper, which is now the inside edge of the pill rather than the inside
 * edge of a rectangle, so both need pulling in off the curve.
 */
.rlj-search-form .aws-search-clear {
	right: 4px;
	color: var(--breadcrumb);
}

.rlj-search-form .aws-loader {
	right: 8px;
}

.rlj-search-form .aws-container .aws-search-btn,
.rlj-search-form .search-form .search-submit {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 50px;
	padding: 0;
	color: var(--contrast);
	background: transparent;
	border: 0;
	border-radius: var(--radius-button);
	cursor: pointer;
	transition: var(--transition-link);
}

.rlj-search-form .aws-container .aws-search-btn:hover,
.rlj-search-form .aws-container .aws-search-btn:focus,
.rlj-search-form .search-form .search-submit:hover,
.rlj-search-form .search-form .search-submit:focus {
	color: var(--prose-link);
	background: transparent;
}

.rlj-search-form .aws-search-btn svg,
.rlj-search-form .search-submit svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* The live-suggestion panel, so it lands as a card and not as a bare list. */
.rlj-search-form .aws-search-result {
	margin-top: 6px;
	border: 1px solid var(--rule-color);
	border-radius: var(--rlj-card-radius);
	box-shadow: var(--shadow-card-hover);
	overflow: hidden;
}

/*
 * template-parts/content-none.php prints a second search form when a search
 * returns nothing. The header already carries one four lines above it, so the
 * copy in the empty state is left and the duplicate control is not.
 */
body.search .no-results .search-form,
body.search .no-results .aws-container {
	display: none;
}

/* ==========================================================================
   Blog, tag, category and search results: the card grid

   :not(.woocommerce) matters. Shop and product-category archives also carry the
   `archive` body class, and they have their own grid below.
   ========================================================================== */

/*
 * Three fixed columns, not auto-fill. A tag archive with three posts under
 * auto-fill leaves a fourth empty column and the row reads as a mistake; fixed
 * columns mean the header rule, the cards and the pagination all share one
 * left and right edge whatever the post count.
 */
body.archive:not(.woocommerce) .site-main,
body.search:not(.woocommerce) .site-main,
body.blog:not(.woocommerce) .site-main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 36px;
	row-gap: 52px;
	align-items: start;
}

body.archive:not(.woocommerce) .site-main > *,
body.search:not(.woocommerce) .site-main > *,
body.blog:not(.woocommerce) .site-main > * {
	margin-bottom: 0;
}

body.archive:not(.woocommerce) .site-main > .page-header,
body.search:not(.woocommerce) .site-main > .page-header,
body.blog:not(.woocommerce) .site-main > .page-header,
body.archive:not(.woocommerce) .site-main > .paging-navigation,
body.search:not(.woocommerce) .site-main > .paging-navigation,
body.blog:not(.woocommerce) .site-main > .paging-navigation,
body.archive:not(.woocommerce) .site-main > .no-results,
body.search:not(.woocommerce) .site-main > .no-results {
	grid-column: 1 / -1;
}

body.archive:not(.woocommerce) .site-main > article,
body.search:not(.woocommerce) .site-main > article,
body.blog:not(.woocommerce) .site-main > article {
	height: 100%;
}

body.archive:not(.woocommerce) .site-main > article .inside-article,
body.search:not(.woocommerce) .site-main > article .inside-article,
body.blog:not(.woocommerce) .site-main > article .inside-article {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*
 * The image is first visually and third in the DOM. Reordering with `order`
 * rather than moving the markup keeps template-parts/content.php, which this
 * package does not own, exactly as it is.
 */
body.archive:not(.woocommerce) .site-main > article .post-image,
body.search:not(.woocommerce) .site-main > article .post-image,
body.blog:not(.woocommerce) .site-main > article .post-image {
	order: -1;
	margin: 0 0 18px;
}

body.archive:not(.woocommerce) .site-main > article .post-image a,
body.search:not(.woocommerce) .site-main > article .post-image a,
body.blog:not(.woocommerce) .site-main > article .post-image a {
	display: block;
	overflow: hidden;
	border-radius: var(--rlj-card-radius);
	background: var(--card-thumb-bg);
}

body.archive:not(.woocommerce) .site-main > article .post-image img,
body.search:not(.woocommerce) .site-main > article .post-image img,
body.blog:not(.woocommerce) .site-main > article .post-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.45s ease;
}

body.archive:not(.woocommerce) .site-main > article:hover .post-image img,
body.search:not(.woocommerce) .site-main > article:hover .post-image img,
body.blog:not(.woocommerce) .site-main > article:hover .post-image img {
	transform: scale(1.045);
}

body.archive:not(.woocommerce) .site-main > article .entry-header,
body.search:not(.woocommerce) .site-main > article .entry-header,
body.blog:not(.woocommerce) .site-main > article .entry-header {
	margin-bottom: 0;
}

body.archive:not(.woocommerce) .site-main > article .entry-title,
body.search:not(.woocommerce) .site-main > article .entry-title,
body.blog:not(.woocommerce) .site-main > article .entry-title {
	font-size: var(--fs-card-title);
	line-height: 1.3;
	margin-bottom: 8px;
}

body.archive:not(.woocommerce) .site-main > article .entry-title a,
body.search:not(.woocommerce) .site-main > article .entry-title a,
body.blog:not(.woocommerce) .site-main > article .entry-title a {
	color: var(--contrast);
	text-decoration: none;
}

body.archive:not(.woocommerce) .site-main > article:hover .entry-title a,
body.search:not(.woocommerce) .site-main > article:hover .entry-title a,
body.blog:not(.woocommerce) .site-main > article:hover .entry-title a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.archive:not(.woocommerce) .site-main > article .entry-meta,
body.search:not(.woocommerce) .site-main > article .entry-meta,
body.blog:not(.woocommerce) .site-main > article .entry-meta {
	font-size: 14px;
}

body.archive:not(.woocommerce) .site-main > article .entry-summary,
body.search:not(.woocommerce) .site-main > article .entry-summary,
body.blog:not(.woocommerce) .site-main > article .entry-summary {
	margin-top: 12px;
	font-size: var(--fs-card-excerpt);
	line-height: 1.55;
	color: var(--muted);
}

body.archive:not(.woocommerce) .site-main > article .entry-summary p:last-child,
body.search:not(.woocommerce) .site-main > article .entry-summary p:last-child,
body.blog:not(.woocommerce) .site-main > article .entry-summary p:last-child {
	margin-bottom: 0;
}

/*
 * Excerpts are held at exactly three lines: clamped so a long one cannot run
 * to four, and floored at the same height so a short one does not leave a
 * ragged gap above the term row.
 *
 * The term row is already pinned to the bottom of the card, so the cards did
 * line up; what varied was the white space in the middle of each one, by about
 * a line and a half across a row of three. Both halves are needed, and the
 * floor is expressed in em so it tracks --fs-card-excerpt rather than needing
 * a second value kept in sync.
 */
body.archive:not(.woocommerce) .site-main > article .entry-summary p,
body.search:not(.woocommerce) .site-main > article .entry-summary p,
body.blog:not(.woocommerce) .site-main > article .entry-summary p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	min-height: calc(1.55em * 3);
	overflow: hidden;
}

/*
 * The term footer pins to the bottom of the card, so a two-line title and a
 * four-line title still line their categories up across a row.
 */
body.archive:not(.woocommerce) .site-main > article footer.entry-meta,
body.search:not(.woocommerce) .site-main > article footer.entry-meta,
body.blog:not(.woocommerce) .site-main > article footer.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: auto;
	padding-top: 16px;
	font-size: 13px;
	line-height: 1.4;
}

/*
 * display: inline, NOT inline-flex. This shipped as inline-flex with a 7px gap
 * and rendered "black opal , buying guide , value and pricing" on every card of
 * every archive: a flex container promotes each bare text node to an anonymous
 * flex item, so the ", " separators between the term links became items of
 * their own and the gap opened a space on BOTH sides of every comma. The icon
 * gets its own margin instead, which is the only thing the flexbox was buying.
 */
.site-main > article footer.entry-meta .cat-links,
.site-main > article footer.entry-meta .tags-links {
	display: inline;
}

.site-main > article footer.entry-meta svg {
	flex: 0 0 auto;
	margin-right: 7px;
	vertical-align: -2px;
	opacity: 0.55;
}

/* ==========================================================================
   The WooCommerce archive shell
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--breadcrumb);
}

.woocommerce .woocommerce-products-header {
	margin-bottom: 30px;
}

.woocommerce .woocommerce-products-header__title {
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: var(--fw-h1);
	line-height: 1.15;
	margin-bottom: 0;
}

/*
 * The lede. One paragraph at a comfortable measure, set slightly larger than
 * body copy so it reads as an introduction rather than as the start of an
 * essay. The rest of the copy is below the grid.
 */
.woocommerce .term-description.rlj-term-lede {
	max-width: 66ch;
	margin: 18px 0 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--muted);
}

.woocommerce .term-description.rlj-term-lede p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Result count and sorting
   ========================================================================== */

.rlj-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin: 0 0 34px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule-color);
}

.woocommerce .rlj-shop-toolbar .woocommerce-result-count {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 15px;
	color: var(--muted);
}

.woocommerce .rlj-shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/*
 * GeneratePress drew this caret with the WooCommerce icon font. An inline SVG
 * removes the dependency on a font file whose only other job on an archive is
 * this one glyph.
 */
.woocommerce .rlj-shop-toolbar .woocommerce-ordering::after {
	content: none;
}

.woocommerce .rlj-shop-toolbar .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 10px 42px 10px 18px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--contrast);
	cursor: pointer;
	background-color: var(--page-bg);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 11px 8px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: var(--radius-button);
	transition: border-color 0.15s ease-in-out;
}

.woocommerce .rlj-shop-toolbar .woocommerce-ordering select:hover,
.woocommerce .rlj-shop-toolbar .woocommerce-ordering select:focus {
	border-color: var(--contrast);
}

/* ==========================================================================
   Product grid

   Grid rather than WooCommerce's floats, so every row is the height of its
   tallest card and nothing is ragged. Row spacing is padding on the card rather
   than row-gap, because the subcategory tiles on /product-category/rings/ share
   this grid and want their own much tighter rhythm.
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--rlj-grid-gap-x);
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce's clearfix pseudo-elements become phantom grid cells and leave a
 * hole in the first row. The :not(:has()) is not decoration: on a parent
 * category page ul.products::before IS the "Shop by stone type" heading, which
 * legacy-customizer.css owns and spec 7.1 asserts by content.
 */
.woocommerce ul.products:not(:has(> li.product-category))::before,
.woocommerce ul.products::after {
	content: none;
}

/*
 * The [class*="columns-"] is not decoration and must not be "tidied" away.
 * woocommerce-layout.css sizes cards with `.woocommerce ul.products.columns-3
 * li.product { width: 30.75% }`, four classes deep, so a three-class rule loses
 * and every card renders at 30.75% of its own grid column: 82px instead of 266.
 * Matching the attribute gives the same weight and this file loads later.
 *
 * The same rule is why the subcategory tiles need a width here at all. Their
 * full-width layout lives in legacy-customizer.css, where it used to carry
 * !important to out-shout exactly this selector; the migration stripped the
 * !important, which is correct, and this is the specificity that replaces it.
 */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	text-align: left;
}

.woocommerce ul.products[class*="columns-"] li.product.product-category {
	width: 100%;
	grid-column: 1 / -1;
}

.woocommerce ul.products li.product:not(.product-category) {
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--rlj-grid-row-space);
}

/* The whole card above the button is one link, and it grows to fill the card. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product .wc-product-image {
	margin: 0 0 16px;
	text-align: left;
}

.woocommerce ul.products li.product:not(.product-category) .inside-wc-product-image {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--rlj-card-radius);
	background: var(--rlj-tile-bg);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/*
 * aspect-ratio is the CLS fix. Shop CLS is 0.136 mobile and 0.167 desktop today
 * because the row has no height until the image arrives; here the box is square
 * from first paint whether the file has landed or not.
 */
.woocommerce ul.products li.product:not(.product-category) .inside-wc-product-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:not(.product-category):hover .inside-wc-product-image {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product:not(.product-category):hover .inside-wc-product-image img {
	transform: scale(1.05);
}

/*
 * Clamped, and the price below it is pinned to the bottom of the link.
 *
 * The two together are what make a row of cards read as a row. Uncapped titles
 * pushed the price to three different heights across a single row while the
 * buttons stayed pinned, so the gap between price and CTA visibly differed card
 * to card. The clamp stops a runaway title; margin-top: auto on the price then
 * guarantees alignment even when two titles in the same row differ by a line,
 * which no fixed min-height can promise without wasting space on the rows where
 * every title is short.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--rlj-title-lines);
	line-clamp: var(--rlj-title-lines);
	overflow: hidden;
	margin: 0 0 9px;
	padding: 0;
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.32;
	color: var(--contrast);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: auto 0 0;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--price);
}

/*
 * LIVE DEFECT A. The $ sign rendered in Times New Roman beside a Catamaran
 * amount, so every price on the store mixed two typefaces mid-token. The token
 * now points at the body face; this rule is what carries it into the loop,
 * because WooCommerce's own stylesheet also colours and sizes .price.
 */
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
	font-family: var(--font-currency);
	font-weight: inherit;
}

.woocommerce ul.products li.product .price del {
	margin-right: 8px;
	font-weight: 400;
	color: var(--breadcrumb);
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	background: none;
	font-weight: 600;
}

/*
 * The loop short description. It is still printed (WooCommerce, not GP Premium,
 * turns out to emit it here) and it is still hidden, which is what the live site
 * does with two Customizer rules that the migration dropped. Every product's
 * short description repeats the title in longer words, so on a card it is three
 * lines of noise between the name and the price.
 */
.woocommerce ul.products li.product .woocommerce-product-details__short-description {
	display: none;
}

.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin: 18px 0 0;
	padding: 11px 24px;
	font-size: 13px;
	letter-spacing: 0.06em;
}

/* WooCommerce's "View cart" link after an ajax add. GP hid it; so does this. */
.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

/*
 * No product on this store has ever been on sale, so the badge has never been
 * seen. It is designed rather than left to WooCommerce's green circle, because
 * the first time it appears is not the moment to find out what it looks like.
 */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 6px 13px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sale-text);
	background: var(--sale-bg);
	border-radius: var(--radius-button);
}

/* ==========================================================================
   Subcategory tiles

   The full-width row layout, the 88px circular thumbnails and both generated
   headings live in legacy-customizer.css, which is the migrated Customizer
   block. Only the interaction is added here.
   ========================================================================== */

.woocommerce ul.products li.product-category > a {
	border-radius: var(--rlj-card-radius);
	transition: background-color 0.18s ease-in-out;
}

.woocommerce ul.products li.product-category > a:hover {
	background-color: rgba(0, 0, 0, 0.025);
}

/*
 * Rounded square, not a circle.
 *
 * legacy-customizer.css inherited --radius-round on these thumbnails from the
 * Customizer. A circle is prettier in the abstract and wrong for these
 * particular photographs: the source images are square studio shots of a ring
 * shot end on, so the circle slices the band off both sides and leaves the
 * stone floating. The square crop is no crop at all.
 */
.woocommerce ul.products li.product-category .inside-wc-product-image,
.woocommerce ul.products li.product-category img {
	background: var(--rlj-tile-bg);
	border-radius: var(--rlj-card-radius);
	overflow: hidden;
}

/*
 * .product-category is repeated to out-specify snippet 31, exactly as the
 * paginator above does with .page-numbers. Snippet 31 paints every link inside
 * .entry-content gold and underlined from `.entry-content a` plus six :not()
 * exclusions, which is 0,7,1 rising to 0,8,1 on :hover, and it is right for
 * prose and wrong here. These tiles sat gold and underlined six inches above a
 * grid of product names set in black with no underline, on the same page. The
 * subcategory link carries no class of its own, so the repeat has to hang off
 * the li. Snippet 31 is live and this package does not own it, so it is
 * out-specified rather than edited.
 */
.woocommerce .entry-content ul.products li.product-category.product-category.product-category.product-category.product-category.product-category > a {
	color: var(--contrast);
	text-decoration: none;
}

.woocommerce .entry-content ul.products li.product-category.product-category.product-category.product-category.product-category.product-category > a:hover,
.woocommerce .entry-content ul.products li.product-category.product-category.product-category.product-category.product-category.product-category > a:focus {
	color: var(--prose-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
	font-size: 15px;
	font-weight: 400;
	color: var(--breadcrumb);
	background: none;
}

/* ==========================================================================
   "More about ..." - the rest of the category copy, below the grid

   The block closes the page: grid, then the paginator that advances it, then
   the essay. Every word is still in the source of the canonical page-1 URL, and
   sitting after a <nav> does not make text less crawlable.
   ========================================================================== */

.rlj-term-more {
	max-width: 72ch;
	margin: 8px 0 0;
	padding: 34px 0 0;
	border-top: 1px solid var(--archive-rule);
}

.rlj-term-more__title {
	margin: 0 0 16px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--archive-heading);
}

.rlj-term-more__body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--muted);
}

.rlj-term-more__body p:last-child {
	margin-bottom: 0;
}

.rlj-term-more__body strong {
	color: var(--text);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
	clear: both;
	margin: 26px 0 0;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers,
.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	font-size: 15px;
	line-height: 1;
	color: var(--contrast);
	text-decoration: none;
	background: none;
	border: 1px solid var(--rule-color);
	border-radius: var(--radius-button);
	transition: var(--transition-button);
}

/*
 * The repeated class is deliberate and must not be "simplified".
 *
 * WooCommerce's pagination renders inside .entry-content, and snippet 31 paints
 * every link in there gold and underlined from a selector carrying seven
 * classes (.entry-content a plus six :not() exclusions). That is right for
 * prose and wrong for a row of page controls, which came out as underlined gold
 * numerals inside pill outlines. Repeating .page-numbers is the cheapest way to
 * clear seven classes without an id or !important. Snippet 31 is a live snippet
 * this package does not own, so it is out-specified rather than edited.
 */
.woocommerce .entry-content nav.woocommerce-pagination ul li a.page-numbers.page-numbers.page-numbers.page-numbers {
	color: var(--contrast);
	text-decoration: none;
}

.woocommerce .entry-content nav.woocommerce-pagination ul li a.page-numbers.page-numbers.page-numbers.page-numbers:hover {
	color: var(--contrast);
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus,
.paging-navigation a.page-numbers:hover,
.paging-navigation a.page-numbers:focus {
	color: var(--contrast);
	background: rgba(0, 0, 0, 0.04);
	border-color: var(--contrast);
}

.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.paging-navigation .page-numbers.current {
	color: var(--base-3);
	background: var(--contrast);
	border-color: var(--contrast);
	font-weight: 500;
}

/*
 * The ellipsis is a separator, not a control, so it keeps the token's box and
 * loses the outline.
 *
 * It shipped with the box but not the alignment. "…" sits ON the baseline, and
 * a baseline centred inside a 42px flex box puts the ink roughly 3px below the
 * middle, which was enough for the row to read as dropped between "3" and "8".
 * Three bullets are centred on the x-height instead, so they stay level with
 * the numerals beside them at any token size, and the negative margin takes
 * back the letter-spacing trailing the last one so the group is optically
 * centred rather than pushed left.
 */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots,
.paging-navigation .page-numbers.dots {
	min-width: 30px;
	padding: 0;
	font-size: 0;
	color: var(--breadcrumb);
	border-color: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots::after,
.paging-navigation .page-numbers.dots::after {
	content: "\2022\2022\2022";
	margin-right: -3px;
	font-size: 7px;
	line-height: 1;
	letter-spacing: 3px;
}

/* base.css pushes the numbers to the right; centred reads better under a grid. */
.paging-navigation {
	justify-content: center;
}

.paging-navigation .nav-links {
	margin-left: 0;
	justify-content: center;
}

/*
 * One paginator language across the whole site.
 *
 * WooCommerce ends its row with a circled arrow; paginate_links() ends the post
 * archives and the search page with the word "Next", which renders as a lozenge
 * noticeably wider than the circles beside it. Two answers to one question on
 * one site. The circle is the better of the two and already exists, so the word
 * is swapped for the same glyph here rather than in inc/template-tags.php,
 * which this package does not own.
 *
 * font-size: 0 rather than a hidden span because the label has to survive: it
 * stays in the accessibility tree and screen readers still announce "Next".
 */
.paging-navigation .page-numbers.prev,
.paging-navigation .page-numbers.next {
	padding: 0;
	font-size: 0;
}

.paging-navigation .page-numbers.prev::after,
.paging-navigation .page-numbers.next::after {
	font-size: 17px;
	line-height: 1;
}

.paging-navigation .page-numbers.prev::after {
	content: "\2190";
}

.paging-navigation .page-numbers.next::after {
	content: "\2192";
}

/* ==========================================================================
   Notices
   ========================================================================== */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	padding: 18px 24px;
	border: 0;
	border-left: 4px solid var(--contrast);
	background: var(--base-2);
	font-size: 16px;
}

.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before {
	display: none;
}

/* ==========================================================================
   Sidebar

   Shared by the shop, both product-category levels, my account, the 404 and
   /privacy-policy/. The live rhythm is 40px of widget padding plus a 60px
   margin plus 40px again, which is 140px of nothing between "Filter by price"
   and "Product categories". A hairline and 40px reads as deliberate.
   ========================================================================== */

.widget-area .widget {
	padding: 0 0 0 40px;
	margin-bottom: 40px;
}

/*
 * The sidebar starts level with the h1, not with the breadcrumb.
 *
 * Shop and product-category pages open the content column with a breadcrumb and
 * the sidebar has no equivalent, so "Filter by price" sat about 40px above
 * "Opal Rings" and the eye was pulled up and to the right before it had read
 * the page title. On the three highest-traffic commercial templates that is the
 * first thing the page does wrong.
 *
 * The offset is the breadcrumb's own block taken from the rule that draws it
 * (14px at line-height 1.5 = 21px, plus its 20px bottom margin), not a number
 * chosen to look right, so the two columns keep starting together if the
 * breadcrumb type ever changes.
 *
 * Scoped to the two views that HAVE a breadcrumb. The 404, my account and
 * /privacy-policy/ share this sidebar and none of them prints one, and on those
 * the sidebar already lines up with the heading.
 */
@media (min-width: 769px) {

	body.woocommerce.archive .is-right-sidebar {
		padding-top: 41px;
	}
}

.widget-area .widget + .widget {
	padding-top: 40px;
	border-top: 1px solid var(--rule-color);
}

.widget-area .widget .widget-title {
	margin-bottom: 18px;
	line-height: 1.2;
}

.widget-area .widget ul li {
	margin: 0;
	padding: 6px 0;
	line-height: 1.45;
}

.widget-area .widget ul li a {
	color: var(--contrast);
	text-decoration: none;
}

.widget-area .widget ul li a:hover,
.widget-area .widget ul li a:focus {
	color: var(--prose-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.widget-area .widget_product_categories .count {
	color: var(--breadcrumb);
	font-size: 14px;
}

.widget-area .widget_product_categories li.current-cat > a {
	font-weight: 600;
}

.widget-area .widget_product_categories ul.children {
	margin: 4px 0 4px 4px;
	padding-left: 16px;
	border-left: 1px solid var(--rule-color);
}

.widget-area .widget_shopping_cart .total,
.widget-area .woocommerce.widget_shopping_cart p {
	font-size: var(--fs-cart-widget);
	color: var(--muted);
}

/*
 * The product-list widgets, which are the only ones with images in them.
 *
 * A fixed square with object-fit, not width plus height:auto. WooCommerce
 * floats these thumbnails right and its own stylesheet gives them a percentage
 * width, which on the live 404 collapsed the recently-viewed image to a ~20px
 * vertical sliver jammed against the title. A box that cannot be squeezed is
 * the fix, and it also keeps a portrait and a square photograph the same size
 * in the same list.
 */
.widget-area .widget_recently_viewed_products ul li a img,
.widget-area .widget_products ul li a img,
.widget-area .widget_top_rated_products ul li a img,
.widget-area .widget_recent_reviews ul li a img {
	float: right;
	width: 46px;
	height: 46px;
	margin-left: 12px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--rlj-tile-bg);
}

/* ==========================================================================
   Price filter

   The live widget is jQuery UI's default: a 6px solid black bar with two black
   dots, and a heavy black FILTER pill that shouts louder than anything else on
   the page including the products. This is the same control in the brand's
   voice: a hairline track, real handles, the price read-out above the button,
   and an outline button that fills on hover.
   ========================================================================== */

/*
 * Every selector in this block is prefixed .widget-area .widget.widget_price_filter
 * on purpose. WooCommerce paints this control from four- and five-class
 * selectors (.woocommerce .widget_price_filter .ui-slider .ui-slider-handle and
 * friends, all #a46497 purple), so a two-class rule loses silently and the
 * slider stays exactly as it was. Do not shorten these.
 */
.widget-area .widget.widget_price_filter .price_slider_wrapper {
	padding-top: 6px;
}

.widget-area .widget.widget_price_filter .price_slider {
	position: relative;
	height: 3px;
	margin: 0 9px 26px;
	background: var(--price-track);
	border: 0;
	border-radius: 3px;
}

.widget-area .widget.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--contrast);
	border: 0;
	border-radius: 3px;
}

.widget-area .widget.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	top: -8px;
	z-index: 2;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	background: var(--base-3);
	border: 2px solid var(--contrast);
	border-radius: var(--radius-round);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	cursor: ew-resize;
	outline-offset: 3px;
	transition: transform 0.15s ease-in-out;
}

.widget-area .widget.widget_price_filter .ui-slider .ui-slider-handle:hover,
.widget-area .widget.widget_price_filter .ui-slider .ui-slider-handle:focus {
	transform: scale(1.12);
}

.widget-area .widget.widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	text-align: left;
	font-size: 15px;
}

/*
 * The read-out is the useful half of this control and the button is the small
 * half, so the read-out goes first and gets the full width. It is source-ordered
 * after the button, hence `order`.
 */
.widget-area .widget.widget_price_filter .price_slider_amount .price_label {
	order: -1;
	width: 100%;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--muted);
	text-align: left;
}

.widget-area .widget.widget_price_filter .price_slider_amount .price_label span {
	color: var(--text);
	font-weight: 600;
}

.widget-area .widget.widget_price_filter .price_slider_amount .button,
.woocommerce .widget_price_filter .price_slider_amount .button {
	float: none;
	margin: 0;
	padding: 9px 24px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--contrast);
	background-color: transparent;
	border: 1px solid var(--contrast);
	border-radius: var(--radius-button);
	transition: var(--transition-button);
}

.widget-area .widget.widget_price_filter .price_slider_amount .button:hover,
.widget-area .widget.widget_price_filter .price_slider_amount .button:focus,
.woocommerce .widget_price_filter .price_slider_amount .button:hover,
.woocommerce .widget_price_filter .price_slider_amount .button:focus {
	color: var(--btn-text);
	background-color: var(--contrast);
}

.widget-area .widget.widget_price_filter .price_slider_amount .clear {
	display: none;
}

/* ==========================================================================
   404

   The live page is a heading, a sentence, a search box and then roughly a
   thousand pixels of nothing beside a sidebar. Someone who lands here wanted
   something; the least the page can do is offer the seven places worth going.
   ========================================================================== */

.rlj-404-links {
	margin-top: 48px;
	padding-top: 30px;
	border-top: 1px solid var(--rule-color);
}

.rlj-404-links__title {
	margin: 0 0 18px;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--archive-heading);
}

.rlj-404-links ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rlj-404-links li {
	margin: 0;
}

.rlj-404-links a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	color: var(--contrast);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-color);
	transition: var(--transition-link);
}

.rlj-404-links a::before {
	content: "\2192";
	color: var(--gold-on-cream);
	transition: transform 0.15s ease-in-out;
}

/*
 * Two columns filled row by row, so the bottom row is the last TWO items, not
 * the last one. Without this a hairline dangled under "About Richard" and under
 * "Contact" with nothing beneath either of them. The single-column override
 * lives in the 768px block.
 */
.rlj-404-links li:nth-last-child(-n + 2) a {
	border-bottom: 0;
}

.rlj-404-links a:hover,
.rlj-404-links a:focus {
	color: var(--prose-link);
}

.rlj-404-links a:hover::before {
	transform: translateX(3px);
}

/* ==========================================================================
   Breakpoints. Unified on 768px per the ruling in spec 4.5.
   ========================================================================== */

@media (max-width: 1024px) {

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.archive:not(.woocommerce) .site-main,
	body.search:not(.woocommerce) .site-main,
	body.blog:not(.woocommerce) .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}
}

@media (max-width: 768px) {

	.page-header .page-title,
	.woocommerce .woocommerce-products-header__title {
		font-size: 28px;
	}

	.woocommerce .term-description.rlj-term-lede {
		font-size: 17px;
	}

	.rlj-shop-toolbar {
		margin-bottom: 26px;
	}

	.woocommerce .rlj-shop-toolbar .woocommerce-ordering,
	.woocommerce .rlj-shop-toolbar .woocommerce-ordering select {
		width: 100%;
	}

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 18px;
	}

	.woocommerce ul.products li.product:not(.product-category) {
		padding-bottom: 34px;
	}

	/* A 166px tile fits about 19 characters a line, so three is a truncation. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 17px;
		--rlj-title-lines: 4;
	}

	.woocommerce ul.products li.product .button {
		padding: 10px 18px;
		font-size: 12px;
	}

	/*
	 * The sidebar is stacked under the content at this width, so the 40px left
	 * indent that aligned it beside the grid is now just a ragged edge, and
	 * "Filter by price" arrives with nothing to say it is a different region.
	 */
	.widget-area .widget {
		padding-left: 0;
	}

	.is-right-sidebar {
		margin-top: 34px;
		padding-top: 34px;
		border-top: 1px solid var(--rule-color);
	}

	.rlj-404-links ul {
		grid-template-columns: 1fr;
	}

	/* One column, so the bottom row is one item again. */
	.rlj-404-links li:nth-last-child(2) a {
		border-bottom: 1px solid var(--rule-color);
	}

	body.archive:not(.woocommerce) .site-main,
	body.search:not(.woocommerce) .site-main,
	body.blog:not(.woocommerce) .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
		row-gap: 36px;
	}
}

/*
 * Products stay two-up on a phone. GP Premium's setting was wc-mobile-columns-2
 * and it is the right call: one full-width square photo per screen turns twelve
 * products into nine thousand pixels of scrolling. Article cards do drop to one
 * column, because a title, a date, an excerpt and two term rows do not fit in
 * 170px.
 */
@media (max-width: 600px) {

	body.archive:not(.woocommerce) .site-main,
	body.search:not(.woocommerce) .site-main,
	body.blog:not(.woocommerce) .site-main {
		grid-template-columns: 1fr;
	}

	/*
	 * The shop's paginator at 42px with 8px gaps needs 392px and a phone column
	 * is 350px, so the row wrapped and left the last page number and the arrow
	 * orphaned on a line of their own. Smaller tokens, a tighter gap and no
	 * ellipsis brings page one of eight back to six tokens across 258px, in one
	 * row, with every jump the desktop offers except the ellipsis itself, which
	 * is the one thing on the row that was never a link.
	 */
	.woocommerce nav.woocommerce-pagination ul,
	.paging-navigation .nav-links {
		gap: 6px;
	}

	.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li span.page-numbers,
	.paging-navigation .page-numbers {
		min-width: 38px;
		height: 38px;
		padding: 0 9px;
		font-size: 14px;
	}

	/*
	 * The li, not the span. WooCommerce wraps each token in an li, so hiding the
	 * span alone leaves an empty cell that still claims its share of the gap.
	 */
	.woocommerce nav.woocommerce-pagination ul li:has(> span.page-numbers.dots),
	.paging-navigation .page-numbers.dots {
		display: none;
	}
}

/*
 * The theme's global reduced-motion block in a11y.css neutralises transitions;
 * these are the transforms it cannot reach, because they are the resting state
 * of a hover rather than a transition on one.
 */
@media (prefers-reduced-motion: reduce) {

	.woocommerce ul.products li.product:not(.product-category):hover .inside-wc-product-image,
	.woocommerce ul.products li.product:not(.product-category):hover .inside-wc-product-image img,
	body.archive:not(.woocommerce) .site-main > article:hover .post-image img,
	body.search:not(.woocommerce) .site-main > article:hover .post-image img,
	.widget-area .widget.widget_price_filter .ui-slider .ui-slider-handle:hover,
	.rlj-404-links a:hover::before {
		transform: none;
	}
}