/*
 * Keeko PX — quick add + pinned add to cart. Port of PX Reformation's px-product-card.css (Shopify): same sizes, motion
 * and states; colours and fonts come from WoodMart's variables. Corners: Keeko PX → Style (0 = square, the reference).
 */
:root {
  /* spacing */
  --px-space-2xs: 2px;
  --px-space-xs: 4px;
  --px-space-s: 8px;
  --px-space-m: 12px;
  --px-space-l: 20px;
  --px-space-xl: 28px;
  /* sizes */
  --px-tap: 46px;            /* min height of a size box */
  --px-row: 56px;            /* sheet row height */
  --px-icon-btn: 36px;
  --px-icon-s: 18px;
  --px-sheet-width: 520px;   /* desktop pop-up */
  --px-sheet-max-h: 85vh;
  --px-thumb-w: 120px;
  --px-thumb-h: 150px;
  --px-handle-w: 40px;
  --px-handle-h: 4px;
  --px-sheet-handle-top: 12px;
  --px-sheet-qa-head-top: 13px;
  --px-line: 1px;
  /* motion */
  --px-duration: .25s;
  --px-spin: .8s;
  --px-ease: cubic-bezier(.2, .8, .2, 1);
  /* type */
  --px-text-xs: 11px;
  --px-text-s: 13px;
  --px-text-m: 14px;
  --px-text-base: 16px;
  --px-heading-s: 18px;
  --px-heading-m: 20px;
  --px-product-title: 16px;
  --px-heading-font: var(--wd-title-font, inherit);
  --px-medium: 500;
  /* colours, from the theme */
  --px-bg: var(--wd-main-bgcolor, #fff);
  --px-fg: var(--wd-title-color, #242424);
  --px-border: var(--brdcolor-gray-300, rgba(0, 0, 0, .105));
  --px-muted: color-mix(in srgb, var(--px-fg) 55%, transparent);
  --px-faint: color-mix(in srgb, var(--px-fg) 35%, transparent);
  --px-tint: color-mix(in srgb, var(--px-fg) 5%, transparent);
  --px-backdrop: rgba(0, 0, 0, .45);
  --px-sale: var(--px-red-color, #d31130);
  --px-error: var(--px-sale);
}

/* ---- card: the quick add icon (replaces the card's cart button) ---- */
.px-qa-open-wrap { display: contents; }
.px-card .px-qa-open {
  position: relative; display: none; flex: 0 0 auto; align-items: center; justify-content: center;
  width: var(--px-icon-btn); height: var(--px-icon-btn); min-height: 0;
  margin: 0 calc(-1 * var(--px-space-s)) 0 0; padding: 0;
  background: none; border: 0; border-radius: var(--px-radius); color: var(--px-fg); cursor: pointer; box-shadow: none;
}
.px-card .px-qa-open:hover { background: none; color: var(--px-fg); }
.px-card .px-qa-open:focus-visible { outline: var(--px-line) solid currentColor; outline-offset: var(--px-space-2xs); }
.px-card .px-qa-open--all { display: inline-flex; }
@media (max-width: 767px) { .px-card .px-qa-open--mobile { display: inline-flex; } }
/* sold out (several sizes, none left): no icon, no grid */
.px-card.px-qa-off .px-qa-open, .px-card.px-qa-off .px-qa-hover { display: none !important; }
.px-card:has(px-quick-add[data-mode="single"][data-available="false"]) [data-px-qa-open] { display: none !important; }

/* ---- desktop: size grid over the photo on hover ---- */
.px-qa { display: contents; }
.px-card .wd-loop-prod-thumb { position: relative; }
.px-qa-hover {
  position: absolute; left: var(--px-space-s); right: var(--px-space-s); bottom: var(--px-space-s); z-index: 21;
  padding: var(--px-space-s); background: var(--px-bg); border-radius: var(--px-radius);
  opacity: 0; transform: translateY(var(--px-space-s)); pointer-events: none;
  transition: opacity var(--px-duration) ease, transform var(--px-duration) var(--px-ease);
}
.px-qa-hover[hidden] { display: none; }
@media (hover: hover) and (min-width: 768px) {
  /* keyboard focus only (:focus-visible): plain :focus-within kept the grid open after a click */
  .px-card .wd-loop-prod-thumb:hover .px-qa-hover,
  .px-card .wd-loop-prod-thumb:has(:focus-visible) .px-qa-hover { opacity: 1; transform: none; pointer-events: auto; }
}
@media (hover: none), (max-width: 767px) { .px-qa-hover { display: none !important; } }

.px-qa-hover__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.px-qa-hover__grid--wide { grid-template-columns: repeat(3, 1fr); }
.px-qa-hover .px-qa-hover__size {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--px-space-2xs);
  min-height: var(--px-tap); padding: var(--px-space-s); margin: 0 calc(-1 * var(--px-line)) calc(-1 * var(--px-line)) 0;
  font-family: inherit; font-size: var(--px-text-m); font-weight: 400; line-height: 1; letter-spacing: normal; text-transform: none; text-align: left;
  color: var(--px-fg); background: var(--px-bg); border: var(--px-line) solid var(--px-border); border-radius: var(--px-radius); box-shadow: none;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--px-duration) ease, color var(--px-duration) ease;
}
.px-qa-hover .px-qa-hover__size:hover:not([disabled]), .px-qa-hover .px-qa-hover__size:focus-visible:not([disabled]) {
  z-index: 1; background: var(--px-fg); color: var(--px-bg); border-color: var(--px-fg); outline: none;
}
.px-qa-hover .px-qa-hover__size[disabled] { color: var(--px-faint); cursor: not-allowed; opacity: 1; }
.px-qa-hover__main, .px-qa-hover__sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-qa-hover__sub { font-size: var(--px-text-xs); color: var(--px-muted); }
.px-qa-hover__size:hover:not([disabled]) .px-qa-hover__sub, .px-qa-hover__size[disabled] .px-qa-hover__sub { color: inherit; }
.px-qa-hover .px-qa-hover__more { align-items: center; justify-content: center; font-weight: var(--px-medium); }
.px-qa-hover__size[disabled]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .5px), var(--px-border) 50%, transparent calc(50% + .5px));
}
.px-qa-hover .px-qa-hover__single {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--px-space-s); width: 100%; min-height: var(--px-tap); padding: 0 var(--px-space-s);
  font-family: inherit; font-weight: var(--px-medium); font-size: var(--px-text-m); letter-spacing: normal; text-transform: none; line-height: 1.2;
  color: var(--px-fg); background: var(--px-bg); border: var(--px-line) solid var(--px-border); border-radius: var(--px-radius); box-shadow: none;
  cursor: pointer; text-decoration: none;
  transition: border-color var(--px-duration) ease, color var(--px-duration) ease;
}
.px-qa-hover .px-qa-hover__single:hover { border-color: var(--px-fg); color: var(--px-fg); background: var(--px-bg); }
.px-qa-hover__icon { flex: none; width: var(--px-icon-s); height: var(--px-icon-s); }
.px-qa-hover .px-qa-hover__single--soldout,
.px-qa-hover .px-qa-hover__single--soldout:hover { color: var(--px-faint); background: var(--px-tint); border-color: var(--px-border); cursor: not-allowed; opacity: 1; }
.px-qa-hover__single.is-loading > :not(.px-qa-state), .px-qa-hover__single.is-added > :not(.px-qa-state) { visibility: hidden; }

