/* === Catalogue pages === */

/*
 * Filter bar (Filter Everything's [fe_widget] on the category pages), as the source's
 * kit styles it: the filters in one row, each a fifth of the bar (a scrolling row of
 * 10px-padded filters on phones); the title in Conso Special 12px with a hairline
 * chevron that turns 90° as its list opens over 0.35s.
 */
.wpc-filters-widget-wrapper {
	display: flex;
}

.wpc-filters-section.wpc-filter-taxonomy.wpc-filter-layout-checkboxes.wpc-filter-full-height.wpc-filter-collapsible.wpc-filter-visible-term-names {
	width: 20%;
}

/* The source's kit and theme reset set every button on one line in uppercase Futura
   Medium with 0.4px tracking, easing changes over 0.3s, and its text in #333; the
   plugin's own sheet loads later, hence the extra class. */
.wpc-filters-main-wrap {
	color: #333;
}

.wpc-filters-section .wpc-filter-header .wpc-filter-title button {
	width: unset;
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all 0.3s;
}

span.wpc-wrap-icons,
span.wpc-term-count {
	align-self: center;
	font-family: "Conso Special", sans-serif;
	font-size: 12px;
}

a.wpc-filter-link,
span.wpc-filter-selected-values {
	align-self: center;
	font-family: "Futura pt", sans-serif;
	font-size: 12px;
}

a.wpc-filter-link {
	color: black;
}

span.wpc-open-icon {
	margin-bottom: 3px;
	margin-left: 10px;
	border-top: 0.1px solid black !important;
	border-left: 0.1px solid black !important;
}

.wpc-filters-main-wrap input[type="radio"]:checked,
.wpc-filters-main-wrap input[type="checkbox"]:checked {
	border-color: black;
}

.wpc-filters-main-wrap input[type="checkbox"]::after {
	border-color: black;
}

/* The source's reset leaves the term lists without the theme's list margins. */
.wpc-filters-section .wpc-filters-ul-list {
	margin: 0;
}

.wpc-filters-section .wpc-filter-content {
	display: block !important;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: max-height 0.35s, opacity 0.35s, transform 0.35s;
}

.wpc-filters-section.wpc-opened .wpc-filter-content {
	max-height: 500px;
	opacity: 1;
	transform: translateY(0);
}

.wpc-filters-section .wpc-open-icon {
	transition: transform 0.35s;
}

.wpc-filters-section.wpc-opened .wpc-open-icon {
	transform: rotate(90deg);
}

@media (width <= 767px) {
	.wpc-filters-widget-wrapper {
		overflow-x: scroll;
	}

	.wpc-filters-section.wpc-filter-taxonomy.wpc-filter-layout-checkboxes.wpc-filter-full-height.wpc-filter-collapsible.wpc-filter-visible-term-names {
		width: 100%;
		padding: 10px;
	}
}

/*
 * Catalogue grid (the product-collection block's Catalogue grid styles; the next
 * page loads on scroll, assets/js/catalogue-grid.js): the source's loop grid — three
 * columns 30px apart (two up to 1024px, one on phones), each card inset 10px with
 * 20px under its caption, the framed photo 550px tall (440px up to 1024px, 4:5 on
 * phones) and cropped to fill (the close-up style: 120% of the card's width, centred;
 * the plain style on phones: 130% of the card's width, centred, as the source's
 * background-size: 130% auto).
 */
.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wc-block-product-template > li {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 10px 10px 20px;
}

.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .tillander-flip-card__inner > .wp-block-group:first-child {
	height: 550px;
	aspect-ratio: auto;
}

.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .tillander-flip-card__inner > .wp-block-group:first-child .wc-block-components-product-image {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}

.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) div.wc-block-components-product-image a {
	display: block;
	height: 100%;
}

.wp-block-woocommerce-product-collection.is-style-catalogue-grid-zoom .tillander-flip-card__inner > .wp-block-group:first-child img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120%;
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%);
}

/* The card title is inline text on its 24px line, as in the source. */
.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) h2.wp-block-post-title a {
	display: inline;
}

/* The source's title widget sits 1px lower than the caption's line box puts it; a
   card without a material label drops the label and is 21px shorter. */
