/* Tiles and Cabinets Search: the search results page and the category pages.
   Both use the same layout, from assets/results.js. */

#ais-wrapper {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px 20px 60px;
}

#ais-main { flex: 1 1 auto; min-width: 0; }

#ais-facets {
	flex: 0 0 240px;
	order: -1;
	font-size: 14px;
}

.algolia-search-box-wrapper {
	position: relative;
	margin-bottom: 8px;
}

/* The search box is spelt out in full and held to #algolia-search-box: the
   theme styles search inputs and anything called .search-icon on its shop
   and category pages, which bent this box out of shape there. */
#algolia-search-box .ais-SearchBox-form { position: relative; margin: 0; }

#algolia-search-box input[type="search"],
#algolia-search-box .ais-SearchBox-input {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 14px 16px 14px 44px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
	color: #111;
	background: #fff;
	background-image: none;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

#algolia-search-box input[type="search"]::placeholder { color: #8a8a8a; opacity: 1; }
#algolia-search-box input[type="search"]:focus { border-color: #dc9814; outline: none; }

#algolia-search-box .ais-SearchBox-submit,
#algolia-search-box .ais-SearchBox-reset,
#algolia-search-box .ais-SearchBox-loadingIndicator { display: none !important; }

.algolia-search-box-wrapper .tc-search-icon {
	position: absolute;
	left: 14px;
	top: 16px;
	z-index: 1;
	width: 18px;
	height: 18px;
	fill: #999;
	pointer-events: none;
}

.algolia-search-box-wrapper .tc-search-icon path { fill: #999; }

#algolia-stats {
	margin: 10px 0 24px;
	color: #767676;
	font-size: 13px;
}

/* Product grid */
#algolia-hits .ais-Hits-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#algolia-hits .ais-Hits-item {
	list-style: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	border: 0;
}

.tc-hit-media {
	position: relative;
	margin-bottom: 12px;
}

.tc-hit-image {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f5f5f5;
	border-radius: 4px;
}

.tc-hit-image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: opacity 0.18s ease;
}

/* Room photos fill the card; product shots are on white and shown whole,
   so a sink is not cropped. */
.tc-hit-image img.is-product {
	object-fit: contain;
	background: #fff;
}

.tc-hit-image .tc-img-second { opacity: 0; }

@media (hover: hover) {
	.tc-hit-media.has-second:hover .tc-img-second.is-loaded { opacity: 1; }
}

.tc-hit-media.is-swapped .tc-img-second.is-loaded { opacity: 1; }

