.cat-strip { position: fixed; left: 0; right: 0; bottom: 28px; z-index: 40; display: none; justify-content: center; padding: 0 24px; pointer-events: none; opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.cat-strip.is-on { pointer-events: none; opacity: 1; transform: none; }
.cat-strip.is-on .cat-pill { pointer-events: auto; }
.cat-pill { position: relative; border-radius: 100px; border: 1px solid rgba(255,255,255,0.2); background: #000; padding: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.35); }
.cat-pill ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cat-pill a { position: relative; display: block; border-radius: 100px; padding: 12px 18px; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: rgba(255,255,255,0.75); transition: color 0.4s; }
.cat-pill a:hover, .cat-pill a[aria-current="true"] { color: #fff; }
.cat-pill a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; margin: 0 auto; height: 2px; max-width: 40px; border-radius: 100px; background: linear-gradient(to right, transparent, #f4c86a, transparent); box-shadow: 0 0 8px rgba(244,200,106,0.7); transform: scaleX(0); opacity: 0; transition: transform 0.4s, opacity 0.4s; }
.cat-pill a[aria-current="true"]::after { transform: scaleX(1); opacity: 1; }
.cat-pill li.cat-cta { margin-left: 6px; }
.cat-pill li.cat-cta a { background: #FFD580; color: #030512; font-weight: 600; }
.cat-pill li.cat-cta a::after { display: none; }
.cat-pill li.cat-cta a:hover { background: #ffe3a6; color: #030512; }

.cat-strip-m { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; margin: 0 auto; max-width: 448px; pointer-events: none; opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.cat-strip-m.is-on { opacity: 1; transform: none; }
.cat-strip-m.is-on .cat-m-bar { pointer-events: auto; }
.cat-m-bar { display: flex; align-items: center; gap: 4px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.92); padding: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
.cat-m-bar button.cat-m-arrow { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; }
.cat-m-bar button.cat-m-next { background: #fff; color: #000; }
.cat-m-bar button[disabled] { opacity: 0.3; cursor: default; }
.cat-m-label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 4px; text-align: center; font-family: "DM Sans", sans-serif; color: #fff; text-decoration: none; }
.cat-m-label small { font-size: 12px; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cat-m-label strong { max-width: 100%; font-size: 12.5px; line-height: 1.2; font-weight: 600; }
.cat-m-cta { flex: 0 0 auto; border-radius: 100px; background: #FFD580; padding: 10px 14px; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.1; text-align: center; color: #030512; text-decoration: none; }

@media (min-width: 1100px) { .cat-strip { display: flex; } .cat-strip-m { display: none; } }
@media (max-width: 1099px) { .cat-strip { display: none; } }