/* CopirPro Swatches — front end. Every rule is scoped to .copir-sw* classes. */

:root {
	--copir-sw-size: 36px;
	--copir-sw-gap: 8px;
	--copir-sw-loop-gap: 6px;
	--copir-sw-bw: 1px;
	--copir-sw-border: #d0d4da;
	--copir-sw-border-hover: #8a919c;
	--copir-sw-border-sel: #1f2937;
	--copir-sw-ring: 2px;
	--copir-sw-radius: 6px;
	--copir-sw-btn-bg: #fff;
	--copir-sw-btn-color: #1f2937;
	--copir-sw-btn-bg-sel: #1f2937;
	--copir-sw-btn-color-sel: #fff;
	--copir-sw-btn-min: 40px;
	--copir-sw-btn-pad: 12px;
	--copir-sw-font: 14px;
	--copir-sw-weight: 600;
	--copir-sw-ratio: 1;
	--copir-sw-filter-size: 20px;
	--copir-sw-featured: 1.3;
	--copir-sw-tip-bg: #111827;
	--copir-sw-tip-color: #fff;
	--copir-sw-tip-radius: 6px;
	--copir-sw-tip-width: 220px;
	--copir-sw-justify: flex-start;
	--copir-sw-loop-justify: flex-start;
	--copir-sw-danger: #dc2626;
}

/* The WooCommerce select stays in the form (it is what WooCommerce reads), hidden. */
.copir-sw-wrap select.copir-sw-select { display: none !important; }
.copir-sw-wrap { display: block; width: 100%; }
/* Swatches that can not work here (the script found no data for the form): the dropdown instead. */
.copir-sw-wrap.copir-sw-wrap--off select.copir-sw-select { display: revert !important; }
.copir-sw-wrap.copir-sw-wrap--off > .copir-sw { display: none !important; }

.copir-sw {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--copir-sw-gap);
	justify-content: var(--copir-sw-justify);
	margin: 2px 0 6px;
	padding: 3px;
	list-style: none;
}
.copir-sw.copir-sw--loop {
	gap: var(--copir-sw-loop-gap);
	justify-content: var(--copir-sw-loop-justify);
	align-items: center;
	margin: 4px 0 6px;
	padding: 4px;
}

/* Item: neutralise theme button styles. */
.copir-sw .copir-sw-item,
.copir-sw .copir-sw-item:hover,
.copir-sw .copir-sw-item:focus,
.copir-sw .copir-sw-item:active {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: var(--copir-sw-font);
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: 1.2;
	border-radius: 0;
	transform: none;
	outline: none;
}
.copir-sw .copir-sw-item {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	vertical-align: top;
	-webkit-tap-highlight-color: transparent;
}

.copir-sw-item__box {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: var(--copir-sw-size);
	height: var(--copir-sw-size);
	border-radius: 50%;
	box-shadow: 0 0 0 var(--copir-sw-bw) var(--copir-sw-border);
	outline: 0 solid transparent;
	outline-offset: 2px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .15s ease, outline-color .15s ease, outline-width .15s ease, opacity .15s ease, transform .15s ease;
}
.copir-sw--square .copir-sw-item__box { border-radius: 2px; }
.copir-sw--rounded .copir-sw-item__box { border-radius: var(--copir-sw-radius); }

.copir-sw .copir-sw-item:hover .copir-sw-item__box { box-shadow: 0 0 0 var(--copir-sw-bw) var(--copir-sw-border-hover); }
.copir-sw .copir-sw-item.is-selected .copir-sw-item__box {
	outline: var(--copir-sw-ring) solid var(--copir-sw-border-sel);
	box-shadow: 0 0 0 var(--copir-sw-bw) var(--copir-sw-border-sel);
}
.copir-sw .copir-sw-item:focus-visible .copir-sw-item__box {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
}