/* Phones have no hover: a small product photo in the corner, tapped to swap. */
.tc-swap {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.tc-swap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tc-hit-media.is-swapped .tc-swap { border-color: #dc9814; }

@media (hover: none) {
	.tc-swap { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.tc-hit-image img { transition: none; }
}

.tc-hit-title {
	font-size: 15px;
	line-height: 1.4;
	margin: 0 0 6px;
	font-weight: 500;
}

.tc-hit-title a { text-decoration: none; color: inherit; }
.tc-hit-title a:hover { text-decoration: underline; }
.tc-hit-title em { font-style: normal; background: #fff2ac; }

.tc-hit-sku {
	font-size: 12px;
	color: #8a8a8a;
	letter-spacing: 0.3px;
	margin-bottom: 4px;
}

.tc-hit-sku em { font-style: normal; background: #fff2ac; }

.tc-hit-price { font-size: 15px; font-weight: 600; }
.tc-hit-price .tc-was { font-weight: 400; color: #999; text-decoration: line-through; margin-right: 6px; }
.tc-hit-stock { margin-top: 4px; font-size: 13px; font-weight: 500; color: #b3261e; }
.tc-hit-price .tc-unit { font-size: 13px; font-weight: 400; color: #767676; }

/*
 * Add to Cart and Order a Sample. Stacked rather than side by side: at four
 * cards to a row there is no room for both words on one line without one of
 * them wrapping.
 *
 * The theme pins every .button inside its own loop tile to the bottom of the
 * card with position: absolute, which is what hid the sample button on the
 * theme's listing on 11 September. A card here is not one of its .product
 * tiles, so that rule does not reach this far, but position is stated anyway
 * so a theme update cannot move them.
 */
.tc-hit-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
	position: static;
}

.tc-hit-actions .button {
	position: static;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	/* Held, so hiding the words for the spinner below cannot shrink it. */
	min-height: 40px;
}

.tc-hit-actions .order_sample_product {
	cursor: pointer;
}

/*
 * While the click is in flight. Both buttons are marked with the class
 * "loading" by the script that owns them, WooCommerce's for Add to Cart and
 * the samples plugin's for the other, and both then fade the button and
 * nothing else, which on a card reads as the click having done nothing.
 *
 * So the button keeps its colour and turns its words into a spinner. Hiding
 * the words needs !important: something on this site declares their size that
 * way, and the samples plugin declares its own colour that way too, so a
 * plain rule is outranked either way. Read off the live page, 2 November.
 * The #algolia-hits prefix outranks WooCommerce's own
 * .woocommerce a.button.loading, which fades the button to a quarter.
 */
#algolia-hits .tc-hit-actions .button.loading {
	position: relative;
	color: transparent !important;
	opacity: 1;
	pointer-events: none;
}

#algolia-hits .tc-hit-actions .button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid transparent;
	border-top-color: #fff;
	border-radius: 50%;
	animation: tc-hit-spin 0.7s linear infinite;
}

/*
 * White suits the green Add to Cart. Order a Sample is an outlined button
 * with a white face and near black text, so its arc is named separately
 * rather than inherited: the rule above has just made the text transparent,
 * and currentColor would hand the arc that.
 */
#algolia-hits .tc-hit-actions .order_sample_product.loading::after {
	border-top-color: #1c1c1c;
}

@keyframes tc-hit-spin {
	to { transform: rotate( 360deg ); }
}

@media (prefers-reduced-motion: reduce) {
	#algolia-hits .tc-hit-actions .button.loading::after { animation: none; }
}

.tc-hit-actions .button[disabled] {
	cursor: default;
}

/*
 * WooCommerce's add-to-cart script puts a "View cart" link immediately after
 * the button it just used. In a grid of cards that link pushes Order a Sample
 * down and the whole row jumps, and the slide out cart has already opened
 * with a View cart button of its own, so it is hidden here rather than given
 * room it does not need.
 */
.tc-hit-actions .added_to_cart {
	display: none;
}

.tc-hit-type {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #767676;
	margin-bottom: 4px;
}

/* Filters */
#ais-facets .ais-Panel { margin-bottom: 28px; }
#ais-facets .ais-Panel--hidden,
#ais-facets .ais-Panel[hidden] { display: none; }

#ais-facets .ais-Panel-header {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

#ais-facets ul { list-style: none; margin: 0; padding: 0; }
#ais-facets li { margin-bottom: 6px; line-height: 1.4; }
#ais-facets a { text-decoration: none; color: #333; }
#ais-facets a:hover { text-decoration: underline; }
#ais-facets .ais-HierarchicalMenu-list--child { margin: 6px 0 0 14px; }
#ais-facets .ais-HierarchicalMenu-item--selected > div > a,
#ais-facets .ais-Menu-item--selected a { font-weight: 600; }
#ais-facets .ais-HierarchicalMenu-count,
#ais-facets .ais-RefinementList-count,
#ais-facets .ais-Menu-count { color: #999; font-size: 12px; margin-left: 4px; }
#ais-facets .ais-RefinementList-label { display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
#ais-facets .ais-RefinementList-checkbox { margin: 0; flex: 0 0 auto; }

#ais-facets .ais-SearchBox-form { margin: 0 0 8px; }
#ais-facets .ais-SearchBox-input {
	width: 100%;
	padding: 6px 10px;
	font-size: 13px;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
}
#ais-facets .ais-SearchBox-submit,
#ais-facets .ais-SearchBox-reset,
#ais-facets .ais-SearchBox-loadingIndicator { display: none; }

#ais-facets .ais-RefinementList-showMore {
	margin-top: 6px;
	padding: 0;
	font-size: 13px;
	color: #dc9814;
	background: none;
	border: 0;
	cursor: pointer;
}
#ais-facets .ais-RefinementList-showMore--disabled { display: none; }

/* Chosen filters, above the list */
#tc-current { margin-bottom: 20px; }
#tc-current:empty { display: none; }
#tc-current .ais-CurrentRefinements-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
#tc-current .ais-CurrentRefinements-item { display: contents; }
#tc-current .ais-CurrentRefinements-label { display: none; }
#tc-current .ais-CurrentRefinements-category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	font-size: 13px;
	background: #f6f6f4;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
}
#tc-current .ais-CurrentRefinements-delete {
	padding: 0;
	font-size: 15px;
	line-height: 1;
	color: #767676;
	background: none;
	border: 0;
	cursor: pointer;
}
#tc-clear .ais-ClearRefinements-button {
	padding: 0;
	font-size: 13px;
	color: #dc9814;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}
