/**
 * YK WC Swatches — Archive cards.
 *
 * Styles ONLY what the plugin adds to WooCommerce's default card: the colour slider that
 * replaces the thumbnail, its arrows, and the swatch row. The card itself — grid, image
 * box, title, price, BeRocket labels — is the theme's; the only thing set on it here is
 * its click area (see "Click area" below), never its look.
 */

/* ── Click area ──────────────────────────────────────────────────────────────
   The card link is a full-width block, so the empty space beside the title and price
   used to open the product too. The link itself stops taking clicks; only the image,
   title and price (and the swatches, which cancel navigation in yk-lv.js) take them
   back. Their clicks still bubble to the <a>, so navigation and the per-colour href are
   unchanged. BeRocket labels inherit `none`, so a click on one lands on the image under
   it. Keyboard focus and Enter are unaffected: pointer-events is mouse and touch only. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	pointer-events: none;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .yk-lv-media,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .price,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .yk-lv-swatch {
	pointer-events: auto;
}

/* Still block-level on their own lines, but the hit box shrinks to the text, so the
   space to their right is not a link. Left-aligned, so nothing moves. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .price {
	width: fit-content;
}

/* ── Slider ──────────────────────────────────────────────────────────────────
   WooCommerce gives the loop image `margin: 0 0 1em` (li.product a img). The slider
   takes that margin over, so the title sits exactly where it sits under a plain image. */
.yk-lv-media {
	position: relative;
	margin: 0 0 1em;
}

.yk-lv-track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* A swipe past the last slide must not scroll the page or trigger iOS back. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.yk-lv-track::-webkit-scrollbar {
	display: none;
}

/* Exactly one track width per slide: yk-lv.js derives the index from that. */
.yk-lv-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Slides behind the "+" leave the track, so swiping stops there too. */
.yk-lv-slide[hidden] {
	display: none;
}

.woocommerce ul.products li.product .yk-lv-slide img {
	margin: 0;
	-webkit-user-drag: none;
	user-select: none;
}

/* ── Loading spinner ─────────────────────────────────────────────────────────
   Only on slides whose photo is still loading (yk-lv.js sets .is-loading). The image
   paints over it once it arrives; the class is removed on load either way. */
.yk-lv-slide.is-loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 2px solid #e2e2e2;
	border-top-color: #000000;
	border-radius: 50%;
	animation: yk-lv-spin 0.8s linear infinite;
}

.yk-lv-slide.is-loading img {
	position: relative;
}

@keyframes yk-lv-spin {
	to { transform: rotate(360deg); }
}

/* ── Arrows ──────────────────────────────────────────────────────────────────
   Shown on hover, gone at the ends (and at the last colour before the "+"). Touch
   devices swipe instead, so they never see them. Above BeRocket labels (z-index 5).
   The glyph is the blog "mehr" button's (`.lv-blog-list .wp-block-read-more::before` in
   the theme's style.css): a plain "<" / ">" in the typewriter face, no disc behind it. */
.yk-lv-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #000000;
	font-family: itc-american-typewriter, serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.yk-lv-nav--prev::before { content: '<'; }
.yk-lv-nav--next::before { content: '>'; }

.yk-lv-nav--prev { left: 8px; }
.yk-lv-nav--next { right: 8px; }

li.product:hover .yk-lv-nav:not(.is-disabled) {
	opacity: 1;
}

.yk-lv-nav.is-disabled {
	pointer-events: none;
}

@media (hover: none) {
	.yk-lv-nav {
		display: none;
	}
}

/* ── Swatch row ──────────────────────────────────────────────────────────────
   Same look as the product page's colour swatch (yk-lv-product.css, .yk-lv-term): a 1px
   #dddddd ring, a 3px white gap, then the colour — black ring when selected. Only the
   size (18px colour) and the check badge are the card's own. The colour is the inline
   background, clipped to the content box so the gap stays clear. */
.yk-lv-swatches {
	display: flex;
	flex-wrap: wrap;
	/* 6px between rings at least, as on the product page (.yk-lv-term margin-right).
	   yk-lv.js widens it so a full row spans the image exactly, and uses that same gap on
	   every card of the same width, with or without a "+". */
	gap: 6px;
	/* Ring and badge sit inside each swatch's box, so the first ring lines up with the
	   image's left edge. The 3px on top keeps the focus outline clear of the image. */
	padding: 3px 0 0;
	margin: 0 0 0.625rem;
}

.yk-lv-swatch {
	position: relative;
	display: block;
	box-sizing: border-box;
	/* 18px colour + 3px gap + 1px ring on each side. */
	width: 26px;
	height: 26px;
	padding: 3px;
	border: 1px solid #dddddd;
	border-radius: 50%;
	background-clip: content-box;
	background-origin: content-box;
	flex-shrink: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.yk-lv-swatch[hidden] {
	display: none;
}

.yk-lv-swatch:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 1px;
}

/* Sold out in every size: the fill is veiled, not the whole swatch, so the selected
   outline and badge stay black like on any other colour. */
.yk-lv-swatch.is-out-of-stock::before {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background-color: #ffffff;
	opacity: 0.6;
	pointer-events: none;
}

/* Selected: black ring + check badge on the top-right corner of the colour. */
.yk-lv-swatch.is-active {
	border-color: #000000;
}

.yk-lv-swatch.is-active::after {
	content: '';
	position: absolute;
	/* 3px outside the colour, as before the ring moved inside the box. */
	top: 1px;
	right: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #000000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4 13 9 18 20 6' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 62%;
	box-shadow: 0 0 0 1px #ffffff;
	pointer-events: none;
}

/* "+": a grey swatch with a plus drawn in it, no count. Same ring as the colours. */
.yk-lv-swatch--more {
	background-color: #ececea;
}

.yk-lv-swatch--more::before,
.yk-lv-swatch--more::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 1px;
	background-color: #555555;
	transform: translate(-50%, -50%);
}

.yk-lv-swatch--more::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* ── Tooltip ─────────────────────────────────────────────────────────────────
   The colour name in the product page's bubble: every value is copied from the tooltip
   in yk-lv-product.css (.yk-lv-term[data-tooltip]::after), so both pages show the same
   one. It is a child element, not a pseudo-element: ::before and ::after are taken by
   the sold-out veil and the check badge (and the "+"'s plus sign). Hover devices only —
   on touch a tap would leave it stuck over the photo. */
.yk-lv-tip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	/* Above the arrows (6) and BeRocket labels (5). */
	z-index: 10;
	pointer-events: none;
	transition: 0.3s ease;
	transition-delay: 0ms;
	background: #ffffff;
	color: #000000;
	padding: 8px 10px;
	font-size: 13px;
	font-family: europa, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 12px;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	border: 0.5pt #d0d0d0 solid;
	white-space: nowrap;
	text-shadow: 0 0 0 grey;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
	.yk-lv-swatch:hover .yk-lv-tip {
		visibility: visible;
		opacity: 1;
		transform: translateX(-50%) translateY(-8px);
		transition-delay: 100ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yk-lv-nav,
	.yk-lv-tip {
		transition: none;
	}

	.yk-lv-slide.is-loading::before {
		animation-duration: 2.4s;
	}
}