.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wp-block-post-title {
	position: relative;
	top: 1px;
}

.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wp-block-post-title + p:empty {
	display: none;
}

.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wc-block-product-template > li:has(> p:empty) {
	padding-bottom: 21px;
}

/* After the last page the source's (empty) end-of-list message sits 30px under the grid. */
.wp-block-woocommerce-product-collection.is-complete:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) {
	padding-bottom: 30px;
}

/* The pagination is the script's source of the next page, not a control. */
.tillander-motion .wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wp-block-query-pagination {
	height: 0;
	margin: 0;
	overflow: hidden;
	visibility: hidden;
}

@media (width <= 1024px) {
	.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .tillander-flip-card__inner > .wp-block-group:first-child {
		height: 440px;
	}
}

@media (width <= 767px) {
	.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-woocommerce-product-collection:is(.is-style-catalogue-grid, .is-style-catalogue-grid-zoom) .tillander-flip-card__inner > .wp-block-group:first-child {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.wp-block-woocommerce-product-collection.is-style-catalogue-grid .tillander-flip-card__inner > .wp-block-group:first-child img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 130%;
		max-width: none;
		height: auto;
		transform: translate(-50%, -50%);
	}
}

/* Catalogue: Collectible Pearls. */

/* Text columns (the source's three-column text editor): every block keeps the
   source's 0.9rem paragraph margin under it, and its empty lines (spacers) move
   to the next column whole; one column without the margins on phones. */
.wp-block-group.is-style-catalogue-text-columns.is-layout-flow > * {
	margin-block: 0 0.9rem;
}

.wp-block-group.is-style-catalogue-text-columns > .wp-block-spacer {
	break-inside: avoid;
}

@media (width <= 767px) {
	.wp-block-group.is-style-catalogue-text-columns {
		columns: 1;
	}

	.wp-block-group.is-style-catalogue-text-columns.is-layout-flow > * {
		margin-block: 0;
	}
}

/* Catalogue: Catalogue index, Shop by catalogue. */

/* Catalogue tabs (the source's nested tabs): titles in Futura 16px on a 24px line
   between 15px / 35px padding, with no frame or fill; the selected title white, the
   others black turning white on hover (0.3s). Until the script runs, the first title
   and panel stand selected. */
.wp-block-group.is-style-catalogue-tabs .wp-block-button > button.wp-block-button__link {
	display: block;
	padding: 15px 35px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #000;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	transition: color 0.3s;
}

.wp-block-group.is-style-catalogue-tabs .wp-block-button > button.wp-block-button__link:hover,
.wp-block-group.is-style-catalogue-tabs .wp-block-button > button.wp-block-button__link[aria-selected="true"],
.wp-block-group.is-style-catalogue-tabs .wp-block-button:first-child > button.wp-block-button__link:not([role]) {
	color: #fff;
}

.wp-block-group.is-style-catalogue-tabs > .wp-block-group > :not([role], :first-child) {
	display: none;
}

/* Phones: the titles stack at full width and each panel opens under its own title,
   10px down (the source's accordion; the script numbers the tabs). */
@media (width <= 767px) {
	.wp-block-group.is-style-catalogue-tabs {
		display: flex;
		flex-direction: column;
	}

	.wp-block-group.is-style-catalogue-tabs > :is(.wp-block-buttons, .wp-block-group) {
		display: contents;
	}

	.wp-block-group.is-style-catalogue-tabs .wp-block-button {
		width: 100%;
		order: calc(var(--catalogue-tab, 0) * 2);
	}

	.wp-block-group.is-style-catalogue-tabs .wp-block-button:has(> [aria-selected="true"]),
	.wp-block-group.is-style-catalogue-tabs .wp-block-button:first-child:has(> :not([role])) {
		margin-bottom: 10px;
	}

	.wp-block-group.is-style-catalogue-tabs > .wp-block-group > .wp-block-group {
		order: calc(var(--catalogue-tab, 0) * 2 + 1);
	}
}

/* Catalogue: Wedding rings. */

/* Spaced carousel (the wedding bands' loop carousels): the Carousel style on a
   1365px box with 50px between the source's slides — the track 40px in from the
   box, the cards 70px apart, three in view (two below 1024px, one on phones). */
