/* pg-site-core, stock-notice 1.5.4. For every visitor, the old Storefront cards and the new design cards alike.
   The badge sits in the middle of the square photo, margin-top in percent is measured on the card width, so it needs no height. */
li.product.outofstock{position:relative}
li.product.outofstock img{opacity:.55;filter:grayscale(.5)}
li.product .pg-oos{position:absolute;z-index:3;top:0;inset-inline:0;width:fit-content;max-width:calc(100% - 24px);margin:50% auto 0;padding:6px 14px;box-sizing:border-box;transform:translateY(-50%);
	border-radius:999px;background-color:rgba(20,22,30,.88);color:#fff;font-size:15px;font-weight:700;line-height:1.3;text-align:center;white-space:nowrap;pointer-events:none}
/* the product page, under the price */
.single-product div.product .pg-oos-note{display:inline-block;margin:4px 0 12px;padding:8px 16px;border-radius:999px;background-color:#fde8e8;color:#8a1414;font-size:17px;font-weight:700;line-height:1.3}
.single-product div.product .pg-oos-call{margin:0 0 16px}
.single-product div.product .pg-oos-call .pg-pcall{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;background-color:#15803d;color:#fff;font-weight:700;text-decoration:none}
.single-product div.product .pg-oos-call .pg-pcall svg{width:20px;height:20px}
.single-product div.product .pg-oos-call .pg-pcall:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
@media (prefers-reduced-motion:reduce){li.product .pg-oos{transition:none}}
