/**
 * Product Image Configurator — storefront styles.
 *
 * Palette is taken from the active theme: gold #f3bc09 as the primary action
 * colour with black label text, #161a1d as ink. Those are exposed as custom
 * properties on `.pic` and `.pic-modal`, so re-skinning for another shop is a
 * matter of overriding six values rather than editing selectors.
 *
 * @package ProductImageConfigurator
 */

.pic,
.pic-modal {
	--pic-brand: #f3bc09;
	--pic-brand-dark: #d9a806;
	--pic-on-brand: #000000;
	--pic-ink: #161a1d;
	--pic-ink-soft: #6b7176;
	--pic-line: #e5e5e5;
	--pic-line-strong: #b2b2b2;
	--pic-surface: #ffffff;
	--pic-surface-soft: #f7f7f7;
	--pic-success: #17734a;
	--pic-warn: #9a6b12;
	--pic-danger: #d33a2c;
	--pic-radius: 10px;
	--pic-radius-sm: 8px;
}

.pic {
	box-sizing: border-box;
	display: block;
	margin: 0 0 18px;
	color: var( --pic-ink );
	font-size: 15px;
	line-height: 1.55;
}

.pic *,
.pic *::before,
.pic *::after {
	box-sizing: inherit;
}

.pic__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------- Primary call to action */

.pic__cta {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 17px 24px;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --pic-on-brand );
	text-align: center;
	cursor: pointer;
	background: var( --pic-brand );
	border: 0;
	border-radius: var( --pic-radius );
	transition: background-color 0.16s ease, transform 0.12s ease;
}

.pic__cta:hover,
.pic__cta:focus-visible {
	background: var( --pic-brand-dark );
	outline: none;
}

.pic__cta:focus-visible {
	box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.45 );
}

.pic__cta:active {
	transform: translateY( 1px );
}

.pic__cta-arrow {
	width: 20px;
	height: 20px;
	transition: transform 0.18s ease;
}

.pic__cta:hover .pic__cta-arrow {
	transform: translateX( 3px );
}

.pic__cta-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	justify-content: center;
	margin: 9px 0 0;
	font-size: 12.5px;
	color: var( --pic-ink-soft );
}

.pic__help-link {
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --pic-ink );
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	background: none;
	border: 0;
}

.pic__help-link:hover,
.pic__help-link:focus-visible {
	color: var( --pic-brand-dark );
	outline: none;
}

/* ------------------------------------------------------------ Uploaded state */

.pic__panel--uploaded {
	padding: 16px;
	background: var( --pic-surface );
	border: 1px solid var( --pic-line );
	border-radius: var( --pic-radius );
}

.pic__success {
	display: flex;
	gap: 9px;
	align-items: center;
	margin-bottom: 14px;
	font-size: 15px;
	font-weight: 700;
	color: var( --pic-success );
}

.pic__success-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #fff;
	background: var( --pic-success );
	border-radius: 50%;
}

.pic__success-icon svg {
	width: 14px;
	height: 14px;
}

.pic__uploaded-body {
	display: flex;
	gap: 15px;
	align-items: center;
}

.pic__thumb {
	flex: none;
	width: 92px;
	height: 92px;
	margin: 0;
	overflow: hidden;
	background: var( --pic-surface-soft );
	border: 1px solid var( --pic-line );
	border-radius: var( --pic-radius-sm );
}

.pic__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Echo the product silhouette on the confirmation thumbnail. */
.pic__thumb--circle {
	border-radius: 50%;
}

.pic__thumb--heart img {
	clip-path: path( 'M46 88C10 60 4 39 4 27A23 23 0 0 1 46 15 23 23 0 0 1 88 27c0 12-6 33-42 61z' );
}

.pic__thumb--diamond img {
	clip-path: polygon( 50% 0%, 100% 38%, 50% 100%, 0% 38% );
}

.pic__thumb--hexagon img {
	clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25% );
}

.pic__thumb--arch img {
	clip-path: path( 'M4 92V46a42 42 0 0 1 84 0v46z' );
}

.pic__thumb--heart,
.pic__thumb--diamond,
.pic__thumb--hexagon,
.pic__thumb--arch {
	background: none;
	border: 0;
}

.pic__file-info {
	min-width: 0;
}

