.config-group.vh-wrap.vh-wrap--options{padding:var(--vh-space-4);margin:0 0 var(--vh-space-5);border:1px solid rgba(184,181,174,.25);border-radius:12px;background:linear-gradient(135deg,rgba(245,245,243,.7),rgba(232,230,225,.45));color:#2c2825}
.vh-wrap--options .vh-wrap__modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 0;padding:4px;background:#ede7df80;border-radius:13px}
.vh-wrap--options .vh-wrap__modes button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:8px 6px;border:1px solid transparent;border-radius:9px;background:transparent;color:inherit;font:500 13px/1.3 Onest,system-ui,sans-serif;cursor:pointer}
.vh-wrap--options .vh-wrap__modes button[aria-pressed=true]{background:#fff;border-color:#a89f95;box-shadow:0 4px 12px #2c282510}
.vh-wrap--options .vh-wrap__modes button{position:relative}
.vh-wrap--options .vh-wrap__modes button:not(:last-child)::after{content:'';position:absolute;top:10px;bottom:10px;right:-4px;width:1px;background:#b9afa3;pointer-events:none}
.vh-wrap--options .vh-wrap__modes button:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}
.vh-wrap--options .vh-wrap__swatch{position:relative;flex:0 0 19px;width:19px;height:22px;margin:0;border:1px solid #d4cbc0;border-radius:3px;transform:skewY(-8deg)}
.vh-wrap--options .vh-wrap__swatch:before{content:'';position:absolute;inset:0 0 0 5px;background:linear-gradient(135deg,#fff,#ede7df);border-radius:1px}
.vh-wrap__swatch--mirror{background:linear-gradient(135deg,#2563eb,#7c3aed,#db2777,#f59e0b)}
.vh-wrap__swatch--black{background:#151515}.vh-wrap__swatch--white{background:#fff}
.vh-wrap--options .vh-wrap__feedback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vh-wrap--options[data-error-visible=true] .vh-wrap__feedback{position:static;width:auto;height:auto;clip-path:none;white-space:normal;font-size:12px}
@media(max-width:380px){.vh-wrap--options .vh-wrap__modes button{gap:5px;font-size:12px}}

/* Number the rendered choice groups; hidden layout controls do not consume a step. */
#product-configurator:has([data-edge-finish]){counter-reset:canvas-choice}
#product-configurator:has([data-edge-finish]) .config-label{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding-left:0}
#product-configurator:has([data-edge-finish]) .config-label::before{counter-increment:canvas-choice;content:counter(canvas-choice,upper-roman);position:static;inset:auto;transform:none;width:30px;animation:none;display:inline-grid;place-items:center;flex:0 0 30px;height:30px;border:1px solid #d7cec3;border-radius:50%;background:linear-gradient(135deg,#2563eb 5%,#7c3aed 35%,#db2777 60%,#f97316 85%);border-color:transparent;color:#fff;font:700 12px/1 Geologica,system-ui,sans-serif;letter-spacing:0}

/* Keep the original purchase button; the solid arrow supplies the cue. */
body:has([data-edge-finish]) .product-actions{position:relative;margin-top:40px;isolation:isolate}
body:has([data-edge-finish]) #btn-atc{padding-top:28px;padding-bottom:28px;min-height:80px}
body:has([data-edge-finish]) .product-actions::before{
  content:'';position:absolute;z-index:3;left:4px;top:-24px;width:35.49px;height:43.65px;pointer-events:none;
  background:linear-gradient(110deg,#df2336 0%,#ef3748 39%,#ffb7ba 47%,#fff1ed 50%,#ffb7ba 53%,#ef3748 61%,#df2336 100%);background-size:300% 100%;background-position:100% 0;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 90' preserveAspectRatio='none'%3E%3Cpath d='M19 9C-1 38 29 58 78 65' fill='none' stroke='black' stroke-width='10.8' stroke-linecap='round'/%3E%3Cpath d='M73 45L101 70L64 81Z' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation:vh-cart-arrow-bob 1.8s ease-in-out infinite,vh-cart-arrow-shine 3.6s ease-in-out infinite;animation-play-state:paused;
}
body:has([data-edge-finish]) .product-actions.vh-cart-cue-visible::before{animation-play-state:running}
@keyframes vh-cart-arrow-bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(4px)}}
@keyframes vh-cart-arrow-shine{0%,25%{background-position:100% 0}65%,100%{background-position:0% 0}}
@media(prefers-reduced-motion:reduce){body:has([data-edge-finish]) .product-actions::before{animation:none;background:#e52b3d}}