/* cPOD Kit – Color / Size picker (POD Profile) */
.cpod-po {
	--cpod-po-dot: 30px;
	--cpod-po-gap: 8px;
	--cpod-po-border: #d5d7da;
	--cpod-po-active: #111;
	--cpod-po-bg: #fff;
	--cpod-po-text: inherit;
	--cpod-po-active-bg: #111;
	--cpod-po-active-text: #fff;
	box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0 0 16px; clear: both; flex: 1 1 100%;
}
.cpod-po *, .cpod-po *::before, .cpod-po *::after { box-sizing: border-box; }
.cpod-po--swatch-sm { --cpod-po-dot: 24px; }
.cpod-po--swatch-lg { --cpod-po-dot: 38px; }

.cpod-po__field { margin: 0 0 14px; min-width: 0; }
.cpod-po__field:last-child { margin-bottom: 0; }
.cpod-po__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 8px; line-height: 1.4; }
.cpod-po__label { font-weight: 700; }
.cpod-po__label::after { content: ":"; }
.cpod-po__value { color: #555; overflow-wrap: anywhere; }
.cpod-po__guide { margin-left: auto; font-size: .9em; }
.cpod-po__guide a, .cpod-po__guide button { font-size: inherit; text-decoration: underline; }

.cpod-po__list { display: flex; flex-wrap: wrap; gap: var(--cpod-po-gap); margin: 0; padding: 0; min-width: 0; }
.cpod-po__opt { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 0; cursor: pointer; font-weight: 400; line-height: 1.2; }
.cpod-po__opt.is-more { display: none; }
.cpod-po.is-expanded .cpod-po__opt.is-more, .cpod-po__list.is-expanded .cpod-po__opt.is-more { display: inline-flex; }
/* The radio stays focusable and readable by screen readers; the label draws it. */
.cpod-po__input { position: absolute !important; top: 0; left: 0; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.cpod-po__extra { margin-left: 4px; font-size: .85em; opacity: .75; }

/* Swatches (circle / square): only the dot shows, the name is in the tooltip and the "Color:" value. */
.cpod-po__dot { display: block; flex: 0 0 auto; width: var(--cpod-po-dot); height: var(--cpod-po-dot); border-radius: 50%; background: linear-gradient(135deg, var(--cpod-po-c1) 50%, var(--cpod-po-c2) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.cpod-po__dot.is-light { box-shadow: inset 0 0 0 1px var(--cpod-po-border); }
.cpod-po__list--circle .cpod-po__opt, .cpod-po__list--square .cpod-po__opt { padding: 3px; border: 2px solid transparent; border-radius: 50%; }
.cpod-po__list--square .cpod-po__opt, .cpod-po__list--square .cpod-po__dot { border-radius: 6px; }
.cpod-po__list--circle .cpod-po__text, .cpod-po__list--square .cpod-po__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cpod-po__list--circle .cpod-po__opt:hover, .cpod-po__list--square .cpod-po__opt:hover { border-color: var(--cpod-po-border); }
.cpod-po__list--circle .cpod-po__opt:has(:checked), .cpod-po__list--square .cpod-po__opt:has(:checked), .cpod-po__opt.is-checked { border-color: var(--cpod-po-active); }

/* Buttons (color button with dot + name, size pill). */
.cpod-po__list--button .cpod-po__opt, .cpod-po__list--pill .cpod-po__opt {
	gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--cpod-po-border); border-radius: 6px;
	background: var(--cpod-po-bg); color: var(--cpod-po-text);
}
.cpod-po__list--button .cpod-po__dot { --cpod-po-dot: 18px; }
.cpod-po__list--pill .cpod-po__opt { justify-content: center; min-width: 52px; }
.cpod-po__list--button .cpod-po__opt:hover, .cpod-po__list--pill .cpod-po__opt:hover { border-color: var(--cpod-po-active); }
.cpod-po__list--button .cpod-po__opt:has(:checked), .cpod-po__list--button .cpod-po__opt.is-checked { border-color: var(--cpod-po-active); box-shadow: inset 0 0 0 1px var(--cpod-po-active); }
.cpod-po__list--pill .cpod-po__opt:has(:checked), .cpod-po__list--pill .cpod-po__opt.is-checked { border-color: var(--cpod-po-active-bg); background: var(--cpod-po-active-bg); color: var(--cpod-po-active-text); }

/* Radio list. */
.cpod-po__list--radio { gap: 6px 18px; }
.cpod-po__list--radio .cpod-po__opt { gap: 8px; }
.cpod-po__list--radio .cpod-po__opt::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--cpod-po-border); border-radius: 50%; background: var(--cpod-po-bg); }
.cpod-po__list--radio .cpod-po__opt:has(:checked)::before, .cpod-po__list--radio .cpod-po__opt.is-checked::before { border: 5px solid var(--cpod-po-active); }

/* A size the chosen color does not come in. */
.cpod-po__opt.is-unavailable { cursor: not-allowed; opacity: .4; }
.cpod-po__list--pill .cpod-po__opt.is-unavailable, .cpod-po__list--radio .cpod-po__opt.is-unavailable .cpod-po__text { text-decoration: line-through; }
.cpod-po__list--pill .cpod-po__opt.is-unavailable:hover { border-color: var(--cpod-po-border); }

.cpod-po__opt:has(:focus-visible) { outline: 2px solid var(--cpod-po-active); outline-offset: 2px; }

.cpod-po__more { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cpod-po-dot); height: calc(var(--cpod-po-dot) + 10px); margin: 0; padding: 0 10px; border: 1px dashed var(--cpod-po-border); border-radius: 999px; background: transparent; color: inherit; font-size: .85em; font-weight: 600; line-height: 1; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
.cpod-po__list.is-expanded .cpod-po__more { display: none; }

.cpod-po__select { display: block; width: 100%; max-width: 320px; margin: 0; }
.cpod-po__error { margin: 6px 0 0; color: #b32d2e; font-size: .9em; }
.cpod-po__error[hidden] { display: none; }
.cpod-po__field.has-error .cpod-po__list--pill .cpod-po__opt,
.cpod-po__field.has-error .cpod-po__list--button .cpod-po__opt,
.cpod-po__field.has-error .cpod-po__select { border-color: #b32d2e; }

/* Centered. */
.cpod-po--align-center .cpod-po__head, .cpod-po--align-center .cpod-po__list { justify-content: center; text-align: center; }
.cpod-po--align-center .cpod-po__guide { margin-left: 0; }
.cpod-po--align-center .cpod-po__select { margin: 0 auto; }
.cpod-po--align-center .cpod-po__error { text-align: center; }

/* Label beside the choices on wide screens. */
@media (min-width: 550px) {
	.cpod-po--inline .cpod-po__field { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); column-gap: 16px; align-items: start; }
	.cpod-po--inline .cpod-po__head { padding-top: 8px; }
	.cpod-po--inline .cpod-po__head { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
	.cpod-po--inline .cpod-po__guide { margin-left: 0; }
	.cpod-po--inline .cpod-po__error { grid-column: 2; }
}


/* Picker over a variable product's variations: the dropdowns it replaces stay in the form, hidden. */
.cpod-vp-hidden { display: none !important; }
.cpod-vp--all ~ table.variations, .cpod-vp--all ~ .variations { display: none !important; }