/**
 * Paint Colour Library picker styles.
 *
 * Two things this file has to survive: themes that style every <button>
 * globally, and themes that put the add-to-cart controls in a non-wrapping
 * flex row. Both are handled with narrowly scoped !important rules rather
 * than raising specificity everywhere.
 *
 * Typography is pinned to Lato to match the site body font, because the
 * theme applies Playfair Display to <label> elements and the picker would
 * otherwise mix a serif and a sans within the same control.
 */

/* Typography ------------------------------------------------------------- */

.pcl-picker,
.pcl-picker button,
.pcl-picker input,
.pcl-picker select,
.pcl-picker label,
.pcl-picker span,
.pcl-picker p,
.pcl-picker strong {
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Shell ------------------------------------------------------------------ */

.pcl-picker {
	--pcl-border: rgba( 0, 0, 0, 0.14 );
	--pcl-border-strong: rgba( 0, 0, 0, 0.28 );
	--pcl-muted: rgba( 0, 0, 0, 0.55 );
	--pcl-radius: 6px;
	--pcl-max: 720px;

	margin: 0 0 1.5em;
	width: 100%;
	clear: both;
	text-align: left;
	color: inherit;
}

/* The picker itself stays full width so that, inside the theme's add-to-cart
   flex row, the quantity field and button are pushed onto the line below
   rather than sitting alongside it. Reading width is constrained on the
   blocks inside instead, which keeps every element on the same left edge. */

.pcl-picker .pcl-mode,
.pcl-picker .pcl-field,
.pcl-picker .pcl-colours,
.pcl-picker .pcl-chosen,
.pcl-picker .pcl-error {
	max-width: var( --pcl-max );
}

.pcl-picker *,
.pcl-picker *::before,
.pcl-picker *::after {
	box-sizing: border-box;
}

/* The hidden attribute is only display:none in the user agent stylesheet, so
   the explicit display rules below would silently beat it and leave hidden
   panels on screen. This restores it. */

.pcl-picker[hidden],
.pcl-picker [hidden] {
	display: none !important;
}

/* Escape the theme's add-to-cart flex row.
   Elementor and several WooCommerce themes make the variation button
   container a non-wrapping flex row, which squeezes the picker into a narrow
   column beside the quantity field. The pcl-host class is applied by the
   script to whatever the picker's parent turns out to be. */

.pcl-host {
	flex-wrap: wrap !important;
	align-items: flex-start !important;
}

.pcl-host > .pcl-picker {
	flex: 1 1 100% !important;
	width: 100% !important;
	order: -1 !important;
	margin-bottom: 1.75em !important;
}

/* Mode toggle, styled as a segmented control ------------------------------ */

.pcl-picker .pcl-mode {
	display: inline-flex;
	margin: 0 0 1.25em;
	padding: 3px;
	border: 1px solid var( --pcl-border );
	border-radius: var( --pcl-radius );
	background: rgba( 0, 0, 0, 0.03 );
	max-width: 100%;
	flex-wrap: wrap;
	gap: 2px;
}

.pcl-picker .pcl-mode__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.5em 1.1em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4;
	color: var( --pcl-muted );
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pcl-picker .pcl-mode__option input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.pcl-picker .pcl-mode__option.is-active,
.pcl-picker .pcl-mode__option:has( input:checked ) {
	background: #fff;
	color: inherit;
	font-weight: 700 !important;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
}

.pcl-picker .pcl-mode__option:focus-within {
	outline: 2px solid var( --pcl-border-strong );
	outline-offset: 1px;
}

/* Fields ----------------------------------------------------------------- */

.pcl-picker .pcl-field {
	margin: 0 0 1.1em;
}

.pcl-picker .pcl-label {
	display: block;
	margin: 0 0 0.5em;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.45;
	color: inherit;
}

.pcl-picker .pcl-select,
.pcl-picker .pcl-input {
	display: block;
	width: 100%;
	max-width: 67%;
	height: 46px;
	padding: 0 0.9em;
	margin: 0;
	border: 1px solid var( --pcl-border );
	border-radius: var( --pcl-radius );
	background-color: #fff;
	font-size: 15px !important;
	line-height: 1.4;
	color: inherit;
}

.pcl-picker .pcl-select:focus,
.pcl-picker .pcl-input:focus,
.pcl-picker .pcl-search:focus {
	outline: none;
	border-color: var( --pcl-border-strong );
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.06 );
}

/* Colour card ------------------------------------------------------------ */

.pcl-picker .pcl-colours {
	border: 1px solid var( --pcl-border );
	border-radius: var( --pcl-radius );
	overflow: hidden;
	background: #fff;
}

.pcl-picker .pcl-colours__head {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0 0.9em;
	height: 46px;
	border-bottom: 1px solid var( --pcl-border );
	background: rgba( 0, 0, 0, 0.02 );
}

.pcl-picker .pcl-search {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	font-size: 14px !important;
	line-height: 1.4;
	color: inherit;
}

.pcl-picker .pcl-search::placeholder {
	color: var( --pcl-muted );
	opacity: 1;
}