.copir-sw-item__color {
	position: absolute;
	inset: 0;
	display: block;
}
/* Transparency: a checkerboard under the color. */
.copir-sw-item__color.has-alpha,
.copir-sw-mini.has-alpha { background-color: #fff; }
.copir-sw-item__box:has(.has-alpha) {
	background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 10px 10px;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

/* Chosen color: a check mark too (not only the border). */
.copir-sw--color .copir-sw-item.is-selected .copir-sw-item__color::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 28%;
	height: 14%;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(-45deg);
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
}
.copir-sw--color .copir-sw-item.is-selected .copir-sw-item__color.is-light::after {
	border-color: #111;
	filter: none;
}

.copir-sw-item__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.copir-sw--image .copir-sw-item__box { width: calc(var(--copir-sw-size) * var(--copir-sw-ratio)); }

/* Buttons. */
.copir-sw--button .copir-sw-item__box,
.copir-sw-item.is-fallback .copir-sw-item__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: var(--copir-sw-btn-min);
	height: auto;
	min-height: var(--copir-sw-size);
	padding: 4px var(--copir-sw-btn-pad);
	border-radius: var(--copir-sw-radius);
	background: var(--copir-sw-btn-bg);
	color: var(--copir-sw-btn-color);
	font-size: var(--copir-sw-font);
	font-weight: var(--copir-sw-weight);
	line-height: 1.2;
	text-align: center;
}
.copir-sw--button.copir-sw--round .copir-sw-item__box { border-radius: 999px; }
.copir-sw--button.copir-sw--square .copir-sw-item__box { border-radius: 2px; }
.copir-sw--button .copir-sw-item.is-selected .copir-sw-item__box {
	background: var(--copir-sw-btn-bg-sel);
	color: var(--copir-sw-btn-color-sel);
	outline-width: 0;
}
.copir-sw--button .copir-sw-item.is-selected .copir-sw-item__text { text-decoration: none; }
/* Кнопки атрибута-кольору: кожна свого кольору (Copir_SW_Data::attribute() → tint). */
.copir-sw .copir-sw-item.is-tinted .copir-sw-item__box,
.copir-sw .copir-sw-item.is-tinted.is-selected .copir-sw-item__box {
	background: var(--copir-sw-tint);
	color: var(--copir-sw-tint-fg);
}
.copir-sw .copir-sw-item.is-tinted.is-light .copir-sw-item__box { box-shadow: 0 0 0 var(--copir-sw-bw) rgba(17, 24, 39, .28); }
.copir-sw .copir-sw-item.is-tinted.is-dark .copir-sw-item__box { box-shadow: 0 0 0 var(--copir-sw-bw) rgba(255, 255, 255, .28); }
.copir-sw .copir-sw-item.is-tinted.is-selected .copir-sw-item__box {
	outline: max(2px, var(--copir-sw-ring, 2px)) solid var(--copir-sw-border-sel);
	outline-offset: 2px;
}
.copir-sw-item__text { position: relative; z-index: 1; overflow-wrap: anywhere; }
.copir-sw--loop.copir-sw--button .copir-sw-item__box { min-height: calc(var(--copir-sw-size) * .9); padding: 2px 8px; font-size: 12px; min-width: 0; }

/* Name under the swatch, badge. */
.copir-sw-item__name {
	display: block;
	max-width: calc(var(--copir-sw-size) * 2.2);
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
	opacity: .85;
}
.copir-sw-item__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f59e0b;
	color: #fff;
	font-size: 10px;
	line-height: 1;
	box-shadow: 0 0 0 2px #fff;
}