.wp-block-group.is-style-catalogue-carousel-spaced .wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template {
	gap: 70px;
	width: calc(min(100%, 1365px) - 80px);
}

.wp-block-group.is-style-catalogue-carousel-spaced .wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
	flex-basis: calc((100% - 140px) / 3);
}

.wp-block-group.is-style-catalogue-carousel-spaced .wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow--prev {
	left: max(0px, (100% - 1365px) / 2);
}

.wp-block-group.is-style-catalogue-carousel-spaced .wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow--next {
	right: max(0px, (100% - 1365px) / 2);
}

@media (width < 1024px) {
	.wp-block-group.is-style-catalogue-carousel-spaced .wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
		flex-basis: calc((100% - 70px) / 2);
	}
}

@media (width < 767px) {
	.wp-block-group.is-style-catalogue-carousel-spaced .wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
		flex-basis: 100%;
	}
}

/* Carousel photos to fill (and the Spaced carousel): the source's loop cards paint
   the photo as a cover background, filling the card (the image block's Cover
   scale); on phones the source kit draws it at 130% of the card width, centred. */
.wp-block-group:is(.is-style-catalogue-carousel-spaced, .is-style-catalogue-carousel-cover) .wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child .wc-block-components-product-image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.wp-block-group:is(.is-style-catalogue-carousel-spaced, .is-style-catalogue-carousel-cover) .wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child img {
	height: 100%;
}

@media (width <= 767px) {
	.wp-block-group:is(.is-style-catalogue-carousel-spaced, .is-style-catalogue-carousel-cover) .wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child img {
		flex-shrink: 0;
		width: 130%;
		max-width: none;
		height: auto;
	}
}

/* A collection band's product text goes under its photo card on phones. */
@media (width <= 767px) {
	.wp-block-group.is-style-catalogue-band-caption {
		order: 1;
	}
}

/* Catalogue: Men, Children. */

/* Catalogue carousel (the MEN and CHILDREN loop carousels): each slide of the
   source carries 10px over the card and 20px under its caption, and its arrows
   sit level with the middle of the slide, 27px up (the swiper's arrows on the
   slide height, whatever the caption's lines). */
.wp-block-group.is-style-catalogue-carousel .wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
	padding: 10px 0 20px;
}

.wp-block-group.is-style-catalogue-carousel .wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow {
	top: calc(50% - 27px) !important;
	margin: 0;
}

/* A carousel whose cards all fit shows no arrows (the swiper's locked state). */
.wp-block-group.is-style-catalogue-carousel .wp-block-woocommerce-product-collection.is-style-carousel:has(.tillander-carousel-arrow--prev[disabled]):has(.tillander-carousel-arrow--next[disabled]) .tillander-carousel-arrow {
	display: none;
}

/* The zoomed photo (130%, CHILDREN) is centred on the card as the source's
   background, not hung from the link's left edge. */
.wp-block-group.is-style-catalogue-carousel .wp-block-group.is-style-collections-zoom .wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child img {
	margin-left: -15%;
}

/* Catalogue request (MEN's request banner): on phones the REQUEST link is the
   framed button on the photograph, clear rather than white; below 701px the copy
   turns white and the button is framed and lettered in white (the source page's
   own rules). */
@media (width <= 767px) {
	.wp-block-group.is-style-catalogue-request p.is-style-action-link a {
		background: none;
	}
}

@media (width <= 700px) {
	.wp-block-group.is-style-catalogue-request > p:first-child {
		color: #fff;
	}

	.wp-block-group.is-style-catalogue-request p.is-style-action-link a {
		border-color: #fff;
		color: #fff;
	}
}

/* Catalogue photo pair (the MEN and CHILDREN collage): on phones the second
   photo's column comes first (the source's reversed, wrapping row), each
   column full width. */
@media (width <= 767px) {
	.wp-block-group.is-style-catalogue-photo-pair {
		flex-direction: column-reverse;
	}

	.wp-block-group.is-style-catalogue-photo-pair > .wp-block-group {
		flex-basis: auto;
	}
}