/*
 * Elivan Variation Swatches v1.4.2
 * Styles for product page + shop/archive table layout.
 */

/* ── CSS custom properties (overridden by inline :root{} from PHP) ── */
:root {
	--elivan-swatch-size:            30px;
	--elivan-swatch-radius:          50%;
	--elivan-swatch-font:            14px;
	--elivan-swatch-border:          #ddd;
	--elivan-swatch-border-selected: #c4a265;
	--elivan-swatch-bg:              #fff;
	--elivan-swatch-color:           #333;
	--elivan-swatch-unavail-opacity: 0.35;
}

/* ── Hidden native select (product page) ── */
.elivan-swatches__hidden-select {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
	overflow: hidden;
	pointer-events: none;
}

/* ── Swatch container ── */
.elivan-swatches {
	display:    block;
	width:      100%;
	max-width:  100%;
	min-width:  0;
	box-sizing: border-box;
	/* Do NOT set overflow:hidden here — it clips the right carousel arrow.
	   Clipping is handled by .elivan-swatches__track-wrap instead. */
}

/* ── Items row ── */
.elivan-swatches__items {
	display:     flex;
	flex-wrap:   wrap;
	gap:         4px;
	align-items: center;
	list-style:  none;
	margin:      0;
	padding:     0;
}

/* ── Single swatch wrapper ── */
.elivan-swatches__item-wrap {
	position: relative;
	display:  inline-flex;
}

/* ── Swatch button / link base ── */
.elivan-swatches__item {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           var(--elivan-swatch-size);
	height:          var(--elivan-swatch-size);
	border:          2px solid var(--elivan-swatch-border);
	border-radius:   var(--elivan-swatch-radius);
	background:      var(--elivan-swatch-bg);
	color:           var(--elivan-swatch-color);
	cursor:          pointer;
	padding:         0;
	font-size:       var(--elivan-swatch-font);
	font-family:     inherit;
	text-decoration: none;
	box-sizing:      border-box;
	overflow:        hidden;
	flex-shrink:     0;
}

.elivan-swatches__item:hover {
	border-color: var(--elivan-swatch-border-selected);
}

.elivan-swatches__item.is-selected {
	border-color: var(--elivan-swatch-border-selected);
	border-width: 2px;
	box-shadow:   0 0 0 2px var(--elivan-swatch-border-selected);
}

.elivan-swatches__item.is-unavailable {
	opacity: var(--elivan-swatch-unavail-opacity);
	position: relative;
}

/* Diagonal strikethrough on unavailable */
.elivan-swatches__item.is-unavailable::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		rgba(0,0,0,.35),
		transparent calc(50% + 1px)
	);
	border-radius: var(--elivan-swatch-radius);
}

/* ── Color dot ── */
.elivan-swatches__color {
	display:       block;
	width:         100%;
	height:        100%;
	border-radius: inherit;
}

/* ── Image swatch ── */
.elivan-swatches__img {
	width:         100%;
	height:        100%;
	object-fit:    cover;
	border-radius: inherit;
	display:       block;
}

/* ── Text / label swatch ── */
.elivan-swatches__item--text,
.elivan-swatches__label {
	padding:     2px 6px;
	white-space: nowrap;
	font-size:   var(--elivan-swatch-font);
	line-height: 1.2;
}

/* Text swatches: auto-width */
.elivan-swatches__item:has(.elivan-swatches__label) {
	width:      auto;
	min-width:  var(--elivan-swatch-size);
	padding:    0 8px;
}

/* ── Attribute label (optional) ── */
.elivan-swatches__attr-label {
	display:     block;
	font-size:   12px;
	color:       #666;
	margin-bottom: 4px;
}

/* ── Tooltip ── */
.elivan-swatches__tooltip {
	position:   absolute;
	bottom:     calc(100% + 6px);
	left:       50%;
	transform:  translateX(-50%);
	background: #222;
	color:      #fff;
	border-radius: 4px;
	padding:    4px 8px;
	font-size:  12px;
	white-space: nowrap;
	pointer-events: none;
	opacity:    0;
	transition: opacity 0.15s ease;
	z-index:    99;
	min-width:  40px;
	text-align: center;
}

.elivan-swatches__tooltip-img {
	display:       block;
	width:         60px;
	height:        60px;
	object-fit:    cover;
	border-radius: 3px;
	margin-bottom: 4px;
}

/* Tooltip with an image: allow the label to wrap and let the box size to content */
.elivan-swatches__tooltip--with-image {
	white-space:   normal;
	min-width:     60px;
	max-width:     220px;
	line-height:   1.35;
}

.elivan-swatches__item-wrap:hover .elivan-swatches__tooltip {
	opacity: 1;
}

