/* RnR Swatch Picker — modal styles */

body.rnrsp-open { overflow: hidden; }

.rnrsp { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rnrsp[hidden] { display: none; }

.rnrsp__overlay { position: absolute; inset: 0; background: rgba(20, 16, 12, 0.6); }

.rnrsp__panel {
	position: relative;
	width: 100%;
	max-width: 960px;
	max-height: calc(100vh - 32px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: #222;
}

.rnrsp__close {
	position: absolute; top: 10px; right: 10px;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: #f1ede8; color: #333; font-size: 26px; line-height: 1; cursor: pointer;
	z-index: 2;
}
.rnrsp__close:hover, .rnrsp__close:focus { background: #e2dbd2; outline: none; }

.rnrsp__header { padding: 22px 60px 12px 24px; border-bottom: 1px solid #ece7e0; }
.rnrsp__title { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.2; }
.rnrsp__intro { margin: 0 0 12px; font-size: 0.95rem; color: #555; }
.rnrsp__intro strong { color: #1f5e3a; }

.rnrsp__tools { display: flex; gap: 8px; align-items: center; }
.rnrsp__search {
	flex: 1; min-width: 0; padding: 8px 12px;
	border: 1px solid #d9d2c8; border-radius: 8px; font-size: 0.95rem;
}
.rnrsp__clear {
	padding: 8px 14px; border: 1px solid #d9d2c8; border-radius: 8px;
	background: #fff; color: #333; cursor: pointer; font: inherit; font-size: 0.9rem;
	line-height: 1.2; text-transform: none; letter-spacing: normal; min-width: 0; height: auto;
}
.rnrsp__search { color: #222; background: #fff; font: inherit; font-size: 0.95rem; height: auto; }
.rnrsp__clear:hover { background: #f5f1ec; }

.rnrsp__body { padding: 16px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.rnrsp__loading, .rnrsp__error { margin: 24px 0; text-align: center; color: #666; }
.rnrsp__error { color: #b3261e; }

.rnrsp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}

.rnrsp__card {
	position: relative;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 10px 8px 12px;
	border: 2px solid #ece7e0; border-radius: 10px;
	cursor: pointer; user-select: none;
	transition: border-color .15s, box-shadow .15s, transform .15s;
	margin: 0; font-weight: 400;
}
.rnrsp__card:hover { border-color: #cbbfae; transform: translateY(-1px); }
.rnrsp__card.is-selected { border-color: #1f5e3a; box-shadow: 0 0 0 3px rgba(31, 94, 58, 0.18); }
.rnrsp__card.is-current::before {
	content: "Viewing";
	position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
	background: #1f5e3a; color: #fff; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
	padding: 2px 8px; border-radius: 999px;
}
.rnrsp__card[hidden] { display: none; }

.rnrsp__check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rnrsp__card:focus-within { outline: 2px solid #1f5e3a; outline-offset: 2px; }

.rnrsp__img {
	width: 96px; height: 96px; object-fit: cover; border-radius: 8px; margin-bottom: 8px;
	background: #f1ede8; display: block;
}
.rnrsp__img--none { background: repeating-linear-gradient(45deg, #eee 0 6px, #e4e4e4 6px 12px); }

.rnrsp__name { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.rnrsp__desc { font-size: 0.78rem; color: #6b6660; margin-top: 2px; line-height: 1.25; }

.rnrsp__tick {
	position: absolute; top: 8px; right: 8px;
	width: 22px; height: 22px; border-radius: 50%;
	background: #1f5e3a; color: #fff; font-size: 13px; line-height: 22px;
	opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.rnrsp__card.is-selected .rnrsp__tick { opacity: 1; transform: scale(1); }

.rnrsp__src { display: none !important; }

.rnrsp__footer {
	padding: 12px 24px 16px; border-top: 1px solid #ece7e0; background: #faf8f5;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.rnrsp__summary { font-size: 0.95rem; color: #333; }
.rnrsp__summary .rnrsp__free { color: #1f5e3a; font-size: 0.85rem; }
.rnrsp__actions { margin-left: auto; display: flex; gap: 8px; }
.rnrsp__add { min-width: 220px; }
.rnrsp__add[disabled] { opacity: .5; cursor: not-allowed; }
.rnrsp__add[hidden] { display: none; }

.rnrsp__done { text-align: center; padding: 32px 8px; }
.rnrsp__done-icon {
	width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
	background: #1f5e3a; color: #fff; font-size: 34px; line-height: 64px;
}
.rnrsp__done h3 { margin: 0 0 6px; }
.rnrsp__done-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) {
	.rnrsp { padding: 0; }
	.rnrsp__panel { max-height: 100vh; height: 100%; border-radius: 0; }
	.rnrsp__header { padding: 18px 56px 10px 16px; }
	.rnrsp__title { font-size: 1.25rem; }
	.rnrsp__body { padding: 12px 16px; }
	.rnrsp__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
	.rnrsp__img { width: 72px; height: 72px; }
	.rnrsp__footer { padding: 10px 16px 14px; }
	.rnrsp__actions { width: 100%; }
	.rnrsp__add { width: 100%; }
}

/* ---- v2 additions ---- */
.rnrsp__price { font-size: 0.8rem; color: #444; margin-top: 4px; }
.rnrsp__card.is-unavailable { opacity: .45; cursor: not-allowed; }
.rnrsp__preview {
	margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
	background: #fff4d6; color: #6b4e00; font-size: 0.85rem; font-weight: 600;
}
.rnrsp__fine { font-size: 0.9rem; color: #1f5e3a; margin-top: 8px; }

/* inline grid from [rnr_swatches] */
.rnrsp-inline { margin: 16px 0 32px; }
.rnrsp-inline .rnrsp__tools { margin-bottom: 14px; }
.rnrsp-inline .rnrsp__body { padding: 0; overflow: visible; }
.rnrsp-inline .rnrsp__footer {
	position: sticky; bottom: 0; margin-top: 16px; padding: 12px 16px;
	border: 1px solid #ece7e0; border-radius: 10px; background: #faf8f5;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

/* cart / order line label */
.rnrsp-free-label {
	display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
	background: #e6f2ea; color: #1f5e3a; font-size: 0.75em; font-weight: 600; vertical-align: middle;
}