/* Pakstoor :: pks-cat-bar.css :: v1.1-000005 :: 2026-10-26 */
/**
 * Copyright (c) 2026 Pakstoor (Pty) Ltd. All rights reserved.
 * Proprietary and confidential.
 * Unauthorized copying, distribution, modification, or use of this file is prohibited.
 */
/*
 * Category menu under the header + its desktop panel and phone bottom sheet (js/pks-cat-bar.js), plus the
 * subcategory chips used on the sell page and on Explore (catsub 2026-10-21).
 * menu2 2026-10-22: two top items (Local Businesses, Private Listings); the panel shows the main categories on the
 * left and the previewed main's subcategories on the right; phones get a two-level bottom sheet.
 * The slot has a fixed height from this file (loaded in <head>), so filling it causes no layout shift.
 */
:root { --pks-nav-h: 64px; --pks-catbar-h: 48px; }

.pks-catbar {
  position: relative;
  z-index: 99;
  display: block;
  box-sizing: border-box;
  height: var(--pks-catbar-h);
  max-width: 100%;
  background: var(--bg, #141414);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: inherit;
}
@media (min-width: 981px) {
  .pks-catbar { position: sticky; top: var(--pks-nav-h); }
}
.pks-catbar-inner {
  position: relative;
  height: 100%;
  max-width: 1440px;               /* same box as the header row (.nav-inner) */
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

/* ---- Top items (Local Businesses, Private Listings) ---- */
.pks-catbar-tops {
  list-style: none;
  margin: 0 0 0 -12px;             /* the first label lines up with the header content; its hover shade uses the gutter */
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pks-catbar-tops::-webkit-scrollbar { display: none; }
.pks-catbar-li { display: flex; flex: 0 0 auto; }
/* Owner 2026-10-22: no orange rings between the top items (Vinted look): plain spacing. */
.pks-catbar-li + .pks-catbar-li { margin-left: 4px; }
.pks-catbar-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-2, rgba(236, 239, 242, .78));
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background-color .15s ease;
}
.pks-catbar-item:hover, .pks-catbar-item[aria-expanded="true"] { color: var(--ink, #ECEFF2); background: rgba(255, 255, 255, .12); }
.pks-catbar-item::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #F47A20;
  opacity: 0;
}
.pks-catbar-item[aria-current="true"] { color: var(--ink, #ECEFF2); font-weight: 600; }
.pks-catbar-item[aria-current="true"]::after { opacity: 1; }
.pks-catbar-item[aria-expanded="true"]::after { opacity: .5; }
.pks-catbar-item[aria-current="true"][aria-expanded="true"]::after { opacity: 1; }
.pks-catbar-item:focus { outline: none; }
.pks-catbar-item:focus-visible { outline: 2px solid #F47A20; outline-offset: -6px; border-radius: 8px; }

/* ---- Desktop panel (Vinted-style): across the page under the bar, the page below dimmed; the mains down the left,
   the previewed main's subcategories on the right, lined up with the bar's content ---- */
.pks-catpanel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 101;
  box-sizing: border-box;
  padding: 0;
  background: #1F1F1F;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .75);
  color: var(--ink, #ECEFF2);
  animation: pks-catpanel-in .14s ease-out;
}
.pks-catpanel[hidden], .pks-catscrim[hidden] { display: none; }
@keyframes pks-catpanel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pks-mega-inner {
  box-sizing: border-box;
  max-width: 1440px;               /* the bar's content box */
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 268px minmax(0, 620px);
  align-items: start;
}
.pks-mega-side, .pks-mega-body {
  max-height: calc(100vh - var(--pks-nav-h) - var(--pks-catbar-h) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pks-mega-side { margin-left: -12px; padding: 14px 12px 16px; border-right: 1px solid rgba(255, 255, 255, .08); }
.pks-mega-body { padding: 18px 4px 18px 28px; }
/* Review item 9 (2026-10-22): one line on what the open top item holds; Private Listings adds how a Protected deal
   differs (by invitation) with a link to start one. It spans the whole panel width (a third, otherwise empty grid
   column gives it the room on the right), text lined up with the rows below. The two columns give up its measured
   height (--pks-mega-intro-h, set by pks-cat-bar.js) so the open panel still fits the window. */
.pks-catpanel { --pks-mega-intro-h: 46px; }
.pks-mega-inner { grid-template-columns: 268px minmax(0, 620px) minmax(0, 1fr); }
.pks-mega-side, .pks-mega-body { max-height: calc(100vh - var(--pks-nav-h) - var(--pks-catbar-h) - 40px - var(--pks-mega-intro-h)); }
.pks-mega-intro {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 28px;
  row-gap: 2px;
  margin: 0 0 0 -12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  line-height: 1.4;
}
.pks-mega-intro p { margin: 0; }
.pks-mega-intro-text { font-weight: 600; color: var(--ink, #ECEFF2); }
.pks-mega-intro-note { color: var(--ink-2, rgba(236, 239, 242, .78)); }
.pks-mega-intro-link { color: #F47A20; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pks-mega-intro-link:hover { text-decoration-thickness: 2px; }
/* the page under the open panel, dimmed (click closes); top is set to the bar's bottom by the script */
.pks-catscrim {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .55);
  animation: pks-catscrim-in .14s ease-out;
}
@keyframes pks-catscrim-in { from { opacity: 0; } to { opacity: 1; } }
.pks-mega-all, .pks-mega-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.pks-mega-all { margin-bottom: 6px; font-weight: 600; color: var(--ink, #ECEFF2); }
.pks-mega-mains { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.pks-mega-main { font-weight: 400; color: var(--ink-2, rgba(236, 239, 242, .82)); }
.pks-mega-all svg, .pks-mega-main svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
.pks-mega-all:hover, .pks-mega-main:hover { color: var(--ink, #ECEFF2); background: rgba(255, 255, 255, .10); }
.pks-mega-main.is-on { color: var(--ink, #ECEFF2); font-weight: 600; background: rgba(255, 255, 255, .15); }
.pks-mega-main.is-on svg { opacity: 1; stroke: #F47A20; }
.pks-catpanel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 6px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pks-catpanel-all { font-weight: 600; font-size: 14px; color: var(--ink, #ECEFF2); text-decoration: none; }
.pks-catpanel-browse { font-size: 13px; font-weight: 600; color: #F47A20; text-decoration: none; white-space: nowrap; }
.pks-catpanel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.pks-catpanel-link {
  display: block;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-2, rgba(236, 239, 242, .82));
  text-decoration: none;
}
.pks-catpanel-link.is-other { color: var(--ink-dim, rgba(236, 239, 242, .6)); }
.pks-catpanel-link:hover { color: var(--ink, #ECEFF2); background: rgba(255, 255, 255, .10); }
.pks-catpanel-all:hover, .pks-catpanel-browse:hover { text-decoration: underline; text-underline-offset: 3px; }
.pks-catpanel a[aria-current="page"] { color: #F47A20; font-weight: 600; }
.pks-catpanel a:focus { outline: none; }
.pks-catpanel a:focus-visible { outline: 2px solid #F47A20; outline-offset: -2px; border-radius: 8px; }

/* ---- Phones and tablets: the top items in a strip (it scrolls if a language needs more room, never the page) ---- */
@media (max-width: 980px) {
  :root { --pks-catbar-h: 44px; }
  .pks-catbar-inner { padding: 0; }
  .pks-catbar-tops { margin: 0; padding: 0 4px; }
  .pks-catbar-item { font-size: 14px; }
  .pks-catpanel, .pks-catscrim { display: none !important; }
}
@media (max-width: 360px) {
  .pks-catbar-item { padding: 0 9px; font-size: 13.5px; }
  .pks-catbar-item::after { left: 9px; right: 9px; }
  .pks-catbar-li + .pks-catbar-li::before { margin: 0 4px; }
}

/* Phone bottom sheet (level 1: the mains; level 2: a main's subcategories) */
.pks-catsheet-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .18s ease;
}
.pks-catsheet-backdrop.is-in { opacity: 1; }
.pks-catsheet-backdrop[hidden], .pks-catsheet[hidden] { display: none; }
.pks-catsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
  box-sizing: border-box;
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #1F1F1F;
  color: var(--ink, #ECEFF2);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  transform: translateY(16px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.pks-catsheet.is-in { transform: none; opacity: 1; }
html.pks-catsheet-open, html.pks-catsheet-open body { overflow: hidden !important; }
.pks-catsheet-handle { width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); margin: 2px auto 8px; }
.pks-catsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 6px; }
.pks-catsheet-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.pks-catsheet-close, .pks-catsheet-back {
  flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0;
  border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, .06); color: inherit;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pks-catsheet-close svg, .pks-catsheet-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pks-catsheet-close:focus-visible, .pks-catsheet-back:focus-visible, .pks-catsheet-row:focus-visible { outline: 2px solid #F47A20; outline-offset: 2px; }
/* Review item 9: the sheet's first level opens with the same explanation as the desktop panel */
.pks-catsheet-intro { margin: 0 2px 4px; padding: 0 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; line-height: 1.45; }
.pks-catsheet-intro p { margin: 0; }
.pks-catsheet-intro-text { color: var(--ink-2, rgba(236, 239, 242, .86)); }
.pks-catsheet-intro-note { margin-top: 6px !important; font-size: 13.5px; color: var(--ink-2, rgba(236, 239, 242, .74)); }
.pks-catsheet-intro-link { color: #F47A20; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pks-catsheet-intro-link:focus-visible { outline: 2px solid #F47A20; outline-offset: 2px; border-radius: 4px; }
.pks-catsheet-list { list-style: none; margin: 0; padding: 0; }
.pks-catsheet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: var(--ink-2, rgba(236, 239, 242, .85));
  font-size: 15px; text-decoration: none;
}
button.pks-catsheet-row {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  border-radius: 0;
  background: none;
  font-family: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pks-catsheet-row.is-all { font-weight: 700; color: var(--ink, #ECEFF2); }
.pks-catsheet-row.is-other { color: var(--ink-dim, rgba(236, 239, 242, .6)); }
.pks-catsheet-row svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.pks-catsheet-row[aria-current="page"], .pks-catsheet-row[aria-current="true"] { color: #F47A20; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pks-catpanel, .pks-catscrim { animation: none; }
  .pks-catsheet, .pks-catsheet-backdrop { transition: none; }
  .pks-catbar-item, .pks-mega-all, .pks-mega-main { transition: none; }
}

/* ---- Light theme ---- */
html[data-theme="light"] .pks-catbar { background: #FFFFFF; border-bottom-color: #E6E3DE; }
html[data-theme="light"] .pks-catbar-item { color: rgba(20, 20, 20, .78); }
html[data-theme="light"] .pks-catbar-item:hover,
html[data-theme="light"] .pks-catbar-item[aria-current="true"],
html[data-theme="light"] .pks-catbar-item[aria-expanded="true"] { color: #141414; }
html[data-theme="light"] .pks-catbar-item:hover,
html[data-theme="light"] .pks-catbar-item[aria-expanded="true"] { background: #E9E4DD; }
html[data-theme="light"] .pks-catbar-item:focus-visible,
html[data-theme="light"] .pks-catpanel a:focus-visible,
html[data-theme="light"] .pks-catsheet-close:focus-visible,
html[data-theme="light"] .pks-catsheet-back:focus-visible,
html[data-theme="light"] .pks-catsheet-row:focus-visible { outline-color: #B5520F; }
html[data-theme="light"] .pks-catsheet { background: #FFFFFF; border-color: #E6E3DE; color: #141414; box-shadow: 0 18px 44px -14px rgba(20, 20, 20, .25), 0 2px 6px rgba(20, 20, 20, .08); }
html[data-theme="light"] .pks-catpanel { background: #FFFFFF; border-top-color: #ECE9E4; border-bottom-color: #E6E3DE; color: #141414; box-shadow: 0 22px 40px -20px rgba(20, 20, 20, .35); }
html[data-theme="light"] .pks-catscrim { background: rgba(20, 20, 20, .45); }
html[data-theme="light"] .pks-mega-side { border-right-color: #ECE9E4; }
html[data-theme="light"] .pks-mega-mains,
html[data-theme="light"] .pks-catpanel-head { border-color: #ECE9E4; }
html[data-theme="light"] .pks-mega-all,
html[data-theme="light"] .pks-catpanel-all { color: #141414; }
html[data-theme="light"] .pks-mega-main { color: rgba(20, 20, 20, .80); }
html[data-theme="light"] .pks-mega-all:hover,
html[data-theme="light"] .pks-mega-main:hover { color: #141414; background: #EFEAE4; }
html[data-theme="light"] .pks-mega-main.is-on { color: #141414; background: #E4DDD4; }
html[data-theme="light"] .pks-mega-main.is-on svg { stroke: #B5520F; }
html[data-theme="light"] .pks-catpanel-browse { color: #B5520F; }
html[data-theme="light"] .pks-catpanel-link { color: rgba(20, 20, 20, .80); }
html[data-theme="light"] .pks-catpanel-link.is-other,
html[data-theme="light"] .pks-catsheet-row.is-other { color: rgba(20, 20, 20, .58); }
html[data-theme="light"] .pks-catpanel-link:hover { color: #141414; background: #EFEAE4; }
html[data-theme="light"] .pks-catpanel a[aria-current="page"],
html[data-theme="light"] .pks-catsheet-row[aria-current="page"],
html[data-theme="light"] .pks-catsheet-row[aria-current="true"] { color: #B5520F; }
html[data-theme="light"] .pks-mega-intro,
html[data-theme="light"] .pks-catsheet-intro { border-color: #ECE9E4; }
html[data-theme="light"] .pks-mega-intro-text { color: #141414; }
html[data-theme="light"] .pks-mega-intro-note,
html[data-theme="light"] .pks-catsheet-intro-note { color: rgba(20, 20, 20, .72); }
html[data-theme="light"] .pks-catsheet-intro-text { color: rgba(20, 20, 20, .85); }
html[data-theme="light"] .pks-mega-intro-link,
html[data-theme="light"] .pks-catsheet-intro-link { color: #B5520F; }
html[data-theme="light"] .pks-catsheet-intro-link:focus-visible { outline-color: #B5520F; }
html[data-theme="light"] .pks-catsheet-handle { background: #D9D5CF; }
html[data-theme="light"] .pks-catsheet-close,
html[data-theme="light"] .pks-catsheet-back { background: #F3F1EE; }
html[data-theme="light"] .pks-catsheet-row { color: rgba(20, 20, 20, .85); border-bottom-color: #F0EDE9; }
html[data-theme="light"] .pks-catsheet-row.is-all { color: #141414; }

/* ---- nav5 2026-10-26 (owner: "on hover over the items that has categories open the menu we had on the other
   buttons"): the header's Local Businesses and Private Listings links open this same panel (js/pks-cat-bar.js). Pages
   without the bar get an empty anchor right after the header that holds only the dimmed page and the panel. It is
   fixed and has no height, so it never moves anything; the script puts its top at the header's bottom while the panel
   is open. It sits just under the header (the header, its More menu and the account menu stay above the panel). ---- */
.pks-catanchor {
  position: fixed;
  top: var(--pks-nav-h, 62px);
  left: 0;
  right: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: calc(var(--z-nav, 100) - 1);
  --pks-catbar-h: 0px;
}
@media (max-width: 980px) {
  .pks-catanchor { display: none; }
}

/* ================================================================
   Subcategory chips (sell page picker + Explore filter strip)
   ================================================================ */
.pks-subchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pks-subchip {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #1F1F1F;
  color: var(--ink, #ECEFF2);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pks-subchip:hover { border-color: rgba(244, 122, 32, .55); }
.pks-subchip.is-other { color: var(--ink-dim, rgba(236, 239, 242, .65)); border-style: dashed; }
.pks-subchip[aria-checked="true"], .pks-subchip[aria-current="true"] {
  background: #F47A20; border-color: #F47A20; color: #141414; font-weight: 600;
}
.pks-subchip:focus { outline: none; }
.pks-subchip:focus-visible { outline: 2px solid #F47A20; outline-offset: 2px; }
html[data-theme="light"] .pks-subchip { background: #FFFFFF; border-color: #DCD8D2; color: #141414; }
html[data-theme="light"] .pks-subchip.is-other { color: rgba(20, 20, 20, .62); }
html[data-theme="light"] .pks-subchip:hover { border-color: #F47A20; }
html[data-theme="light"] .pks-subchip[aria-checked="true"], html[data-theme="light"] .pks-subchip[aria-current="true"] { background: #F47A20; border-color: #F47A20; color: #141414; }
html[data-theme="light"] .pks-subchip:focus-visible { outline-color: #B5520F; }
@media (hover: none), (max-width: 760px) {
  .pks-subchip { min-height: 44px; }
}

/* ---- Sell page: subcategory block under the main tiles ---- */
.sell-subcat { margin: 28px 0 8px; padding: 20px; border-radius: 16px; background: #1F1F1F; border: 1px solid rgba(255, 255, 255, .08); scroll-margin-top: calc(var(--pks-nav-h) + 16px); animation: pks-subcat-in .2s ease-out; }
.sell-subcat[hidden] { display: none; }
@keyframes pks-subcat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sell-subcat .sell-eyebrow { margin-bottom: 4px; }
.sell-subcat-title { margin: 0 0 14px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink, #ECEFF2); }
.sell-subcat-prompt { margin: -6px 0 14px; font-size: 14px; color: var(--ink-2, rgba(236, 239, 242, .8)); }
.sell-subcat-search { position: relative; max-width: 360px; margin: 0 0 14px; }
.sell-subcat-search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-dim, rgba(236, 239, 242, .55)); pointer-events: none; }
.sell-subcat-input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 16px 0 38px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: #141414; color: var(--ink, #ECEFF2); font: inherit; font-size: 15px; }
.sell-subcat-input:focus { outline: none; border-color: #F47A20; box-shadow: 0 0 0 3px rgba(244, 122, 32, .25); }
.sell-subcat-nomatch, .sell-subcat-help, .sell-subcat-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-dim, rgba(236, 239, 242, .6)); }
.sell-subcat-note:empty { display: none; }
.sell-subcat-error { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--danger, #FF6B6B); }
.sell-subcat-help[hidden], .sell-subcat-nomatch[hidden], .sell-subcat-error[hidden], .sell-subcat-prompt[hidden], .sell-subcat-skip[hidden], .sell-subcat-search[hidden] { display: none; }
.sell-subcat-skip { margin-top: 12px; min-height: 44px; padding: 8px 2px; border: 0; background: none; color: #F47A20; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sell-subcat-skip:focus-visible { outline: 2px solid #F47A20; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 640px) {
  .sell-subcat { padding: 16px; margin-top: 20px; }
  .sell-subcat-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sell-subcat-chips .pks-subchip { white-space: normal; padding: 8px 10px; font-size: 13.5px; min-width: 0; }
  .sell-subcat-search { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .sell-subcat { animation: none; } }
html[data-theme="light"] .sell-subcat { background: #FFFFFF; border-color: #E6E3DE; }
html[data-theme="light"] .sell-subcat-title { color: #141414; }
html[data-theme="light"] .sell-subcat-prompt { color: rgba(20, 20, 20, .78); }
html[data-theme="light"] .sell-subcat-input { background: #FFFFFF; border-color: #DCD8D2; color: #141414; }
html[data-theme="light"] .sell-subcat-nomatch, html[data-theme="light"] .sell-subcat-help, html[data-theme="light"] .sell-subcat-note { color: rgba(20, 20, 20, .6); }
html[data-theme="light"] .sell-subcat-skip { color: #B5520F; }
html[data-theme="light"] .sell-subcat-skip:focus-visible { outline-color: #B5520F; }

/* ---- Explore: subcategory filter strip ---- */
.explore-subchips { margin: 4px 0 18px; max-width: 100%; }
.explore-subchips[hidden] { display: none; }
.explore-subchips .pks-subchips { flex-wrap: wrap; }
.explore-subchips .pks-subchip { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
@media (max-width: 760px) {
  .explore-subchips { margin: 0 -16px 14px; }
  .explore-subchips .pks-subchips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 2px 16px 4px; scroll-padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .explore-subchips .pks-subchips::-webkit-scrollbar { display: none; }
  .explore-subchips .pks-subchip { flex: 0 0 auto; min-height: 44px; }
}
@media (hover: none) { .explore-subchips .pks-subchip { min-height: 44px; } }
.explore-sub-empty-link { color: #F47A20; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="light"] .explore-sub-empty-link { color: #B5520F; }

/* 2026-10-21 owner fix: no see-through gap between the sticky header and the stuck category bar.
   The bar sticks at the header's MEASURED height (pks-cat-bar.js sets --pks-nav-live) and tucks 1px
   under the header, which stays above it. */
@media not all and (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  html:not(#pks-gap1) body .pks-catbar { top: calc(var(--pks-nav-live, var(--pks-nav-h, 62px)) - 1px); z-index: calc(var(--z-nav, 100) - 1); }
}

/* ---- Owner 2026-10-23: the two top items (Local Businesses, Private Listings) look like buttons at rest, subtly: a
   hairline outline and a faint fill, so they no longer read as loose text. Hover and open keep their stronger fill;
   the current section shows an orange outline instead of the underline. ---- */
.pks-catbar-tops { margin-left: 0; }   /* the outline lines up with the header content (the bare text needed -12px) */
.pks-catbar-li { align-items: center; }
.pks-catbar-li + .pks-catbar-li { margin-left: 8px; }
.pks-catbar-item {
  height: auto;
  min-height: 32px;
  border: 1px solid rgba(236, 239, 242, .16);
  background: rgba(255, 255, 255, .035);
}
.pks-catbar-item:hover, .pks-catbar-item[aria-expanded="true"] { border-color: rgba(236, 239, 242, .30); }
.pks-catbar-item[aria-current="true"] { border-color: rgba(244, 122, 32, .60); }
.pks-catbar-item::after { display: none; }
.pks-catbar-item:focus-visible { outline-offset: 2px; }
html[data-theme="light"] .pks-catbar-item { border-color: rgba(20, 20, 20, .16); background: #FAF8F5; }
html[data-theme="light"] .pks-catbar-item:hover,
html[data-theme="light"] .pks-catbar-item[aria-expanded="true"] { border-color: rgba(20, 20, 20, .30); }
html[data-theme="light"] .pks-catbar-item[aria-current="true"] { border-color: rgba(181, 82, 15, .60); }
@media (max-width: 980px) {
  .pks-catbar-tops { padding: 0 16px; }
}
@media (max-width: 360px) {
  .pks-catbar-tops { padding: 0 12px; }
  .pks-catbar-li + .pks-catbar-li { margin-left: 6px; }
}