.px-qa-error { margin: var(--px-space-s) 0 0; font-size: var(--px-text-s); color: var(--px-error); }
.px-qa-error[hidden] { display: none; }

/* ---- add feedback: black + spinner, then a check, then the cart drawer ---- */
.px-qa-state { display: none; }
.is-loading > .px-qa-state, .is-added > .px-qa-state {
  display: flex; align-items: center; justify-content: center; position: absolute; inset: 0;
  color: var(--px-bg); pointer-events: none;
}
.px-qa-state svg { display: none; }
.is-loading > .px-qa-state .px-qa-state__spin { display: block; animation: px-qa-spin var(--px-spin) linear infinite; }
.is-added > .px-qa-state .px-qa-state__check { display: block; animation: px-qa-pop var(--px-duration) ease-out; }
@keyframes px-qa-spin { to { transform: rotate(360deg); } }
@keyframes px-qa-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.px-qa-hover .px-qa-hover__size.is-loading, .px-qa-hover .px-qa-hover__size.is-added,
.px-qa-hover .px-qa-hover__single.is-loading, .px-qa-hover .px-qa-hover__single.is-added {
  z-index: 2; color: transparent !important; background: var(--px-fg); border-color: var(--px-fg); pointer-events: none;
}
.px-qa-sheet__row.is-loading, .px-qa-sheet__row.is-added { pointer-events: none; }
.px-qa-act { display: none; align-items: center; gap: var(--px-space-s); }
.px-qa-act--idle,
.px-qa-sheet__row.is-loading .px-qa-act--adding,
.px-qa-sheet__row.is-added .px-qa-act--added { display: inline-flex; }
.px-qa-sheet__row.is-loading .px-qa-act--idle,
.px-qa-sheet__row.is-added .px-qa-act--idle { display: none; }
.px-qa-act__spin { animation: px-qa-spin var(--px-spin) linear infinite; }
.px-qa-act--added svg { animation: px-qa-pop var(--px-duration) ease-out; }
.px-qa-open.is-loading > svg, .px-qa-open.is-added > svg { visibility: hidden; }
.px-qa-open > .px-qa-state { color: var(--px-fg); }