.pic__file-name {
	margin: 0 0 3px;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pic__file-specs {
	margin: 0 0 7px;
	font-size: 13px;
	color: var( --pic-ink-soft );
}

.pic__dot {
	margin: 0 5px;
}

.pic__grade {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	margin: 0;
	padding: 3px 11px 3px 9px;
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 999px;
}

.pic__grade-dot {
	width: 7px;
	height: 7px;
	background: currentColor;
	border-radius: 50%;
}

.pic__grade--excellent {
	color: var( --pic-success );
	background: #eaf5ef;
}

.pic__grade--good {
	color: var( --pic-ink-soft );
	background: var( --pic-surface-soft );
}

.pic__grade--low {
	color: var( --pic-warn );
	background: #fdf4e3;
}

.pic__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.pic__action {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 130px;
	padding: 11px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var( --pic-ink );
	cursor: pointer;
	background: var( --pic-surface );
	border: 1px solid var( --pic-line-strong );
	border-radius: var( --pic-radius-sm );
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.pic__action svg {
	width: 15px;
	height: 15px;
}

.pic__action:hover,
.pic__action:focus-visible {
	border-color: var( --pic-ink );
	outline: none;
}

.pic__action:focus-visible {
	box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.4 );
}

.pic__action--edit {
	color: var( --pic-on-brand );
	background: var( --pic-brand );
	border-color: var( --pic-brand );
}

.pic__action--edit:hover,
.pic__action--edit:focus-visible {
	background: var( --pic-brand-dark );
	border-color: var( --pic-brand-dark );
}

.pic__action--delete {
	flex: 0 0 auto;
	min-width: 0;
	padding: 11px 13px;
	color: var( --pic-ink-soft );
	border-color: var( --pic-line );
}

.pic__action--delete:hover,
.pic__action--delete:focus-visible {
	color: var( --pic-danger );
	border-color: var( --pic-danger );
}

/* ---------------------------------------------------------------- Messaging */

.pic__error {
	display: flex;
	gap: 8px;
	margin: 12px 0 0;
	padding: 11px 14px;
	font-size: 13.5px;
	color: #8a2118;
	background: #fdf1f0;
	border: 1px solid #f2cbc7;
	border-radius: var( --pic-radius-sm );
}

.pic__error[hidden] {
	display: none;
}

.pic__status,
.pic .screen-reader-text,
.pic-modal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Add-to-cart gate. Visual only — the attribute stays with WooCommerce. */
.single_add_to_cart_button.pic-blocked,
button[type="submit"].pic-blocked,
.button.quick-buy.pic-blocked {
	cursor: not-allowed;
	opacity: 0.5;
}

/* --------------------------------------------------------------- Modal shell */

.pic-modal {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	color: var( --pic-ink );
	font-size: 15px;
	line-height: 1.55;
}

.pic-modal[hidden] {
	display: none;
}

.pic-modal *,
.pic-modal *::before,
.pic-modal *::after {
	box-sizing: inherit;
}

body.pic-editor-open {
	overflow: hidden;
}

.pic-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 22, 26, 29, 0.55 );
}

.pic-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	max-height: calc( 100vh - 40px );
	overflow: hidden;
	background: var( --pic-surface );
	border-radius: var( --pic-radius );
	box-shadow: 0 20px 56px rgba( 0, 0, 0, 0.3 );
}

.pic-modal__dialog--narrow {
	max-width: 540px;
}

.pic-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var( --pic-ink-soft );
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 6px;
}

.pic-modal__close svg {
	width: 20px;
	height: 20px;
}

.pic-modal__close:hover,
.pic-modal__close:focus-visible {
	color: var( --pic-ink );
	background: var( --pic-surface-soft );
	outline: none;
}

.pic-modal__close--inline {
	position: static;
}

/* ------------------------------------------------------------ Upload dialog */

.pic-up {
	display: flex;
	min-height: 520px;
}

.pic-up__rail {
	flex: 0 0 190px;
	padding: 46px 10px 14px;
	border-right: 1px solid var( --pic-line );
	background: var( --pic-surface );
}

