/* Ginger Nails – custom set builder. Tokens from the design handoff. */
.gn-cs {
	--gn-ink: #171210;
	--gn-accent: #b81a72;
	--gn-tint: #fcebf4;
	--gn-blush: #f4c9e2;
	--gn-card: #fffdfb;
	--gn-muted: #5c4e47;
	--gn-faint: #75665d;
	--gn-rule: #e7ded7;
	--gn-rule-in: #f0e9e3;
	--gn-band: #beafa6;
	--gn-paper: #faf6f2;
	--gn-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
	--gn-body: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 28px 64px;
	color: var(--gn-ink);
	font-family: var(--gn-body);
	font-size: 15px;
	line-height: 1.6;
}
.gn-cs *, .gn-cs *::before, .gn-cs *::after { box-sizing: inherit; }
.gn-cs [hidden] { display: none !important; }
.gn-cs p { margin: 0; padding: 0; }
/* Divi styles content lists with bullets and padding; the builder's lists are plain. */
.gn-cs ul.gn-cs__summary, .gn-cs ul.gn-cs__thumbs { padding: 0 !important; list-style: none !important; }
.gn-cs ul.gn-cs__summary > li, .gn-cs ul.gn-cs__thumbs > li { list-style: none !important; }

.gn-cs__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.gn-cs__kicker, .gn-cs__count { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.gn-cs__kicker { color: var(--gn-accent); }
.gn-cs__count { color: var(--gn-faint); }
.gn-cs__rail { position: relative; height: 2px; margin-bottom: 44px; background: var(--gn-rule); overflow: hidden; }
.gn-cs__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 10%; background: var(--gn-accent); transition: width .2s ease; }

.gn-cs__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.gn-cs__legend { float: left; width: 100%; margin: 0; padding: 0; }
.gn-cs__legend + * { clear: both; }
.gn-cs__title { margin: 0 0 12px; padding: 0; font-family: var(--gn-display); font-size: 46px; font-weight: 400; line-height: 1.08; color: var(--gn-ink); }
.gn-cs__title:focus { outline: none; }
.gn-cs__title:focus-visible { outline: 2px solid var(--gn-accent); outline-offset: 4px; }
.gn-cs__hint { max-width: 52ch; margin-bottom: 28px !important; color: var(--gn-muted); }

/* Visually hidden radios, styled as cards. They stay keyboard-accessible. */
.gn-cs__radio, .gn-cs__file input, .gn-cs__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gn-cs__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gn-cs__card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 20px; border: 1px solid var(--gn-rule); border-radius: 14px; background: var(--gn-card); cursor: pointer; transition: border-color .15s, background-color .15s; }
.gn-cs__card:hover { border-color: var(--gn-faint); }
.gn-cs__card.is-on { border-color: var(--gn-accent); background: var(--gn-tint); }
.gn-cs__card-label { font-family: var(--gn-display); font-size: 22px; line-height: 1.2; }
.gn-cs__card-note { font-size: 14px; color: var(--gn-muted); }
.gn-cs__card:focus-within, .gn-cs__swatch:focus-within, .gn-cs__pill:focus-within, .gn-cs__toggle:focus-within, .gn-cs__file:focus-within { outline: 2px solid var(--gn-accent); outline-offset: 2px; }

.gn-cs__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gn-cs__swatch { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 12px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; }
.gn-cs__swatch.is-on { border-color: var(--gn-accent); background: var(--gn-tint); }
.gn-cs__chip { display: block; width: 100%; max-width: 120px; aspect-ratio: 4 / 5; border: 1px solid var(--gn-rule); border-radius: 50px 50px 8px 8px; }
.gn-cs__swatch-label { font-size: 14px; }