/* Arrow above tooltip */
.elivan-swatches__tooltip::after {
	content:      '';
	position:     absolute;
	top:          100%;
	left:         50%;
	transform:    translateX(-50%);
	border:       5px solid transparent;
	border-top-color: #222;
}

/* ── Shop / archive: TABLE layout ────────────────────────────────── */
/*
 * Uses a <table> exactly like the reference plugin so Blocksy and other
 * themes calculate card height consistently across all products.
 */
.elivan-shop-form {
	width:    100%;
	margin:   6px 0 0;
}

.elivan-shop-variations {
	width:      100%;
	border:     none;
	border-collapse: collapse;
	table-layout: fixed;
}

/* Same fix for WooCommerce's product-page variations table when it holds our
   swatches: stop the table growing past its container because of nowrap rows. */
table.variations:has(.elivan-swatches) {
	table-layout: fixed;
}

.elivan-shop-variations td {
	padding:    2px 0;
	border:     none;
	vertical-align: middle;
}

.elivan-shop-variations td.label {
	width:     auto;
	padding-right: 6px;
	font-size: 12px;
	color:     #666;
	white-space: nowrap;
}

.elivan-shop-variations td.value {
	width: 100%;
}

/* Reset link */
.elivan-shop-reset {
	display:     inline-block;
	margin-left: 6px;
	font-size:   11px;
	color:       #999;
	text-decoration: none;
	vertical-align: middle;
	line-height: var(--elivan-swatch-size);
}
.elivan-shop-reset:hover {
	color: var(--elivan-swatch-border-selected);
}

/* Shop swatches: never wrap — the table cell constrains the width */
.elivan-swatches--shop .elivan-swatches__items {
	flex-wrap: nowrap;
}

/* ── Carrusel ─────────────────────────────────────────────────────── */
/*
 * The outer .elivan-swatches--carousel keeps its block display so it
 * doesn't affect the card layout. Flex lives only in the inner row.
 */
.elivan-swatches--carousel {
	position: relative;
}

/* carousel-row always renders — with arrows when carousel active, without when not.
   This keeps the HTML structure identical across all attributes so Blocksy can
   calculate consistent card heights regardless of item count. */
.elivan-swatches__carousel-row {
	display:     flex;
	align-items: center;
	gap:         4px;
	width:       100%;
	max-width:   100%;
	min-width:   0;
	box-sizing:  border-box;
	/* Clip only the row itself, not the outer wrapper, so arrows stay visible */
	overflow:    visible;
}

.elivan-swatches__track-wrap {
	flex:        1 1 0%;
	min-width:   0;
	max-width:   100%;
	position:    relative;
	overflow:    hidden; /* clips overflowing items when carousel active */
}

/* When NOT a carousel, let items wrap freely */
.elivan-swatches:not(.elivan-swatches--carousel) .elivan-swatches__track-wrap {
	overflow: visible;
}

.elivan-swatches--carousel .elivan-swatches__items {
	width:                    100%;
	min-width:                0;
	flex-wrap:                nowrap;
	overflow-x:               auto;
	scroll-behavior:          smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:          none;
	-ms-overflow-style:       none;
	scroll-snap-type:         x mandatory;
	padding-bottom:           2px;
}

.elivan-swatches--carousel .elivan-swatches__items::-webkit-scrollbar {
	display: none;
}

.elivan-swatches--carousel .elivan-swatches__item-wrap {
	scroll-snap-align: start;
	flex-shrink:       0;
}

/* Arrows */
.elivan-swatches__arrow {
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           22px;
	height:          22px;
	padding:         0;
	border:          1px solid var(--elivan-swatch-border);
	border-radius:   50%;
	background:      var(--elivan-swatch-bg);
	color:           var(--elivan-swatch-color);
	font-size:       16px;
	line-height:     1;
	cursor:          pointer;
	user-select:     none;
}

.elivan-swatches__arrow:hover {
	border-color: var(--elivan-swatch-border-selected);
	background:   #faf7f2;
}

.elivan-swatches__arrow[aria-disabled="true"] {
	opacity:        0.3;
	cursor:         default;
	pointer-events: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.elivan-swatches__item,
	.elivan-swatches__arrow,
	.elivan-swatches__tooltip {
		transition: none;
	}
	.elivan-swatches--carousel .elivan-swatches__items {
		scroll-behavior: auto;
	}
}

/* ── Hover polish: pointer devices only ──
   border-color/background transitions force a repaint on every frame and
   are useless on touch devices (no hover). Scoping them here removes the
   ~471 non-composited animations flagged by PageSpeed Insights on /shop/
   while keeping identical desktop behaviour. */
@media (hover: hover) {
	.elivan-swatches__item {
		transition: border-color 0.15s ease, transform 0.1s ease;
	}

	.elivan-swatches__arrow {
		transition: background 0.15s ease, border-color 0.15s ease;
	}
}