/* Scoped to the two requested shopping actions. Other buttons keep their styling. */
:is(#addProduct, #checkoutButton).liquid-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #071f42;
  color: #fff;
  box-shadow: 0 5px 15px -9px #093c81aa;
}
:is(#addProduct, #checkoutButton).liquid-button::after {
  inset: 0;
  border: 1px solid #ffffff40;
  border-radius: inherit;
  box-shadow: none;
  opacity: 1;
}
.liquid-button .liquid-label { position: relative; z-index: 2; pointer-events: none; }
.liquid-button .liquid-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(110deg, #0d5bd5, #1269ef 55%, #2383ff);
}
.liquid-button .liquid-layer {
  position: absolute;
  inset: 0;
  transform: translateY(0);
}
.liquid-button .liquid-surface {
  position: absolute;
  left: -15%;
  bottom: 12%;
  width: 130%;
  height: 300%;
  border-radius: 50%;
  background: linear-gradient(#0d315d, #071f42);
}
.liquid-button .liquid-back .liquid-surface { bottom: 1%; height: 280%; background: #0c4e9e; opacity: .82; }
.liquid-button:not(:disabled):is(:focus-visible, :active) .liquid-layer { transform: translateY(-120%); }
@media (hover: hover) and (pointer: fine) {
  .liquid-button:not(:disabled):hover .liquid-layer { transform: translateY(-120%); }
}
.liquid-button:disabled .liquid-fill { visibility: hidden; }

/* Delete: a compact red pill, lifting lid and a green confirmation. */
#cartItems .cart-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  min-width: 110px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #ed285422;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(115deg, #f5466c, #e91c4b);
  box-shadow: 0 5px 14px -8px #df1c4b99;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.cart-delete-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }
.cart-delete-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cart-delete-lid { transform-origin: 16px 6px; }
.cart-delete-check { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
#cartItems .cart-delete.is-deleted {
  background: #149b61;
  border-color: #149b61;
  box-shadow: 0 5px 14px -8px #149b6199;
  opacity: 1;
  cursor: default;
}
.cart-delete.is-deleted .cart-delete-bin { opacity: 0; }
.cart-delete.is-deleted .cart-delete-check { opacity: 1; stroke-dashoffset: 0; }
#cartItems .cart-row-removing .quantity { opacity: .5; }

@media (prefers-reduced-motion: no-preference) {
  .liquid-button .liquid-layer { transition: transform 620ms cubic-bezier(.25, .55, .3, 1); }
  .liquid-button .liquid-back { transition-duration: 740ms; }
  .liquid-button .liquid-surface { animation: cart-liquid-roll 4800ms ease-in-out infinite alternate paused; }
  .liquid-button .liquid-back .liquid-surface { animation-duration: 6200ms; animation-delay: -2800ms; animation-direction: alternate-reverse; }
  .liquid-button.liquid-visible:not(:disabled) .liquid-surface { animation-play-state: running; }
  .liquid-button:not(:disabled):is(:focus-visible, :active) .liquid-surface { animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) {
    .liquid-button.liquid-visible:not(:disabled):hover .liquid-surface { animation-play-state: paused; }
    #cartItems .cart-delete:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px #df1c4b88; }
    .cart-delete:not(:disabled):hover .cart-delete-lid { transform: translateY(-1px) rotate(-18deg); }
  }
  .liquid-button:not(:disabled):active .liquid-layer { transition-duration: 160ms; }
  @keyframes cart-liquid-roll {
    from { transform: translate3d(-1.2%, 1.5px, 0) rotate(-.4deg); }
    to { transform: translate3d(1.2%, -1.5px, 0) rotate(.4deg); }
  }
  #cartItems .cart-delete { transition: transform 180ms ease, box-shadow 220ms ease; }
  #cartItems .cart-delete:not(:disabled):active { transform: scale(.96); }
  .cart-delete-bin { transition: opacity 140ms ease; }
  .cart-delete-lid { transition: transform 260ms cubic-bezier(.22, .61, .36, 1); }
  .cart-delete.is-deleted .cart-delete-check { transition: opacity 140ms ease, stroke-dashoffset 300ms ease; }
  .cart-delete.is-deleted .cart-delete-label { animation: cart-deleted-label 260ms ease both; }
  @keyframes cart-deleted-label {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (max-width: 640px) {
  #cartItems .cart-delete { min-width: 96px; min-height: 40px; padding: 10px; font-size: 12px; gap: 5px; }
  .cart-delete-icon { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-button:not(:disabled):is(:hover, :focus-visible, :active) { background: #1269ef; }
}