.gn-cs__sub { margin-top: 22px; padding: 22px 20px; border: 1px solid var(--gn-rule); border-radius: 14px; background: var(--gn-card); }
.gn-cs__sublegend { margin-bottom: 12px; padding: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gn-faint); }
.gn-cs__pills, .gn-cs__hand { min-width: 0; margin: 0; padding: 0; border: 0; }
.gn-cs__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.gn-cs__pills .gn-cs__sublegend { width: 100%; }
.gn-cs__pill { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 48px; padding: 0 16px; border: 1px solid var(--gn-rule); border-radius: 10px; background: #fff; font-weight: 500; cursor: pointer; }
.gn-cs__pill.is-on { border-color: var(--gn-ink); background: var(--gn-ink); color: var(--gn-paper); }
.gn-cs__note { color: var(--gn-muted); }
.gn-cs__note + .gn-cs__toggle, .gn-cs__toggle + .gn-cs__hand, .gn-cs__hand + .gn-cs__hand, .gn-cs__hand + .gn-cs__toggle { margin-top: 16px; }
.gn-cs__link { color: var(--gn-accent); text-decoration: underline; text-underline-offset: 3px; }
.gn-cs__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.gn-cs__toggle input { width: 18px; height: 18px; accent-color: var(--gn-accent); }
.gn-cs__meas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gn-cs__field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gn-muted); }
.gn-cs__field input, .gn-cs__wishes { width: 100%; padding: 10px 12px; border: 1px solid var(--gn-rule); border-radius: 10px; background: #fff; color: var(--gn-ink); font: inherit; }
.gn-cs__field input:focus, .gn-cs__wishes:focus { border-color: var(--gn-accent); outline: 2px solid var(--gn-tint); }

.gn-cs__drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 24px; border: 1.5px dashed var(--gn-rule); border-radius: 18px; background: rgba(255, 253, 251, .86); text-align: center; }
.gn-cs__drop.is-over { border-color: var(--gn-accent); background: var(--gn-tint); }
.gn-cs__drop-title { font-family: var(--gn-display); font-size: 24px; }
.gn-cs__drop-hint { margin-bottom: 10px !important; font-size: 14px; color: var(--gn-muted); }
.gn-cs__file { position: relative; }
.gn-cs__thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.gn-cs__thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 112px; overflow: hidden; border: 1px solid var(--gn-rule); border-radius: 48px 48px 8px 8px; background: var(--gn-card); }
.gn-cs__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gn-cs__thumb.is-loading, .gn-cs__thumb.is-removing { opacity: .5; }
.gn-cs__thumb-name { padding: 6px; font-size: 11px; word-break: break-all; color: var(--gn-muted); }
.gn-cs__thumb-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--gn-ink); color: var(--gn-paper); font-size: 16px; line-height: 26px; cursor: pointer; }
.gn-cs__wishes { min-height: 190px; padding: 16px; border-radius: 14px; background: var(--gn-card); resize: vertical; }

.gn-cs__summary { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--gn-rule); border-radius: 18px; background: var(--gn-card); list-style: none; }
.gn-cs__summary li { margin: 0; border-bottom: 1px solid var(--gn-rule-in); }
.gn-cs__summary li:last-child { border-bottom: 0; }
.gn-cs__row { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; width: 100%; padding: 15px 22px; border: 0; background: none; color: var(--gn-ink); font: inherit; text-align: left; cursor: pointer; }
.gn-cs__row:hover { background: var(--gn-paper); }
.gn-cs__row-k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gn-faint); }
.gn-cs__row-v { overflow-wrap: anywhere; }
.gn-cs__row-e { font-size: 13px; color: var(--gn-accent); }
.gn-cs__total { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; padding: 22px 24px; border-radius: 18px; background: var(--gn-ink); color: var(--gn-paper); }
.gn-cs__total-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.gn-cs__total-note { margin-top: 4px !important; font-size: 13px; color: var(--gn-band); }
.gn-cs__price { font-family: var(--gn-display); font-size: 34px; white-space: nowrap; }
.gn-cs__add { width: 100%; margin-top: 16px; }

.gn-cs__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; border: 1px solid var(--gn-ink); border-radius: 999px; font-family: var(--gn-body); font-size: 14px; font-weight: 500; letter-spacing: .04em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.gn-cs__btn--dark { background: var(--gn-ink); color: var(--gn-paper); }
.gn-cs__btn--dark:hover { border-color: var(--gn-accent); background: var(--gn-accent); }
.gn-cs__btn--ghost { background: transparent; color: var(--gn-ink); }
.gn-cs__btn--ghost:hover { background: var(--gn-blush); }
.gn-cs__btn--accent { border-color: var(--gn-accent); background: var(--gn-accent); color: #fff; }
.gn-cs__btn--accent:hover { border-color: var(--gn-ink); background: var(--gn-ink); }
.gn-cs__btn:disabled { opacity: .6; cursor: progress; }
.gn-cs__btn:focus-visible, .gn-cs__row:focus-visible, .gn-cs__thumb-remove:focus-visible { outline: 2px solid var(--gn-accent); outline-offset: 2px; }

.gn-cs__error { min-height: 1.6em; margin-top: 20px !important; color: var(--gn-accent); font-weight: 500; }
.gn-cs__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.gn-cs__nav [data-gn-next] { margin-left: auto; }
.gn-cs__noscript { padding: 16px; border: 1px solid var(--gn-rule); border-radius: 14px; }

@media (max-width: 640px) {
	.gn-cs { padding: 28px 18px 48px; }
	.gn-cs__title { font-size: 34px; }
	.gn-cs__cards { grid-template-columns: 1fr; }
	.gn-cs__swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gn-cs__meas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gn-cs__row { grid-template-columns: minmax(0, 1fr) auto; }
	.gn-cs__row-k { grid-column: 1 / -1; }
	.gn-cs__total { flex-direction: column; align-items: flex-start; }
	.gn-cs__nav .gn-cs__btn { flex: 1 1 auto; }
}

/* Cart and checkout */
.gn-cs-ack { margin-top: 12px; }