/* Storefront actions: a stable surface, with movement reserved for the icon. */
.storefront .button,
.storefront .product-bottom button.add-cookie:not(:disabled),
.storefront .recommended-add,
.storefront .product-sticky-add{
 background:linear-gradient(145deg,#64371f,#3b200f);
 color:var(--brand-cream,#fffaf1);
 border:1px solid #795037;
 box-shadow:inset 0 1px 0 #ffffff24,0 4px 10px -5px #3b200f70;
 font-weight:700;
 transition:background-color .2s,border-color .2s,box-shadow .2s;
}
.storefront .button{border-radius:10px;min-height:46px;letter-spacing:.01em}
/* Preserve compact buying controls and the established mobile widths. */
.storefront .button:is(:hover,:active),
.storefront .button:active:not(:disabled),
.storefront :is(.add-cookie,.recommended-add,.product-sticky-add):is(:hover,:active),
.storefront :is(.recommended-add,.product-sticky-add).is-added{
 transform:none;animation:none;
}
.storefront .button:hover:not(:disabled):not([aria-disabled=true]),
.storefront .product-bottom button.add-cookie:hover:not(:disabled),
.storefront :is(.recommended-add,.product-sticky-add):hover:not(:disabled){
 border-color:#b68454;box-shadow:inset 0 1px 0 #ffffff36,0 5px 14px -5px #3b200f80;
}
.storefront .button.secondary{
 background:var(--brand-cream,#fffaf1);color:var(--brand-chocolate,#3b200f);border-color:#c8ab88;
 box-shadow:inset 0 1px 0 #fff,0 3px 8px -6px #3b200f55;
}
.storefront .button.secondary:hover:not(:disabled){background:#f3e8d6;border-color:#956a46}
.storefront :is(.button,.add-cookie,.recommended-add,.product-sticky-add):focus-visible{
 outline:2px solid var(--brand-chocolate,#3b200f);outline-offset:4px;
}
.storefront .button:disabled,
.storefront .button[aria-disabled=true],
.storefront :is(.recommended-add,.product-sticky-add):disabled{
 opacity:.55;cursor:not-allowed;box-shadow:none;
}
.storefront .button>:is(svg,span[aria-hidden=true]),
.storefront :is(.add-cookie,.recommended-add,.product-sticky-add)>svg{
 flex-shrink:0;transform-origin:center;
 transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
/* Arrow badges give the text actions a more distinct finishing detail. */
.storefront .button>span[aria-hidden=true]{
 display:inline-grid;place-items:center;width:28px;height:28px;
 margin-block:-5px;border-radius:7px;background:#fffaf118;font-size:18px;line-height:1;
}
.storefront .button.secondary>span[aria-hidden=true]{background:#3b200f0b}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .storefront .button:hover:not(:disabled):not([aria-disabled=true])>:is(svg,span[aria-hidden=true]){transform:translateX(3px)}
 .storefront :is(.add-cookie,.recommended-add,.product-sticky-add):hover:not(:disabled)>svg{transform:translateY(-2px) rotate(-9deg)}
 .storefront .product-order-panel .button:hover:not(:disabled)>svg{transform:translateY(-2px) rotate(-9deg)}
 .storefront .cookie-box-card:hover .box-link>span[aria-hidden=true]{transform:translate(3px,-3px)}
}
.storefront :is(.button,.add-cookie,.recommended-add,.product-sticky-add):active:not(:disabled)>svg{transform:scale(.87)}
.storefront :is(.button,.add-cookie,.recommended-add,.product-sticky-add).is-added>svg{animation:button-icon-confirm .55s ease-out}
.storefront .box-link>span[aria-hidden=true]{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@keyframes button-icon-confirm{
 0%,100%{transform:none}
 35%{transform:translateY(-4px) rotate(-12deg) scale(1.12)}
 65%{transform:translateY(1px) rotate(5deg)}
}
@media(prefers-reduced-motion:reduce){
 .storefront :is(.button,.add-cookie,.recommended-add,.product-sticky-add),
 .storefront .button>:is(svg,span[aria-hidden=true]),
 .storefront :is(.add-cookie,.recommended-add,.product-sticky-add)>svg,
 .storefront .box-link>span[aria-hidden=true]{transition:none;animation:none!important;transform:none!important}
}
/* Text actions get more readable type; icon-only buying controls stay unchanged. */
.storefront .button:not(.product-buy){font-size:15px;line-height:1.4}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
 .storefront .button:not(.product-buy):has(>svg,>span[aria-hidden=true]){
  position:relative;padding-inline:54px;justify-content:center;text-align:center;
 }
 .storefront .button:not(.product-buy)>:is(svg,span[aria-hidden=true]){
  position:absolute;right:13px;top:50%;margin:0;
  opacity:0;visibility:hidden;transform:translate(-6px,-50%);
  transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .22s;
 }
 .storefront .button:not(.product-buy):is(:hover,:focus-visible):not(:disabled):not([aria-disabled=true])>:is(svg,span[aria-hidden=true]){
  opacity:1;visibility:visible;transform:translate(0,-50%);
 }
}
@media(max-width:767px){.storefront .button:not(.product-buy){font-size:14px;white-space:normal;text-align:center}}
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
 .storefront .button:not(.product-buy)>:is(svg,span[aria-hidden=true]){transform:translateY(-50%)!important;transition:none}
}

/* Reuse the existing arrow-left vector as a fine, elongated forward arrow. */
.storefront .action-arrow{display:inline-grid;place-items:center;vertical-align:middle;width:28px;height:22px;flex-shrink:0}
.storefront .action-arrow>.crm-icon{display:block;width:22px;height:18px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg) scaleX(1.15);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.storefront .button>span.action-arrow{width:32px;height:25px;border:1px solid #fffaf14d;border-radius:999px;background:transparent}
.storefront .button.secondary>span.action-arrow{border-color:#3b200f45;background:transparent}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .storefront :is(.button,.text-link,.cookie-box-card):hover .action-arrow>.crm-icon{transform:translateX(2px) rotate(180deg) scaleX(1.15)}
}
@media(prefers-reduced-motion:reduce){.storefront .action-arrow>.crm-icon{transition:none}}