.pcl-picker .pcl-count {
	flex: 0 0 auto;
	font-size: 13px !important;
	color: var( --pcl-muted );
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Swatch grid.
   Capped height with its own vertical scroll so a 215-colour collection does
   not push the add-to-cart button far below the fold. */

.pcl-picker .pcl-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) );
	gap: 14px 12px;
	max-height: 344px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 14px;
	margin: 0;
	border: 0;
	background: transparent;
	list-style: none;
	overscroll-behavior: contain;
}

.pcl-picker .pcl-grid::-webkit-scrollbar {
	width: 10px;
}

.pcl-picker .pcl-grid::-webkit-scrollbar-thumb {
	background: rgba( 0, 0, 0, 0.2 );
	border-radius: 5px;
	border: 3px solid #fff;
}

/* Reset against theme button styling. */

.pcl-picker .pcl-grid .pcl-swatch,
.pcl-picker .pcl-grid .pcl-swatch:hover,
.pcl-picker .pcl-grid .pcl-swatch:focus,
.pcl-picker .pcl-grid .pcl-swatch:active {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	line-height: 1.3 !important;
	text-align: center !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: inherit !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transform: none !important;
	transition: none !important;
	overflow: visible !important;
}

.pcl-picker .pcl-swatch__chip {
	display: block;
	width: 100%;
	height: 52px;
	border-radius: 5px;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	position: relative;
	transition: box-shadow 0.14s ease, transform 0.14s ease;
}

.pcl-picker .pcl-swatch:hover .pcl-swatch__chip {
	transform: translateY( -1px );
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.16 );
}

.pcl-picker .pcl-swatch:focus-visible {
	outline: none;
}

.pcl-picker .pcl-swatch:focus-visible .pcl-swatch__chip {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
}

.pcl-picker .pcl-swatch.is-selected .pcl-swatch__chip {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a1a1a;
}

.pcl-picker .pcl-swatch.is-selected .pcl-swatch__chip::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 14px;
	margin: -9px 0 0 -4px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.pcl-picker .pcl-swatch__label {
	display: block;
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px !important;
	line-height: 1.3;
	color: var( --pcl-muted );
	word-break: break-word;
	hyphens: auto;
}

.pcl-picker .pcl-swatch.is-selected .pcl-swatch__label {
	color: inherit;
	font-weight: 700 !important;
}

/* Chosen colour summary -------------------------------------------------- */

.pcl-picker .pcl-chosen {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.85em 0.9em;
	border: 1px solid var( --pcl-border );
	border-radius: var( --pcl-radius );
	background: #fff;
	margin: 0;
}

.pcl-picker .pcl-chosen__swatch {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 5px;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
}

.pcl-picker .pcl-chosen__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.35;
}

.pcl-picker .pcl-chosen__text strong {
	font-size: 15px !important;
	font-weight: 700 !important;
}

.pcl-picker .pcl-chosen__text span {
	font-size: 13px !important;
	color: var( --pcl-muted );
	font-variant-numeric: tabular-nums;
}

.pcl-picker .pcl-chosen__clear,
.pcl-picker .pcl-chosen__clear:hover,
.pcl-picker .pcl-chosen__clear:focus {
	flex: 0 0 auto;
	background: none !important;
	background-image: none !important;
	color: inherit !important;
	border: 1px solid var( --pcl-border-strong ) !important;
	border-radius: 4px !important;
	padding: 0.5em 1em !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pcl-picker .pcl-chosen__clear:hover {
	background: rgba( 0, 0, 0, 0.04 ) !important;
}

/* Messages --------------------------------------------------------------- */

.pcl-picker .pcl-empty {
	margin: 0;
	padding: 1.5em 1em;
	text-align: center;
	font-size: 14px !important;
	color: var( --pcl-muted );
}

.pcl-picker .pcl-error {
	margin: 0.9em 0 0;
	padding: 0.75em 0.9em;
	border: 1px solid rgba( 179, 45, 46, 0.3 );
	border-left-width: 3px;
	border-radius: 4px;
	background: rgba( 179, 45, 46, 0.05 );
	font-size: 14px !important;
	color: #a02123;
}

/* Cart and order display ------------------------------------------------- */

.pcl-meta-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	vertical-align: -1px;
	margin-right: 5px;
}

/* Narrow screens --------------------------------------------------------- */

@media ( max-width: 600px ) {

	.pcl-picker .pcl-mode {
		display: flex;
		width: 100%;
	}

	.pcl-picker .pcl-mode__option {
		flex: 1 1 auto;
		padding: 0.55em 0.5em;
		font-size: 13px !important;
	}

	.pcl-picker .pcl-grid {
		grid-template-columns: repeat( auto-fill, minmax( 78px, 1fr ) );
		gap: 12px 10px;
		padding: 12px;
		max-height: 300px;
	}

	.pcl-picker .pcl-swatch__chip {
		height: 44px;
	}

	.pcl-picker .pcl-swatch__label {
		font-size: 11px !important;
	}
}