/* === Collections pages === */

/* The index's ICONICS list: the hovered row slides 15px right and a 10px line
   draws in 5px before its text, over 0.25s. */
.is-style-collections-hover-line > p {
	display: flex;
	align-items: center;
	backface-visibility: hidden;
	transition: transform 0.25s ease;
}

.is-style-collections-hover-line > p:hover,
.is-style-collections-hover-line > p:focus-within {
	transform: translateX(15px);
}

.is-style-collections-hover-line > p a {
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.is-style-collections-hover-line > p a::before {
	position: absolute;
	top: 50%;
	right: calc(100% + 5px);
	width: 0;
	pointer-events: none;
	content: "";
	border-top: 1.5px solid currentcolor;
	opacity: 0;
	transform: translateY(-50%);
	transition: width 0.25s ease, opacity 0.25s ease;
}

.is-style-collections-hover-line > p:hover a::before,
.is-style-collections-hover-line > p:focus-within a::before {
	width: 10px;
	opacity: 1;
}

/* The index's collection names (the kit's animated-underline headings): the
   link is the title, an inline-block 15px below its box top that rises over
   0.25s on hover while its 1.5px underline grows from the left. The heading
   (the source's widget) stays within its grid cell; a longer name overflows
   it to the right. */
.wp-block-heading.is-style-collections-underline {
	box-sizing: border-box;
	max-width: 100%;
}

.wp-block-heading.is-style-collections-underline a {
	position: relative;
	display: inline-block;
	padding-top: 15px;
	font-size: 0.7rem;
	color: inherit;
	text-decoration: none;
	transition: padding-top 0.25s ease;
}

.wp-block-heading.is-style-collections-underline a::after {
	position: absolute;
	bottom: 0.002em;
	left: 0;
	width: 100%;
	height: 1.5px;
	content: "";
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease-out;
	will-change: transform;
}

.wp-block-heading.is-style-collections-underline:hover a {
	padding-top: 0;
}

.wp-block-heading.is-style-collections-underline:hover a::after,
.wp-block-heading.is-style-collections-underline a:focus-visible::after {
	transform: scaleX(1);
}

@media (width <= 1024px) {
	.wp-block-heading.is-style-collections-underline a {
		font-size: 0.8rem;
	}
}

/* The collection pages' flip boxes (Card link style) are one link: the back's VIEW
   link covers the card, as the source's back layer is the link. */
.wp-block-tillander-flip-card.is-style-collections-view .tillander-flip-card__inner > .wp-block-group:nth-child(2) a::before {
	position: absolute;
	inset: 0;
	content: "";
}

/* Some collection carousels show their photos at 130% of the card width, centred
   (the source's loop carousel custom CSS). */
.wp-block-group.is-style-collections-zoom .wp-block-woocommerce-product-collection.is-style-carousel .tillander-flip-card__inner > .wp-block-group:first-child .wc-block-components-product-image {
	justify-content: center;
}

.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 {
	flex-shrink: 0;
	width: 130%;
	max-width: none;
	margin-left: -15%;
}

/* Two slides to a view at every width above phones (the source's loop
   carousel setting). */
@media (width > 767px) {
	.wp-block-group.is-style-collections-pair .wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
		flex-basis: calc((100% - 30px) / 2);
	}
}

/* A carousel whose slides all fit draws no arrows in the source (Swiper's
   overflow lock); here both its arrows are disabled then. A single product is
   no Swiper and keeps its arrows (below). */
.wp-block-group.is-style-collections-carousel:not(.is-style-collections-single) .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;
}

/* A single product is no carousel in the source: one slide the carousel's
   width, its card at the loop template's 1140px box, centred. Unstarted, the
   slide lends its widget only its intrinsic height on phones (329px live), and
   the card hangs over what follows. */
.wp-block-group.is-style-collections-single .wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template > li {
	flex-basis: 100%;
	max-width: 1140px;
	margin-inline: auto;
}

/* Its arrows stay drawn as the source's are, though there is nothing to step to. */
.wp-block-group.is-style-collections-single .wp-block-woocommerce-product-collection.is-style-carousel .tillander-carousel-arrow[disabled] {
	opacity: 1;
}

/* The arrows centre on that 329px widget, not on the card (site-chrome.js
   centres them on the carousel when it is shorter than its track). */
@media (width <= 767px) {
	.wp-block-group.is-style-collections-single {
		height: 329px;
	}

	.wp-block-group.is-style-collections-single .wp-block-woocommerce-product-collection.is-style-carousel {
		height: 100%;
	}
}

/* The other carousels' photos fill the card (the loop template's cover
   background; the image block's Cover scale), whatever srcset candidate the
   browser holds: the photo's link is a flex item sized by that candidate
   otherwise, and a single product's card is wider than the largest `sizes`
   slot. On phones the kit draws them at 130% of the card's width, centred. */
.wp-block-group.is-style-collections-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-style-collections-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-style-collections-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;
	}
}

/* The kit's animated-underline button: plain text whose 1.5px underline grows
   from the left over 0.25s on hover; on phones a dark-grey outlined bar the
   column's width (the widget's transparent background wins over the kit's
   white there). */
.wp-block-button.is-style-collections-link .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0;
	color: #000;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 0;
}

.wp-block-button.is-style-collections-link .wp-block-button__link::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.5px;
	content: "";
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease-out;
	will-change: transform;
}

.wp-block-button.is-style-collections-link .wp-block-button__link:hover::after,
.wp-block-button.is-style-collections-link .wp-block-button__link:focus-visible::after {
	transform: scaleX(1);
}

@media (width <= 767px) {
	.wp-block-buttons:has(> .wp-block-button.is-style-collections-link) {
		flex-grow: 1;
	}

	.wp-block-button.is-style-collections-link,
	.wp-block-button.is-style-collections-link .wp-block-button__link {
		width: 100%;
	}

	.wp-block-button.is-style-collections-link .wp-block-button__link {
		justify-content: center;
		padding: 10px 20px;
		border: 1px solid darkgray;
	}
}

/* Phones show the collection flip boxes 4:5 at the column's width (the source
   kit's flip-box rule). */
@media (width <= 767px) {
	.wp-block-tillander-flip-card.is-style-collections-view .tillander-flip-card__inner > .wp-block-group:first-child {
		aspect-ratio: 4 / 5;
	}
}

/* The source's hero and banner photos stay put while the page scrolls (Elementor's
   fixed attachment from 1025px up), except up to 1366px in landscape, where the
   source kit lets them scroll for tablets. Fixed, a cover photo is sized and
   placed against the viewport, not its band. */
@media (width > 1366px), (width > 1024px) and (orientation: portrait) {
	.wp-block-group.is-style-collections-fixed {
		background-attachment: fixed;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-heading.is-style-collections-underline a,
	.wp-block-heading.is-style-collections-underline a::after,
	.is-style-collections-hover-line > p,
	.is-style-collections-hover-line > p a::before,
	.wp-block-button.is-style-collections-link .wp-block-button__link::after {
		transition: none;
	}
}