/* Not available / out of stock. Crossed-out line + fading, never color alone. */
.copir-sw-item__cross {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	pointer-events: none;
	background: linear-gradient(to top right, transparent calc(50% - 1px), var(--copir-sw-danger) calc(50% - 1px), var(--copir-sw-danger) calc(50% + 1px), transparent calc(50% + 1px));
}
.copir-sw[data-na="cross"] .copir-sw-item.is-na .copir-sw-item__cross,
.copir-sw[data-oos="cross"] .copir-sw-item.is-oos .copir-sw-item__cross,
.copir-sw-preview .copir-sw-item.is-oos .copir-sw-item__cross,
.copir-sw-preview .copir-sw-item.is-na .copir-sw-item__cross { display: block; }
.copir-sw[data-na="cross"] .copir-sw-item.is-na .copir-sw-item__box,
.copir-sw[data-oos="cross"] .copir-sw-item.is-oos .copir-sw-item__box,
.copir-sw-preview .copir-sw-item.is-oos .copir-sw-item__box,
.copir-sw-preview .copir-sw-item.is-na .copir-sw-item__box { opacity: .55; }
.copir-sw[data-oos="blur"] .copir-sw-item.is-oos .copir-sw-item__box { opacity: .3; filter: grayscale(.6); }
.copir-sw[data-na="disable"] .copir-sw-item.is-na,
.copir-sw[data-oos="disable"] .copir-sw-item.is-oos { cursor: not-allowed; }
.copir-sw[data-na="disable"] .copir-sw-item.is-na .copir-sw-item__box,
.copir-sw[data-oos="disable"] .copir-sw-item.is-oos .copir-sw-item__box { opacity: .3; }
/* A chosen value stays visible (default attributes, links), so the customer sees what is chosen. */
.copir-sw[data-na="hide"] .copir-sw-item.is-na:not(.is-selected),
.copir-sw[data-oos="hide"] .copir-sw-item.is-oos:not(.is-selected) { display: none !important; }
.copir-sw[data-oos="note"] .copir-sw-item.is-oos .copir-sw-item__box { opacity: .55; }
.copir-sw[data-oos="note"] .copir-sw-item.is-oos::after {
	content: attr(data-copir-sw-note);
	display: block;
	max-width: calc(var(--copir-sw-size) * 2.4);
	color: var(--copir-sw-danger);
	font-size: 11px;
	line-height: 1.15;
	text-align: center;
}
.copir-sw .copir-sw-item.is-locked { cursor: not-allowed; }

