/* Pralinor Familles.
 * Rey's swatch stylesheet (--type-button) provides border / hover / selected;
 * this file only adds the heading and the two-line pastille. */


.pfPdp {
	margin: 0 0 14px;
}

.pf-head {
	font-size: 13px;
	margin: 0 0 6px;
}

.pf-label {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 12px;
	color: var(--neutral-6, #666);
}

.pf-current {
	font-weight: 500;
}

/* Real links (they navigate to the sibling product): neutralize link looks
 * only — never the box-shadow carrying border / hover / selected. */
.pf a.rey-swatchList-item,
.pf a.rey-swatchList-item:hover,
.pf a.rey-swatchList-item:focus {
	text-decoration: none;
	color: inherit;
}

/* Optional two-line pastille (filter pralinor_familles/show_subtitle). */
.pf .pf-two-lines {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 6px;
}

.pf .pf-two-lines .rey-swatchList-item.pf-item {
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	padding: 6px;
	text-align: center;
}

.pf .pf-two-lines .rey-swatchList-itemContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	margin: 0;
	line-height: 1.15;
}

.pf-title {
	white-space: nowrap;
}

.pf-two-lines .pf-title {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pf-sub {
	font-size: 11px;
	opacity: .65;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Fallback look: every size reads Rey's own variables (--item-width…),
 * so it can never override the attribute's swatch settings. ---- */

:where(.pf) .rey-swatchList {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

:where(.pf) .rey-swatchList-item {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	box-shadow: 0 0 0 1px #ccc;
	cursor: pointer;
}

:where(.pf) .rey-swatchList-item.--selected {
	box-shadow: 0 0 0 2px #222;
}

:where(.pf) .rey-swatchList-item.--out-of-stock .rey-swatchList-itemContent {
	opacity: var(--swatches-out-of-stock-opacity, .4);
}

/* ---- Color families (circles / rectangles from Rey's Couleur settings) ---- */

:where(.pf) .rey-swatchList.--type-color {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

:where(.pf) .rey-swatchList-item--regular.--type-color {
	width: var(--item-width, 60px);
	height: var(--item-height, 25px);
	padding: var(--item-padding, 3px);
	border-radius: var(--item-radius, 0);
}

:where(.pf) .rey-swatchList-item .rey-swatchList-itemContent[style] {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

:where(.pf) .rey-swatchList-more {
	font-size: 11px;
	font-weight: 600;
}