/* Reversible hover study, shared by all six local prototype pages.
   Remove this stylesheet link to return to the preceding button treatment. */
:is(.primary,.service-primary,.search-field button,.desktop-popup-footer>button:last-child){
  background-color:var(--accent)!important;
  background-image:linear-gradient(#111314,#111314)!important;
  background-repeat:no-repeat!important;
  background-position:center bottom!important;
  background-size:100% 0%!important;
  box-shadow:inset 0 0 0 1px var(--accent)!important;
  color:#0b2923!important;
  transition:background-size 320ms cubic-bezier(.22,.61,.36,1),color 160ms ease!important;
}
@media(hover:hover){
  :is(.primary,.service-primary,.search-field button,.desktop-popup-footer>button:last-child):hover:not(:disabled):not([aria-disabled=true]){
    background-size:100% 100%!important;
    color:#fff!important;
  }
}
:is(.primary,.service-primary,.search-field button,.desktop-popup-footer>button:last-child):focus-visible:not(:disabled):not([aria-disabled=true]),
:is(.primary,.service-primary,.search-field button,.desktop-popup-footer>button:last-child):active:not(:disabled):not([aria-disabled=true]){
  background-size:100% 100%!important;
  color:#fff!important;
}
/* Reserve the existing arrow space so the frame never moves the text. */
:is(.arrow-box,.link-arrow){
  border-color:transparent!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  transform:none!important;
  transition:border-color 220ms ease,color 220ms ease!important;
}
@media(hover:hover){
  :is(a,button):hover :is(.arrow-box,.link-arrow){border-color:var(--accent)!important;color:var(--accent)!important}
}
:is(a,button):focus-visible :is(.arrow-box,.link-arrow),
:is(a,button):active :is(.arrow-box,.link-arrow){border-color:var(--accent)!important;color:var(--accent)!important}
@media(prefers-reduced-motion:reduce){
  :is(.primary,.service-primary,.search-field button,.desktop-popup-footer>button:last-child,.arrow-box,.link-arrow){transition:none!important}
}

/* Stable SVG geometry and held hover states: no keyframe reset or glyph wobble. */
summary > .disclosure-plus{
 display:inline-grid;place-items:center;flex:0 0 28px;width:28px;
 align-self:center;line-height:1;transform:none!important;
 color:inherit;transition:color 280ms ease;
}
.disclosure-plus svg{
 display:block;width:24px;height:24px;overflow:visible;
 transform:rotate(0deg);transform-origin:50% 50%;
 transition:transform 300ms cubic-bezier(.22,.61,.36,1);
}
details[open] > summary > .disclosure-plus svg{transform:rotate(45deg)}
@media(hover:hover){
 summary:hover > .disclosure-plus{color:var(--accent)}
 summary:hover > .disclosure-plus svg{transform:rotate(90deg)}
 details[open] > summary:hover > .disclosure-plus svg{transform:rotate(135deg)}
}
summary:focus-visible > .disclosure-plus{color:var(--accent)}
summary:focus-visible > .disclosure-plus svg{transform:rotate(90deg)}
details[open] > summary:focus-visible > .disclosure-plus svg{transform:rotate(135deg)}
@media(prefers-reduced-motion:reduce){
 summary > .disclosure-plus,.disclosure-plus svg{transition:none!important}
}

/* One travelling active surface and accent line, sharing position and timing. */
body :is(.material-options,.category-tabs){
 position:relative;isolation:isolate;display:flex;gap:8px;align-items:stretch;
 overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
 scrollbar-width:thin;scrollbar-color:#bdbdbd transparent;overscroll-behavior-x:contain;
}
body :is(.material-options,.category-tabs)>button{
 position:relative;z-index:1;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
 min-height:56px;padding:14px 24px;margin:0;border:0!important;
 background:transparent;color:#505050;font-size:18px;line-height:1.5;
 border-radius:0;font-weight:550;white-space:nowrap;
 transition:background-color 160ms ease,color 160ms ease;
}
body :is(.material-options,.category-tabs)>button[aria-pressed=true]{background:#111314;color:#fff!important}
body .category-tabs>button[aria-pressed=true]>span{color:#ddd}
body :is(.material-options,.category-tabs)[data-tab-ready]>button[aria-pressed=true]{background:transparent}
body :is(.material-options,.category-tabs)[data-tab-ready]::before{
 content:'';position:absolute;left:0;top:0;z-index:0;
 width:var(--tab-width);bottom:4px;transform:translateX(var(--tab-x));
 background:#111314;pointer-events:none;
 transition:transform 300ms cubic-bezier(.22,.61,.36,1),width 300ms cubic-bezier(.22,.61,.36,1);
}

body :is(.material-options,.category-tabs)>button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
body :is(.material-options,.category-tabs)[data-tab-ready]::after{
 content:'';position:absolute;left:0;bottom:0;height:3px;z-index:2;
 width:var(--tab-width);transform:translateX(var(--tab-x));
 background:var(--accent);pointer-events:none;
 transition:transform 300ms cubic-bezier(.22,.61,.36,1),width 300ms cubic-bezier(.22,.61,.36,1);
}
@media(hover:hover){body :is(.material-options,.category-tabs)>button:not([aria-pressed=true]):hover{background:#e7e7e7;color:#181818}}
@media(max-width:767px){body :is(.material-options,.category-tabs)>button{padding:12px 20px;min-height:52px;font-size:18px}}
@media(prefers-reduced-motion:reduce){body :is(.material-options,.category-tabs)>button,body :is(.material-options,.category-tabs)::before,body :is(.material-options,.category-tabs)::after{transition:none!important}}