/* Flow motion adapted to the atelier palette, with centered labels and no arrows. */
.flow-button{
  --flow-background:transparent;
  --flow-color:var(--forest);
  --flow-fill:var(--forest);
  --flow-hover-color:var(--paper);
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  min-height:48px;
  width:auto;
  height:auto;
  padding:12px 30px;
  border:1.5px solid #2e512b66;
  border-radius:100px;
  background:var(--flow-background);
  color:var(--flow-color);
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:border-radius .6s cubic-bezier(.23,1,.32,1),color .6s cubic-bezier(.23,1,.32,1),border-color .6s,scale .2s;
}
.flow-button::before{
  content:'';
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:50%;
  left:50%;
  width:calc(145% + 60px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--flow-fill);
  opacity:0;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .8s cubic-bezier(.19,1,.22,1),opacity .6s;
}
.flow-button .flow-label{position:relative;z-index:1;font:inherit;line-height:inherit;pointer-events:none}
.flow-button.flow-solid{
  --flow-background:var(--forest);
  --flow-color:var(--paper);
  --flow-fill:var(--paper);
  --flow-hover-color:var(--forest);
  border-color:var(--forest);
}
.flow-button:hover,.flow-button:focus-visible{
  color:var(--flow-hover-color);
  border-color:var(--forest);
  border-radius:12px;
  background:var(--flow-background);
}
.flow-button:hover::before,.flow-button:focus-visible::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.flow-button:active:not(:disabled){scale:.95}
.flow-button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.flow-button:disabled{opacity:.45;cursor:not-allowed;color:var(--flow-color);border-radius:100px}
.flow-button:disabled::before{opacity:0;transform:translate(-50%,-50%) scale(0)}
.flow-button.bag-button{padding:8px 17px;min-height:44px;font-size:13px}
.bag-button .bag-label{display:inline}
.bag-button #bag-count{position:relative;z-index:1;background:var(--forest);color:var(--paper);transition:background .6s,color .6s}
.bag-button:hover #bag-count,.bag-button:focus-visible #bag-count{background:var(--paper);color:var(--forest)}
.flow-button.menu-toggle{display:none}
.flow-button.icon-button{min-height:37px;padding:8px 15px;font-size:12px;line-height:1.3}
.flow-button.add-button{min-height:42px;padding:9px 17px;font-size:12px;flex-shrink:0}
.product-buy{gap:12px}
.story-copy .flow-button,.manifesto .flow-button{margin-top:20px}
.bag-bottom .flow-button{display:flex}
.bag-bottom #continue-shopping{width:100%;margin-top:16px}
.closing>.flow-button{
  --flow-background:var(--forest);
  --flow-color:var(--paper);
  --flow-fill:var(--paper);
  --flow-hover-color:var(--forest);
  border-color:var(--forest);
  background:var(--forest);
  color:var(--paper);
}
.closing>.flow-button:hover,.closing>.flow-button:focus-visible{color:var(--forest);background:var(--forest);border-color:var(--forest)}
@media(max-width:1050px){.spotlight-action .flow-button{font-size:12px;padding:12px 20px}}
@media(max-width:700px){
  .flow-button{min-height:46px;padding:12px 24px;font-size:13px}
  .flow-button.menu-toggle{display:inline-flex;min-height:36px;padding:8px 10px;font-size:11px;min-width:49px}
  .flow-button.bag-button{padding:8px 10px;min-height:37px;font-size:11px;gap:6px}
  .header{grid-template-columns:1fr auto 1fr;padding-right:14px;padding-left:14px;gap:9px}
  .header .brand{font-size:15px;gap:5px}
  .brand-icon{width:27px;height:38px}.brand-icon img{width:75px;left:-22px;top:-12px}
  .brand small{font-size:7px;letter-spacing:.35em}
  .product-buy{align-items:flex-start;flex-direction:column;gap:11px}
  .flow-button.add-button{width:100%;font-size:12px;min-height:42px}
  .spotlight-action .flow-button{padding:11px 16px;line-height:1.45}
  .closing>.flow-button{padding:12px 26px}
}
@media(max-width:370px){.header .brand{font-size:13px}.brand-icon{display:none}.flow-button.bag-button{padding:8px}.header{gap:7px}}
@media(prefers-reduced-motion:reduce){
  .flow-button,.flow-button::before,.bag-button #bag-count{transition:none}
  .flow-button:active:not(:disabled){scale:1}
}