/* Radio buttons. */
.copir-sw.copir-sw--radio { flex-direction: column; gap: 6px; }
.copir-sw .copir-sw-radio {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--copir-sw-font);
	line-height: 1.3;
	cursor: pointer;
}
/* Themes style labels inside variation tables (bold, block, padding): keep the row readable. */
.copir-sw.copir-sw--radio label.copir-sw-radio,
.variations .copir-sw.copir-sw--radio label.copir-sw-radio {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 0;
	font-weight: 400;
	text-transform: none;
}
.copir-sw .copir-sw-radio__input,
.variations .copir-sw .copir-sw-radio__input { flex: none; margin: 0; width: 18px; height: 18px; accent-color: var(--copir-sw-border-sel); }
.copir-sw-dark .copir-sw-radio__input { accent-color: #fff; }
.copir-sw .copir-sw-radio.is-selected .copir-sw-radio__label { font-weight: var(--copir-sw-weight); }
.copir-sw-radio__extra { opacity: .7; font-size: .92em; }
.copir-sw-item__note { color: var(--copir-sw-danger); font-size: 12px; }
.copir-sw[data-oos="cross"] .copir-sw-radio.is-oos .copir-sw-radio__label,
.copir-sw[data-na="cross"] .copir-sw-radio.is-na .copir-sw-radio__label { text-decoration: line-through; opacity: .6; }
.copir-sw[data-oos="blur"] .copir-sw-radio.is-oos,
.copir-sw[data-oos="disable"] .copir-sw-radio.is-oos,
.copir-sw[data-na="disable"] .copir-sw-radio.is-na { opacity: .45; }

/* Groups of values. */
.copir-sw-groupset { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; }
.copir-sw-groupset__title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.copir-sw-groupset__items { display: flex; flex-wrap: wrap; gap: var(--copir-sw-gap); }

/* Catalog: "+N" and hidden values. */
.copir-sw--loop .copir-sw-item.is-extra { display: none; }
.copir-sw--loop.is-expanded .copir-sw-item.is-extra { display: inline-flex; }
.copir-sw .copir-sw-more,
.copir-sw .copir-sw-more:hover,
.copir-sw .copir-sw-more:focus {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	box-sizing: border-box;
	min-width: var(--copir-sw-size);
	height: var(--copir-sw-size);
	margin: 0;
	padding: 0 6px;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: inset 0 0 0 1px var(--copir-sw-border);
	color: inherit;
	font: inherit;
	font-size: max(10px, calc(var(--copir-sw-size) * .44));
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	min-height: 0;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	opacity: .85;
}
.copir-sw .copir-sw-more:hover { box-shadow: inset 0 0 0 1px var(--copir-sw-border-hover); opacity: 1; }
.copir-sw .copir-sw-more:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.copir-sw .copir-sw-more[hidden] { display: none; }
.copir-sw-loop { position: relative; display: flow-root; }
/* Cards without swatches: an empty row of the same height (only in lists with swatches). */
.copir-sw-loop--empty { display: none; }
.copir-sw-loop--empty.is-reserved { display: flow-root; }
.copir-sw-loop__msg { font-size: 12px; line-height: 1.3; min-height: 0; }
.copir-sw-loop__msg:empty { display: none; }
.copir-sw-loop__msg.is-error { color: var(--copir-sw-danger); }
.copir-sw-loop__msg.is-ok { color: #15803d; }
.copir-sw-loop .copir-sw-stock { display: block; font-size: 12px; }

/* Chosen value next to the attribute name; stock; copy link. */
.copir-sw-label-value { font-weight: 400; opacity: .85; }
.copir-sw-label-value::before { content: ": "; }
.copir-sw-stock { display: block; margin: 4px 0; color: #b45309; font-size: .92em; font-weight: 600; }
.copir-sw-copy,
.copir-sw-copy:hover,
.copir-sw-copy:focus {
	-webkit-appearance: none;
	appearance: none;
	margin: 0 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: .875em;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
	opacity: .8;
}
[dir="rtl"] .copir-sw-copy { margin: 0 12px 0 0; }

/* Tooltip (one element on the page, positioned by the script, never clipped by the card). */
.copir-sw-tip {
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	max-width: min(var(--copir-sw-tip-width), calc(100vw - 16px));
	padding: 6px 9px;
	border-radius: var(--copir-sw-tip-radius);
	background: var(--copir-sw-tip-bg);
	color: var(--copir-sw-tip-color);
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
	white-space: pre-line;
	pointer-events: none;
	opacity: 0;
	transform: translateY(2px);
	transition: opacity .12s ease, transform .12s ease;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.copir-sw-tip.is-on { opacity: 1; transform: none; }
.copir-sw-tip img { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto 4px; border-radius: 4px; }
.copir-sw-tip__muted { display: block; opacity: .75; font-size: 12px; }
.copir-sw-tip::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 6px solid transparent;
}
.copir-sw-tip[data-pos="top"]::after { top: 100%; left: var(--copir-sw-arrow, 50%); margin-left: -6px; border-top-color: var(--copir-sw-tip-bg); }
.copir-sw-tip[data-pos="bottom"]::after { bottom: 100%; left: var(--copir-sw-arrow, 50%); margin-left: -6px; border-bottom-color: var(--copir-sw-tip-bg); }
.copir-sw-tip[data-pos="left"]::after { left: 100%; top: 50%; margin-top: -6px; border-left-color: var(--copir-sw-tip-bg); }
.copir-sw-tip[data-pos="right"]::after { right: 100%; top: 50%; margin-top: -6px; border-right-color: var(--copir-sw-tip-bg); }

/* Filters widget and small swatches. */
.copir-sw-mini {
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
	vertical-align: middle;
	overflow: hidden;
}
.copir-sw-mini img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.copir-sw-mini--text { width: auto !important; height: auto !important; padding: 2px 8px; border-radius: 4px; font-size: 12px; line-height: 1.4; }
.copir-sw-mini.is-auto { outline: 1px dashed rgba(0, 0, 0, .25); outline-offset: 1px; }
.copir-sw-filter { display: inline-flex; align-items: center; gap: 4px; }
.copir-sw-filter a,
.copir-sw-filter > span:not(.copir-sw-filter__swatch) { display: inline-flex; align-items: center; gap: 8px; }
.copir-sw-filter__swatch { display: inline-flex; }
.chosen .copir-sw-filter .copir-sw-mini { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--copir-sw-border-sel); }
.copir-sw-filter--only .copir-sw-mini { width: calc(var(--copir-sw-filter-size) + 6px) !important; height: calc(var(--copir-sw-filter-size) + 6px) !important; }

.copir-sw-notice { padding: 8px 12px; border-left: 3px solid #f59e0b; background: #fffbeb; }

/* Screen-reader text (themes without it). */
.copir-sw .screen-reader-text,
.copir-sw-filter .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Touch screens: the gaps between swatches belong to the swatches (bigger touch targets). */
@media (pointer: coarse) {
	.copir-sw .copir-sw-item:not(.copir-sw-radio)::before {
		content: "";
		position: absolute;
		inset: calc(var(--copir-sw-gap, 8px) / -2);
	}
	.copir-sw.copir-sw--loop .copir-sw-item:not(.copir-sw-radio)::before { inset: calc(var(--copir-sw-loop-gap, 6px) / -2); }
}
@media (hover: none) {
	.copir-sw .copir-sw-item:hover .copir-sw-item__box { box-shadow: 0 0 0 var(--copir-sw-bw) var(--copir-sw-border); }
	.copir-sw .copir-sw-item.is-selected:hover .copir-sw-item__box { box-shadow: 0 0 0 var(--copir-sw-bw) var(--copir-sw-border-sel); }
}
@media (prefers-reduced-motion: reduce) {
	.copir-sw-item__box,
	.copir-sw-tip { transition: none; }
}
@media (forced-colors: active) {
	.copir-sw .copir-sw-item.is-selected .copir-sw-item__box { outline: 3px solid Highlight; }
	.copir-sw-item__cross { background: linear-gradient(to top right, transparent 48%, CanvasText 48%, CanvasText 52%, transparent 52%); }
}

/* ------------------------------------------------------------------------------------------ */
/* Quick view.                                                                                */
/* ------------------------------------------------------------------------------------------ */

.copir-sw-qv-host { position: relative; }
.copir-sw-qv-btn,
.copir-sw-qv-btn:hover,
.copir-sw-qv-btn:focus {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	box-shadow: none;
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	cursor: pointer;
}
.copir-sw-qv-btn__icon { display: block; flex: none; }
/* Icon over the photo: appears on hover / focus, always visible on touch screens. */
.copir-sw-qv-btn--image,
.copir-sw-qv-btn--image:hover,
.copir-sw-qv-btn--image:focus {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #1f2937;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.copir-sw-qv-card:hover .copir-sw-qv-btn--image,
.copir-sw-qv-card:focus-within .copir-sw-qv-btn--image,
.copir-sw-qv-btn--image:focus-visible { opacity: 1; transform: none; }
.copir-sw-qv-btn--image:hover { background: #fff; }
.copir-sw-qv-btn--image:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: none) {
	.copir-sw-qv-btn--image,
	.copir-sw-qv-btn--image:hover,
	.copir-sw-qv-btn--image:focus { opacity: 1; transform: none; width: 34px; height: 34px; }
}
/* Text button under the cart button. */
.copir-sw-qv-btn--text,
.copir-sw-qv-btn--text:hover,
.copir-sw-qv-btn--text:focus {
	margin: 8px auto 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: none;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--copir-sw-border);
	opacity: .9;
}
.copir-sw-qv-btn--text:hover { box-shadow: inset 0 0 0 1px var(--copir-sw-border-hover); opacity: 1; }
.copir-sw-qv-card .copir-sw-qv-btn--text { display: flex; width: max-content; max-width: 100%; }

/* Window. */
html.copir-sw-qv-open { overflow: hidden; }
html.copir-sw-qv-open body { padding-right: var(--copir-sw-qv-scrollbar, 0); }
.copir-sw-qv {
	--copir-sw-qv-bg: #fff;
	--copir-sw-qv-color: #1f2937;
	--copir-sw-qv-muted: #6b7280;
	--copir-sw-qv-line: #e5e7eb;
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity .18s ease;
}
.copir-sw-qv[hidden] { display: none; }
.copir-sw-qv.is-open { opacity: 1; }
.copir-sw-qv.copir-sw-dark {
	--copir-sw-qv-bg: #1c1c1e;
	--copir-sw-qv-color: #f3f4f6;
	--copir-sw-qv-muted: #a1a1aa;
	--copir-sw-qv-line: #34343a;
}
.copir-sw-qv__overlay { position: absolute; inset: 0; background: rgba(10, 10, 12, .62); }
.copir-sw-qv__dialog {
	position: relative;
	box-sizing: border-box;
	width: min(960px, 100%);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 14px;
	background: var(--copir-sw-qv-bg);
	color: var(--copir-sw-qv-color);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
	transform: translateY(12px) scale(.985);
	transition: transform .18s ease;
	outline: none;
}
.copir-sw-qv.is-open .copir-sw-qv__dialog { transform: none; }
.copir-sw-qv__bar {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	height: 0;
	padding: 0 10px;
	overflow: visible;
}
.copir-sw-qv .copir-sw-qv__bar button,
.copir-sw-qv .copir-sw-qv__bar button:hover,
.copir-sw-qv .copir-sw-qv__bar button:focus {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 0;
	min-height: 0;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--copir-sw-qv-bg);
	color: var(--copir-sw-qv-color);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	font: 400 24px/1 system-ui, sans-serif;
	text-transform: none;
	cursor: pointer;
}
.copir-sw-qv .copir-sw-qv__bar button[hidden] { display: none; }
.copir-sw-qv .copir-sw-qv__bar button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.copir-sw-qv.is-loading .copir-sw-qv__body > .copir-sw-qv__product { opacity: .5; pointer-events: none; transition: opacity .1s; }

.copir-sw-qv__loading { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.copir-sw-qv__spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--copir-sw-qv-line);
	border-top-color: var(--copir-sw-qv-color);
	border-radius: 50%;
	animation: copir-sw-spin .8s linear infinite;
}
@keyframes copir-sw-spin { to { transform: rotate(360deg); } }
.copir-sw-qv__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.copir-sw-qv__error { padding: 48px 28px; text-align: center; }

.copir-sw-qv .copir-sw-qv__product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	float: none;
	width: auto;
	margin: 0;
	padding: 28px;
	text-align: left;
}
.copir-sw-qv .copir-sw-qv__media { float: none; width: auto; margin: 0; opacity: 1 !important; }
.copir-sw-qv .copir-sw-qv__main { position: relative; overflow: hidden; border-radius: 10px; background: rgba(127, 127, 127, .08); }
.copir-sw-qv .copir-sw-qv__main a { display: block; cursor: zoom-in; }
.copir-sw-qv .copir-sw-qv__main img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0;
}
.copir-sw-qv__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.copir-sw-qv .copir-sw-qv__thumb,
.copir-sw-qv .copir-sw-qv__thumb:hover,
.copir-sw-qv .copir-sw-qv__thumb:focus {
	-webkit-appearance: none;
	appearance: none;
	width: 58px;
	height: 58px;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 8px;
	background: none;
	box-shadow: inset 0 0 0 1px var(--copir-sw-qv-line);
	cursor: pointer;
	opacity: .75;
}
.copir-sw-qv .copir-sw-qv__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.copir-sw-qv .copir-sw-qv__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--copir-sw-qv-color); }

