/* Category buttons, direction C (Dean via Karo, 1 Oct 2026; docs/slices/motion-and-category-buttons-2026-10-01.md), and
   the same buttons wherever a door category is offered (Karo, 1 Oct 2026: continuity with the icon buttons;
   docs/slices/category-continuity-2026-10-01.md): the homepage picker, the ranges pages' switcher, the desktop Shop doors
   menu and the phone menu. Built by scripts/category-template.mjs and injected by scripts/build-full-site.mjs after
   chrome-loop.css on every page that holds one. Each button carries a door picture or an icon, its name and how many doors
   it leads to; the chosen one, or the page you are on, has an indigo outline (bar 21). The button rules are scoped to
   their four containers so they outrank the homepage's older pill styles in commerce.css, while the motion glide
   (scroll-motion.css) still outranks them. */
html body :is(.simple-filters,.category-links,.category-grid) :is(a,button).category-button{display:inline-flex;align-items:center;gap:12px;min-height:62px;margin:0;padding:6px 16px 6px 6px;border:1px solid #DDD9E5;border-radius:6px;background:#FFFFFF;color:#17152B;font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:none}
/* The border eases only on hover and focus, never as the page arrives: on a slow first visit Safari otherwise faded it in
   from the browser's link blue as this stylesheet landed (seen on the live domain, 2 Oct 2026) */
html body :is(.simple-filters,.category-links,.category-grid) :is(a,button).category-button:is(:hover,:focus-visible){transition:border-color .2s ease,box-shadow .2s ease}
html body :is(.simple-filters,.category-links,.category-grid) :is(a,button).category-button:hover{border-color:#ADA5C2;background:#FFFFFF;color:#17152B}
html body :is(.simple-filters,.category-links,.category-grid) :is(a,button).category-button:is([aria-pressed=true],[aria-current=page]){background:#FFFFFF;color:#17152B;border-color:#332483;box-shadow:inset 0 0 0 1px #332483}
html body :is(.simple-filters,.category-links,.category-grid) :is(a,button).category-button:focus-visible{outline:2px solid #332483;outline-offset:3px}
html body .category-media{flex:0 0 44px;width:44px;height:48px;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#EEECE7}
html body :is(.category-media-featured,.category-media-all){background:#ECE9F7}
html body .category-media-fire{background:#FDEBE2}
html body .category-media img{display:block;width:auto;height:44px;max-width:none}
html body .category-media svg{display:block;width:26px;height:26px}
html body .category-text{display:flex;flex-direction:column;gap:2px;min-width:0}
html body .category-name{font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap}
html body .category-count{font-size:12px;line-height:1.3;color:#5B5168;white-space:nowrap}
html body .category-button:is([aria-pressed=true],[aria-current=page]) .category-name{color:#332483}

/* The homepage picker: one row; "All 51 doors" shows only where the heading link hides */
html body .simple-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
html body .simple-filters .simple-filter-all{display:none}

/* The ranges pages: the four collections, the one you are on marked */
html body .category-links{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:0 0 16px}

/* Two by two: the desktop Shop doors menu and the phone menu */
html body .category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html body .category-grid .category-button{width:100%}
html body #nav-shop{grid-template-columns:minmax(0,1fr) 200px;gap:32px}
html body #nav-shop .store-nav-label{margin:0 0 12px}
html body #nav-shop .store-nav-guidance{margin:0;padding:0;border:0}
html body #nav-shop .store-nav-guidance>a{padding:11px 0;border-radius:0}
html body #nav-shop .store-nav-guidance>a:hover{background:none;color:#332483}
html body .store-drawer .store-drawer-categories{margin:0 0 24px}

/* The homepage's fire card carries the same flame */
html body .shop-paths>a.shop-path-fire{position:relative}
html body .shop-path-icon{position:absolute;top:28px;right:28px}

/* Phones: two by two everywhere, with room for "Contemporary" down to a 360px screen */
@media(max-width:760px){
 html body .shop-path-icon{top:20px;right:20px}
 html body :is(.simple-filters,.category-links){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 html body :is(.simple-filters,.category-links,.category-grid) :is(a,button).category-button{width:100%;gap:10px;padding-right:8px}
 html body .category-media{flex-basis:40px;width:40px}
}
@media(max-width:600px){
 html body .simple-filters .simple-filter-all{display:flex;grid-column:1/-1;justify-content:center;min-height:44px;padding:8px 0;border:0;border-radius:0;background:none;color:#332483;font-size:15px;font-weight:600}
}
@media(max-width:420px){html body .category-name{font-size:14px}}
@media(max-width:360px){
 html body :is(.simple-filters,.category-links,.category-grid) :is(a,button).category-button{gap:8px;padding-right:6px}
 html body .category-media{flex-basis:36px;width:36px}
}