/* Site buttons: pill shape with a fill that slides in from the reading-start edge on hover
   (0.35s, cubic-bezier(.25,1,.5,1)). Loaded last so it settles the hover colours of every button family. */
:root{--yol-btn-base:#111;--yol-btn-fill:#8f653b;--yol-btn-ease:cubic-bezier(.25,1,.5,1)}

/* Families: CTA pills, form submit, mobile request bar, product side tab, map region filters */
.yol-site .yol-shop-button,.yol-site .yol-button,.yol-site .yol-export__zones button{position:relative}
.yol-site .yol-shop-button,.yol-site .yol-button,.yol-site .yol-shop-sticky,.yol-site .yol-shop-sidetab,.yol-site .yol-export__zones button{overflow:hidden;isolation:isolate}
.yol-site .yol-shop-button::before,.yol-site .yol-button::before,.yol-site .yol-shop-sticky::before,.yol-site .yol-shop-sidetab::before,.yol-site .yol-export__zones button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--yol-btn-fill);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--yol-btn-ease);pointer-events:none}
[dir=rtl] .yol-site .yol-shop-button::before,[dir=rtl] .yol-site .yol-button::before,[dir=rtl] .yol-site .yol-shop-sticky::before,[dir=rtl] .yol-site .yol-export__zones button::before,.yol-site[dir=rtl] .yol-shop-button::before,.yol-site[dir=rtl] .yol-button::before,.yol-site[dir=rtl] .yol-shop-sticky::before,.yol-site[dir=rtl] .yol-export__zones button::before{transform-origin:100% 50%}

/* The base colour stays put; only the sliding layer changes */
.yol-site .yol-shop-button,.yol-site .yol-shop-button:hover,.yol-site .yol-shop-sticky,.yol-site .yol-shop-sidetab,.yol-site .yol-shop-sidetab:hover{background:var(--yol-btn-base);color:#fff}
.yol-site .yol-button,.yol-site .yol-button:hover{border:0;background:var(--yol-btn-base);color:#fff!important}

/* Form submit becomes a pill like the other calls to action */
.yol-site .yol-form .yol-button{min-height:48px;padding:0 32px;border-radius:999px;font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase}
@media(min-width:1967px){.yol-site .yol-form .yol-button{min-height:56px;padding:0 38px;font-size:14px}}

/* Side tab is vertical and rotated 180°: its fill grows from the visual bottom, along the label */
.yol-site .yol-shop-sidetab::before{transform:scaleY(0);transform-origin:50% 0}

/* Region filters are outlined: the fill is ink and the label turns white */
.yol-site .yol-export__zones button{--yol-btn-fill:#111;transition:color .35s var(--yol-btn-ease),border-color .35s var(--yol-btn-ease)}

@media(hover:hover){
	.yol-site .yol-shop-button:hover::before,.yol-site .yol-button:hover::before,.yol-site .yol-export__zones button:hover::before{transform:scaleX(1)}
	.yol-site .yol-shop-sidetab:hover::before{transform:scaleY(1)}
	.yol-site .yol-export__zones button:hover{border-color:#111;color:#fff}
}
.yol-site .yol-shop-button:focus-visible::before,.yol-site .yol-button:focus-visible::before,.yol-site .yol-export__zones button:focus-visible::before{transform:scaleX(1)}
.yol-site .yol-shop-sidetab:focus-visible::before{transform:scaleY(1)}
.yol-site .yol-shop-sticky:active::before{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
	.yol-site .yol-shop-button::before,.yol-site .yol-button::before,.yol-site .yol-shop-sticky::before,.yol-site .yol-shop-sidetab::before,.yol-site .yol-export__zones button::before{transition:none}
}