/* Add to Cart Button — the product page's buy button, as a block.
 *
 * Everything the eye sees is CSS. The fill, the gradient, the glass, the
 * shadow, the hover and the attention loop are a class each, the colours and
 * sizes are custom properties, so every choice costs the Liquid a word and the
 * button is right on first paint. The script only puts the product in the
 * cart, keeps the price and the sold-out state in step with the variant, and
 * shows that it is working.
 */

.pb-buy {
  margin-block: var(--pb-buy-st, 0) var(--pb-buy-sb, 0);
  font-family: inherit;
}

/* ── the button ──────────────────────────────────────────────────────── */

.pb-buy__btn {
  /* Never "none": the outline and the glass add their own inset rings in
     front of it, and "inset …, none" is not a shadow. */
  --pb-buy-shadow: 0 0 #0000;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--pb-buy-py, 16px) 1.6em;
  overflow: hidden;
  isolation: isolate;
  font: inherit;
  font-size: var(--pb-buy-fs, 17px);
  /* Unset when the merchant keeps the theme's weight, which makes this
     invalid at computed-value time — and an invalid inherited property
     inherits. */
  font-weight: var(--pb-buy-fw);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--pb-buy-fg, #fff);
  background: var(--pb-buy-bg, #4a2b2f);
  border: 0;
  border-radius: var(--pb-buy-r, 30px);
  box-shadow: var(--pb-buy-shadow);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.pb-buy__btn:focus-visible { outline: 2px solid var(--pb-buy-bg, currentColor); outline-offset: 3px; }

.pb-buy--w-full .pb-buy__btn { display: flex; width: 100%; }
.pb-buy--w-center { text-align: center; }

.pb-buy__in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 0;
  transition: opacity 0.15s ease;
}
.pb-buy__txt { min-width: 0; }

/* Price at the far end: the words take the room, the price sits on the edge. */
.pb-buy--p-end .pb-buy__in { width: 100%; justify-content: space-between; }
.pb-buy--p-end .pb-buy__txt { margin-inline-end: auto; text-align: start; }

.pb-buy__price { display: inline-flex; align-items: baseline; gap: 0.45em; white-space: nowrap; }
.pb-buy__price[hidden] { display: none; }
/* The dot is decoration, so it is given empty alternative text; the first
   declaration is for the browsers that do not read the second. */
.pb-buy--p-inline .pb-buy__price::before { content: "•"; content: "•" / ""; }
.pb-buy__was { font-size: 0.86em; opacity: 0.72; }
.pb-buy__was:empty { display: none; }

.pb-buy__ico { flex: 0 0 auto; }
.pb-buy__btn .pbi { --pbi-s: 1.2em; --pbi-c: currentColor; }
img.pb-buy__ico { display: block; width: 1.3em; height: 1.3em; object-fit: contain; }
.pb-buy--iend .pb-buy__ico { order: 1; }
.pb-buy--iend .pb-buy__price { order: 2; }

.pb-buy--caps .pb-buy__btn { text-transform: uppercase; letter-spacing: 0.06em; }

/* ── fills ───────────────────────────────────────────────────────────── */

.pb-buy--gradient .pb-buy__btn { background: var(--pb-buy-grad, var(--pb-buy-bg)); }

/* An outline takes the button colour for its line and its words: the text
   colour is usually white, which is what the fill becomes on hover. */
.pb-buy--outline .pb-buy__btn {
  color: var(--pb-buy-bg);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--pb-buy-bg), var(--pb-buy-shadow);
}

.pb-buy--glass .pb-buy__btn {
  background: color-mix(in srgb, var(--pb-buy-bg) 58%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
    var(--pb-buy-shadow);
}

.pb-buy--b-solid .pb-buy__btn { border: 2px solid color-mix(in srgb, currentColor 55%, transparent); }
.pb-buy--b-dashed .pb-buy__btn { border: 2px dashed color-mix(in srgb, currentColor 60%, transparent); }

/* ── shadows ─────────────────────────────────────────────────────────── */

.pb-buy--sh-soft .pb-buy__btn { --pb-buy-shadow: 0 2px 10px -2px rgb(0 0 0 / 0.18); }
/* Floating: a long shadow tinted with the button's own colour, so a plum
   button casts plum rather than a grey smudge. */
.pb-buy--sh-float .pb-buy__btn {
  --pb-buy-shadow:
    0 14px 26px -12px color-mix(in srgb, var(--pb-buy-bg) 80%, #000),
    0 6px 12px -6px rgb(0 0 0 / 0.2);
}

/* ── the shine ───────────────────────────────────────────────────────── */

/* Behind the words and in front of the fill: z-index -1 inside the stacking
   context `isolation` makes. Parked off the left edge until it is swept. */
.pb-buy__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.36) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}