.pic-up__source {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var( --pic-ink );
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: var( --pic-radius-sm );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pic-up__source-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

.pic-up__source-icon svg {
	width: 22px;
	height: 22px;
}

/* Each provider keeps its own colour in the rail, so the tab and the sign-in
   panel it opens are recognisably the same thing. */
.pic-up__source[data-pic-source="instagram"] .pic-up__source-icon {
	color: #e5306a;
}

.pic-up__source[data-pic-source="facebook"] .pic-up__source-icon {
	color: #1877f2;
}

.pic-up__source[data-pic-source="gdrive"] .pic-up__source-icon {
	color: #1a73e8;
}

.pic-up__source:hover:not( [disabled] ),
.pic-up__source:focus-visible {
	background: var( --pic-surface-soft );
	outline: none;
}

.pic-up__source.is-active {
	color: var( --pic-ink );
	background: #fdf6df;
}

.pic-up__source[disabled] {
	cursor: default;
	opacity: 0.45;
}

.pic-up__source.is-pending .pic-up__source-icon,
.pic-up__source.is-pending .pic-up__source-label {
	opacity: 0.6;
}

.pic-up__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: 46px 22px 20px;
}

.pic-up__stage {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.pic-up__stage[hidden] {
	display: none;
}

.pic-up__stage[data-pic-stage="choose"] {
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
}

.pic-up__stage[data-pic-stage="connect"] {
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------- Connect a social account */

.pic-up__connect {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 8px 0;
	text-align: center;
}

/* The provider mark, shown large. Each provider gets its own colour so the
   panel is recognisable at a glance without leaning on a logo file. */
.pic-up__connect-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	color: #fff;
	background: var( --pic-provider, #4a4a4a );
	border-radius: 20px;
}

.pic-up__connect-icon svg {
	width: 40px;
	height: 40px;
}

.pic-up__connect-icon[data-pic-provider="instagram"] {
	--pic-provider: linear-gradient( 135deg, #f9a03e 0%, #e5306a 48%, #9a3bbd 100% );

	background: var( --pic-provider );
}

.pic-up__connect-icon[data-pic-provider="facebook"] {
	--pic-provider: #1877f2;
}

.pic-up__connect-icon[data-pic-provider="gdrive"] {
	--pic-provider: #1a73e8;
}

.pic-up__connect-title {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	color: var( --pic-ink );
}

.pic-up__connect-lead {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var( --pic-ink-soft );
}

.pic-up__connect-action {
	min-width: 240px;
	padding: 14px 28px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var( --pic-on-brand, #1d1d1d );
	cursor: pointer;
	background: var( --pic-brand );
	border: 0;
	border-radius: 8px;
	transition: background-color 0.16s ease, opacity 0.16s ease;
}

.pic-up__connect-action:hover:not( [disabled] ),
.pic-up__connect-action:focus-visible {
	background: var( --pic-brand-dark, #d9a800 );
	outline: none;
}

.pic-up__connect-action:focus-visible {
	box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.45 );
}

.pic-up__connect-action[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.pic-up__connect-action.is-busy {
	cursor: progress;
}

.pic-up__connect-foot {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --pic-ink-soft );
}

.pic-up__connect-foot[hidden] {
	display: none;
}

.pic-up__note {
	margin: 0;
	padding: 10px 14px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #6b5510;
	background: #fdf6df;
	border: 1px solid #f0e2b0;
	border-radius: var( --pic-radius-sm );
}

.pic-up__note[hidden] {
	display: none;
}

.pic-up__drop {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 380px;
	padding: 28px 20px;
	text-align: center;
	cursor: pointer;
	background: var( --pic-surface );
	border: 1.5px dashed var( --pic-line-strong );
	border-radius: var( --pic-radius-sm );
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.pic-up__drop:hover,
.pic-up__drop:focus-visible,
.pic-up__drop.is-dragover {
	background: #fffdf5;
	border-color: var( --pic-brand );
	outline: none;
}

.pic-up__drop-icon {
	display: block;
	margin-bottom: 6px;
	color: var( --pic-line-strong );
}

.pic-up__drop-icon svg {
	width: 52px;
	height: 60px;
}

.pic-up__drop:hover .pic-up__drop-icon,
.pic-up__drop.is-dragover .pic-up__drop-icon {
	color: var( --pic-brand );
}

.pic-up__drop-title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
}

.pic-up__drop-sub {
	margin: 0;
	font-size: 13.5px;
	color: var( --pic-ink-soft );
}

.pic-up__drop-meta {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --pic-ink-soft );
}

/* Confirm stage */

.pic-up__preview {
	width: 100%;
	text-align: center;
}

.pic-up__preview-card {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 8px;
	background: var( --pic-surface );
	border: 1px solid var( --pic-line );
	border-radius: var( --pic-radius-sm );
}

.pic-up__preview-card img {
	display: block;
	max-width: 100%;
	max-height: 300px;
	object-fit: contain;
}

.pic-up__preview-remove {
	position: absolute;
	top: -11px;
	right: -11px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: #fff;
	cursor: pointer;
	background: var( --pic-danger );
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
}

.pic-up__preview-remove svg {
	width: 13px;
	height: 13px;
}

.pic-up__preview-remove:hover,
.pic-up__preview-remove:focus-visible {
	background: #b02c20;
	outline: none;
}

.pic-up__preview-name {
	margin: 12px 0 0;
	overflow: hidden;
	font-size: 13.5px;
	color: var( --pic-ink-soft );
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Progress stage */

.pic-up__stage--progress {
	flex-direction: column;
	gap: 14px;
}

.pic__spinner {
	width: 30px;
	height: 30px;
	border: 3px solid var( --pic-line );
	border-top-color: var( --pic-brand );
	border-radius: 50%;
	animation: pic-spin 0.75s linear infinite;
}

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

.pic__progress-label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var( --pic-ink-soft );
}

.pic__progress-track {
	width: 100%;
	max-width: 320px;
	height: 7px;
	overflow: hidden;
	background: var( --pic-line );
	border-radius: 999px;
}

.pic__progress-bar {
	width: 0;
	height: 100%;
	background: var( --pic-brand );
	border-radius: inherit;
	transition: width 0.2s ease;
}

.pic__cancel {
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var( --pic-ink-soft );
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	background: none;
	border: 0;
}

.pic__cancel:hover {
	color: var( --pic-danger );
}

/* Dialog footer */

.pic-up__error {
	margin: 12px 0 0;
	padding: 10px 13px;
	font-size: 13.5px;
	color: #8a2118;
	background: #fdf1f0;
	border: 1px solid #f2cbc7;
	border-radius: var( --pic-radius-sm );
}

.pic-up__error[hidden] {
	display: none;
}

.pic-up__footer {
	display: flex;
	justify-content: flex-end;
	padding-top: 16px;
}

.pic-up__footer[hidden] {
	display: none;
}

.pic-up__submit {
	min-width: 168px;
	padding: 13px 32px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var( --pic-on-brand );
	cursor: pointer;
	background: var( --pic-brand );
	border: 0;
	border-radius: var( --pic-radius-sm );
	transition: background-color 0.16s ease;
}

.pic-up__submit:hover,
.pic-up__submit:focus-visible {
	background: var( --pic-brand-dark );
	outline: none;
}

.pic-up__submit:focus-visible {
	box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.45 );
}

/* --------------------------------------------------------------- Photo tips */

.pic-modal__header {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var( --pic-line );
}

.pic-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.pic-modal__body {
	flex: 1 1 auto;
	padding: 18px 20px;
	overflow-y: auto;
}

.pic-modal__lead {
	margin: 0 0 16px;
	color: var( --pic-ink-soft );
}

.pic-guide {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pic-guide__item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 11px 0;
	font-size: 14px;
	line-height: 1.5;
	border-top: 1px solid var( --pic-surface-soft );
}

.pic-guide__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.pic-guide__item strong {
	display: block;
	font-weight: 700;
}

.pic-guide__mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: #fff;
	border-radius: 50%;
}

.pic-guide__mark svg {
	width: 13px;
	height: 13px;
}

.pic-guide__item--do .pic-guide__mark {
	background: var( --pic-success );
}

.pic-guide__item--dont .pic-guide__mark {
	background: var( --pic-danger );
}

.pic-modal__note {
	margin: 16px 0 0;
	padding: 12px 14px;
	font-size: 13.5px;
	color: var( --pic-ink-soft );
	background: var( --pic-surface-soft );
	border-radius: var( --pic-radius-sm );
}

.pic-modal__footer {
	padding: 14px 20px 18px;
	text-align: right;
}

.pic-modal__button {
	padding: 11px 26px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var( --pic-on-brand );
	cursor: pointer;
	background: var( --pic-brand );
	border: 0;
	border-radius: var( --pic-radius-sm );
}

.pic-modal__button:hover,
.pic-modal__button:focus-visible {
	background: var( --pic-brand-dark );
	outline: none;
}

/* ----------------------------------------------------------- Small screens */

@media ( max-width: 700px ) {
	.pic-modal {
		padding: 0;
	}

	.pic-modal__dialog {
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.pic-up {
		flex-direction: column;
		min-height: 0;
		height: 100%;
	}

	.pic-up__rail {
		display: flex;
		flex: 0 0 auto;
		gap: 6px;
		padding: 44px 12px 10px;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var( --pic-line );
	}

	.pic-up__source {
		width: auto;
		white-space: nowrap;
	}

	.pic-up__main {
		padding: 16px;
	}

	.pic-up__drop {
		min-height: 220px;
	}

	.pic-up__drop-title {
		font-size: 16.5px;
	}

	.pic-up__connect {
		gap: 12px;
		max-width: none;
	}

	.pic-up__connect-icon {
		width: 64px;
		height: 64px;
		border-radius: 17px;
	}

	.pic-up__connect-icon svg {
		width: 34px;
		height: 34px;
	}

	.pic-up__connect-title {
		font-size: 19px;
	}

	.pic-up__connect-lead {
		font-size: 14px;
	}

	/* Full width rather than a 240px island on a 320px screen. */
	.pic-up__connect-action {
		width: 100%;
		min-width: 0;
	}

	.pic-up__submit {
		width: 100%;
	}
}

@media ( max-width: 480px ) {
	.pic__cta {
		font-size: 16px;
		padding: 15px 18px;
	}

	.pic__uploaded-body {
		gap: 12px;
	}

	.pic__thumb {
		width: 74px;
		height: 74px;
	}

	.pic__actions {
		flex-wrap: nowrap;
	}

	.pic__action {
		min-width: 0;
		padding: 11px 8px;
		font-size: 13px;
	}
}

/* -------------------------------------------------------- User preferences */

/* --------------------------------------------------------- Tablet range */

/* The dialog is still a panel rather than a full screen, but the room around
   it is tighter and the rail is competing with the drop area for width. */
@media ( min-width: 701px ) and ( max-width: 1024px ) {
	.pic-modal {
		padding: 24px;
	}

	.pic-up {
		min-height: min( 520px, 68vh );
	}

	.pic-up__rail {
		flex: 0 0 168px;
		padding-right: 8px;
	}

	.pic-up__main {
		padding: 44px 18px 18px;
	}

	.pic-up__drop {
		min-height: min( 380px, 46vh );
	}
}

/* ------------------------------------------------------- Short viewports */

/* The upload dialog has the same problem the editor does: hidden overflow, so
   anything below the fold is unreachable rather than scrollable. */
@media ( max-height: 620px ) {
	.pic-up,
	.pic-up__drop {
		min-height: 0;
	}

	.pic-up__main {
		padding: 40px 18px 14px;
	}

	.pic-up__connect-icon {
		width: 56px;
		height: 56px;
	}

	.pic-up__connect-icon svg {
		width: 30px;
		height: 30px;
	}
}

/* ------------------------------------------------------------- Touch input */

@media ( pointer: coarse ) {
	.pic-up__source {
		padding: 13px 12px;
	}

	.pic-modal__close {
		width: 44px;
		height: 44px;
	}

	.pic__action {
		min-height: 44px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pic *,
	.pic *::before,
	.pic *::after,
	.pic-modal * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media ( prefers-contrast: more ) {
	.pic,
	.pic-modal {
		--pic-line: #767676;
		--pic-line-strong: #333333;
		--pic-ink-soft: #333333;
	}
}

/* ------------------------------------------------- Connected source picker */

.pic-up__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 108px, 1fr ) );
	gap: 8px;
	width: 100%;
	max-height: 320px;
	padding: 2px;
	overflow-y: auto;
}

.pic-up__grid-item {
	padding: 0;
	overflow: hidden;
	line-height: 0;
	cursor: pointer;
	background: var( --pic-surface-soft );
	border: 2px solid transparent;
	border-radius: var( --pic-radius-sm );
	transition: border-color 0.15s ease;
}

.pic-up__grid-item img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.pic-up__grid-item:hover,
.pic-up__grid-item:focus-visible {
	border-color: var( --pic-brand );
	outline: none;
}