/* Order buttons (2026-10-13) — the look that goes with order-fx.js: the wash canvas, the script-driven press and the close mark. */
/* isolation keeps the wash (z-index -1) above the button's own fill and under its text */
.btn.gxo{isolation:isolate;position:relative;transition:background .35s ease-out,border-color .35s ease-out,color .35s ease-out;will-change:transform}
/* the script leans and springs the button itself, so the theme's own hover lift and :active squeeze stand down */
.btn.gxo:hover,.btn.gxo:active{transform:none}
.gxo-w{z-index:-1;position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:inherit;pointer-events:none}
/* the close mark */
.btn.gxo-c{overflow:hidden;flex:none;box-sizing:border-box}
.gxo-l{display:inline-flex;align-items:center;gap:inherit;white-space:nowrap;transition:transform .4s cubic-bezier(.16,1,.3,1) .3s,opacity .2s linear .3s}
.btn.gxo-c.is-x .gxo-l{transform:translateY(-20px);opacity:0;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .12s linear}
.gxo-x{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.gxo-x line{stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.gxo-l,.btn.gxo-c.is-x .gxo-l{transition:none}}
/* the rolling label: two rows of the same letters in a window one row high; under the pointer each letter climbs out and its twin climbs in, one after another */
.gxr{position:relative;display:inline-block;overflow:hidden;line-height:1.5;vertical-align:middle}
.gxr-a,.gxr-b{display:block;white-space:pre}
.gxr-b{position:absolute;left:0;top:100%}
/* each letter on its own layer: moved as a picture, it glides instead of snapping from pixel to pixel */
.gxr i{display:inline-block;font-style:normal;will-change:transform;backface-visibility:hidden;transition:transform .62s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*20ms)}
/* the button itself stands still while its letters turn: the theme's 1px hover lift on a springy curve made the whole thing shiver (owner, 2026-10-13) */
.btn.gxr-on,.btn.gxr-on:hover{transform:none}
.gxr-on:hover .gxr i,.gxr-on:focus-visible .gxr i{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.gxr i{transition:none}.gxr-on:hover .gxr i,.gxr-on:focus-visible .gxr i{transform:none}}
/* the heart on "get in touch, don't be shy": the site's own drawn heart (icons.php), larger and in the wash's red */
.btn .gx-i4-heart{width:24px;height:24px;margin:0;vertical-align:0}.btn .gx-i4-heart .f{fill:#ff3831}
/* an outlined button over the red wash keeps its light label (the theme turns it gold on hover, which is weak on red); a two-line label is centred */
.btn.o.gxo:hover{color:var(--tx)}
.pside .btn.gxo{text-align:center}