/* ── catch the eye ───────────────────────────────────────────────────── */

.pb-buy--a-pulse .pb-buy__btn:not(:disabled) { animation: pb-buy-pulse 2.6s ease-in-out infinite; }
.pb-buy--a-shake .pb-buy__btn:not(:disabled) { animation: pb-buy-shake 4.5s ease-in-out infinite; }
.pb-buy--a-wiggle .pb-buy__btn:not(:disabled) { animation: pb-buy-wiggle 4.5s ease-in-out infinite; }
.pb-buy--a-shine .pb-buy__btn:not(:disabled)::after { animation: pb-buy-gleam 3.8s ease-in-out infinite; }

@keyframes pb-buy-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* Still for most of the cycle, then a short burst: movement that never stops
   is noise, and a shopper reading the price should not have to chase it. */
@keyframes pb-buy-shake {
  0%, 84%, 100% { transform: translateX(0); }
  86%, 90%, 94% { transform: translateX(-4px); }
  88%, 92%, 96% { transform: translateX(4px); }
  98% { transform: translateX(-2px); }
}
/* A small angle: on a full-width button one degree already lifts each end by
   several pixels. */
@keyframes pb-buy-wiggle {
  0%, 84%, 100% { transform: rotate(0); }
  87% { transform: rotate(-1.5deg); }
  90% { transform: rotate(1.5deg); }
  93% { transform: rotate(-1deg); }
  96% { transform: rotate(0.6deg); }
}
@keyframes pb-buy-gleam { 0%, 62% { transform: translateX(-110%); } 88%, 100% { transform: translateX(110%); } }
@keyframes pb-buy-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ── hover, where there is one ───────────────────────────────────────── */

/* Behind (hover: hover), so a tap on a phone never leaves the button stuck
   lifted. After the loops, and stopping them: an animation owns `transform`
   while it runs, and would otherwise cancel the lift. */
@media (hover: hover) {
  .pb-buy .pb-buy__btn:not(:disabled):hover { animation: none; filter: brightness(1.08); }
  .pb-buy--hbg .pb-buy__btn:not(:disabled):hover { background: var(--pb-buy-hbg); filter: none; }
  .pb-buy--hfg .pb-buy__btn:not(:disabled):hover { color: var(--pb-buy-hfg); }
  .pb-buy--outline .pb-buy__btn:not(:disabled):hover { color: var(--pb-buy-hfg, var(--pb-buy-fg)); background: var(--pb-buy-hbg, var(--pb-buy-bg)); }
  .pb-buy--h-lift .pb-buy__btn:not(:disabled):hover,
  .pb-buy--h-shine .pb-buy__btn:not(:disabled):hover { transform: translateY(-2px); }
  .pb-buy--h-scale .pb-buy__btn:not(:disabled):hover { transform: scale(1.025); }
  .pb-buy--h-shine .pb-buy__btn:not(:disabled):hover::after { animation: pb-buy-sweep 0.8s ease; }
}

/* ── states ──────────────────────────────────────────────────────────── */

.pb-buy .pb-buy__btn:disabled {
  --pb-buy-shadow: 0 0 #0000;
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.6);
}

/* Working: the words fade and a ring turns where they were. The words are
   hidden with opacity rather than removed, so the button keeps its width and
   its accessible name. */
.pb-buy__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.15em;
  height: 1.15em;
  margin: -0.575em 0 0 -0.575em;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.pb-buy[data-busy] .pb-buy__btn { cursor: progress; }
.pb-buy[data-busy] .pb-buy__in { opacity: 0; }
.pb-buy[data-busy] .pb-buy__btn::before { opacity: 1; animation: pb-buy-spin 0.7s linear infinite; }
@keyframes pb-buy-spin { to { transform: rotate(360deg); } }

/* Added: the words say so for a moment, with nothing beside them. */
.pb-buy[data-done] .pb-buy__price,
.pb-buy[data-done] .pb-buy__ico { display: none; }

/* What the cart said when it refused. Present and empty from the start, so a
   screen reader is already watching it when the words arrive. */
