/* Size picker on category pages (see inc/quick-sizes.php, js/quick-sizes.js). */
.add-to-cart-button.okc-has-sizes { position: relative; }
.okc-sizes {
	display: none;
	position: absolute;
	z-index: 60;
	bottom: calc(100% + 8px);
	left: 50%;
	width: 280px;
	max-width: calc(100vw - 16px);
	padding: 12px;
	transform: translateX(calc(-50% + var(--okc-shift, 0px)));
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
	text-align: center;
	font-size: .9rem;
	line-height: 1.25;
}
/* invisible bridge so the pointer can travel from the button to the panel without it closing */
.okc-sizes::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.okc-has-sizes.okc-open > .okc-sizes { display: block; }

.okc-sizes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 12px 8px; margin-bottom: 12px; }
.okc-size {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 64px;
	margin: 0;
	padding: 10px 4px 8px;
	border: 1px solid #b5b5b5;
	border-radius: 14px;
	background: #fff;
	color: #222;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.okc-size:hover:not(:disabled) { border-color: var(--fs-color-primary); }
.okc-size[aria-checked="true"] { border-color: var(--fs-color-primary); box-shadow: 0 0 0 1px var(--fs-color-primary); }
.okc-size:focus-visible, .okc-sizes__add:focus-visible, .okc-sizes__cart:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.okc-size__name { font-weight: 600; }
.okc-size__price, .okc-size__price .price, .okc-size__price .amount { font-size: 1rem; font-weight: 800; color: #111; }
.okc-size__price del, .okc-size__price del .amount { font-size: .8rem; font-weight: 400; opacity: .6; }
.okc-size__unit { font-size: .72rem; color: #555; }
.okc-size__off {
	position: absolute;
	top: -9px;
	right: -6px;
	padding: 3px 6px;
	border-radius: 999px;
	background: var(--fs-color-primary);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1;
}
.okc-sizes__add { width: 100%; margin: 0; }
.okc-sizes__msg { font-size: .85rem; }
.okc-sizes__msg:not(:empty) { margin-top: 8px; }
.okc-sizes__cart { font-weight: 700; text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
	.okc-has-sizes.okc-open > .okc-sizes { animation: okc-sizes-in .15s ease-out; }
	@keyframes okc-sizes-in { from { opacity: 0; margin-bottom: -6px; } to { opacity: 1; margin-bottom: 0; } }
}

/* Sizes that are out of stock: still listed with price and discount, greyed out */
.okc-size:disabled { background: #f3f3f3; border-color: #d6d6d6; cursor: not-allowed; opacity: .55; }
.okc-size:disabled .okc-size__off { background: #888; }
.okc-size__oos { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #555; }

/* While the sizes are still loading */
.okc-sizes.is-loading { min-height: 64px; display: none; }
.okc-has-sizes.okc-open > .okc-sizes.is-loading { display: flex; align-items: center; justify-content: center; }
.okc-sizes__loading { font-size: .85rem; color: #555; }
.okc-sizes__loading::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.1em; border: 2px solid #ccc; border-top-color: var(--fs-color-primary); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
	.okc-sizes__loading::before { animation: okc-spin .7s linear infinite; }
	@keyframes okc-spin { to { transform: rotate(360deg); } }
}