/* Pop: every pill button and tag gets depth (Sir, Oct 22). Loads last so it layers over each page's own button colours.
   Light top edge + soft gloss + coloured lift shadow; lifts on hover, presses in on click. Colours stay the page's own. */
:is(.pill:not(.pill-line), .hgrid-pill, .hpm-pill, .hacc-pill, .bk-btn, .rex-btn, .cox-pill, .acx-btn, .abx-btn){
  background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 48%,rgba(0,0,0,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 22px -10px rgba(128,0,32,.75),0 2px 5px rgba(0,0,0,.16);
  transition:transform .2s var(--spring,cubic-bezier(.22,1,.36,1)),box-shadow .2s ease,filter .2s ease}
:is(.pill-line, .hgrid-pill-2, .hacc-pill-line){
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -12px rgba(128,0,32,.55);
  transition:transform .2s var(--spring,cubic-bezier(.22,1,.36,1)),box-shadow .2s ease}
:is(.pill, .hgrid-pill, .hgrid-pill-2, .hpm-pill, .hacc-pill, .hacc-pill-line, .bk-btn, .rex-btn, .cox-pill, .acx-btn, .abx-btn):hover{
  transform:translateY(-1px);filter:brightness(1.04)}
:is(.pill:not(.pill-line), .hgrid-pill, .hpm-pill, .hacc-pill, .bk-btn, .rex-btn, .cox-pill, .acx-btn, .abx-btn):hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.18),0 14px 28px -10px rgba(128,0,32,.85),0 3px 8px rgba(0,0,0,.18)}
:is(.pill, .hgrid-pill, .hgrid-pill-2, .hpm-pill, .hacc-pill, .hacc-pill-line, .bk-btn, .rex-btn, .cox-pill, .acx-btn, .abx-btn):active{
  transform:translateY(1px) scale(.98);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.25),0 4px 10px -6px rgba(128,0,32,.6)}

/* glowing tags (iPhone 18 Pro tile: Cases, Screen glass, Chargers, Lens guards) */
.pro-tag b{background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(0,0,0,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.65),0 0 24px rgba(196,22,79,.4)}

@media (prefers-reduced-motion:reduce){
  :is(.pill, .hgrid-pill, .hgrid-pill-2, .hpm-pill, .hacc-pill, .hacc-pill-line, .bk-btn, .rex-btn, .cox-pill, .acx-btn, .abx-btn){transition:none}
  :is(.pill, .hgrid-pill, .hgrid-pill-2, .hpm-pill, .hacc-pill, .hacc-pill-line, .bk-btn, .rex-btn, .cox-pill, .acx-btn, .abx-btn):is(:hover,:active){transform:none}
}