/* ---- the sheet: bottom sheet on mobile, centred pop-up on desktop ---- */
/* scroll lock on the root only (locking body too made sticky columns re-anchor and jump) */
html.px-qa-locked { overflow: hidden; }
.px-qa-sheet { position: fixed; inset: 0; z-index: 100000; font-size: var(--px-text-base); }
.px-qa-sheet[hidden] { display: none; }
.px-qa-sheet__backdrop { position: absolute; inset: 0; background: var(--px-backdrop); opacity: 0; transition: opacity var(--px-duration) ease; }
.px-qa-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: var(--px-sheet-max-h); overflow-y: auto; overscroll-behavior: contain;
  background: var(--px-bg); color: var(--px-fg); border-radius: var(--px-radius) var(--px-radius) 0 0;
  padding: var(--px-sheet-handle-top) var(--px-space-l) calc(var(--px-space-l) + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform var(--px-duration) var(--px-ease);
  outline: none;
}
.px-qa-sheet.is-open .px-qa-sheet__backdrop { opacity: 1; }
.px-qa-sheet.is-open .px-qa-sheet__panel { transform: translateY(0); }
.px-qa-sheet__handle {
  width: var(--px-handle-w); height: var(--px-handle-h); margin: 0 auto var(--px-space-s);
  border-radius: var(--px-radius); background: var(--px-border);
}
.px-qa-sheet__header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: var(--px-space-xs) 0 var(--px-space-m); }
.px-qa-sheet__heading {
  margin: 0; font-family: var(--px-sheet-title-font, var(--px-heading-font)); font-weight: var(--wd-title-font-weight, 400); font-size: var(--px-sheet-title-size, var(--px-heading-s)); line-height: 1.2;
  text-transform: var(--px-sheet-title-tt, none); text-align: var(--px-sheet-title-align, left); color: var(--px-fg);
}
.px-qa-sheet--product .px-qa-sheet__header { justify-content: center; padding: var(--px-space-s) var(--px-icon-btn) var(--px-space-l); }
/* left-aligned title (Keeko PX → Style): title at the left, ✕ at the right, both on one line */
.px-qa-sheet--product .px-qa-sheet__heading { flex: 1; }
body:not(.px-title-center) .px-qa-sheet--product .px-qa-sheet__header { padding-left: 0; padding-right: 0; align-items: center; }
body:not(.px-title-center) .px-qa-sheet--product .px-qa-sheet__close { position: static; transform: none; flex: none; }
@media (max-width: 767px) { .px-qa-sheet .px-qa-sheet__header { padding-top: var(--px-sheet-qa-head-top); } }
.px-qa-sheet--product .px-qa-sheet__heading { font-size: var(--px-sheet-title-size, var(--px-heading-m)); }
.px-qa-sheet .px-qa-sheet__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--px-icon-btn); height: var(--px-icon-btn); min-height: 0; margin-right: calc(-1 * var(--px-space-s)); padding: 0;
  background: none; border: 0; border-radius: var(--px-radius); color: inherit; cursor: pointer; box-shadow: none;
}
.px-qa-sheet--product .px-qa-sheet__close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.px-qa-sheet__product { display: flex; gap: var(--px-space-l); align-items: flex-start; margin-bottom: var(--px-space-l); }
.px-qa-sheet__product > a { flex: 0 0 var(--px-thumb-w); }
.px-qa-sheet__product img { display: block; width: var(--px-thumb-w); height: var(--px-thumb-h); object-fit: cover; border-radius: var(--px-radius); }
.px-qa-sheet__info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--px-space-xs); min-width: 0; }
.px-qa-sheet__badge {
  margin-bottom: var(--px-space-xs); padding: var(--px-space-xs) var(--px-space-s);
  font-size: var(--px-text-s); font-weight: var(--px-medium); line-height: 1.2; color: #fff; background: var(--px-sale);
  border-radius: var(--px-radius);
}
.px-qa-sheet .px-qa-sheet__title {
  color: inherit; text-decoration: none;
  font-size: var(--px-product-title); font-weight: var(--px-medium); line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.px-qa-sheet__colour { font-size: var(--px-text-m); color: var(--px-muted); }
.px-qa-sheet__price { margin-top: var(--px-space-xs); font-size: var(--px-product-title); font-weight: var(--px-medium); }
.px-qa-sheet__price del { margin-right: var(--px-space-xs); color: var(--px-faint); }
.px-qa-sheet__now.is-sale { color: var(--px-sale); }
/* "Choisissez votre taille": a small label, like the product page's "TAILLE :" */
.px-qa-sheet__label {
  margin: 0 0 var(--px-space-m); font-family: inherit; font-weight: 600; font-size: var(--px-size-label-size, 11px);
  line-height: 1.3; letter-spacing: normal; text-transform: uppercase; color: var(--px-fg);
}
.px-qa-sheet__list { list-style: none; margin: 0 calc(-1 * var(--px-space-l)); padding: 0; border-top: var(--px-line) solid var(--px-border); }
.px-qa-sheet__list li { margin: 0; padding: 0; list-style: none; border-bottom: var(--px-line) solid var(--px-border); }
.px-qa-sheet .px-qa-sheet__row {
  position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: var(--px-row); padding: 0 var(--px-space-l); margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit;
  font-family: inherit; font-size: var(--px-text-base); font-weight: 400; letter-spacing: normal; text-transform: none; text-align: left; line-height: 1.3; cursor: pointer;
}
.px-qa-sheet .px-qa-sheet__row:hover:not([disabled]), .px-qa-sheet .px-qa-sheet__row:focus-visible { background: var(--px-tint); color: inherit; outline: none; }
.px-qa-sheet__row small { margin-left: var(--px-space-s); color: var(--px-muted); }
.px-qa-sheet__action { display: inline-flex; align-items: center; gap: var(--px-space-s); font-size: var(--px-text-m); }
.px-qa-sheet .px-qa-sheet__row[disabled] { color: var(--px-faint); cursor: not-allowed; opacity: 1; }

@media (min-width: 768px) {
  .px-qa-sheet__panel {
    top: 50%; bottom: auto; left: 50%; right: auto; width: var(--px-sheet-width); max-width: calc(100vw - 2 * var(--px-space-l));
    padding: var(--px-space-m) var(--px-space-xl) var(--px-space-xl); border-radius: var(--px-radius);
    opacity: 0; transform: translate(-50%, -46%);
    transition: transform var(--px-duration) var(--px-ease), opacity var(--px-duration) ease;
  }
  .px-qa-sheet.is-open .px-qa-sheet__panel { opacity: 1; transform: translate(-50%, -50%); }
  .px-qa-sheet__handle { display: none; }
  .px-qa-sheet .px-qa-sheet__list { margin: 0 calc(-1 * var(--px-space-xl)); }
  .px-qa-sheet .px-qa-sheet__row { padding: 0 var(--px-space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .px-qa-sheet__panel, .px-qa-sheet__backdrop, .px-qa-hover, .px-qa-hover__size { transition: none; }
  .px-qa-state svg, .px-qa-act svg { animation: none !important; }
}

/* ---- pinned add to cart (product page). The page's own row is pinned at its own left / width (--px-satc-l / -w, set by
   JS), --px-satc-gap above the screen bottom (+ the iPhone home bar), so it lands exactly in its place. ---- */
.px-satc-holder.px-satc-pinned {
  position: fixed; z-index: 390; left: var(--px-satc-l); width: var(--px-satc-w); margin: 0;
  bottom: calc(var(--px-satc-gap) + env(safe-area-inset-bottom, 0px));
  transition: transform var(--px-duration) var(--px-ease);
}
.px-satc-holder.px-satc-pinned.px-satc-band::before {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--px-satc-l)); width: 100vw;
  top: calc(-1 * var(--px-satc-gap)); bottom: calc(-1 * (var(--px-satc-gap) + env(safe-area-inset-bottom, 0px)));
  background: var(--px-bg); border-top: var(--px-line) solid var(--px-border);
}
.px-satc-holder.px-satc-pinned.px-satc-away { transform: translateY(calc(100% + 2 * var(--px-satc-gap) + env(safe-area-inset-bottom, 0px))); }
/* "backwards", not "both": a fill that outlives the animation would pin transform:none and stop the row sliding away at
   the footer (Safari scrolls through this state, so it showed there) */
.px-satc-holder.px-satc-pinned.px-satc-enter { animation: px-satc-in var(--px-duration) var(--px-ease) backwards; }
@keyframes px-satc-in { from { transform: translateY(calc(100% + 2 * var(--px-satc-gap))); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .px-satc-holder.px-satc-pinned { transition: none; } .px-satc-holder.px-satc-pinned.px-satc-enter { animation: none; } }
/* floating buttons move up above the pinned row. WhatsApp (PX WhatsApp Button 1.3.1+) reads --pxwa-lift and animates
   it itself, so its own transitions (the pill morph) stay intact; back to top uses the separate `translate` property. */
html.px-satc-up { --pxwa-lift: var(--px-satc-h, 0px); }
/* pinned: the band is taller by the iPhone home-bar safe area (0 while Safari shows its bottom toolbar, ~34px once it hides
   on scroll down), so the lift adds it too and follows the toolbar instantly */
html.px-satc-up.px-satc-pin { --pxwa-lift: calc(var(--px-satc-h, 0px) + env(safe-area-inset-bottom, 0px)); }
html.px-satc-track { --pxwa-lift-speed: 0s; }   /* following the row in place: no lag */
html.px-satc-up .scrollToTop { translate: 0 calc(-1 * var(--pxwa-lift, var(--px-satc-h, 0px))); }
.scrollToTop { transition-property: opacity, visibility, transform, translate; }
/* WoodMart's own sticky bar is hidden where ours runs */
@media (max-width: 767px) { body.px-satc-m .wd-sticky-btn { display: none !important; } }
@media (min-width: 768px) { body.px-satc-d .wd-sticky-btn { display: none !important; } }
/* the button asks for the size itself: no "disabled" look while no size is chosen */
body.px-satc-m .px-satc-holder .single_add_to_cart_button.wc-variation-selection-needed,
body.px-satc-d .px-satc-holder .single_add_to_cart_button.wc-variation-selection-needed { opacity: 1; cursor: pointer; }

/* "No size chosen" message under the sizes */
.px-sizes__need { margin: var(--px-space-s) 0 0; font-size: var(--px-text-m); color: var(--px-error); }
.px-sizes__need[hidden] { display: none; }
.px-sizes--need { animation: px-need-nudge .35s var(--px-ease); }
@keyframes px-need-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .px-sizes--need { animation: none; } }

/* Keeko PX → Masquer le sélecteur de quantité (product page) */
body.px-hide-qty.single-product form.cart .quantity { display: none !important; }

/* ---- add to cart attention animation (Keeko PX → Add to cart attention animation). --px-attn-k = intensity
   (subtle .5 · normal 1 · strong 1.7), --px-attn-dur = length; set on the button by JS for each play. ---- */
.single_add_to_cart_button.px-attn { animation-duration: var(--px-attn-dur, .8s); animation-timing-function: ease-in-out; animation-fill-mode: both; }
.single_add_to_cart_button.px-attn[data-px-attn="shake"] { animation-name: px-attn-shake; }
.single_add_to_cart_button.px-attn[data-px-attn="wiggle"] { animation-name: px-attn-wiggle; }
.single_add_to_cart_button.px-attn[data-px-attn="pulse"] { animation-name: px-attn-pulse; }
.single_add_to_cart_button.px-attn[data-px-attn="heartbeat"] { animation-name: px-attn-heartbeat; }
.single_add_to_cart_button.px-attn[data-px-attn="bounce"] { animation-name: px-attn-bounce; }
.single_add_to_cart_button.px-attn[data-px-attn="jello"] { animation-name: px-attn-jello; }
.single_add_to_cart_button.px-attn[data-px-attn="tada"] { animation-name: px-attn-tada; }
/* shine: a light band sweeps across, the button itself does not move */
.single_add_to_cart_button[data-px-attn="shine"] { overflow: hidden; }
.single_add_to_cart_button.px-attn[data-px-attn="shine"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, calc(.3 + .25 * var(--px-attn-k, 1))) 50%, transparent 100%);
  transform: skewX(-20deg); animation: px-attn-shine var(--px-attn-dur, .8s) ease-in-out both;
}
@keyframes px-attn-shake {
  0%, 100% { transform: none; }
  15%, 45%, 75% { transform: translateX(calc(-6px * var(--px-attn-k, 1))); }
  30%, 60%, 90% { transform: translateX(calc(6px * var(--px-attn-k, 1))); }
}
@keyframes px-attn-wiggle {
  0%, 100% { transform: none; }
  15% { transform: rotate(calc(-3deg * var(--px-attn-k, 1))); }
  30% { transform: rotate(calc(3deg * var(--px-attn-k, 1))); }
  45% { transform: rotate(calc(-2deg * var(--px-attn-k, 1))); }
  60% { transform: rotate(calc(2deg * var(--px-attn-k, 1))); }
  75% { transform: rotate(calc(-1deg * var(--px-attn-k, 1))); }
}
@keyframes px-attn-pulse {
  0%, 100% { transform: none; }
  50% { transform: scale(calc(1 + .06 * var(--px-attn-k, 1))); }
}
@keyframes px-attn-heartbeat {
  0%, 40%, 100% { transform: none; }
  14% { transform: scale(calc(1 + .07 * var(--px-attn-k, 1))); }
  28% { transform: scale(calc(1 + .03 * var(--px-attn-k, 1))); }
  42% { transform: scale(calc(1 + .07 * var(--px-attn-k, 1))); }
  70% { transform: none; }
}
@keyframes px-attn-bounce {
  0%, 20%, 53%, 100% { transform: none; }
  40%, 43% { transform: translateY(calc(-10px * var(--px-attn-k, 1))); }
  70% { transform: translateY(calc(-5px * var(--px-attn-k, 1))); }
  90% { transform: translateY(calc(-2px * var(--px-attn-k, 1))); }
}
@keyframes px-attn-jello {
  0%, 11%, 100% { transform: none; }
  22% { transform: skewX(calc(-6deg * var(--px-attn-k, 1))); }
  33% { transform: skewX(calc(4deg * var(--px-attn-k, 1))); }
  44% { transform: skewX(calc(-2deg * var(--px-attn-k, 1))); }
  55% { transform: skewX(calc(1deg * var(--px-attn-k, 1))); }
  66% { transform: skewX(calc(-.5deg * var(--px-attn-k, 1))); }
}
@keyframes px-attn-tada {
  0%, 100% { transform: none; }
  10%, 20% { transform: scale(calc(1 - .04 * var(--px-attn-k, 1))) rotate(calc(-2deg * var(--px-attn-k, 1))); }
  30%, 50%, 70%, 90% { transform: scale(calc(1 + .04 * var(--px-attn-k, 1))) rotate(calc(2deg * var(--px-attn-k, 1))); }
  40%, 60%, 80% { transform: scale(calc(1 + .04 * var(--px-attn-k, 1))) rotate(calc(-2deg * var(--px-attn-k, 1))); }
}
@keyframes px-attn-shine { from { left: -60%; } to { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .single_add_to_cart_button.px-attn, .single_add_to_cart_button.px-attn::after { animation: none !important; } }

/* cart page and cart drawer: old price struck through, sale price in the sale colour (Keeko PX → Old price in the cart) */
.px-cart-price { white-space: nowrap; }
.px-cart-price del { margin-right: var(--px-space-xs); color: var(--px-faint); font-weight: 400; }
.px-cart-price ins { text-decoration: none; color: var(--px-sale) !important; }
.px-cart-price ins .amount, .px-cart-price ins bdi { color: var(--px-sale) !important; }
.px-cart-price del .amount, .px-cart-price del bdi { color: var(--px-faint) !important; }