/**
 * Search results page.
 *
 * Deliberately colour-agnostic: text inherits, surfaces stay transparent, and
 * rules and fills are neutral alphas that read on either a light or a dark
 * page. Nothing here assumes a background, so it drops onto the site as-is.
 * Swap the alphas for brand hex values if you want it pinned.
 */

/* Match the header's content box exactly - 1170px wide with a 30px gutter,
   the same figures as .regal-header-menu in header.php.
   The inherited .col-full is neutralised first (search pages only) so its
   own max-width and padding cannot stack on top and inset the results. */
.search #content > .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.rr-search,
.search #main.rr-search {
	width: auto;
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 30px 64px;
}

/* search.php renders no sidebar, but Storefront floats .content-area at ~74%
   whenever it expects one - leaving the results shifted left with dead space
   beside them. The storefront-full-width-content body class is the theme's own
   switch; these back it up.

   The #primary and #main selectors are deliberate: Storefront sets these
   widths by ID, and a class-only override loses that specificity fight. */
.search #primary.content-area,
.search .content-area {
	float: none;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.search #main.rr-search {
	float: none;
}

/* ---------------------------------------------------------------
 * Header
 * ------------------------------------------------------------ */

.rr-search__header {
	padding: 8px 0 24px;
}

.rr-search__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

.rr-search__title {
	margin: 0 0 20px;
	font-size: 28px;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.rr-search__term {
	opacity: 0.75;
}

.rr-search__form {
	display: flex;
	align-items: stretch;
	gap: 8px;
	max-width: 520px;
}

.rr-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	/* 16px stops iOS zooming the page when the field is focused. */
	font: inherit;
	font-size: 16px;
}

.rr-search__field:focus {
	outline: 2px solid currentColor;
	outline-offset: -1px;
}

.rr-search__submit {
	flex: none;
	padding: 10px 20px;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

/* ---------------------------------------------------------------
 * Filter tabs
 * ------------------------------------------------------------ */

.rr-search__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 28px;
	padding: 0 0 16px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.28);
}

.rr-search__filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 100px;
	color: inherit;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
}

.rr-search__filter.is-active {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	font-weight: 600;
}

.rr-search__count {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

/* ---------------------------------------------------------------
 * Results
 * ------------------------------------------------------------ */

.rr-search__results,
.rr-results {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.rr-result {
	display: flex;
	/* Without this the default `stretch` sizes the media box to the row
	   height, which overrides aspect-ratio and squashes the crop. */
	align-items: flex-start;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
	/* Theme and WooCommerce loop styles float and size list items by class;
	   these rows are laid out here and must not inherit any of that. */
	float: none;
	clear: both;
	width: auto;
	margin: 0;
}

.rr-result:first-child {
	padding-top: 0;
}

/* Square crop for every result, so the text column starts at the same place
   down the whole list whatever shape the source image is. */
.rr-result__media {
	display: block;
	flex: none;
	width: 108px;
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	background: rgba(128, 128, 128, 0.12);
	line-height: 0;
	overflow: hidden;
}

.rr-result__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.rr-result__body {
	flex: 1 1 auto;
	min-width: 0;
}

.rr-result__type {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	opacity: 0.6;
}

.rr-result__type time {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}

.rr-result__title {
	margin: 0 0 5px;
	font-size: 19px;
	line-height: 1.3;
}

.rr-result__title a {
	color: inherit;
	text-decoration: none;
}

.rr-result__price {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
}

.rr-result__price del {
	font-weight: 400;
	opacity: 0.55;
}

.rr-result__price ins {
	text-decoration: none;
}

.rr-result__preview {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	opacity: 0.8;
}

.rr-result__meta {
	margin: 8px 0 0;
	font-size: 13px;
	opacity: 0.65;
}

.rr-result__meta a {
	color: inherit;
}

/* The matched term, tinted rather than block-filled so it works on any
   background without assuming a text colour. */
.rr-search__hit {
	padding: 0 1px;
	border-radius: 2px;
	background: rgba(255, 193, 7, 0.28);
	color: inherit;
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Sections
 *
 * Products render through WooCommerce's own loop template, so the card
 * grid is the shop's - styled by WooCommerce and Storefront, not here.
 * ------------------------------------------------------------ */

.rr-search__section {
	margin: 0 0 44px;
}

.rr-search__sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 20px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.28);
}

.rr-search__sectionhead h2 {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}

.rr-search__viewall {
	color: inherit;
	font-size: 14px;
	white-space: nowrap;
}

/* WooCommerce's grid floats its cards. Contain them, and make everything that
   follows start on a clean line, or the pagination and the next section ride
   up alongside the floats. */
.rr-search__section ul.products::after {
	content: "";
	display: block;
	clear: both;
}

.rr-search__section {
	clear: both;
}

.rr-search__pagination {
	clear: both;
}

/* ---------------------------------------------------------------
 * Empty state and pagination
 * ------------------------------------------------------------ */

.rr-search__empty {
	max-width: 60ch;
	padding: 16px 0 40px;
}

.rr-search__empty h2 {
	margin: 0 0 10px;
	font-size: 22px;
}

.rr-search__empty p {
	margin: 0 0 12px;
	opacity: 0.8;
}

.rr-search__browse {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: inherit;
	text-decoration: none;
}

.rr-search__pagination {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(128, 128, 128, 0.22);
}

.rr-search__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rr-search__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 3px;
	color: inherit;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.rr-search__pagination .page-numbers.current {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	font-weight: 600;
}

.rr-search__pagination .page-numbers.dots {
	border-color: transparent;
}

/* ---------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------ */

@media only screen and (max-width: 767px) {

	.rr-search,
	.search #main.rr-search {
		padding: 0 30px 48px;
	}

	.rr-search__title {
		font-size: 23px;
	}

	/* Stacked on mobile: a full-width square reads far better than a thumbnail
	   squeezed beside three lines of wrapped text. */
	.rr-result {
		flex-direction: column;
		gap: 12px;
		padding: 20px 0;
	}

	.rr-result__media {
		width: 100%;
	}

	.rr-result__title {
		font-size: 17px;
	}

	.rr-result__preview {
		font-size: 14px;
	}

}

@media only screen and (min-width: 992px) {

	.rr-result__media {
		width: 150px;
	}
}

/* ---------------------------------------------------------------
 * WooCommerce cards
 * ------------------------------------------------------------ */

/* Badges ("NEW", "IT'S BACK!") are absolutely positioned. They need the card
   itself as their containing block, or they anchor to some wider ancestor and
   drift off the edge of the image - which is what happens at mobile widths. */
.rr-search ul.products li.product {
	position: relative;
}

/* And the image has to fill the card, or the badge sits against the card edge
   while the image is inset from it. */
.rr-search ul.products li.product img {
	display: block;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}