.pb-buy__msg { margin: 0.55em 0 0; font-size: 0.875em; line-height: 1.4; color: #b42318; }
.pb-buy__msg:empty { margin: 0; }
.pb-buy--w-full .pb-buy__msg { text-align: center; }

/* ── the note ────────────────────────────────────────────────────────── */

.pb-buy__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 0.75em 0 0;
  font-size: var(--pb-buy-ns, 15px);
  line-height: 1.4;
  color: var(--pb-buy-nc, inherit);
  text-align: center;
}
.pb-buy--w-start .pb-buy__note { justify-content: flex-start; text-align: start; }
.pb-buy__note .pbi { --pbi-s: 1.25em; }
.pb-buy__nico { flex: 0 0 auto; width: 1.3em; height: 1.3em; object-fit: contain; }

.pb-buy__hint {
  margin: 0.75em 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0.75;
  text-align: center;
}

/* Every loop, the sweep and the lift stop for a shopper who asked for less
   motion. The ring that says "working" stays, slowed: it is the only sign the
   click was heard. */
@media (prefers-reduced-motion: reduce) {
  .pb-buy .pb-buy__btn,
  .pb-buy .pb-buy__btn::after { animation: none !important; transition: none !important; }
  .pb-buy .pb-buy__btn:hover { transform: none !important; }
  .pb-buy[data-busy] .pb-buy__btn::before { animation-duration: 1.6s; }
}

/* pb-icons:button:start — written by scripts/sync-icons.mjs, do not edit by hand */
.pbi{width:var(--pbi-s,20px);height:var(--pbi-s,20px);flex:0 0 auto;background:var(--pbi-c,currentColor);-webkit-mask:var(--pbi-src) center / contain no-repeat;mask:var(--pbi-src) center / contain no-repeat}
.pbi--ct{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.3l2.3 11a1.8 1.8 0 0 0 1.8 1.5h8.4a1.8 1.8 0 0 0 1.7-1.3l1.7-6.7H5.9'/%3E%3Ccircle cx='9.5' cy='20' r='1.5'/%3E%3Ccircle cx='17.5' cy='20' r='1.5'/%3E%3C/svg%3E")}
.pbi--bg{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.2a1.6 1.6 0 0 1-1.6 1.3H7.6A1.6 1.6 0 0 1 6 20.2z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E")}
.pbi--ar{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E")}
.pbi--pl{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.pbi--lk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 10V7.5a5.2 5.2 0 0 1 10.4 0V10'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3C/svg%3E")}
.pbi--ck{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E")}
.pbi--cf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0M10.5 16.3 6.2 12l1.5-1.5 2.8 2.8 5.8-5.8L17.8 9z'/%3E%3C/svg%3E")}
.pbi--gf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.5' width='18' height='4.5' rx='1'/%3E%3Cpath d='M4.5 13v7.5a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V13M12 8.5v13'/%3E%3Cpath d='M12 8.5S10.8 3 8 3a2.5 2.5 0 0 0 0 5.5zM12 8.5S13.2 3 16 3a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E")}
.pbi--tk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l4 3.5V16h-8z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E")}
.pbi--rf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 3v5h-5'/%3E%3C/svg%3E")}
.pbi--sh{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 5.5v5.8c0 5-3.4 8.7-8 10.2-4.6-1.5-8-5.2-8-10.2V5.5z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.pbi--cd{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.8h19M6 15h3.5'/%3E%3C/svg%3E")}
.pbi--cl{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 6.5V12l3.8 2.2'/%3E%3C/svg%3E")}
.pbi--st{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5 1-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.6l6.5-1z'/%3E%3C/svg%3E")}
.pbi--bx{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 21 7v10l-9 4.2L3 17V7z'/%3E%3Cpath d='M3 7l9 4.2L21 7M12 11.2V21.2'/%3E%3C/svg%3E")}
.pbi--pp{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 2 9.8l8.3 3.4 3.4 8.3z'/%3E%3Cpath d='m10.3 13.2 11.2-10.7'/%3E%3C/svg%3E")}
.pbi--md{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='6.5'/%3E%3Cpath d='m8.5 15.2-1.3 6.3 4.8-2.6 4.8 2.6-1.3-6.3'/%3E%3C/svg%3E")}
.pbi--lf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5C3 12 8 4.5 20.5 3.5c1 11-5 16-12.5 16z'/%3E%3Cpath d='M7.5 17.5c2.5-4.5 5.5-7 9-8.5'/%3E%3C/svg%3E")}
.pbi--hs{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='13' width='4.5' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4.5' height='6' rx='2'/%3E%3Cpath d='M21 19v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E")}
/* pb-icons:button:end */