#tc-clear .ais-ClearRefinements-button--disabled { display: none; }
#tc-clear { margin-bottom: 24px; }
#tc-clear:has(.ais-ClearRefinements-button--disabled) { margin-bottom: 0; }

#tc-filters-toggle { display: none; }

#algolia-pagination { margin-top: 40px; }
/* One page of results needs no page list. */
#algolia-pagination .ais-Pagination--noRefinement { display: none; }
#algolia-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
#algolia-pagination a, #algolia-pagination span {
	display: block;
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
}
#algolia-pagination .ais-Pagination-item--selected a { background: #333; color: #fff; border-color: #333; }

#algolia-powered-by { margin-top: 30px; opacity: 0.6; }

/* On a phone the filters fold away behind a button, or nine lists would
   push the results a long way down. */
@media (max-width: 900px) {
	#ais-wrapper { flex-direction: column; gap: 16px; }
	#ais-facets { flex: 1 1 auto; order: 0; width: 100%; display: none; }
	#ais-facets.is-open { display: block; }

	#tc-filters-toggle {
		display: block;
		width: 100%;
		padding: 10px 14px;
		font-size: 15px;
		font-weight: 600;
		text-align: left;
		color: #111;
		background: #f6f6f4;
		border: 1px solid #e6e6e6;
		border-radius: 6px;
		cursor: pointer;
	}
}

@media (max-width: 600px) {
	#algolia-hits .ais-Hits-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.tc-hit-title { font-size: 14px; }
}

/* Category pages */

/* The title sits at the top of the product column, where the theme had it. */
.tc-cat-head { margin: 0 0 20px; }

.tc-cat-head .page-title { margin: 0 0 8px; }
.tc-cat-head .term-description { max-width: 800px; color: #444; }

/* The WooCommerce product list stays in the page for search engines and
   for anyone without JavaScript. While the Algolia layout is expected it
   is hidden, and if the layout does not start it comes back on its own. */
.tc-cat-fallback {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 20px 60px;
}

html.tc-results-js .tc-cat-fallback { display: none; }
html:not(.tc-results-js) .tc-cat #ais-wrapper { display: none; }

/* The price range. Two number boxes rather than a slider, so nothing
   depends on a second stylesheet, and the unit note sits under the
   heading because one range covers sq ft, linear ft and piece. */
#ais-facets .tc-facet-note {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #888;
	line-height: 1.35;
}

#ais-facets .ais-RangeInput-form {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

#ais-facets .ais-RangeInput-input {
	width: 72px;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 2px;
	font-size: 13px;
	background: #fff;
}

#ais-facets .ais-RangeInput-separator { color: #888; font-size: 12px; }

#ais-facets .ais-RangeInput-submit {
	padding: 6px 12px;
	border: 1px solid #333;
	border-radius: 2px;
	background: #333;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

#ais-facets .ais-RangeInput-submit:hover { background: #000; border-color: #000; }