/* Fine polished chrome on the remaining controls; round shapes stay round. */
.button,.event-tabs button,.arrow,dialog .close,.photo-open{
  --control-face:var(--auto-ivory);
  border:3px solid transparent;
  background:var(--control-face) padding-box,var(--auto-chrome) border-box;
  box-shadow:0 1px 0 #fff9,0 3px 6px #30271e24,inset 0 1px 2px #fff9,inset 0 -1px 2px #86795940;
  color:var(--ink);
}
.button.dark,.event-tabs button.active{
  --control-face:linear-gradient(#293527,#20291e);
  color:var(--cream);
  box-shadow:0 1px 0 #fff9,0 3px 6px #30271e24,inset 0 1px 2px #ffffff25;
}
.arrow,dialog .close,.photo-open{border-width:2px}
.arrow,dialog .close{border-radius:50%}
.arrow{width:40px;height:40px}
.arrow:hover{background:var(--control-face) padding-box,var(--auto-chrome) border-box;filter:brightness(1.04)}
dialog .close{top:10px;right:12px;left:auto;bottom:auto}
.button:active,.event-tabs button:active,.arrow:active{transform:translateY(1px)}

/* Separate enamel face keeps the fine chrome frame continuous. */
#details-button{
  position:relative;padding:2px;min-height:54px;border:1px solid #8c9498;
  border-radius:17px;background:var(--auto-chrome);gap:0;
  box-shadow:0 1px 0 #ffffffb3,0 3px 5px #0003;
  transition:transform .15s,box-shadow .15s;
}
#details-button .formula-key-face{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:15px 20px;width:100%;min-height:46px;border-radius:14px;
  background:var(--auto-ivory);border:1px solid #716e6277;
  box-shadow:inset 0 2px 2px #fff,inset 0 -2px 3px #a5947140;
}
#details-button:hover{transform:none}
#details-button:active{transform:translateY(1px);box-shadow:0 1px 2px #0003}
/* Modal autofocus uses the chrome rim, without the orange outer circle. */
dialog .close:focus,dialog .close:focus-visible{outline:none}
dialog .close:focus-visible{box-shadow:0 1px 0 #fff9,0 3px 6px #30271e24,inset 0 0 0 2px #555e65}

/* Quiet navigation, with generous invisible touch targets. */
.product-foot{gap:12px}
.product-arrows{display:flex;flex:0 0 auto;gap:4px}
.product-arrow{
  position:relative;display:grid;place-items:center;width:44px;height:44px;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  color:inherit;font-size:22px;font-weight:400;line-height:1;opacity:.8;
  touch-action:manipulation;transition:opacity .15s;
}
.product-arrow:hover,.product-arrow:active{opacity:1}
.product-arrow:focus-visible{outline:1px solid currentColor;outline-offset:-5px}
/* Brief CTA uses the same defined, cool chrome as the shop controls. */
#brief-button{
 --auto-chrome:linear-gradient(135deg,#57616b 0%,#a5afb8 15%,#eef3f8 23%,#7e8994 34%,#3e4954 48%,#dce5ed 52%,#f7faff 56%,#8e9ba7 69%,#576570 86%,#b9c4ce 100%);
 border-width:2px;border-radius:14px;
 box-shadow:0 0 0 1px #6d7883,0 2px 4px #20291e24,inset 0 0 0 1px #a1a9ad;
}