.copir-sw-qv .copir-sw-qv__summary { float: none; width: auto; margin: 0; padding: 0 0 0 0; min-width: 0; }
.copir-sw-qv .copir-sw-qv__title { margin: 4px 44px 8px 0; padding: 0; font-size: 1.45em; line-height: 1.25; color: inherit; }
.copir-sw-qv .copir-sw-qv__title a { color: inherit; text-decoration: none; }
.copir-sw-qv .copir-sw-qv__title a:hover { text-decoration: underline; }
.copir-sw-qv .copir-sw-qv__rating { margin: 0 0 8px; }
.copir-sw-qv .copir-sw-qv__price { margin: 0 0 12px; font-size: 1.25em; font-weight: 700; color: inherit; }
.copir-sw-qv .copir-sw-qv__desc { margin: 0 0 16px; color: var(--copir-sw-qv-muted); font-size: .95em; line-height: 1.5; }
.copir-sw-qv .copir-sw-qv__desc > :last-child { margin-bottom: 0; }
.copir-sw-qv .copir-sw-qv__cart form.cart { margin: 0 0 12px; padding: 0; border: 0; }
.copir-sw-qv .copir-sw-qv__cart table.variations { width: 100%; margin: 0 0 8px; border: 0; border-collapse: collapse; background: none; }
.copir-sw-qv .copir-sw-qv__cart table.variations tr,
.copir-sw-qv .copir-sw-qv__cart table.variations th,
.copir-sw-qv .copir-sw-qv__cart table.variations td { display: block; width: auto; padding: 0; border: 0; background: none; text-align: left; }
.copir-sw-qv .copir-sw-qv__cart table.variations tr { margin: 0 0 10px; }
.copir-sw-qv .copir-sw-qv__cart table.variations th { margin: 0 0 4px; font-weight: 600; line-height: 1.3; }
.copir-sw-qv .copir-sw-qv__cart table.variations th label { margin: 0; }
.copir-sw-qv .copir-sw-qv__cart .reset_variations { font-size: .9em; }
.copir-sw-qv .copir-sw-qv__cart .woocommerce-variation-add-to-cart,
.copir-sw-qv .copir-sw-qv__cart form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.copir-sw-qv .copir-sw-qv__cart .quantity { float: none; margin: 0; }
.copir-sw-qv .copir-sw-qv__cart .single_add_to_cart_button { float: none; margin: 0; }
.copir-sw-qv .copir-sw-qv__cart .single_variation { margin: 0 0 10px; }
.copir-sw-qv__msg { font-size: .92em; min-height: 0; }
.copir-sw-qv__msg:empty { display: none; }
.copir-sw-qv__msg.is-error { color: var(--copir-sw-danger); }
.copir-sw-qv__msg.is-ok { color: #15803d; }
.copir-sw-qv.copir-sw-dark .copir-sw-qv__msg.is-ok { color: #4ade80; }
.copir-sw-qv__msg a { font-weight: 600; }
.copir-sw-qv .copir-sw-qv__meta { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; color: var(--copir-sw-qv-muted); font-size: .88em; }
.copir-sw-qv .copir-sw-qv__more { display: inline-block; margin-top: 4px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Phone: a sheet from the bottom. */
@media (max-width: 700px) {
	.copir-sw-qv { align-items: flex-end; padding: 0; }
	.copir-sw-qv__dialog {
		width: 100%;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 16px 16px 0 0;
		transform: translateY(40px);
	}
	.copir-sw-qv .copir-sw-qv__product { grid-template-columns: 1fr; gap: 16px; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
	.copir-sw-qv .copir-sw-qv__main img { max-height: 46vh; }
	.copir-sw-qv .copir-sw-qv__thumb { width: 48px; height: 48px; }
	.copir-sw-qv .copir-sw-qv__title { font-size: 1.2em; margin-right: 0; }
	.copir-sw-qv .copir-sw-qv__bar button { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.copir-sw-qv,
	.copir-sw-qv__dialog,
	.copir-sw-qv-btn--image { transition: none; }
	.copir-sw-qv__spinner { animation-duration: 2s; }
}

/* ------------------------------------------------------------------------------------------ */
/* Photos in the card.                                                                        */
/* ------------------------------------------------------------------------------------------ */

.copir-sw-cg {
	position: absolute;
	z-index: 4;
	pointer-events: none;
}
.copir-sw-cg.is-single { display: none; }
.copir-sw-cg button,
.copir-sw-cg button:hover,
.copir-sw-cg button:focus,
.copir-sw-cg button:active {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	/* Themes lift / scale buttons on hover: the controls stay where they are. */
	transform: none !important;
	translate: none !important;
	scale: none !important;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.copir-sw-cg .copir-sw-cg__nav,
.copir-sw-cg .copir-sw-cg__nav:hover,
.copir-sw-cg .copir-sw-cg__nav:focus,
.copir-sw-cg .copir-sw-cg__nav:active {
	position: absolute;
	top: calc(50% - 21px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #111827;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
	font-size: 0;
	opacity: 0;
	transition: opacity .15s ease, background-color .15s ease;
}
.copir-sw-cg .copir-sw-cg__nav svg { display: block; flex: none; width: 20px; height: 20px; margin: 0; pointer-events: none; }
.copir-sw-cg .copir-sw-cg__prev { left: 10px; }
.copir-sw-cg .copir-sw-cg__next { right: 10px; }
.copir-sw-cg .copir-sw-cg__nav:hover { background: #fff; }
.copir-sw-cg .copir-sw-cg__nav:focus-visible { opacity: 1; outline: 2px solid #2563eb; outline-offset: 2px; }
.copir-sw-cg-card:hover .copir-sw-cg__nav,
.copir-sw-cg-card:focus-within .copir-sw-cg__nav { opacity: 1; }
.copir-sw-cg.is-hover-only .copir-sw-cg__nav { display: none; }
.copir-sw-cg__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.copir-sw-cg .copir-sw-cg__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
	transition: scale .15s ease, background-color .15s ease;
}
.copir-sw-cg .copir-sw-cg__dot.is-active { background: #fff; scale: 1.3 !important; }
.copir-sw-cg .copir-sw-cg__dot:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
/* Horizontal swipes over the photo switch photos; vertical ones scroll the page. */
.copir-sw-cg-touch { touch-action: pan-y pinch-zoom; }
/* Bigger touch targets for dots without making them look bigger. */
.copir-sw-cg .copir-sw-cg__dot { position: relative; }
.copir-sw-cg .copir-sw-cg__dot::before { content: ""; position: absolute; inset: -6px; }
@media (hover: none) {
	.copir-sw-cg .copir-sw-cg__nav,
	.copir-sw-cg .copir-sw-cg__nav:hover,
	.copir-sw-cg .copir-sw-cg__nav:focus,
	.copir-sw-cg .copir-sw-cg__nav:active { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.copir-sw-cg .copir-sw-cg__nav,
	.copir-sw-cg .copir-sw-cg__dot { transition: none; }
}

/* ------------------------------------------------------------------------------------------ */
/* Photo on the whole screen (quick view).                                                    */
/* ------------------------------------------------------------------------------------------ */

.copir-sw-lb {
	position: fixed;
	inset: 0;
	z-index: 999995;
	background: rgba(10, 10, 12, .94);
	color: #fff;
	opacity: 0;
	transition: opacity .18s ease;
	-webkit-user-select: none;
	user-select: none;
}
.copir-sw-lb[hidden] { display: none; }
.copir-sw-lb.is-open { opacity: 1; }
.copir-sw-lb__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	cursor: zoom-out;
}
.copir-sw-lb__img {
	display: block;
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	cursor: zoom-in;
	transform-origin: 50% 50%;
	box-sizing: border-box;
	padding: 56px 12px 24px;
	will-change: transform;
	-webkit-user-drag: none;
}
.copir-sw-lb.is-zoomed .copir-sw-lb__img { cursor: grab; }
.copir-sw-lb.is-zoomed .copir-sw-lb__img:active { cursor: grabbing; }
.copir-sw-lb__spinner {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: copir-sw-spin .8s linear infinite;
	pointer-events: none;
}
.copir-sw-lb.is-loading .copir-sw-lb__spinner { opacity: 1; }
.copir-sw-lb__count {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	font: 600 13px/1.4 system-ui, sans-serif;
	pointer-events: none;
}
.copir-sw-lb__count:empty { display: none; }
.copir-sw-lb .copir-sw-lb__btn,
.copir-sw-lb .copir-sw-lb__btn:hover,
.copir-sw-lb .copir-sw-lb__btn:focus,
.copir-sw-lb .copir-sw-lb__btn:active {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	box-shadow: none;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transform: none !important;
	translate: none !important;
	scale: none !important;
	transition: background-color .15s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.copir-sw-lb .copir-sw-lb__btn:hover { background: rgba(255, 255, 255, .26); }
.copir-sw-lb .copir-sw-lb__btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.copir-sw-lb .copir-sw-lb__btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.copir-sw-lb .copir-sw-lb__btn svg { display: block; width: 22px; height: 22px; pointer-events: none; }
/* Position without margins: the hover / focus states above reset margins (themes add their own). */
.copir-sw-lb .copir-sw-lb__close,
.copir-sw-lb .copir-sw-lb__close:hover,
.copir-sw-lb .copir-sw-lb__close:focus,
.copir-sw-lb .copir-sw-lb__close:active { top: 12px; right: 12px; bottom: auto; left: auto; }
.copir-sw-lb .copir-sw-lb__prev,
.copir-sw-lb .copir-sw-lb__prev:hover,
.copir-sw-lb .copir-sw-lb__prev:focus,
.copir-sw-lb .copir-sw-lb__prev:active { top: calc(50% - 23px); left: 14px; right: auto; bottom: auto; }
.copir-sw-lb .copir-sw-lb__next,
.copir-sw-lb .copir-sw-lb__next:hover,
.copir-sw-lb .copir-sw-lb__next:focus,
.copir-sw-lb .copir-sw-lb__next:active { top: calc(50% - 23px); right: 14px; left: auto; bottom: auto; }
.copir-sw-lb.is-single .copir-sw-lb__prev,
.copir-sw-lb.is-single .copir-sw-lb__next,
.copir-sw-lb.is-zoomed .copir-sw-lb__prev,
.copir-sw-lb.is-zoomed .copir-sw-lb__next { display: none; }
@media (hover: none) {
	.copir-sw-lb .copir-sw-lb__prev,
	.copir-sw-lb .copir-sw-lb__next { display: none; }
}
.copir-sw-qv .copir-sw-qv__main a { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) {
	.copir-sw-lb { transition: none; }
}
