*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
} /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
:after,
:before {
  --tw-content: "";
}
:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  line-height: inherit;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
pre,
samp {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
}
fieldset,
legend {
  padding: 0;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}
textarea {
  resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
[role="button"],
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.-right-2 {
  right: -0.5rem;
}
.-top-1 {
  top: -0.25rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.min-h-screen {
  min-height: 100vh;
}
.w-full {
  width: 100%;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 80rem; /* 1280px - matches the fashion storefront width (2026-07-10) */
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.p-6 {
  padding: 1.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-center {
  text-align: center;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-semibold {
  font-weight: 600;
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
html {
  overflow-y: scroll;
}
svg {
  vertical-align: -0.125em;
  display: inline-block;
}
.hover\:text-orange-500:hover {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:flex {
    display: flex;
  }
  .md\:grid {
    display: grid;
  }
  .md\:hidden {
    display: none;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-\[240px_1fr\] {
    grid-template-columns: 240px 1fr;
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ========================================================================
 *  END OF GENERATED TAILWIND RESET + UTILITIES  -  DO NOT EDIT ABOVE
 *  (rebuilt from input.css via `npx tailwindcss` - see tailwind.config.js)
 *
 *  >>>  EDIT CUSTOM PUBLIC-SITE RULES BELOW  >>>
 *  Admin-panel rules live in /css/admin.css (scoped under body.admin).
 *
 *  Table of contents - Ctrl+F a marker to jump:
 *      [BASE]        body defaults
 *      [LAYOUT]      navbar, footer, search bar
 *      [HOME]        homepage: category grid + latest listings
 *      [SEARCH]      old /search rules (replaced by [SEARCH-V2])
 *      [LISTING]     create, edit, detail (item page)
 *      [AUTH]        login + register
 *      [DASHBOARD]   seller/buyer dashboard + pages
 *      [REVIEWS]     reviews + public profile
 *      [OFFERS]      make-offer pages
 *      [ORDERS]      sold / bought / won
 *      [MESSAGES]    inbox + thread
 *      [WATCHLIST]   watchlist page
 *      [AUCTION]     auctions list
 *      [FORUM]       threads + replies
 *      [SUPPORT]     support tickets
 *      [MEMBERSHIP]  membership plans
 *      [SHIPPING]    shipping methods page
 *      [ATTRS]       category attributes (EAV)
 *      [SEARCH-V2]   NEW /search layout (bordered sidebar, fav hearts)
 *  ======================================================================== */

/* [BASE] -- global body defaults -- */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #777;
  line-height: 1.5;
}

/* [LAYOUT] ==================================================
   LAYOUT - navbar, footer, search bar (_Layout + _AdminLayout)
   (43 auto-generated .sXX classes from Views/Shared/)
   =========================================================== */
.i20 {
  float: right;
  margin-top: 4px;
}
.i21 {
  font-size: 20px;
}
.s59 {
  color: #f0960a;
}
.s60 {
  color: #0e7c00;
}
.s130 {
  margin-bottom: 4px;
}
.s170 {
  color: #999;
  font-size: 12px;
}
.s180 {
  font-size: 13px;
}
.s270 {
  font-size: 16px;
}
.s389 {
  color: #333;
}
.s463 {
  padding-left: 10px;
}
.s464 {
  cursor: pointer;
  padding: 8px 16px;
  color: #f0960a;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  user-select: none;
}
.s465 {
  padding-left: 10px;
  border-left: 2px solid #f0f0f0;
  margin-left: 16px;
  margin-top: 4px;
}
.s466 {
  margin-top: 10px;
  background: #e7f7e7;
  border: 1px solid #9bd79b;
  color: #1a651a;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
}
.s467 {
  font-size: 20px;
  font-weight: 500;
}
.s468 {
  color: #777;
}
.s469 {
  background: #fca626;
  padding: 6px 16px;
  border-radius: 5px;
  font-weight: 500;
}
.s470 {
  font-size: 11px;
  font-weight: 600;
  width: 17px;
  height: 17px;
}
.s471 {
  font-size: 15px;
  color: #777;
}
.s472 {
  font-size: 15px;
}
.s473 {
  background: #fca626;
}
.s474 {
  border: 2px solid #fca626;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.s475 {
  height: 44px;
  font-size: 15px;
  padding: 0 12px;
  border: 2px solid #fca626;
  border-radius: 4px;
  outline: none;
  background-color: white;
}
.s476 {
  height: 44px;
  font-size: 15px;
  padding: 0 12px;
  border: 2px solid #fca626;
  border-radius: 4px;
  outline: none;
}
.s477 {
  border: 2px solid #fca626;
  border-radius: 4px;
  overflow: hidden;
}
.s478 {
  font-size: 14px;
}
.s479 {
  font-size: 24px;
}
.s480 {
  color: #777;
  font-size: 24px;
}
.s481 {
  font-size: 24px;
  font-weight: 500;
}
.s482 {
  background: transparent;
  padding-top: 12px;
  padding-bottom: 4px;
}
.s483 {
  flex: 2;
  height: 50px;
  font-size: 16px;
  padding: 0 12px;
  border: none;
  border-right: 1px solid #ddd;
  outline: none;
}
.s484 {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  z-index: 50;
  display: none;
  max-height: 320px;
  overflow: auto;
}
.s485 {
  height: 50px;
  font-size: 16px;
  padding: 0 12px;
  border: none;
  border-right: 1px solid #ddd;
  outline: none;
  min-width: 220px;
  background-color: white;
}
.s486 {
  flex: 1;
  height: 50px;
  font-size: 16px;
  padding: 0 12px;
  border: none;
  outline: none;
}
.s487 {
  background: #337ab7;
  color: white;
  width: 60px;
  height: 50px;
  border: none;
  cursor: pointer;
}
.s488 {
  flex: 1;
  height: 44px;
  font-size: 15px;
  padding: 0 12px;
  border: none;
  outline: none;
}
.s489 {
  background: #337ab7;
  color: white;
  width: 50px;
  height: 44px;
  border: none;
}
.s490 {
  color: #4caf50;
  font-weight: 500;
}
.s491 {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
.s492 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(33, 37, 41, 0.96);
  color: white;
  padding: 14px 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 1000;
  font-size: 14px;
}
.s493 {
  color: #ffcc66;
  text-decoration: underline;
}
.s494 {
  padding: 8px 16px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.s495 {
  background: #0e7c00;
  border-radius: 4px;
  overflow: hidden;
  min-width: 240px;
}
.s496 {
  background: rgba(0, 0, 0, 0.15);
  color: white;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ===========================================================
   [HOME] HOMEPAGE - category grid + latest listings
   (25 generated classes from Views/Home/)
   =========================================================== */
.i13 {
  font-size: 25px;
  color: #ff9900;
}
.i14 {
  font-size: 11px;
}
.i15 {
  font-size: 50px;
  color: #ddd;
}
.s305 {
  border: 1px solid #ddd;
  color: #f0960a;
  font-size: 16px;
  font-weight: 500;
  background-color: white;
}
.s306 {
  padding-top: 20px;
  padding-bottom: 10px;
}
.s307 {
  gap: 20px 20px;
}
.s308 {
  padding-bottom: 40px;
  padding-top: 10px;
}
.s309 {
  gap: 15px;
}
.s310 {
  font-size: 24px;
  font-weight: 400;
  line-height: 26.4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.s311 {
  color: rgba(14, 124, 0, 0.79);
  text-decoration: none;
}
.s312 {
  list-style: none;
  padding-left: 38px;
  margin: 0;
}
.s313 {
  font-size: 15px;
  color: #636262;
  line-height: 24px;
}
.s314 {
  color: #636262;
  text-decoration: none;
}
.s315 {
  line-height: 24px;
}
.s316 {
  color: #ff9900;
  font-size: 14px;
  text-decoration: none;
}
.s317 {
  text-align: center;
  padding: 20px 0 10px;
}
.s318 {
  display: inline-block;
  background: #fca626;
  color: white;
  padding: 12px 50px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.s319 {
  text-align: center;
  padding: 60px 0;
  color: #bbb;
}
.s320 {
  /* square picture box (height follows width), like the search grids */
  aspect-ratio: 1 / 1;
  height: auto;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s321 {
  padding: 12px;
}
.s322 {
  font-size: 15px;
  color: #337ab7;
  margin: 0 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s323 {
  font-size: 13px;
  color: #999;
  margin: 0 0 4px;
}
.s324 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s325 {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
}
.s326 {
  font-size: 16px;
  font-weight: bold;
  color: #4caf50;
}

/* ===========================================================
   [SEARCH] SEARCH RESULTS page + filters
   (17 generated classes from Views/Search/)
   =========================================================== */
.i5 {
  font-size: 40px;
  color: #ddd;
}
.s184 {
  height: 160px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s186 {
  font-size: 14px;
  color: #337ab7;
  margin: 0 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s449 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}
.s450 {
  width: 100%;
  height: 38px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s451 {
  width: 50%;
  height: 38px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s452 {
  width: 100%;
  height: 38px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s453 {
  display: flex;
  gap: 4px;
}
.s454 {
  flex: 1;
  height: 34px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}
.s455 {
  height: 34px;
  padding: 0 10px;
  background-color: white;
  color: #337ab7;
  border: 1px solid #337ab7;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.s456 {
  margin-top: 20px;
}
.s457 {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}
.s458 {
  font-size: 12px;
  color: #999;
  margin: 0 0 4px;
}
.s459 {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}
.s460 {
  font-size: 15px;
  font-weight: bold;
  color: #4caf50;
}
.s461 {
  text-align: center;
  margin-top: 20px;
}
.s462 {
  height: 1px;
}

/* ===========================================================
   [LISTING] LISTING - create, edit, detail (item page)
   (60 generated classes from Views/Listing/)
   =========================================================== */
.i16 {
  font-size: 80px;
  color: #ddd;
}
.i17 {
  font-size: 20px;
  color: #999;
}
.i18 {
  color: #999;
  width: 20px;
}
.s162 {
  margin-bottom: 15px;
}
.s178 {
  margin-top: 10px;
}
.s254 {
  color: #999;
  font-size: 13px;
}
.s294 {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  resize: vertical;
}
.s327 {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #555;
  font-weight: 500;
}
.s328 {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}
.s329 {
  display: block;
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}
.s330 {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s331 {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: #fafafa;
}
.s332 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.s333 {
  font-size: 14px;
  color: #555;
  cursor: pointer;
}
.s334 {
  width: 100%;
  height: 45px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.s335 {
  background: #f5f5f5;
  min-height: 300px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.s336 {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}
.s337 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.s338 {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.s339 {
  margin-bottom: 20px;
}
.s340 {
  display: inline-block;
  padding: 8px 14px;
  background: #337ab7;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.s341 {
  font-size: 24px;
  font-weight: 400;
  color: #333;
  margin-bottom: 8px;
}
.s342 {
  text-decoration: line-through;
  color: #999;
  font-size: 16px;
  margin-right: 8px;
}
.s343 {
  font-size: 20px;
  color: #999;
}
.s344 {
  margin-bottom: 15px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.s345 {
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.s346 {
  background: #fff3e0;
  color: #f0960a;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.s347 {
  margin-bottom: 15px;
  font-size: 15px;
  color: #555;
}
.s348 {
  margin: 10px 0 20px;
  border-radius: 6px;
  overflow: hidden;
  background: black;
}
.s349 {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 10px;
}
.s350 {
  font-size: 18px;
  font-weight: 400;
  color: #333;
  margin-bottom: 10px;
}
.s351 {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  white-space: pre-wrap;
}
.s352 {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}
.s353 {
  height: 280px;
  border-radius: 6px;
  overflow: hidden;
}
.s354 {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 20px;
  background-color: white;
}
.s355 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}
.s356 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.s357 {
  width: 50px;
  height: 50px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s358 {
  margin-bottom: 8px;
  font-size: 14px;
}
.s359 {
  display: block;
  text-align: center;
  padding: 10px;
  background: #25d366;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
}
.s360 {
  margin-top: 12px;
}
.s361 {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.s362 {
  width: 100%;
  padding: 10px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}
.s363 {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.s364 {
  padding: 0 16px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.s365 {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}
.s366 {
  width: 100%;
  padding: 10px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s367 {
  width: 100%;
  padding: 10px;
  background-color: white;
  color: #e74c3c;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s368 {
  display: block;
  text-align: center;
  padding: 10px;
  background: #337ab7;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
  margin-top: 12px;
}
.s369 {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
  background-color: white;
  margin-bottom: 15px;
}
.s370 {
  font-size: 14px;
  color: #555;
  font-weight: 500;
  margin-bottom: 10px;
}
.s371 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.s372 {
  position: relative;
  width: 110px;
}
.s373 {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.s374 {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #4caf50;
  color: white;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 3px;
}
.s375 {
  margin-top: 4px;
}
.s376 {
  width: 100%;
  padding: 4px 6px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s377 {
  display: flex;
  gap: 10px;
}
.s378 {
  flex: 1;
  height: 45px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.s379 {
  height: 45px;
  padding: 0 20px;
  background-color: white;
  color: #337ab7;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ===========================================================
   [AUTH] AUTH PAGES - user login + register
   (15 generated classes from Views/Auth/)
   =========================================================== */
.s190 {
  font-size: 24px;
  font-weight: 300;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}
.s191 {
  background: #fee;
  border: 1px solid #fcc;
  color: #c00;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
}
.s192 {
  border: 1px solid #ddd;
  padding: 25px;
  border-radius: 6px;
  background-color: white;
}
.s193 {
  margin-bottom: 12px;
}
.s194 {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #555;
}
.s196 {
  position: relative;
}
.s197 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  padding-right: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}
.s198 {
  width: 100%;
  height: 42px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.s199 {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #777;
}
.s200 {
  background: #fff8e1;
  color: #8a6d3b;
  border: 1px solid #f0d675;
  padding: 10px;
  border-radius: 4px;
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
}
.s201 {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.s202 {
  flex: 1;
  text-align: center;
  padding: 10px;
  background: #1877f2;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
}
.s203 {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
}
.s205 {
  font-size: 12px;
  color: #337ab7;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.s206 {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  color: #777;
}

/* ===========================================================
   [DASHBOARD] USER DASHBOARD - my listings, account, alerts, addresses, cart, expired, shipping, payments
   (81 generated classes from Views/Dashboard/)
   =========================================================== */
.i4 {
  font-size: 50px;
  margin-bottom: 15px;
  display: block;
}
.i6 {
  font-size: 36px;
  color: #bbb;
}
.i7 {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
}
.i8 {
  color: #ccc;
  font-size: 28px;
}
.i9 {
  font-size: 30px;
  color: #ccc;
}
.i10 {
  font-size: 30px;
  color: #ddd;
}
.s97 {
  margin: 0;
}
.s100 {
  background: #e7f7e7;
  border: 1px solid #9bd79b;
  color: #1a651a;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
}
.s158 {
  font-size: 24px;
  font-weight: 300;
  color: #333;
  margin-bottom: 10px;
}
.s182 {
  text-align: center;
  padding: 50px 0;
  color: #999;
}
.s185 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s195 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}
.s213 {
  display: flex;
  gap: 6px;
}
.s216 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 500px;
  margin-bottom: 15px;
}
.s217 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}
.s218 {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.s219 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0f0f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s220 {
  flex: 1;
}
.s221 {
  font-size: 12px;
  color: #999;
  margin: 4px 0;
}
.s222 {
  padding: 6px 14px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.s223 {
  padding: 6px 12px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 4px;
}
.s224 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 500px;
}
.s225 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}
.s226 {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 4px;
}
.s227 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 15px;
  background: #fafafa;
  color: #999;
}
.s228 {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}
.s229 {
  height: 42px;
  padding: 0 20px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.s230 {
  color: #777;
  font-size: 14px;
  margin-bottom: 20px;
}
.s231 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: white;
}
.s232 {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.s233 {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}
.s234 {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.s235 {
  color: #555;
  font-size: 14px;
}
.s236 {
  color: #999;
  font-size: 13px;
  margin-top: 4px;
}
.s237 {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.s238 {
  padding: 5px 10px;
  background-color: white;
  color: #2e7d32;
  border: 1px solid #9bd79b;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s239 {
  padding: 5px 10px;
  background-color: white;
  color: #337ab7;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s240 {
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  color: #999;
  text-align: center;
  margin-bottom: 20px;
}
.s241 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}
.s242 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  text-transform: uppercase;
}
.s243 {
  height: 40px;
  padding: 0 20px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.s244 {
  display: none;
  height: 40px;
  padding: 0 16px;
  margin-left: 8px;
  background-color: white;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s245 {
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  color: #999;
  text-align: center;
}
.s246 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s247 {
  color: #c00;
  font-size: 12px;
  margin-left: 6px;
}
.s248 {
  color: #777;
  font-size: 13px;
  margin-top: 2px;
}
.s249 {
  padding: 5px 10px;
  background-color: white;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s250 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  background-color: white;
  align-items: center;
}
.s251 {
  width: 80px;
  height: 80px;
  background: #f9f9f9;
  flex-shrink: 0;
}
.s252 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s253 {
  font-weight: 500;
  color: #337ab7;
  text-decoration: none;
}
.s255 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.s256 {
  width: 60px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}
.s257 {
  padding: 6px 10px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s258 {
  font-size: 16px;
  font-weight: bold;
  color: #4caf50;
  min-width: 80px;
  text-align: right;
}
.s259 {
  padding: 6px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s260 {
  margin-top: 15px;
  padding: 15px;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}
.s261 {
  font-size: 13px;
  color: #555;
  display: block;
  margin-bottom: 4px;
}
.s262 {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}
.s263 {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 15px;
}
.s264 {
  color: #777;
  font-size: 14px;
}
.s265 {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}
.s266 {
  padding: 10px 20px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.s267 {
  font-size: 11px;
  color: #999;
  margin-top: 8px;
  text-align: right;
}
.s269 {
  margin-top: 30px;
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  text-align: center;
  color: #999;
}
.s271 {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
}
.s272 {
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
  display: flex;
  background: #fafafa;
  overflow: hidden;
  opacity: 0.85;
  border-radius: 10px;
}
.s273 {
  width: 120px;
  min-height: 100px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s274 {
  flex: 1;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s275 {
  font-size: 15px;
  color: #337ab7;
  text-decoration: none;
  font-weight: 500;
}
.s276 {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}
.s277 {
  font-size: 16px;
  font-weight: bold;
  color: #4caf50;
  margin-top: 4px;
}
.s278 {
  padding: 6px 12px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.s279 {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #337ab7;
  text-decoration: none;
}
.s280 {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #c00;
  background-color: white;
  cursor: pointer;
}
.s281 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.s282 {
  background: #fca626;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.s283 {
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
  display: flex;
  background-color: white;
  overflow: hidden;
}
.s284 {
  width: 120px;
  min-height: 100px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s285 {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.s286 {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
}

/* ===========================================================
   [REVIEWS] REVIEWS + public profile
   (20 generated classes from Views/Review/)
   =========================================================== */
.i19 {
  font-size: 30px;
  color: #999;
}
.s268 {
  font-size: 14px;
  color: #777;
}
.s431 {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}
.s432 {
  width: 80px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s433 {
  font-size: 24px;
  font-weight: 400;
  color: #333;
  margin-bottom: 4px;
}
.s434 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}
.s435 {
  height: 140px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s436 {
  padding: 8px;
}
.s437 {
  font-size: 13px;
  color: #337ab7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s438 {
  font-size: 14px;
  font-weight: bold;
  color: #4caf50;
}
.s439 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 8px;
  background-color: white;
  border-radius: 4px;
}
.s440 {
  margin-left: 6px;
  color: #333;
}
.s441 {
  font-size: 14px;
  color: #555;
  margin-top: 6px;
}
.s442 {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
  padding-left: 15px;
  border-left: 2px solid #ddd;
}
.s443 {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 6px;
  background-color: white;
}
.s444 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}
.s445 {
  font-size: 14px;
  color: #555;
}
.s446 {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 8px;
}
.s447 {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 10px;
}
.s448 {
  padding: 8px 20px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ===========================================================
   [OFFERS] OFFERS page (buyer + seller)
   (7 generated classes from Views/Offer/)
   =========================================================== */
.s93 {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}
.s399 {
  color: #999;
  margin-bottom: 20px;
}
.s400 {
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 10px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s401 {
  font-size: 20px;
  font-weight: bold;
  color: #4caf50;
  margin-top: 4px;
}
.s402 {
  padding: 8px 16px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.s403 {
  padding: 8px 16px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.s404 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 20px 0 10px;
}

/* ===========================================================
   [ORDERS] ORDERS - sold/bought/won
   (19 generated classes from Views/Order/)
   =========================================================== */
.s405 {
  border: 1px solid #e5e5e5;
  background-color: white;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 12px;
}
.s406 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10px;
}
.s407 {
  font-size: 13px;
  color: #777;
  margin-top: 3px;
}
.s408 {
  font-size: 13px;
  color: #555;
  margin-top: 3px;
}
.s409 {
  text-align: right;
}
.s410 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.s411 {
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  margin-bottom: 10px;
}
.s412 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.s413 {
  width: 50px;
  height: 50px;
  background: #f9f9f9;
  flex-shrink: 0;
  overflow: hidden;
}
.s414 {
  flex: 1;
  font-size: 14px;
}
.s415 {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.s416 {
  font-size: 12px;
  color: #777;
  margin-bottom: 10px;
}
.s417 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.s418 {
  padding: 6px 12px;
  background: #1565c0;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s419 {
  margin: 0;
  display: flex;
  gap: 4px;
}
.s420 {
  width: 200px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
}
.s421 {
  padding: 6px 12px;
  background: #5e35b1;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s422 {
  padding: 6px 12px;
  background: #2e7d32;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s423 {
  padding: 6px 12px;
  background-color: white;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

/* ===========================================================
   [MESSAGES] MESSAGES - inbox + thread
   (10 generated classes from Views/Message/)
   =========================================================== */
.s388 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s390 {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s391 {
  color: #337ab7;
  font-size: 14px;
}
.s392 {
  margin-top: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}
.s393 {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.s394 {
  font-size: 16px;
  color: #333;
}
.s395 {
  max-height: 500px;
  overflow-y: auto;
  padding: 15px;
}
.s396 {
  padding: 15px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}
.s397 {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}
.s398 {
  height: 40px;
  padding: 0 20px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

/* ===========================================================
   [WATCHLIST] WATCHLIST page
   (4 generated classes from Views/Watchlist/)
   =========================================================== */
.s518 {
  border: 1px solid #e5e5e5;
  background-color: white;
  overflow: hidden;
  position: relative;
}
.s519 {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.s520 {
  background-color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #e74c3c;
  padding: 4px 8px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.s521 {
  text-decoration: none;
}

/* ===========================================================
   [AUCTION] AUCTIONS list
   (4 generated classes from Views/Auction/)
   =========================================================== */
.s183 {
  border: 1px solid #e5e5e5;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
}
.s187 {
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
}
.s188 {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.s189 {
  font-size: 12px;
  color: #337ab7;
  margin-top: 2px;
}

/* ===========================================================
   [FORUM] FORUM - threads + replies
   (18 generated classes from Views/Forum/)
   =========================================================== */
.i11 {
  color: #f0960a;
}
.i12 {
  color: #999;
}
.s287 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.s288 {
  padding: 8px 16px;
  background: #fca626;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.s289 {
  padding: 40px;
  text-align: center;
  color: #999;
  border: 1px dashed #ddd;
  border-radius: 6px;
}
.s290 {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
}
.s291 {
  font-weight: 500;
  color: #337ab7;
}
.s292 {
  text-align: right;
  font-size: 12px;
  color: #777;
}
.s293 {
  font-size: 11px;
  color: #999;
}
.s295 {
  margin-bottom: 6px;
}
.s296 {
  font-size: 22px;
  font-weight: 400;
  color: #333;
  margin-bottom: 4px;
}
.s297 {
  font-size: 12px;
  color: #999;
  margin-bottom: 15px;
}
.s298 {
  border: 1px solid #e5e5e5;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.s299 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.s300 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
}
.s301 {
  white-space: pre-wrap;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.s302 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-top: 10px;
}
.s304 {
  height: 38px;
  padding: 0 16px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

/* ===========================================================
   BOOKINGS
   (9 generated classes from Views/Booking/)
   =========================================================== */
.s123 {
  font-size: 13px;
  color: #777;
}
.s207 {
  font-size: 18px;
  color: #555;
  margin: 15px 0 10px;
}
.s208 {
  color: #999;
  font-size: 14px;
  padding: 15px;
  border: 1px dashed #ddd;
  border-radius: 6px;
}
.s209 {
  border: 1px solid #e5e5e5;
  background-color: white;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s210 {
  color: #337ab7;
  font-weight: 500;
}
.s211 {
  padding: 5px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s212 {
  font-size: 18px;
  color: #555;
  margin: 25px 0 10px;
}
.s214 {
  padding: 5px 10px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s215 {
  padding: 5px 10px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

/* ===========================================================
   [SUPPORT] SUPPORT TICKETS
   (14 generated classes from Views/Support/)
   =========================================================== */
.s303 {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
}
.s505 {
  font-size: 22px;
  font-weight: 400;
  color: #333;
}
.s506 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.s507 {
  font-weight: 500;
}
.s508 {
  font-size: 11px;
  color: #8a6d3b;
  background: #f0d675;
  padding: 1px 6px;
  border-radius: 3px;
}
.s509 {
  white-space: pre-wrap;
  font-size: 14px;
  color: #555;
}
.s510 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 12px;
  border-radius: 6px;
  margin-top: 10px;
}
.s511 {
  height: 34px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 6px;
}
.s512 {
  padding: 8px 16px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.s513 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.s514 {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.s515 {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}
.s516 {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
}
.s517 {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  background: #e3f2fd;
  color: #1565c0;
  align-self: start;
}

/* ===========================================================
   [MEMBERSHIP] MEMBERSHIP plans
   (9 generated classes from Views/Membership/)
   =========================================================== */
.s174 {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s380 {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 6px;
}
.s381 {
  color: #999;
  padding: 30px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  text-align: center;
}
.s382 {
  border: 1px solid #e5e5e5;
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}
.s383 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
.s384 {
  font-size: 24px;
  font-weight: 700;
  color: #4caf50;
  margin: 10px 0;
}
.s385 {
  font-size: 13px;
  color: #999;
  font-weight: 400;
}
.s386 {
  font-size: 14px;
  color: #555;
  list-style: none;
  padding: 0;
}
.s387 {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

/* ===========================================================
   [SHIPPING] SHIPPING methods page
   (9 generated classes from Views/Shipping/)
   =========================================================== */
.s204 {
  margin-bottom: 10px;
}
.s497 {
  border: 1px solid #e5e5e5;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 20px;
}
.s498 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.s499 {
  font-weight: 500;
  font-size: 15px;
}
.s500 {
  background: #e3f2fd;
  color: #337ab7;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.s501 {
  color: #999;
  font-size: 13px;
  margin-top: 3px;
}
.s502 {
  padding: 5px 10px;
  background-color: white;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.s503 {
  padding: 5px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.s504 {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

/* ===========================================================
   [ATTRS] CATEGORY ATTRIBUTES (EAV)
   (14 generated classes from Views/Attribute/)
   =========================================================== */
.s164 {
  margin-bottom: 8px;
}
.s165 {
  background: #e7f7e7;
  border: 1px solid #9bd79b;
  color: #1a651a;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.s166 {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 300px;
}
.s167 {
  border: 1px solid #e5e5e5;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 15px;
}
.s168 {
  padding: 15px;
  color: #999;
}
.s169 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.s171 {
  padding: 4px 10px;
  background-color: white;
  color: #c00;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}
.s172 {
  border: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.s173 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.s175 {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.s176 {
  font-size: 13px;
  margin-right: 15px;
}
.s177 {
  width: 80px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.s179 {
  border: 1px dashed #ddd;
  background: #fafafa;
  padding: 12px;
  border-radius: 6px;
}
.s181 {
  padding: 6px 12px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 8px;
}

/* ===========================================================
   CONDITIONAL-STATE CLASSES (used with Razor @(cond ? "..." : ""))
   These replace the last few dynamic style="..." expressions.
   =========================================================== */

/* Password-eye toggle button on Auth/Login + Auth/Register */
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 16px;
}

/* Admin Listings filter row - 5 status buttons */
.btn-filter {
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  color: #555;
  display: inline-block;
}
.btn-filter.on-primary {
  background: #337ab7;
  color: white;
  border-color: #337ab7;
}
.btn-filter.on-green {
  background: #4caf50;
  color: white;
  border-color: #4caf50;
}
.btn-filter.on-orange {
  background: #f0960a;
  color: white;
  border-color: #f0960a;
}
.btn-filter.on-red {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}
.btn-filter.on-purple {
  background: #9b59b6;
  color: white;
  border-color: #9b59b6;
}

/* Forum category filter chips (smaller) */
.btn-filter-sm {
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid #ddd;
  color: #337ab7;
  display: inline-block;
}
.btn-filter-sm.on {
  background: #337ab7;
  color: white;
  border-color: #337ab7;
}
.btn-filter-sm + .btn-filter-sm {
  margin-left: 4px;
}

/* Admin Listings: spam/unspam toggle button */
.btn-spam-toggle {
  padding: 3px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  background-color: white;
}
.btn-spam-toggle.is-spam {
  color: #e74c3c;
}
.btn-spam-toggle.is-unspam {
  color: #4caf50;
}

/* Plugin port-status badge (was inline style from StatusBadge) */
.pill {
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
}
.pill-status-done {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #9bd79b;
}
.pill-status-partial {
  background: #fff8e1;
  color: #8a6d3b;
  border: 1px solid #f0d675;
}
.pill-status-pending {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.pill-status-default {
  background: #f5f5f5;
  color: #555;
  border: 1px solid #ddd;
}

/* Order status badge (sold/bought pages) */
.pill-lg {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
  display: inline-block;
}
.pill-order-pending {
  background: #fff8e1;
  color: #8a6d3b;
  border: 1px solid #f0d675;
}
.pill-order-paid {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}
.pill-order-shipped {
  background: #ede7f6;
  color: #5e35b1;
  border: 1px solid #b39ddb;
}
.pill-order-delivered {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #9bd79b;
}
.pill-order-cancelled {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* Buyer/seller offer status pill (bigger) */
.pill-offer {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
}
.pill-offer-pending {
  background: #fff3e0;
  color: #f0960a;
}
.pill-offer-accepted {
  background: #e8f5e9;
  color: #4caf50;
}
.pill-offer-declined {
  background: #fce4ec;
  color: #e74c3c;
}

/* Chat bubbles (messages thread) */
.msg-row {
  margin-bottom: 12px;
  display: flex;
}
.msg-row.mine {
  justify-content: flex-end;
}
.msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
}
.msg-bubble.mine {
  background: #337ab7;
  color: white;
}
.msg-bubble.other {
  background: #f0f0f0;
  color: #333;
}
.msg-time {
  font-size: 11px;
  margin-top: 4px;
  color: #999;
}
.msg-time.mine {
  color: rgba(255, 255, 255, 0.7);
}

/* Inbox conversation card */
.conv-card {
  display: block;
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-bottom: 8px;
  background-color: white;
  text-decoration: none;
  border-radius: 4px;
}
.conv-card.unread {
  border-color: #fca626;
  background: #fffbf0;
}

/* Search results pagination */
.page-btn {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
  text-decoration: none;
  color: #337ab7;
}
.page-btn.current {
  background: #fca626;
  color: white;
  border-color: #fca626;
}

/* Support ticket reply (staff highlight) */
.ticket-reply {
  border: 1px solid #e5e5e5;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 8px;
  background-color: white;
}
.ticket-reply.staff {
  background: #fff8e1;
}

/* Auction card: time-remaining color */
.time-warn {
  color: #f0960a;
}
.time-urgent {
  color: #e74c3c;
}

/* [SEARCH-V2] ===============================================
   /search page - bordered sidebar + List/Grid toggle + heart
   favourite on each card. Rewritten 2026-04-18 to match the
   original marketplacenz.co.nz look.
   =========================================================== */
.sp-crumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 16px 4px;
  font-size: 13px;
  color: #888;
}
.sp-crumb a {
  color: #888;
  text-decoration: none;
}
.sp-crumb a:hover {
  color: #337ab7;
}
.sp-crumb-sep {
  margin: 0 6px;
  color: #bbb;
}
.sp-crumb-cur {
  color: #444;
}

.sp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 30px;
}
.sp-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 15px;
}
@media (max-width: 768px) {
  .sp-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar - matches Osclass Flatter theme widget pattern:
   no outer padding, each piece is its own bordered widget with a grey header. */
.sp-side {
  background: transparent;
  padding: 0;
  border: none;
  align-self: flex-start;
}
/* Mirrors Osclass Flatter:  div.widget { border + margin-bottom }
                              div.widget h3 { grey bg + bottom border }
   My class name is .sp-widget so it doesn't collide with Tailwind widget. */
.sp-widget {
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  margin-bottom: 15px;
  background-color: white;
  overflow: hidden; /* keeps inner h3 / form inside the rounded corners */
}
.sp-side-title {
  font-size: 20px;
  font-weight: 300;
  color: #444;
  margin: 0;
  padding: 6px 10px;
  background: #f9f9f9;
  border: none;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 0;
}
.sp-side-form {
  background-color: white;
  border: none;
  padding: 12px 10px;
  margin: 0;
}
.sp-side-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
  background-color: white;
  box-sizing: border-box;
}
.sp-grp {
  margin-bottom: 6px;
}
.sp-grp:last-child {
  margin-bottom: 0;
}
.sp-grp-h {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin: 0 0 6px;
}
/* Cascading category dropdowns: Category, then sub-category, then
   sub-sub-category stacked with a small gap between each level. */
.sp-cascade {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-input {
  width: 100%;
  padding: 9px 12px; /* matches .sp-side-search so all sidebar fields have identical height */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
  color: #333;
  background-color: white; /* background-color (not shorthand) so the global select chevron survives */
  box-sizing: border-box;
}
/* dropdown option list: bigger + dark so it reads clearly */
.sp-input option { color: #333; font-size: 15px; }
/* Global custom dropdown arrow for every <select> on the public site.
   -webkit-appearance: none  -> Chrome / Safari / Edge (Chromium)
   -moz-appearance: none     -> Firefox
   appearance: none          -> modern spec, future-proof.
   The SVG chevron mirrors the native Chrome caret shape and sits ~8px
   from the right edge instead of flush, giving it that small left nudge. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Thin V-shape (two strokes). Small + lighter than a solid triangle. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 26px;
}
/* Firefox-only: hides the leftover focus dotted outline on <select>. */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #444;
}
/* IE11 / legacy Edge fallback: hide the ugly default arrow. */
select::-ms-expand {
  display: none;
}
.sp-input:focus,
.sp-side-search:focus,
.sp-sort:focus,
.sp-view-btn:focus {
  outline: none;
  border-color: #337ab7;
  box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.18);
}
.sp-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sp-apply {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: #337ab7;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
}
.sp-apply:hover {
  background: #286090;
}
.sp-attr-loading {
  font-size: 12px;
  color: #888;
  padding: 4px 0 8px;
  text-align: center;
}
.sp-alert {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-alert-btn {
  padding: 8px 12px;
  background: #fca626;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}

/* Results header + list/grid toggle */
.sp-main {
  min-width: 0;
}
.sp-results-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sp-results-title {
  flex: 1;
  min-width: 200px;
}
.sp-results-h1 {
  font-size: 16px;
  font-weight: 500;
  color: #666;
}
.sp-results-sub {
  font-size: 13px;
  color: #999;
}
.sp-view-toggle {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.sp-view-btn {
  padding: 7px 14px;
  background-color: white;
  color: #555;
  text-decoration: none;
  font-size: 14px;
  border-right: 1px solid #ccc;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sp-view-btn:last-child {
  border-right: none;
}
.sp-view-btn.sp-view-on {
  background: #4caf50;
  color: white;
}
.sp-view-btn.sp-view-on:hover {
  background: #43a047;
}
.sp-sort {
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  font-size: 14px;
}

/* Empty state */
.sp-empty {
  text-align: center;
  padding: 60px 20px;
  color: #888;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}

/* Card grid / list */
.sp-cards {
  display: grid;
  gap: 14px;
}
.sp-cards-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .sp-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sp-cards-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.sp-cards-list {
  grid-template-columns: 1fr;
}
.sp-cards-list .sp-card-link {
  display: grid;
  grid-template-columns: 180px 1fr;
}
.sp-cards-list .sp-card-img {
  height: 140px;
}

.sp-card {
  position: relative;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 14px; /* same rounding as the fashion cards */
  overflow: hidden;
}
.sp-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #ccc;
}
.sp-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.sp-card-img {
  position: relative;
  height: 300px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-card-body {
  padding: 10px 12px 12px;
}
.sp-card-title {
  font-size: 15.5px;
  font-weight: 500;
  color: #333;
  margin: 0 0 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sp-card-loc {
  font-size: 13px;
  color: #999;
  margin-bottom: 6px;
}
.sp-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sp-card-was {
  color: #999;
  font-size: 13px;
  text-decoration: line-through;
}
.sp-card-now {
  color: #111827;   /* 5.png: black prices on cards, not red */
  font-size: 17px;
  font-weight: 600;
}

/* Heart favourite button on each card */
.sp-fav-form {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.sp-fav {
  background-color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  color: #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  padding: 0;
}
.sp-fav:hover {
  color: #e74c3c;
}
.sp-fav.sp-fav-on {
  color: #e74c3c;
}

.sp-sentinel {
  height: 1px;
}

/* ============================================================
   MARKETPLACENZ_RECON_2026_05_22 - reconstructed feature CSS (auction panel, reserve, bids,
   orders grid, my-listings grid, sidebar white, reviews/reply). Promoted from inline styles.
   ============================================================ */

/* ---- page bg + sidebar white ---- */
html body.bg-white { background-color: #f7f8fa; }
/* Pages that opt out of the grey app background (ViewData["BodyClass"]="page-white"). */
html body.bg-white.page-white { background-color: #fff; }
.s495 { background: #ffffff; border: 1px solid #e5e7eb; }
.s496 {
    background: #f3f4f6; color: #6b7280; font-weight: 600;
    text-transform: uppercase; font-size: 12px; letter-spacing: 0.4px;
    border-bottom: 1px solid #e5e7eb;
}
.s495 a:hover { background: #f9fafb; }

/* ---- right-column auction panel ---- */
.listing-right-col { display: flex; flex-direction: column; gap: 12px; }
.auction-panel-right { border: 1px solid #fde68a; background: #fffbeb; padding: 14px 16px; border-radius: 8px; width: 100%; box-sizing: border-box; }
.auction-panel-status { font-size: 13px; color: #92400e; font-weight: 700; margin-bottom: 8px; }
.auction-panel-rows { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.auction-panel-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.auction-panel-rows .apl { color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.auction-panel-rows strong { font-size: 14px; color: #111827; }
.auction-panel-rows .reserve-badge { justify-content: space-between; width: 100%; margin-top: 4px; }
.auction-bid-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.auction-bid-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.auction-bid-btn { width: 100%; background: #f59e0b; color: white; padding: 10px 16px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.auction-bid-btn:hover { background: #d97706; }
.auction-buynow-btn { width: 100%; background: #16a34a; color: white; padding: 10px 16px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.auction-buynow-btn:hover { background: #15803d; }
.auction-login-prompt { margin-top: 10px; text-align: center; font-size: 13px; }
.auction-login-prompt a { color: #0891b2; text-decoration: underline; }

/* ---- BIDS trigger (blue, right-aligned, opens modal) ---- */
.bids-trigger { cursor: pointer; user-select: none; }
.bids-trigger .apl { color: #0891b2; font-weight: 600; }
.bids-trigger strong { color: #0891b2; }
.bids-trigger-right { display: inline-flex; align-items: baseline; gap: 4px; }
.bids-trigger:hover .apl, .bids-trigger:hover strong { text-decoration: underline; }

/* ---- reserve badge ---- */
.reserve-badge { margin-top: 4px; padding: 4px 10px; border-radius: 4px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.reserve-met { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.reserve-not-met { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.reserve-status { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }

/* ---- bid history table + modal ---- */
body.bid-modal-open { overflow: hidden; }
.bid-modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.bid-modal-overlay[hidden] { display: none; }
.bid-modal { background: #fff; border-radius: 8px; max-width: 640px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.bid-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.bid-modal-title { font-weight: 600; font-size: 16px; color: #111827; }
.bid-history-count { color: #6b7280; font-weight: 400; font-size: 13px; }
.bid-modal-close { background: transparent; border: none; font-size: 24px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 6px; }
.bid-modal-close:hover { color: #111827; }
.bid-modal-body { overflow-y: auto; padding: 0; }
.bid-history-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.bid-history-table th { text-align: left; padding: 8px 12px; background: #f9fafb; color: #6b7280; font-weight: 600; font-size: 12px; }
.bid-history-table td { padding: 8px 12px; border-top: 1px solid #f3f4f6; color: #374151; }
.bid-history-table .bid-amount-col { text-align: right; }
.bid-history-table .bid-when { color: #6b7280; font-size: 12px; }
.bid-history-table .bid-winning { background: #fffbeb; }
.bid-history-table .bid-winning td { color: #92400e; }

/* ---- orders: filter tabs, banner, tracking, grid cards, feedback ---- */
.order-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; }
.feedback-prompt-banner { background: #fef3c7; border: 1px solid #fbbf24; color: #92400e; padding: 10px 14px; border-radius: 6px; margin: 8px 0 12px; font-size: 14px; }
.tracking-link { color: #0891b2; text-decoration: underline; }
.order-items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.order-item-card { border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; padding: 8px; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; }
.order-item-thumb-link { flex: 0 0 64px; width: 64px; height: 64px; background: #f3f4f6; border-radius: 4px; overflow: hidden; display: block; }
.order-item-thumb { width: 64px; height: 64px; object-fit: cover; display: block; }
.order-item-thumb-empty { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.order-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.listing-title-link { color: #0891b2; text-decoration: none; font-weight: 600; line-height: 1.3; font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.listing-title-link:hover { text-decoration: underline; }
.listing-removed { color: #6b7280; }
.order-item-meta { font-size: 11px; color: #6b7280; }
.order-item-total { font-size: 13px; font-weight: 700; color: #111827; }
@media (max-width: 900px) { .order-items-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .order-items-grid { grid-template-columns: 1fr; } }
.order-feedback { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.order-feedback-shown { font-size: 13px; color: #374151; }
.feedback-comment-shown { color: #6b7280; }
.stars-on { color: #fbbf24; }
.stars-off { color: #d1d5db; }
.feedback-summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #0891b2; }
.order-feedback-form { margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.feedback-rating { padding: 6px; border: 1px solid #d1d5db; border-radius: 4px; }
.feedback-comment { flex: 1; min-width: 240px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.feedback-submit { background: #16a34a; color: white; padding: 6px 14px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.tracking-edit-form { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; }
.tracking-edit-input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; width: 180px; }
.tracking-edit-btn { background: #6b7280; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tracking-edit-btn:hover { background: #4b5563; }

/* ---- my-listings 3-per-row grid ---- */
.my-listings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0; }
@media (max-width: 900px) { .my-listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .my-listings-grid { grid-template-columns: 1fr; } }
.my-listing-card { background: white; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.my-listing-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: #ccc; }
.my-listing-card-link { display: block; text-decoration: none; color: inherit; }
.my-listing-card-img { position: relative; height: 300px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.my-listing-card-img img { width: 100%; height: 100%; object-fit: cover; }
.my-listing-card-body { padding: 10px 12px; }
.my-listing-card-title { font-size: 14px; font-weight: 600; color: #0891b2; margin: 0 0 4px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.my-listing-card-loc { font-size: 12px; color: #999; margin-bottom: 4px; }
.my-listing-card-price { font-size: 15px; font-weight: 700; color: #16a34a; margin-bottom: 6px; }
.my-listing-card-stats { font-size: 11px; color: #6b7280; }
.my-listing-card-actions { display: flex; gap: 6px; padding: 8px 12px 12px; margin-top: auto; border-top: 1px solid #f3f4f6; padding-top: 10px; }
.my-listing-btn { flex: 1; text-align: center; padding: 6px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.my-listing-btn-view { color: #374151; }
.my-listing-btn-view:hover { background: #f9fafb; }
.my-listing-btn-edit { color: #0891b2; border-color: #0891b2; }
.my-listing-btn-edit:hover { background: #ecfeff; }
.my-listing-btn-del { color: #dc2626; border-color: #fecaca; }
.my-listing-btn-del:hover { background: #fef2f2; }
.my-listing-del-form { flex: 1; display: flex; margin: 0; }
.my-listing-del-form .my-listing-btn { width: 100%; }

/* ---- reviews-section on /user/{id} ---- */
.reviews-section { max-width: 760px; margin: 24px auto; font-size: 14px; }
.feedback-header { margin-bottom: 12px; }
.profile-review-form { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; margin-bottom: 18px; background: #fafafa; }
.profile-review-rating-row { margin-bottom: 8px; }
.profile-review-label { font-weight: 600; }
.profile-review-comment { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.profile-review-form .feedback-submit { margin-top: 8px; padding: 8px 18px; }
.review-row { border-bottom: 1px solid #eee; padding: 10px 0; }
.review-row-head { display: flex; justify-content: space-between; }
.review-date { color: #888; font-size: 12px; }
.review-comment { margin-top: 6px; color: #374151; }
.review-reply { margin-top: 6px; margin-left: 12px; padding: 6px 10px; border-left: 3px solid #0891b2; background: #f0f9ff; color: #0c4a6e; font-size: 13px; }
.reply-details { margin-top: 6px; }
.reply-summary { cursor: pointer; font-size: 12px; color: #0891b2; font-weight: 600; }
.review-reply-form { margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; }
.reply-input { flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
.reply-submit { background: #0891b2; color: white; padding: 6px 12px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 13px; }
.review-remove-form { display: inline; margin-top: 6px; }
.review-remove { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 12px; padding: 0; }


/* LOCATION_AUTOCOMPLETE_2026_05_22 */
.loc-autocomplete { position: relative; }
.loc-suggest { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 6px 6px; z-index: 50; max-height: 240px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.loc-suggest[hidden] { display: none; }
.loc-suggest-item { padding: 8px 10px; font-size: 13px; cursor: pointer; }
.loc-suggest-item:hover { background: #f0f9ff; color: #0891b2; }

/* ADMIN_LOCATIONS_2026_05_22 */
.loc-page-head{margin-bottom:14px}.loc-page-head h1{margin:4px 0}.loc-page-head .blurb{color:#6b7280;font-size:13px}
.loc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.loc-col{border:1px solid #e5e7eb;border-radius:6px;background:#fff;max-height:560px;overflow-y:auto}
.loc-col-head{position:sticky;top:0;background:#f9fafb;border-bottom:1px solid #e5e7eb;padding:8px 12px;font-weight:600;font-size:13px;color:#374151}
.loc-row{padding:7px 12px;border-bottom:1px solid #f3f4f6;font-size:13px}
.loc-row a.loc-more{color:#0891b2;text-decoration:none;display:block}
.loc-row a.loc-more:hover{text-decoration:underline}
.loc-row.loc-active{background:#ecfeff}
.loc-count{color:#9ca3af;font-size:11px}
.loc-empty{padding:12px;color:#9ca3af;font-size:13px}
.loc-search{padding:8px 12px;border-bottom:1px solid #e5e7eb}
.loc-search input{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;font-size:13px}
@media(max-width:760px){.loc-cols{grid-template-columns:1fr}}

/* HIDE_NUMBER_SPINNERS_2026_05_22 - remove native up/down stepper arrows on every number input (front + admin) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* AV_CASCADE_GAP_2026_05_23 - 5px gap between cascading attribute dropdowns (search + post-ad) */
.av-cascade-wrap{display:flex;flex-direction:column;gap:6px}

/* CAT_CASCADE_POST_2026_05_23 - cascading category level dropdowns on the post-ad form */
.cat-cascade-post{display:flex;flex-direction:column;gap:6px}

#attrFilters:not(:empty){margin-bottom:6px}

#attrFilters .sp-grp:not(:last-child){margin-bottom:12px}

/* Category cascade "Dotted-line separator" (admin per-category toggle): a greyed,
   non-selectable divider row shown after a category in the sub-category dropdown. */
.sp-sep { color: #9aa0a6; font-family: monospace; letter-spacing: -1px; }

/* ── Dropdowns: long option text ellipsizes ("...") before the chevron instead of
   running underneath it. select[class] out-specifies class padding shorthands
   (e.g. .sp-input's `padding: 9px 12px`) that were killing the right padding. ── */
select {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
select[class] {
  padding-right: 28px;
}


/* Attribute "CHECKBOX" search type: tickable value list with round colour swatches */
.sp-attr-checks { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow: auto; }
.sp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: #374151; }
.sp-check input { accent-color: #f97316; width: 15px; height: 15px; flex-shrink: 0; }
.sp-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); display: inline-block; flex-shrink: 0; }


/* CHECKBOX search type v2: compact select-look dropdown + WHITE checkboxes (user 1.png). */
.sp-checkdrop { position: relative; }
.sp-checkdrop-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: #fff; cursor: pointer; text-align: left;
}
.sp-checkdrop-caret { color: #6b7280; font-size: 11px; margin-left: 8px; }
.sp-checkdrop-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); padding: 10px 12px;
    max-height: 280px; overflow: auto;
}
.sp-attr-checks { max-height: none; }
.sp-check input {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; border: 1.5px solid #d1d5db; border-radius: 4px;
    background: #fff; position: relative; cursor: pointer; accent-color: unset;
}
.sp-check input:checked { background: #fff; border-color: #6b7280; }
.sp-check input:checked::after {
    content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
    border: solid #374151; border-width: 0 2px 2px 0; transform: rotate(45deg);
}


/* CHECKBOX dropdown v3: bigger boxes + Clear all + type-to-search header */
.sp-check input { width: 18px; height: 18px; }
.sp-check input:checked::after { left: 5.5px; top: 2px; width: 4.5px; height: 9px; }
.sp-checkdrop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sp-checkdrop-find {
    flex: 1; min-width: 0; padding: 7px 10px; font-size: 13.5px;
    border: 1px solid #d1d5db; border-radius: 6px; outline: none;
}
.sp-checkdrop-find:focus { border-color: #f97316; }
.sp-checkdrop-clear {
    background: none; border: 0; color: #2f6fb3; font-size: 13px;
    cursor: pointer; white-space: nowrap; padding: 0; margin-left: auto;
}
.sp-checkdrop-clear:hover { text-decoration: underline; }


/* Checkbox-dropdown caret: same SVG chevron as the native category selects (user 1.png) */
.sp-checkdrop-btn { position: relative; padding-right: 36px; }
.sp-checkdrop-caret {
    font-size: 0;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; margin-left: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: center;
}


/* Dropdown option rows: light grey hover highlight */
.sp-check { padding: 5px 8px; margin: 0 -4px; border-radius: 6px; }
.sp-check:hover { background: #f3f4f6; }


/* "Clear filters" link under Apply Filters */
.sp-clearfilters {
    display: block; text-align: center; margin-top: 9px;
    color: #2f6fb3; font-size: 13.5px; text-decoration: none;
}
.sp-clearfilters:hover { text-decoration: underline; }


/* "Clear filter" text in the sidebar header row */
.sp-side-title { display: flex; align-items: center; justify-content: space-between; }
.sp-clearfilters-top {
    font-size: 13px; font-weight: 400; color: #2f6fb3;
    text-decoration: none; white-space: nowrap; margin-left: 10px;
}
.sp-clearfilters-top:hover { text-decoration: underline; }


/* No horizontal scrollbar in the checkbox dropdown (the hover rows' negative
   margin was pushing content wider than the panel). */
.sp-checkdrop-panel { overflow-x: hidden; }
.sp-check { margin: 0; }


/* Grouped dropdown values (Age / Size -> Male / Female group headers) */
.sp-check-group { margin-bottom: 4px; }
.sp-check-group-h {
    font-size: 12px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.5px; margin: 8px 0 4px;
}


/* Open dropdown panels must stack above every other filter group */
.sp-checkdrop { position: relative; }
.sp-checkdrop:has(.sp-checkdrop-panel:not([hidden])) { z-index: 400; }
.sp-checkdrop-panel { z-index: 500; }


/* Post-ad form: colour attribute as round-swatch dropdown (matches sidebar search) */
.av-swatchdrop .sp-checkdrop-btn { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
.av-swatchdrop .sp-dot[hidden] { display: none; }
.av-swatch-row { cursor: pointer; }


/* Post-ad form: UK / US / EU sizes - three labelled fields in one row */
.av-intl-row { display: flex; gap: 14px; }
.av-intl-field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.av-intl-field .s328 { width: 100%; }
.av-intl-flabel { min-width: 22px; color: #6b7280; font-size: 13px; }
@media (max-width: 640px) { .av-intl-row { flex-direction: column; gap: 8px; } }

/* Listing detail: international size line under the title */
.ld-intl-size { margin: 6px 0 2px; font-size: 14px; color: #374151; }


/* ── Post-a-listing category chooser (step 1) + property pricing options ── */
.lc-sub { color: #666; margin: 4px 0 18px; }
.lc-searchwrap { position: relative; margin-bottom: 20px; }
.lc-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.lc-suggest-item { display: block; padding: 9px 13px; font-size: 14px; color: #333; text-decoration: none; }
.lc-suggest-item:hover { background: #fff7ed; color: #f0960a; }
.lc-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; }
.lc-list li + li { border-top: 1px solid #f0f0f0; }
.lc-list a { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 17px; font-weight: 600; color: #374151; text-decoration: none; }
.lc-list a:hover { background: #fff7ed; color: #f0960a; }
.lc-arrow { color: #bbb; font-size: 18px; line-height: 1; }
.lc-changecat { font-size: 13px; font-weight: 400; margin-left: 10px; color: #337ab7; text-decoration: none; }
.lc-changecat:hover { text-decoration: underline; }
.prop-opt { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.prop-opt:last-child { margin-bottom: 4px; }
.prop-lbl { display: flex; align-items: center; gap: 8px; width: 170px; font-weight: 600; color: #333; flex: 0 0 auto; }
.prop-val { flex: 1; max-width: 340px; }
.prop-val:disabled { background: #f5f5f5; }
/* From-to range (e.g. Per hour pay) */
.prop-range { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 360px; }
.prop-range .prop-range-in { flex: 1; max-width: none; }
.prop-range-sep { color: #888; font-size: 14px; }

/* Navbar username links to the account page */
a.nav-user { text-decoration: none; color: inherit; cursor: pointer; }
a.nav-user:hover { color: #f0960a; }

/* ============ Jobs dashboard (Job Seeker / Employer) ============ */
.jd-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jd-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #eef1f6; margin: 14px 0 20px; }
.jd-tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; gap: 7px; }
.jd-tab:hover { color: #2b50ec; }
.jd-tab-on { color: #16234f; border-bottom-color: #2b50ec; }
.jd-count { background: #eef1f6; color: #475569; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.jd-tab-on .jd-count { background: #e0e7ff; color: #2b50ec; }

.jd-list { display: flex; flex-direction: column; gap: 12px; }
.jd-card { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; background: #fff; border: 1px solid #e7e9f2; border-radius: 12px; padding: 16px 18px; }
.jd-card-main { min-width: 0; flex: 1; }
.jd-title { font-size: 16px; font-weight: 700; color: #0f172a; text-decoration: none; }
.jd-title:hover { color: #2b50ec; }
.jd-sub { font-size: 13.5px; color: #475569; margin-top: 3px; }
.jd-meta { font-size: 13px; color: #64748b; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jd-pay { color: #047857; font-weight: 700; }
.jd-dot { color: #cbd5e1; }
.jd-chip { background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 9px; }
.jd-chip-green { background: #dcfce7; color: #166534; }
.jd-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.jd-actform { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.jd-btn { display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.jd-btn-primary { background: #2b50ec; color: #fff; }
.jd-btn-primary:hover { background: #2340c8; }
.jd-btn-ghost { background: #fff; color: #334155; border-color: #d5dbe6; }
.jd-btn-ghost:hover { background: #f8fafc; }

.jd-st { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 11px; }
.jd-st-app { background: #e0e7ff; color: #3730a3; }
.jd-st-short { background: #dcfce7; color: #166534; }
.jd-st-rej { background: #fee2e2; color: #991b1b; }

.jd-empty { background: #f8fafc; border: 1px dashed #d5dbe6; border-radius: 12px; padding: 26px; text-align: center; color: #64748b; font-size: 14px; }
.jd-empty a { color: #2b50ec; font-weight: 600; }

.jd-panel { background: #fff; border: 1px solid #e7e9f2; border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
.jd-panel-h { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.jd-muted { color: #64748b; font-size: 13.5px; margin: 0 0 12px; }
.jd-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.jd-label { font-size: 13px; font-weight: 600; color: #334155; margin-top: 4px; }
.jd-input, .jd-textarea, .jd-file { width: 100%; border: 1px solid #d5dbe6; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: #0f172a; }
.jd-input:focus, .jd-textarea:focus { outline: none; border-color: #2b50ec; box-shadow: 0 0 0 3px rgba(43,80,236,.12); }
.jd-textarea { resize: vertical; }
.jd-hint { font-size: 12px; color: #94a3b8; }
.jd-cv-current { font-size: 14px; margin: 0 0 12px; }
.jd-cv-current a, .jd-cv-link a, .jd-cv-link { color: #2b50ec; font-weight: 600; }
.jd-cover { margin-top: 10px; font-size: 13.5px; }
.jd-cover summary { cursor: pointer; color: #2b50ec; font-weight: 600; }
.jd-cover p { margin: 8px 0 0; color: #334155; white-space: pre-wrap; }

.jd-back { display: inline-block; margin-bottom: 12px; color: #2b50ec; font-weight: 600; text-decoration: none; font-size: 14px; }
.jd-apply-h { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 14px; }
.jd-apply-job { background: #f8fafc; border: 1px solid #e7e9f2; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.jd-apply-title { font-size: 17px; font-weight: 700; color: #0f172a; }
.jd-cvnote { font-size: 13.5px; color: #475569; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 9px; padding: 11px 14px; }
.jd-cvnote a { color: #2b50ec; font-weight: 600; }

/* Detail-page apply button for jobs */
.ld-apply-job { display: inline-block; background: #2b50ec; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 10px; text-decoration: none; }
.ld-apply-job:hover { background: #2340c8; }

@media (max-width: 640px) {
  .jd-card { flex-direction: column; }
  .jd-card-side { align-items: stretch; width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* Cascading location filter (region -> district -> suburb) */
.sp-loc-cascade { display: flex; flex-direction: column; gap: 8px; }
.sp-loc-sel { width: 100%; }
.sp-loc-sel:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

/* jobs multi-location picker modal (Z Property style) */
.jb-loc-trigger { cursor: pointer; caret-color: transparent; }
.jbloc-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 80px 16px; }
.jbloc-modal[hidden] { display: none; }
.jbloc-box { background: #fff; border-radius: 14px; width: 100%; max-width: 720px; box-shadow: 0 30px 70px rgba(9,14,40,.4); padding: 18px 20px 22px; }
.jbloc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.jbloc-title { color: #64748b; font-size: 13px; }
.jbloc-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.jbloc-clear { background: #fff; border: 1px solid #d5dbe6; color: #334155; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.jbloc-clear:hover { background: #f8fafc; }
.jbloc-done { background: #2b50ec; border: none; color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }
.jbloc-done:hover { background: #2340c8; }
.jbloc-searchwrap { position: relative; }
.jbloc-input { width: 100%; height: 46px; border: 2px solid #2b50ec; border-radius: 10px; padding: 0 14px; font-size: 15px; box-sizing: border-box; }
.jbloc-input:focus { outline: none; }
.jbloc-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 14px 34px rgba(9,14,40,.2); z-index: 5; max-height: 300px; overflow-y: auto; }
.jbloc-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f1f5f9; }
.jbloc-item:last-child { border-bottom: none; }
.jbloc-item:hover, .jbloc-item.jbloc-on { background: #eff2fb; }
.jbloc-nm { color: #0f172a; font-weight: 500; }
.jbloc-typ { color: #94a3b8; font-size: 12px; }
.jbloc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; min-height: 6px; }
.jbloc-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2ff; color: #2b50ec; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 6px 6px 6px 12px; }
.jbloc-x { background: none; border: none; color: #2b50ec; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.jbloc-x:hover { background: #dbe2ff; }


/* Listing form: single location autosuggest (create/edit) */
.loc-sugg-wrap { position: relative; }
.loc-sugg-panel { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.08); max-height: 280px; overflow-y: auto; }
.loc-sugg-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.9rem; }
.loc-sugg-row:hover { background: #f3f4f6; }
.loc-sugg-sub { color: #9ca3af; font-size: 0.75rem; margin-left: 0.75rem; white-space: nowrap; }


/* Header search: radius select + location typeahead panel */
select.s485.hdr-radius { min-width: 0; flex: 0 1 auto; width: 150px; }
select.hdr-radius:disabled { opacity: 0.55; cursor: not-allowed; }
select.s475.hdr-radius { max-width: 100%; }
.hdr-loc-panel { position: fixed; z-index: 60; }
/* let the whole desktop row shrink instead of clipping the radius;
   keyword field gets the lion's share, location capped so the bar has no big gap (5.png) */
.s474 .s483 { min-width: 0; flex: 3 1 auto; }
.s474 .s486 { min-width: 0; flex: 1 1 150px; max-width: 260px; }
.s474 .s487 { flex: 0 0 60px; }
@media (min-width: 768px) and (max-width: 1150px) {
  .s474 select.s485 { min-width: 130px; font-size: 14px; }
  select.s485.hdr-radius { width: 120px; }
}


/* Search sidebar: radius under the single location field */
.sp-loc-cascade .sp-radius { margin-top: 8px; }
.sp-loc-cascade .sp-radius:disabled { opacity: 0.55; }

/* lg: variants for the top search bar (compiled tailwind sheet lacks them) */
@media (min-width: 1024px) {
  form.lg\:flex { display: flex; }
  form.lg\:hidden { display: none; }
}

/* wider search buttons in the top bar (desktop row + stacked view) */
.s474 button.s487 { flex: 0 0 90px; width: 90px; }
button.s489 { flex: 0 0 60px; }


/* Post form: hidden until the preselected category chain finishes loading (no flash) */
.lc-preloading { visibility: hidden; }
.lc-preloader { padding: 48px 0; text-align: center; color: #8892a0; font-size: 15px; }


/* Multi-tick attribute grid on the post form (car Features etc.) */
.av-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; padding: 4px 0; }
.av-check { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #444; cursor: pointer; }


/* Item page: attribute spec block */
.item-attrs { display: grid; grid-template-columns: 1fr; gap: 6px; }
.item-attr-row { display: flex; gap: 12px; font-size: 14px; border-bottom: 1px dashed #eef1f5; padding: 4px 0; }
.item-attr-k { flex: 0 0 190px; color: #66707a; }
.item-attr-v { color: #333; }


/* Motors top pill strip (admin toggle: motors_pills_enabled) */
.motors-pills { background: #fff; border-bottom: 1px solid #eef1f5; }
.motors-pills-inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.motors-pill { display: inline-block; padding: 5px 13px; border: 1px solid #bcd3ee; border-radius: 7px; color: #2563eb; font-size: 13.5px; text-decoration: none; background: #fff; }
.motors-pill:hover { background: #eff5ff; }
.motors-pill.on { background: #2563eb; border-color: #2563eb; color: #fff; }


/* Grouped multi-tick attribute (Services, 700+ values): filter box + collapsible groups */
.av-grouped { border: 1px solid #e2e6ec; border-radius: 8px; padding: 10px; max-height: 430px; overflow-y: auto; background: #fff; }
.av-filter { width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; margin-bottom: 8px; box-sizing: border-box; }
.av-group { border-bottom: 1px solid #f0f2f6; padding: 2px 0; }
.av-group:last-child { border-bottom: none; }
.av-group summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #2d3748; padding: 7px 2px; list-style-position: inside; }
.av-group summary:hover { color: #2f6df6; }
.av-group .av-checks { padding: 2px 0 8px 18px; }


/* No left sidebar: results grid gains the sidebar width, so show 4 across (1.png).
   Pages WITH a left search (standard sidebar or Motors .ml-side) stay at 3. */
body.svcportal .sp-cards-grid,
body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
body.jobboard:not(.jobboard-search) .sp-cards-grid,
body.zproperty:not(.zp-showfilters) .sp-cards-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  body.svcportal .sp-cards-grid,
  body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
  body.jobboard:not(.jobboard-search) .sp-cards-grid,
  body.zproperty:not(.zp-showfilters) .sp-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  body.svcportal .sp-cards-grid,
  body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
  body.jobboard:not(.jobboard-search) .sp-cards-grid,
  body.zproperty:not(.zp-showfilters) .sp-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body.svcportal .sp-cards-grid,
  body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
  body.jobboard:not(.jobboard-search) .sp-cards-grid,
  body.zproperty:not(.zp-showfilters) .sp-cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}


/* Business seller card + listing agent (TradeMe-style) */
.biz-card { padding: 4px 0 10px; border-bottom: 1px solid #f0f2f6; margin-bottom: 10px; }
.biz-logo { max-height: 54px; max-width: 200px; object-fit: contain; margin-bottom: 8px; display: block; }
.biz-name { font-size: 17px; font-weight: 800; color: #16213a; }
.biz-type { font-size: 13px; color: #2f6df6; font-weight: 600; margin-top: 2px; }
.biz-phone { font-size: 14px; color: #333; margin-top: 6px; }
.biz-rea { font-size: 12px; color: #66707a; margin-top: 6px; }
.agent-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.agent-card-photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #eef1f5; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; }
.agent-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-card-name { font-weight: 700; color: #16213a; }
.agent-card-role { font-size: 12.5px; color: #66707a; }
.agent-card-phone { font-size: 14px; color: #333; margin-top: 4px; }
.agent-card-lic { font-size: 11.5px; color: #66707a; margin-top: 3px; }

/* Dashboard: business upgrade + agents */
.biz-upgrade-tab { margin-top: 0; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px; padding: 18px 22px 22px; }
.biz-upgrade-card { margin-top: 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 18px 22px 22px; }
.biz-note { color: #667; font-size: 14px; margin: 6px 0 12px; }
.biz-notice { background: #eafaf0; border: 1px solid #bfe8cf; color: #1e7a44; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.biz-error { background: #fdecea; border: 1px solid #f5c6c0; color: #a4372b; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.biz-pending { background: #fff8e6; border: 1px solid #f1dfa8; color: #8a6d1a; border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.biz-current p { margin: 0 0 6px; font-size: 14.5px; }
.biz-lic { color: #66707a; font-size: 13px; }
.biz-agents-link { display: inline-block; margin-top: 8px; color: #2f6df6; font-weight: 700; text-decoration: none; }
.agents-wrap { max-width: 760px; }
.agents-grid { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 26px; }
.agent-tile { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; padding: 12px 14px; }
.agent-tile-photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #eef1f5; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; }
.agent-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-tile-body { flex: 1; }
.agent-tile-name { font-weight: 700; color: #16213a; }
.agent-tile-line { font-size: 13.5px; color: #444; }
.agent-tile-lic { font-size: 12px; color: #66707a; margin-top: 2px; }
.agent-del { padding: 6px 13px; background: #fff; color: #c0392b; border: 1px solid #e3b6b0; border-radius: 6px; cursor: pointer; font-size: 13px; }
.agent-form { max-width: 440px; }


/* Offer-to-watchers (seller box on own listing) + buyer side highlight */
.sw-note { font-size: 13.5px; color: #555; margin: 0 0 10px; }
.sw-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sw-hours { flex: 0 0 120px; }
.sw-send { width: 100%; margin-top: 8px; }
.sw-offer { border-left: 4px solid #f7a600; }


/* TradeMe-style property detail header */
.pd-address { font-size: 16px; color: #444; margin: 4px 0 10px; }
.pd-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; align-items: center; }
.pd-fact { background: #f2f5f9; border: 1px solid #e2e8f0; border-radius: 7px; padding: 6px 12px; font-size: 13.5px; color: #333; }
.pd-fact b { color: #16213a; }
.pd-fact-id { background: transparent; border-color: transparent; color: #8a94a0; margin-left: auto; }

/* Agency banner card (property/dealer sidebar) */
.biz-band { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #14264c, #1e3a6e); border-radius: 10px 10px 0 0; padding: 12px 14px; }
.biz-band-logo { background: #fff; border-radius: 7px; padding: 4px 8px; display: inline-flex; align-items: center; }
.biz-band-logo img { max-height: 34px; max-width: 120px; object-fit: contain; display: block; }
.biz-band-name { color: #fff; font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.biz-card-banded { border-bottom: 1px solid #f0f2f6; padding: 10px 2px; margin-bottom: 8px; }
.agents-row { display: flex; flex-direction: column; gap: 4px; }
.agents-row-two { flex-direction: row; gap: 12px; }
.agents-row-two .agent-card { flex: 1; flex-direction: column; align-items: center; text-align: center; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 12px 8px; }
.agents-row-two .agent-card-photo { width: 64px; height: 64px; flex-basis: auto; margin-bottom: 6px; }
.agent-card-call { display: inline-block; font-size: 14px; font-weight: 700; color: #2f6df6; text-decoration: none; margin-top: 4px; }
.agent-card-call:hover { text-decoration: underline; }
.biz-rea-foot { border-top: 1px solid #f0f2f6; padding-top: 8px; margin-top: 6px; }


/* Property detail page: mockup design (rounded gallery, stacked fact cards, price band) */
.pd-page .s335 { background: transparent; }
.pd-page .pd-gallery { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 10px; box-shadow: 0 1px 5px rgba(20,30,60,.06); }
.pd-page .s336 { width: 100%; height: 450px; object-fit: cover; border-radius: 8px; }
.pd-page .s337 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; margin-bottom: 0; }
.pd-page .s338 { width: 100%; height: 92px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .88; transition: .15s; }
.pd-page .s338:hover { opacity: 1; transform: translateY(-2px); }
.pd-page .s341 { font-size: 27px; line-height: 1.25; color: #16213a; }
.pd-page .pd-facts { gap: 10px; }
.pd-page .pd-fact { background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 16px; text-align: center; min-width: 92px; }
.pd-page .pd-fact b { display: block; font-size: 17px; color: #14264c; }
.pd-page .pd-fact span { font-size: 12px; color: #6a7482; }
.pd-page .pd-fact-id { background: transparent; border-color: transparent; color: #8a94a0; align-self: center; }
.pd-page .s24 { display: block; background: #fff; border-left: 5px solid #f7a600; border-radius: 10px; padding: 14px 18px; font-size: 20px; font-weight: 800; color: #16213a; box-shadow: 0 1px 4px rgba(20,30,60,.06); }
@media (max-width: 760px) { .pd-page .s336 { height: 300px; } .pd-page .s337 { grid-template-columns: repeat(3, 1fr); } }


/* My Agents dashboard page */
.agx-sub { color: #667; font-size: 14px; margin: 4px 0 16px; }
.agx-empty { background: #fff; border: 1px dashed #cdd6e1; border-radius: 12px; padding: 34px; text-align: center; color: #55606e; display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 22px; }
.agx-empty b { font-size: 16px; color: #16213a; }
.agx-empty span { font-size: 13.5px; max-width: 380px; }
.agx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 26px; }
.agx-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 18px 14px 14px; text-align: center; box-shadow: 0 1px 5px rgba(20,30,60,.05); }
.agx-photo { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #eef1f5; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.agx-photo img { width: 100%; height: 100%; object-fit: cover; }
.agx-name { font-weight: 800; font-size: 15.5px; color: #16213a; }
.agx-role { font-size: 12px; color: #6a7482; margin-bottom: 6px; }
.agx-phone { display: inline-block; font-weight: 700; font-size: 14px; color: #2f6df6; text-decoration: none; }
.agx-line { font-size: 12.5px; color: #55606e; margin-top: 3px; word-break: break-all; }
.agx-lic { font-size: 11px; color: #8a94a0; margin-top: 7px; line-height: 1.45; }
.agx-del { margin-top: 10px; padding: 6px 16px; background: #fff; color: #c0392b; border: 1px solid #e3b6b0; border-radius: 7px; cursor: pointer; font-size: 13px; }
.agx-del:hover { background: #fdecea; }
.agx-form-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 18px; }
.agx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
@media (max-width: 700px) { .agx-form-grid { grid-template-columns: 1fr; } }


/* agent edit controls */
.agx-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; align-items: center; }
.agx-actions .agx-del { margin-top: 0; }
.agx-edit { padding: 6px 16px; background: #fff; color: #2f6df6; border: 1px solid #bcd3ee; border-radius: 7px; font-size: 13px; text-decoration: none; }
.agx-edit:hover { background: #eff5ff; }
.agx-cancel { margin-left: 10px; color: #66707a; font-size: 14px; text-decoration: none; }
.agx-cancel:hover { text-decoration: underline; }


/* agent pause + listing filter */
.agx-paused { background: #fdecea; color: #a4372b; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 9px; vertical-align: middle; }
.agx-pause { padding: 6px 14px; background: #fff; color: #8a6d1a; border: 1px solid #e6d9a8; border-radius: 7px; cursor: pointer; font-size: 13px; }
.agx-pause:hover { background: #fff8e6; }
.agx-enable { padding: 6px 14px; background: #1e9e57; color: #fff; border: none; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 700; }
.agx-enable:hover { background: #188549; }
.agf-bar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.agf-lbl { font-size: 13.5px; font-weight: 700; color: #55606e; }
.agf-sel { padding: 7px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; background-color: #fff; min-width: 220px; }
.agf-clear { font-size: 13px; color: #2f6df6; text-decoration: none; }


/* Account settings: full-width cards + two-up email/password (1.png) */
.acct-col .s216, .acct-col .s224 { max-width: none; }
.acct-card { margin: 0; }
.acct-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #ddd; border-bottom: none; border-radius: 8px 8px 0 0; overflow: hidden; background: #f4f6f9; }
.acct-tab { padding: 8px 14px; border: none; background: transparent; font-size: 13px; color: #444; cursor: pointer; border-right: 1px solid #e4e9f0; white-space: nowrap; }
.acct-tab.on { background: #fff; font-weight: 700; color: #16213a; }
.acct-tab-danger { color: #c0392b; margin-left: auto; }
.acct-tab-danger.on { background: #e0433d; color: #fff; }
.acct-pane > .s216, .acct-pane > .s224, .acct-pane .acct-card { border-radius: 0 0 8px 8px; border-top: none; }
.acct-pane .s216 { margin-bottom: 0; border-radius: 0; }
.acct-hidden { display: none; }
.acct-danger { border-color: #f0c4bf; }
.acct-del-btn { margin-top: 12px; padding: 11px 22px; background: #e0433d; color: #fff; border: none; border-radius: 8px; font-weight: 800; cursor: pointer; }
.acct-del-btn:hover { background: #c73832; }


/* Date of birth calendar (year + month dropdowns, weekday grid - 1.png) */
.dob-wrap { position: relative; }
.dobcal { position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 6px; width: 320px;
  background: #fff; border: 1px solid #dbe2ec; border-radius: 12px; padding: 14px;
  box-shadow: 0 8px 26px rgba(20,30,60,.16); }
.dobcal-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dobcal-sel { padding: 7px 10px; border: 1px solid #ddd; border-radius: 7px; font-size: 14.5px; background-color: #fff; font-weight: 600; color: #23272f; }
.dobcal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 12.5px; font-weight: 700; color: #55606e; margin-bottom: 4px; }
.dobcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dc-day { height: 38px; border: none; background: transparent; border-radius: 50%; font-size: 14px;
  color: #23272f; cursor: pointer; }
.dc-day:hover:not(:disabled) { background: #eef4ff; }
.dc-mut { color: #b6bec9; cursor: default; }
.dc-on { border: 2px solid #2f6df6; color: #2f6df6; font-weight: 700; }


/* Business upgrade flow (2.png): noticeable tab-bar text + approved banner */
.acct-upgrade-cta { color: #d97706; font-weight: 700; border: 1px solid #e8b06a; border-radius: 8px; background: #fff; margin: 7px 10px; padding: 6px 16px; }
.acct-upgrade-cta:hover { color: #b45309; background: #fff7ec; }
.biz-approved { background: #eafaf0; border: 1px solid #bfe8cf; color: #1e7a44; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.biz-blocked { background: #fdf0ee; border: 1px solid #f0c6c0; color: #a4362a; border-radius: 8px; padding: 12px 14px; font-size: 14px; font-weight: 600; }


/* Link tabs + password eye toggles (account page) */
a.acct-tab { text-decoration: none; display: inline-flex; align-items: center; }
.acct-upgrade-cta.on { background: #fff7ec; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: #6b7686; padding: 4px; line-height: 0; }
.pw-eye:hover { color: #23272f; }
.pw-eye .pw-slash { display: none; }
.pw-eye-on .pw-slash { display: block; }
.pw-eye-on { color: #2563eb; }


/* TradeMe-style clickable feedback badge next to the seller name */
.fb-name { color: inherit; text-decoration: none; }
.fb-name:hover { text-decoration: underline; }
.fb-badge { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: #2563eb; text-decoration: none; font-size: 13px; font-weight: 600; vertical-align: 1px; }
.fb-badge:hover { text-decoration: underline; }
.fb-badge .fb-star { color: #f5a623; }


/* marketplacenz-style rating overview + distribution bars + role rows */
.urx-over { text-align: center; padding: 0 0 14px; }
.upx-main .reviews-section { margin-top: 0; padding-top: 0; border-top: none; }
.upx-main .urx-glob { margin-top: 0; }
.urx-glob { display: block; font-size: 56px; line-height: 1; font-weight: 800; color: #16213a; }
.urx-over .urx-stars { font-size: 22px; margin: 4px 0; }
.urx-count { color: #777; font-size: 14px; }
.urx-recent { color: #1e7a44; font-size: 13px; margin-top: 2px; font-weight: 600; }
.urx-charts { max-width: 520px; margin: 0 auto 18px; }
.urx-line { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.urx-lab { width: 60px; font-size: 13px; color: #777; text-align: right; flex: 0 0 60px; }
.urx-bar { flex: 1; background: #e8ebf0; border-radius: 4px; height: 14px; overflow: hidden; }
.urx-fill { height: 14px; border-radius: 4px; color: #fff; font-size: 10px; line-height: 14px; text-align: right; padding: 0 5px; font-weight: 700; }
.urx-c5 { background: #00b050; } .urx-c4 { background: #92d050; } .urx-c3 { background: #ffc000; } .urx-c2 { background: #ff6600; } .urx-c1 { background: #c00000; }
.urx-who { display: flex; gap: 10px; align-items: flex-start; }
.urx-ava { width: 38px; height: 38px; border-radius: 50%; background: #e8ebf0; color: #55606e; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex: 0 0 38px; }
.urx-ava img { width: 100%; height: 100%; object-fit: cover; }
.urx-role { color: #666; font-size: 12.5px; margin-left: 4px; }
.urx-line2 { display: block; font-size: 13px; }
.urx-val { color: #777; font-style: normal; font-size: 12.5px; margin-left: 3px; }

/* Image crop modal (Cropper.js, like marketplacenz profile picture upload) */
.crop-overlay { position: fixed; inset: 0; background: rgba(10,15,30,.55); z-index: 400; display: flex; align-items: center; justify-content: center; }
.crop-overlay[hidden] { display: none; }
.crop-modal { background: #fff; border-radius: 12px; padding: 16px; width: min(560px, 94vw); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.crop-title { font-weight: 700; color: #16213a; margin-bottom: 10px; }
.crop-stage { height: 360px; background: #111; }
.crop-stage img { max-width: 100%; display: block; }
.crop-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.crop-spacer { flex: 1; }
.crop-zoom { width: 36px; height: 32px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px; }
.crop-cancel { padding: 8px 14px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; }
.crop-apply { padding: 8px 16px; border: none; background: #f59e0b; color: #fff; border-radius: 6px; font-weight: 700; cursor: pointer; }
.crop-apply:hover { background: #d97706; }


/* One-page member profile: profile + rating left, listings right */
.upx-wrap { display: flex; gap: 24px; align-items: flex-start; }
.upx-left { flex: 0 0 300px; min-width: 0; }
.upx-main { flex: 1; min-width: 0; }
.upx-main .s434 { margin-top: 0; }
@media (max-width: 900px) { .upx-wrap { flex-direction: column; } .upx-left { flex: none; width: 100%; } }


/* Profile left-column menu: Listings / Feedback */
.upx-nav { display: flex; flex-direction: column; border: 1px solid #e4e9f0; border-radius: 10px; overflow: hidden; margin: 14px 0; background: #fff; }
.upx-nav a { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; color: #23272f; text-decoration: none; font-weight: 600; border-bottom: 1px solid #eef1f5; }
.upx-nav a:last-child { border-bottom: none; }
.upx-nav a:hover { background: #f7f9fc; }
.upx-nav a.on { background: #eef4ff; color: #2563eb; }
.upx-nav a span { background: #eef1f5; color: #55606e; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }
.upx-nav a.on span { background: #dbe7ff; color: #2563eb; }


/* Green block-star seller rating (marketplacenz style) */
.fb-rate { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; margin: 3px 0 2px; }
.fb-rb { width: 18px; height: 18px; border-radius: 3px; background: #c6ccd4; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.fb-rb.on { background: #85b93e; }
.fb-rate em { font-style: normal; color: #1e40af; font-weight: 400; font-size: 13.5px; margin-left: 5px; }
.fb-rate:hover em { text-decoration: underline; }


/* My Listings filters (5.png): category accordion + keyword search */
.mlf-panel { border: 1px solid #e4e9f0; border-radius: 10px; background: #fff; margin: 14px 0 18px; overflow: hidden; }
.mlf-cat summary { padding: 12px 16px; font-weight: 700; color: #2563eb; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mlf-cat summary::after { content: "\25BE"; color: #8a94a3; }
.mlf-cat[open] summary::after { content: "\25B4"; }
.mlf-cat-list { border-top: 1px solid #eef1f5; }
.mlf-cat-row { display: block; padding: 10px 16px; color: #2563eb; text-decoration: none; border-bottom: 1px solid #eef1f5; font-size: 14.5px; }
.mlf-cat-row:hover { background: #f7f9fc; }
.mlf-cat-row.on { background: #eef4ff; font-weight: 700; }
.mlf-form { display: flex; gap: 12px; align-items: flex-end; padding: 14px 16px; background: #fafbfd; flex-wrap: wrap; }
.mlf-fld-cat { flex: 0 0 240px; min-width: 220px; }
.mlf-fld { flex: 1; min-width: 200px; }
.mlf-fld-sm { flex: 0 0 150px; min-width: 150px; }
.mlf-fld label { display: block; font-size: 13px; font-weight: 700; color: #444; margin-bottom: 5px; }
.mlf-search { padding: 10px 22px; border: none; border-radius: 7px; background: #2ba7c9; color: #fff; font-weight: 700; cursor: pointer; }
.mlf-search:hover { background: #2492b1; }
.mlf-clear { align-self: center; color: #c0392b; font-size: 13.5px; text-decoration: underline; }
.my-listing-btn-photos { background: #eef4ff; color: #2563eb; }


/* Expired listings note (2.png) */
.exp-note { font-size: 15px; font-weight: 700; color: #444; margin: 4px 0 10px; }
.exp-note b { color: #e0433d; }


/* 9.png: vertical profile card with the member's real picture on top */
.upx-left .s431 { flex-direction: column; text-align: center; gap: 10px; margin-bottom: 14px; }
.upx-left .s432 { width: 110px; height: 110px; overflow: hidden; }
.upx-left .s432 img { width: 100%; height: 100%; object-fit: cover; }
.upx-left .s375 { display: flex; justify-content: center; }
/* profile listings tab: same picture size as search result cards, rounded corners */
.upx-main .s183 { border-radius: 10px; }
.upx-main .s435 { height: 300px; background: #f5f5f5; overflow: hidden; }
.upx-main .s435 img { width: 100%; height: 100%; object-fit: cover; }


/* Photo upload warning (files skipped: too big, wrong type, over the cap) */
.img-warn { background: #fff8e6; border: 1px solid #f1dfa8; color: #8a6d1a; border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.img-warn a { color: #8a6d1a; text-decoration: underline; margin-left: 4px; }


/* "Preparing image 2 of 5..." note under the photo picker */
.img-prep { background: #eef4ff; border: 1px solid #cfe0ff; color: #234a86; border-radius: 8px; padding: 9px 13px; margin: 9px 0; font-size: 14px; }


/* Photo picker (post / edit listing) */
.up-drop { border: 2px dashed #c7d0dc; border-radius: 10px; background: #fafbfd; padding: 26px 16px; text-align: center; cursor: pointer; color: #55606e; }
.up-drop:hover, .up-over { border-color: #2f6df6; background: #f2f7ff; }
.up-drop b { display: block; font-size: 15px; color: #23272f; margin-bottom: 4px; }
.up-drop span { font-size: 13px; color: #7d8798; }
.up-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.up-tile { width: 168px; background: #eef7ee; border: 1px solid #d4e6d4; border-radius: 8px; padding: 8px; cursor: grab; }
.up-tile.up-drag { opacity: .45; }
.up-tile.up-busy { background: #f4f6f8; }
.up-tick { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; margin-bottom: 6px; }
.up-frame { height: 132px; background: #fff; border: 1px solid #dde4ec; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 12.5px; color: #7d8798; }
.up-frame img { max-width: 100%; max-height: 100%; display: block; }
.up-btns { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.up-rot { width: 34px; height: 28px; border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; }
.up-rot:hover:not(:disabled) { background: #eef4ff; border-color: #2f6df6; }
.up-delsel { display: inline-block; margin-top: 10px; color: #c0392b; font-size: 14px; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }
.up-note { margin-top: 9px; font-size: 13.5px; color: #234a86; background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 8px; padding: 8px 12px; }
.up-note.up-bad { color: #8a6d1a; background: #fff8e6; border-color: #f1dfa8; }


/* Controls on a listing's existing photos (edit page) */
.cur-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 4px; }
.cur-btn { width: 34px; height: 28px; border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; }
.cur-btn:hover:not(:disabled) { background: #eef4ff; border-color: #2f6df6; }
.cur-main { flex: 1 0 100%; height: 28px; padding: 0 6px; border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: #23272f; white-space: nowrap; }
.cur-main:hover:not(:disabled) { background: #eafaf0; border-color: #1e7a44; color: #1e7a44; }
.up-mainbtn { width: 100%; margin-top: 7px; }
.cur-main.is-main { background: #2f6df6; border-color: #2f6df6; color: #fff; font-weight: 600; }
.cur-main.is-main:hover { background: #2560db; border-color: #2560db; color: #fff; }


/* Car Parts: model and year tick lists */
.cp-filter { margin-bottom: 8px; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px;
  max-height: 260px; overflow-y: auto; border: 1px solid #e4e9f0; border-radius: 8px; padding: 10px; background: #fff; }
.cp-tick { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #23272f; }
.cp-tick input { flex: none; width: 18px; height: 18px; }

.cp-years .cp-grid { max-height: 190px; }
.cp-years > label { color: #23272f; }

.cp-missing .cp-grid { border-color: #d93025; box-shadow: 0 0 0 2px rgba(217, 48, 37, .12); }
.cp-yearerr { margin-top: 8px; color: #d93025; font-size: 14px; }


/* Car Parts fitment popup */
.cp-hint { color: #5b6472; font-size: 13px; margin: 2px 0 8px; }
.cp-btn { border: 1px solid #cfd6e0; background: #fff; border-radius: 8px; padding: 8px 14px;
  font-size: 14px; cursor: pointer; }
.cp-btn:hover { background: #f4f7fb; }
.cp-btn-add { display: inline-block; font-weight: 600; color: #1558d6; border-color: #b9cdf3; }
.cp-btn-go { background: #1558d6; border-color: #1558d6; color: #fff; font-weight: 600; }
.cp-btn-go:hover { background: #1148ad; }
.cp-btn-plain { color: #444; }

.cp-rows { margin-top: 10px; border: 1px solid #e4e9f0; border-radius: 10px; overflow: hidden; }
.cp-row { display: flex; align-items: stretch; border-top: 1px solid #eef2f7; background: #fff; }
.cp-rows .cp-row:first-child { border-top: 0; }
.cp-row-main { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: 0; padding: 11px 14px; font-size: 14px; cursor: pointer; text-align: left; }
.cp-row-main:hover { background: #f6f9fe; }
.cp-row-make .cp-row-t { font-weight: 600; color: #23272f; }
.cp-row-model { background: #fbfcfe; }
.cp-row-model .cp-row-main { padding-left: 34px; }
.cp-row-model .cp-row-t { color: #23272f; }
.cp-row-n { color: #5b6472; font-size: 13px; }
.cp-row-todo .cp-row-n { color: #b4690e; }
.cp-row-x { border: 0; background: none; color: #98a2b3; font-size: 20px; line-height: 1;
  padding: 0 14px; cursor: pointer; }
.cp-row-x:hover { color: #d93025; }
.cp-err { margin-top: 10px; color: #d93025; font-size: 14px; }

.cp-ov { position: fixed; inset: 0; background: rgba(16, 22, 32, .45); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.cp-win { background: #fff; border-radius: 12px; width: min(560px, 100%); max-height: 82vh;
  display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.cp-win-h { padding: 16px 18px 6px; font-size: 17px; font-weight: 600; color: #23272f; }
.cp-win-hint { padding: 0 18px 10px; color: #5b6472; font-size: 13px; }
.cp-find { margin: 0 18px 12px; width: calc(100% - 36px); padding: 10px 14px 10px 38px; font-size: 14px; border: 1px solid #d5dbe4; border-radius: 9px; color: #23272f; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237a8494'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E") no-repeat 13px center; transition: border-color .15s, box-shadow .15s; }
.cp-find::placeholder { color: #9aa3b0; }
.cp-find:focus { outline: none; border-color: #1558d6; box-shadow: 0 0 0 3px rgba(21,88,214,.12); }
.cp-win .cp-all { margin: 0 18px 8px; padding: 8px 10px; background: #f4f7fb; border-radius: 8px; font-weight: 600; }
.cp-win-b { overflow-y: auto; padding: 0 18px 8px; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.cp-onecol .cp-win-b { grid-template-columns: 1fr; gap: 4px; }
.cp-win-f { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px solid #eef2f7; }
.cp-win-count { flex: 1; color: #5b6472; font-size: 13px; }


/* Post form: main category as text + subcategory type-and-search */
.lc-rootname { font-weight: 600; color: #5b6472; margin-left: 8px; }
#catCascade.lc-rootlocked > select.cat-level:first-child { display: none; }
.cat-sugg { position: relative; margin-bottom: 8px; }
.cat-sugg-panel { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
  background: #fff; border: 1px solid #dfe5ee; border-radius: 10px; max-height: 320px;
  overflow-y: auto; box-shadow: 0 10px 28px rgba(16, 22, 32, .12); }
.cat-sugg-row { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 14px; cursor: pointer; border-bottom: 1px solid #f2f5f9; }
.cat-sugg-row:last-child { border-bottom: 0; }
.cat-sugg-row:hover, .cat-sugg-row.is-on { background: #f4f8ff; }
.cat-sugg-n { display: block; font-size: 14px; color: #23272f; }
.cat-sugg-p { display: block; font-size: 12px; color: #7a8494; margin-top: 1px; }


/* Checkout: per-seller delivery and payment choice */
.co-seller { border: 1px solid #e4e9f0; border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #fff; }
.co-seller-h { font-weight: 600; color: #23272f; margin-bottom: 8px; }
.co-line { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.co-line-t { flex: 1; color: #1558d6; }
.co-line-q { color: #5b6472; font-size: 13px; }
.co-line-s { font-weight: 600; min-width: 78px; text-align: right; }
.co-pick { margin-top: 12px; }
.co-pick-h { font-size: 13px; font-weight: 600; color: #5b6472; margin-bottom: 6px; }
.co-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e8edf4;
  border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 14px; }
.co-opt:hover { background: #f6f9fe; }
.co-opt-n { flex: 1; }
.co-opt-f { font-weight: 600; }
.co-opt-d { color: #5b6472; font-size: 12px; }
.co-note { color: #5b6472; font-size: 12px; margin-top: 4px; }
.co-sub { margin-top: 10px; text-align: right; font-size: 13px; color: #5b6472; }


/* Listing page: delivery and payment summary */
.ship-box { border: 1px solid #e4e9f0; border-radius: 10px; padding: 12px; margin-top: 12px; background: #fff; }
.ship-h { font-size: 13px; font-weight: 600; color: #5b6472; margin-bottom: 6px; }
.ship-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 3px 0; }
.ship-n { flex: 1; color: #23272f; }
.ship-f { font-weight: 600; }
.ship-d { color: #5b6472; font-size: 12px; }
.ship-note { color: #5b6472; font-size: 12px; margin-top: 6px; }
.s366.buy-now-btn { background: #1558d6; border-color: #1558d6; color: #fff; }
.s366.buy-now-btn:hover { background: #1148ad; }


/* Orders: delivery and how to pay */
.ord-pay { margin: 10px 0; padding: 10px 12px; background: #f7f9fc; border-radius: 8px; }
.ord-pay-r { display: flex; gap: 10px; font-size: 13px; padding: 2px 0; }
.ord-pay-k { color: #5b6472; min-width: 118px; }
.ord-pay-v { color: #23272f; font-weight: 500; }

.sp-year-note { font-size: 12px; color: #5b6472; margin-top: 6px; }


/* Buy Now stock */
.stock-left { font-size: 14px; color: #1a7f37; font-weight: 600; margin: 8px 0 4px; }
.stock-left.stock-none { color: #d93025; }
.stock-sold { color: #5b6472; font-weight: 400; margin-left: 8px; font-size: 13px; }
.stock-qty { display: block; font-size: 13px; color: #5b6472; margin-bottom: 6px; }
.stock-qty-in { width: 84px; margin-left: 8px; padding: 6px 8px; border: 1px solid #cfd6e0; border-radius: 6px; }


/* Breadcrumb suggestions (bold keyword, wrapping) - choose-category + post form */
.lc-searchwrap { margin-bottom: 16px; }
.lc-suggest-item { display: block; padding: 10px 13px; font-size: 14px; color: #6b7280;
  text-decoration: none; line-height: 1.6; }
.lc-suggest-item:hover { background: #fff7ed; }
.lc-crumb { color: #6b7280; }
.lc-crumb b { color: #1558d6; font-weight: 700; }
.lc-sep { color: #c4ccd6; margin: 0 6px; }


/* Post-form subcategory search: breadcrumb rows, bold keyword, responsive */
.cat-sugg-row { line-height: 1.5; white-space: normal; }
.cat-sugg-n { display: none; }
.cat-sugg-p { display: block; font-size: 13.5px; color: #6b7280; }
.cat-sugg-p .lc-sep { margin: 0 5px; }
.cat-sugg-p b { color: #1558d6; font-weight: 700; }


/* Car Parts makes popup: taller, plus a model search box */
.cp-win { max-height: 88vh; }
.cp-win-b { max-height: 58vh; min-height: 220px; }
.cp-modelsearch { margin: 0 18px 8px; }
.cp-model-panel { border: 1px solid #cfd6e0; border-radius: 8px; margin: 0 18px 10px; max-height: 300px; overflow-y: auto; box-shadow: 0 6px 18px rgba(16,22,32,.10); }
.cp-model-hit { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid #f2f5f9; padding: 9px 12px; font-size: 14px; cursor: pointer; }
.cp-model-hit:last-child { border-bottom: 0; }
.cp-model-hit:hover, .cp-model-hit.is-on { background: #f4f8ff; }
.cp-model-hit b { color: #1558d6; }
.cp-model-hit .cp-model-mk { color: #7a8494; font-size: 12px; margin-left: 6px; }
.cp-model-hit .cp-model-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Listing page: small category breadcrumb (4.png) */
.pd-crumb { font-size: 12.5px; color: #7a8494; margin: 0 0 12px; line-height: 1.6; }
.pd-crumb-a { color: #7a8494; text-decoration: none; }
.pd-crumb-a:hover { color: #1558d6; text-decoration: underline; }
.pd-crumb-sep { color: #c4ccd6; margin: 0 6px; }
.pd-crumb a:last-of-type, .pd-crumb > span:last-child { color: #374151; }


/* Rounded bordered image card on every listing, matching property (4.png) */
.pd-gallery-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px;
  padding: 10px; box-shadow: 0 1px 5px rgba(20,30,60,.06); }
.pd-gallery-card .s335 { border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.pd-gallery-card .s336 { border-radius: 8px; }


/* 10.png: roomier make/model search in the fitment popup */
.cp-modelsearch-in { width: 100%; padding: 11px 14px 11px 38px; font-size: 14px; border: 1px solid #d5dbe4; border-radius: 9px; color: #23272f; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237a8494'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E") no-repeat 13px center; transition: border-color .15s, box-shadow .15s; }
.cp-modelsearch-in::placeholder { color: #9aa3b0; }
.cp-modelsearch-in:focus { outline: none; border-color: #1558d6; box-shadow: 0 0 0 3px rgba(21,88,214,.12); }
.cp-model-panel .cp-model-hit { padding: 11px 14px; font-size: 15px; }
.cp-model-hit .cp-model-mk { flex: none; }
.cp-make-hit .cp-model-mk { background: #eef3fb; color: #1558d6; border-radius: 10px; padding: 1px 8px; font-size: 11px; }


/* Option B: post-as identity chooser + banner */
.lc-postas { border: 1px solid #e4e9f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; background: #fff; }
.lc-postas-h { font-size: 13px; font-weight: 600; color: #5b6472; margin-bottom: 8px; }
.lc-postas-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.lc-postas-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid #cfd6e0;
  border-radius: 999px; font-size: 14px; color: #23272f; text-decoration: none; cursor: pointer; }
.lc-postas-pill small { color: #7a8494; font-size: 12px; }
.lc-postas-pill.is-on { background: #1558d6; border-color: #1558d6; color: #fff; }
.lc-postas-pill.is-on small { color: #dbe6fb; }
.lc-postas-pill:not(.is-on):hover { background: #f4f7fb; }
.lc-postas-note { margin-top: 8px; font-size: 12px; color: #7a8494; }
.lc-identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #f4f8ff; border: 1px solid #d7e3fb; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.lc-identity-sw { color: #1558d6; text-decoration: none; font-weight: 600; }
.lc-identity-sw:hover { text-decoration: underline; }




.need-prompt { background: #fff4e5; border: 1px solid #f5c26b; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; color: #7a4a00; }


/* Facebook-style identity switcher (avatar + rich dropdown) */
.idsw { position: relative; display: inline-flex; align-items: center; }
.idsw-trigger { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 2px; border-radius: 999px; }
.idsw-trigger:hover { background: rgba(0,0,0,.05); }
.idsw-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: inline-flex;
  align-items: center; justify-content: center; flex: none; }
.idsw-ini { background: #8a94a6; color: #fff; font-size: 13px; font-weight: 700; }
.idsw-ini.biz { background: #1558d6; }
.idsw-ph { background: #dfe3ea; color: #97a1b0; }
.idsw-ph.biz { background: #dbe6fb; color: #6f9be6; }
.idsw-ph-svg { width: 66%; height: 66%; }
.idsw-avwrap { position: relative; display: inline-flex; }
.idsw-car { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  background: #e4e6eb; border: 2px solid #fff; color: #1c2733; font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.idsw-trigger:hover .idsw-car { background: #d8dbe0; }
.idsw-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 280px; background: #fff;
  border: 1px solid #e0e5ee; border-radius: 12px; box-shadow: 0 12px 34px rgba(16,22,32,.18); padding: 8px; display: none; z-index: 1300; }
.idsw.open .idsw-menu { display: block; }
.idsw-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; padding: 6px 10px 6px; }
.idsw-row { display: flex; align-items: center; border-radius: 10px; }
.idsw-switch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 9px 10px; text-decoration: none; }
.idsw-row:hover { background: #f2f5fa; }
.idsw-row.on { background: #eef3fb; }
.idsw-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.idsw-meta b { color: #23272f; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idsw-meta small { color: #7a8494; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.idsw-check { margin-left: auto; color: #1558d6; font-weight: 700; }
.idsw-sep { height: 1px; background: #eef2f7; margin: 6px 4px; }
.idsw-link { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: #374151; font-size: 14px; }
.idsw-link:hover { background: #f2f5fa; }


/* active identity name next to the avatar */
.idsw-curname { font-size: 14px; color: #374151; margin-right: 8px; font-weight: 600; vertical-align: middle; }

.buy-switch-note { background: #fff4e5; border: 1px solid #f5c26b; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 13px; color: #7a4a00; }
.buy-switch-note a { color: #1558d6; font-weight: 600; }

.biz-logo-preview { width: 90px; height: 90px; object-fit: contain; border: 1px solid #e4e9f0; border-radius: 10px; padding: 6px; margin-bottom: 8px; }


/* Buying-is-personal interstitial */
.bpo-ov { display: flex; justify-content: center; padding: 60px 20px; }
.bpo-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 14px; box-shadow: 0 12px 40px rgba(16,22,32,.12);
  padding: 30px 28px; max-width: 440px; text-align: center; }
.bpo-icon { font-size: 34px; margin-bottom: 6px; }
.bpo-h { font-size: 20px; font-weight: 700; color: #23272f; margin-bottom: 8px; }
.bpo-p { color: #5b6472; font-size: 14px; margin-bottom: 18px; }
.bpo-btn { display: inline-block; background: #1558d6; color: #fff; font-weight: 600; padding: 11px 20px;
  border-radius: 999px; text-decoration: none; }
.bpo-btn:hover { background: #1148ad; }
.bpo-cancel { display: block; margin-top: 12px; color: #7a8494; text-decoration: none; font-size: 13px; }




/* Facebook-like notification bell (items) */
.nbell { position: relative; display: inline-flex; align-items: center; margin-left: 16px; }
/* 6.png: plain icon like the envelope - no circle background, same size, same badge */
.nbell-btn { background: none; border: 0; width: auto; height: auto; border-radius: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; position: relative; color: #777; }
.nbell-btn:hover { background: none; color: #f0960a; }
.nbell-ic { width: 20px; height: 20px; }
.nbell-badge { position: absolute; top: -4px; right: -8px; background: #ef4444; color: #fff; font-size: 11px;
  font-weight: 600; width: 17px; height: 17px; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; padding: 0; border: 0; }
.nbell-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 400px; max-width: 94vw; background: #fff;
  border: 1px solid #e0e5ee; border-radius: 14px; box-shadow: 0 16px 44px rgba(16,22,32,.22); padding: 8px 8px 6px; display: none; z-index: 1300; }
.nbell.open .nbell-menu { display: block; }
.nbell-head { font-size: 18px; font-weight: 700; color: #23272f; padding: 8px 10px 10px; }
.nbell-empty { padding: 24px 12px; text-align: center; color: #7a8494; font-size: 14px; }
.nbell-item { display: flex; align-items: flex-start; padding: 0; margin-bottom: 6px; border-radius: 12px; }
.nbell-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px 10px 10px; text-decoration: none; }
.nbell-item:hover { background: #f2f5fa; }
.nbell-item.unread { background: #f0f6ff; }
.nbell-ava { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex;
  align-items: center; justify-content: center; background: #dfe3ea; color: #97a1b0; overflow: visible; }
.nbell-ava img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.nbell-ava > svg { width: 26px; height: 26px; }
.nbell-ic-badge { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #fff; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.nbell-ic-badge.message { background: #1558d6; }
.nbell-ic-badge.sold { background: #1a7f37; font-weight: 700; }
.nbell-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nbell-text { color: #23272f; font-size: 14px; line-height: 1.3; }
.nbell-sub { color: #45506a; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbell-acct { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: #8a93a0; margin-bottom: 2px; }
.nbell-item.unread .nbell-acct { color: #1558d6; }
.nbell-time { color: #9aa0a6; font-size: 12px; margin-top: 3px; }
.nbell-unreaddot { width: 10px; height: 10px; border-radius: 50%; background: #1558d6; flex: none; }


/* Facebook-like notification panel chrome */
.nbell-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; }
.nbell-title { font-size: 22px; font-weight: 800; color: #050505; }
.nbell-tabs { display: flex; gap: 8px; padding: 4px 6px 8px; }
.nbell-tab { border: 0; background: #eef0f2; color: #1c2733; font-weight: 600; font-size: 14px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.nbell-tab.on { background: #e7f0ff; color: #1558d6; }
.nbell-scroll { max-height: 62vh; overflow-y: auto; }
.nbell-sec { font-size: 16px; font-weight: 700; color: #23272f; padding: 8px 8px 4px; }
.nbell-seeall { display: block; text-align: center; color: #1558d6; font-weight: 600; padding: 10px; text-decoration: none; }
.nbell-seeall:hover { background: #f2f5fa; border-radius: 8px; }
.nbell-item { padding: 8px; }
.nbell-text { font-size: 15px; }
.nbell-ava { width: 52px; height: 52px; }
.nbell-ava img { width: 52px; height: 52px; }
/* (6.png) the old Facebook-style circle override is gone - one plain-icon style above */


/* orders-page professional skin */
.orders-page { min-width: 0; }
.orders-head { margin-bottom: 18px; }
.orders-title { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 4px; letter-spacing: -.01em; }
.orders-sub { color: #6b7280; font-size: 14px; margin: 0; }

/* KPI summary strip */
.orders-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.ostat { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6e9ef;
  border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(16,22,32,.04); }
.ostat-ic { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 42px; font-weight: 800; font-size: 18px; }
.ostat-ic svg { width: 20px; height: 20px; }
.ostat-ic-a { background: #eef2ff; color: #4f46e5; }
.ostat-ic-b { background: #ecfdf5; color: #059669; }
.ostat-ic-c { background: #fff7ed; color: #ea580c; }
.ostat-ic-d { background: #eff6ff; color: #2563eb; }
.ostat-body { display: flex; flex-direction: column; min-width: 0; }
.ostat-num { font-size: 21px; font-weight: 800; color: #111827; line-height: 1.1; }
.ostat-lbl { font-size: 12.5px; color: #6b7280; margin-top: 2px; }

/* segmented filter tabs */
.orders-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.otab { font-size: 13.5px; font-weight: 600; color: #4b5563; background: #f3f4f6; border: 1px solid transparent;
  padding: 8px 14px; border-radius: 999px; text-decoration: none; transition: background .12s, color .12s; }
.otab:hover { background: #e9ebef; color: #111827; }
.otab.on { background: #111827; color: #fff; }

/* order card */
.ocard { background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: 20px;
  margin-bottom: 16px; box-shadow: 0 1px 3px rgba(16,22,32,.05); }
.ocard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid #f0f2f5; }
.ocard-top-l { min-width: 0; }
.ocard-id { font-size: 16px; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 10px; }
.ocard-party { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ocard-ava { width: 34px; height: 34px; border-radius: 50%; background: #e0e7ff; color: #4338ca;
  font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.ocard-party-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ocard-party-role { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; font-weight: 600; }
.ocard-party-txt b { font-size: 14px; color: #1f2937; }
.ocard-date { font-size: 13px; color: #6b7280; margin-left: 4px; }
.ocard-track { font-size: 13px; color: #4b5563; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.ocard-total { text-align: right; flex: 0 0 auto; }
.ocard-total-num { font-size: 22px; font-weight: 800; color: #059669; line-height: 1.1; }
.ocard-total-sub { font-size: 12px; color: #9ca3af; margin-top: 3px; }

.ocard .ord-pay { margin-top: 16px; }
.ocard .order-items-grid { margin-top: 16px; }
.ocard-addr { margin-top: 14px; font-size: 13.5px; color: #4b5563; background: #f9fafb; border: 1px solid #eef0f3;
  border-radius: 10px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 8px; }
.ocard-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ocard-actions:empty { display: none; }
.ocard .order-feedback { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f2f5; }

/* empty state */
.orders-empty { text-align: center; background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; padding: 48px 24px; }
.orders-empty-ic { color: #cbd5e1; margin-bottom: 12px; }
.orders-empty-ic svg { width: 46px; height: 46px; }
.orders-empty-t { font-size: 18px; font-weight: 700; color: #374151; }
.orders-empty-s { font-size: 14px; color: #6b7280; margin-top: 6px; }

@media (max-width: 720px) {
  .orders-stats { grid-template-columns: repeat(2, 1fr); }
  .ocard-top { flex-direction: column; }
  .ocard-total { text-align: left; }
}


/* osp order pages (marketplacenz parity) */
.osp-wrap { min-width: 0; }
.osp-tabhead { border-bottom: 1px solid #e0e0e0; margin-bottom: 18px; }
.osp-tabhead-on { display: inline-block; font-size: 18px; font-weight: 700; color: #111; padding: 0 2px 10px; border-bottom: 2px solid #111; margin-bottom: -1px; }

/* filter bar */
.osp-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; background: #f7f8fa;
  border: 1px solid #e6e9ef; border-radius: 8px; padding: 16px; margin-bottom: 18px; }
.osp-filter-field { display: flex; flex-direction: column; }
.osp-filter-field label { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.osp-filter-field input, .osp-filter-field select { height: 40px; border: 1px solid #cfd6df; border-radius: 6px;
  padding: 0 12px; font-size: 14px; width: 220px; background: #fff; }
.osp-filter-grow { flex: 1 1 300px; }
.osp-filter-grow input { width: 100%; }
.osp-btn { height: 40px; border: 0; border-radius: 6px; padding: 0 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.osp-btn svg { width: 15px; height: 15px; }
.osp-btn-search { background: #1b9dc4; color: #fff; }
.osp-btn-search:hover { background: #1789ac; }
.osp-btn-reset { background: #6c7a89; color: #fff; }
.osp-btn-reset:hover { background: #5a6673; }

/* column header */
.osp-colhead { display: flex; padding: 0 4px 8px; font-size: 12px; font-weight: 700; color: #666; }
.osp-colhead-l { flex: 0 0 280px; }
.osp-colhead-r { flex: 1; padding-left: 14px; }

/* order card two-column */
.osp-order-container { display: flex; flex-wrap: wrap; margin-bottom: 15px; border: 1px solid #e0e0e0;
  border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.osp-order-left { flex: 0 0 280px; padding: 14px; border-right: 1px solid #e8e8e8; font-size: 13px; }
.osp-order-right { flex: 1; min-width: 0; padding: 14px; }
.osp-line { margin-bottom: 3px; line-height: 1.4; }
.osp-date { color: #666; font-size: 13px; border-bottom: 1px dotted #cbd2da; }
.osp-deliv { margin-top: 8px; font-weight: 600; color: #333; }
.osp-arrow { color: #1b9dc4; }
.osp-address-box { background: #eef1fb; border: 1px solid #d8def0; border-radius: 4px; padding: 8px 10px;
  margin: 6px 0 4px; font-weight: 600; color: #2a3550; line-height: 1.45; font-size: 13px; }
.osp-buyer-email { margin: 6px 0; font-size: 13px; }
.osp-buyer-email a, .osp-prod-title { color: #1b9dc4; text-decoration: none; }
.osp-buyer-email a:hover, .osp-prod-title:hover { text-decoration: underline; }
.osp-fb-block { margin-top: 10px; }
.osp-stars { font-size: 14px; }
.stars-on { color: #f5a623; letter-spacing: 1px; }
.stars-off { color: #d7dbe0; letter-spacing: 1px; }
.osp-fb-note { color: #8a8f96; font-size: 12px; margin-top: 3px; }
.osp-muted { color: #9aa0a6; }

/* right column */
.osp-product-item { margin-bottom: 6px; font-size: 14px; }
.osp-qty { color: #333; margin-right: 2px; }
.osp-price { font-weight: 600; margin-right: 6px; color: #333; }
.osp-removed { color: #9aa0a6; }
.osp-await { color: #e08a1e; font-style: italic; font-size: 13px; margin: 6px 0; display: flex; gap: 5px; align-items: center; }
.osp-await svg { width: 14px; height: 14px; }
.osp-ship-line { font-size: 13px; color: #555; margin: 2px 0; }
.osp-total-line { font-size: 15px; margin: 8px 0 4px; color: #333; }
.osp-pay-line { font-size: 13px; color: #555; margin-bottom: 8px; }
.osp-ref-line { font-size: 13px; color: #333; margin: 8px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.osp-ref-badge { display: inline-block; background: #f0f4ff; color: #3366cc; font-weight: 600; font-size: 13px;
  padding: 2px 10px; border-radius: 3px; border: 1px solid #d0d8f0; letter-spacing: .5px; font-family: monospace; cursor: pointer; user-select: all; }
.osp-ref-badge:hover { background: #e0eaff; border-color: #a0b8e0; }
.osp-copy { color: #1b9dc4; cursor: pointer; font-size: 12px; user-select: none; }
.osp-copy:hover { text-decoration: underline; }
.osp-track-line { font-size: 13px; color: #333; margin: 4px 0; }

.osp-status-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.osp-status-label { font-weight: 700; color: #333; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.osp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.osp-act { height: 36px; border-radius: 6px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.osp-act-primary { background: #1b9dc4; color: #fff; border-color: #1b9dc4; }
.osp-act-primary:hover { background: #1789ac; }
.osp-act-ghost { background: #fff; color: #555; border-color: #cfd6df; }
.osp-act-ghost:hover { background: #f5f7f9; }
.osp-track-form { display: inline-flex; gap: 6px; align-items: center; }
.osp-track-input { height: 36px; border: 1px solid #cfd6df; border-radius: 6px; padding: 0 10px; font-size: 13px; width: 150px; }

/* status pills */
.osp-status-pill { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: #fff; }
.osp-pill-processing { background: #29a3cc; }
.osp-pill-paid { background: #e0a020; }
.osp-pill-shipped { background: #5b8def; }
.osp-pill-delivered { background: #2e9e5b; }
.osp-pill-cancelled { background: #a7adb5; }

/* buyer purchases columns */
.osp-purch-head, .osp-purch-row { display: grid; grid-template-columns: 56px 1fr 90px 110px 130px; gap: 12px; }
.osp-purch-head { padding: 10px 14px; font-size: 12px; font-weight: 700; color: #666; border-bottom: 2px solid #e0e0e0; }
.osp-purch-row { padding: 14px; border: 1px solid #e6e9ef; border-radius: 6px; margin-bottom: 12px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); align-items: start; }
.osp-ph-qty { font-weight: 600; color: #333; }
.osp-ph-prod { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.osp-purch-title { font-size: 14px; }
.osp-purch-detail { font-size: 12.5px; color: #555; }
.osp-pay-to { color: #2e7d32; }
.osp-ph-amt { font-weight: 700; color: #333; }
.osp-ph-date { color: #666; font-size: 13px; }
.osp-inline-form { margin-top: 6px; }
.osp-fb-inline { margin-top: 2px; }

@media (max-width: 820px) {
  .osp-order-container { flex-direction: column; }
  .osp-order-left { flex: none; border-right: none; border-bottom: 1px solid #e8e8e8; }
  .osp-colhead { display: none; }
  .osp-purch-head { display: none; }
  .osp-purch-row { grid-template-columns: 1fr; }
  .osp-ph-amt, .osp-ph-date, .osp-ph-stat { padding-top: 4px; }
  .osp-filter-field input, .osp-filter-field select { width: 100%; }
}


/* TradeMe-style closed / sold banner on the listing page */
.listing-closed-banner { display: flex; align-items: center; gap: 8px; background: #f3f4f6; border: 1px solid #e0e3e8;
  border-left: 4px solid #9aa0a6; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 15px; font-weight: 700; color: #555; }
.listing-closed-banner.is-sold { background: #eaf7ee; border-color: #bfe6c9; border-left-color: #2e9e5b; color: #1e7a41; }
.listing-closed-banner .lcb-sub { font-weight: 500; color: #4b5563; }
.listing-closed-banner.is-sold .lcb-sub { color: #2e7d44; }


/* sold badge in My Listings (edit/delete locked) */
.my-listing-sold-badge { display: inline-flex; align-items: center; gap: 4px; background: #eaf7ee; color: #1e7a41;
  border: 1px solid #bfe6c9; border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 700; }


/* per-row "set as default" star */
.idsw-setdef { flex: 0 0 auto; width: 28px; height: 28px; margin-left: 4px; display: inline-flex; align-items: center;
  justify-content: center; color: #cbd1da; border-radius: 50%; text-decoration: none; }
.idsw-setdef svg { width: 16px; height: 16px; }
.idsw-setdef:hover { color: #f5a623; background: #fff5e6; }
.idsw-setdef.is-default { color: #f5a623; cursor: default; }


/* account selector chips on the settings pages (thin bordered) */
.acct-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.acct-chip { display: flex; flex-direction: row; align-items: center; gap: 10px; border: 1px solid #d7dce3; border-radius: 10px;
  padding: 8px 14px; text-decoration: none; background: #fff; min-width: 120px; transition: border-color .12s, background .12s; }
.acct-chip:hover { border-color: #9aa4b2; background: #fafbfc; }
.acct-chip.on { border-color: #1558d6; background: #eef3fb; }
.acct-chip-role { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: #7a8494; }
.acct-chip.on .acct-chip-role { color: #1558d6; }
.acct-chip-name { font-size: 14px; font-weight: 600; color: #23272f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }


/* per-notification read/unread toggle + row separation */
.nbell-item.read { opacity: .85; }
.nbell-item.read .nbell-text { color: #6b7280; }
.nbell-readtoggle { flex: none; align-self: center; width: 32px; height: 32px; margin: 0 4px; border: 0;
  background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.nbell-readtoggle:hover { background: #e6ebf2; }
.nbell-readdot { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.nbell-item.unread .nbell-readdot { background: #1a73e8; }
.nbell-item.read .nbell-readdot { background: transparent; border: 2px solid #c4cad2; }
.nbell-readtoggle:hover .nbell-readdot { border-color: #1a73e8; }


/* account chip avatars + make-default bar + business card */
.acct-chip-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: #eef1f6;
  display: inline-flex; align-items: center; justify-content: center; color: #9aa4b2; }
.acct-chip-av img { width: 100%; height: 100%; object-fit: cover; }
.acct-chip-av svg { width: 20px; height: 20px; }
.acct-chip-txt { display: flex; flex-direction: column; min-width: 0; }
.acct-default-bar { margin: 0 0 20px; font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.acct-default-on { display: inline-flex; align-items: center; gap: 6px; color: #1e7a41; background: #eaf7ee;
  border: 1px solid #bfe6c9; border-radius: 8px; padding: 8px 12px; font-weight: 600; }
.acct-default-btn { display: inline-flex; align-items: center; gap: 6px; color: #1558d6; border: 1px solid #cfe0ff;
  background: #f2f7ff; border-radius: 8px; padding: 8px 12px; text-decoration: none; font-weight: 600; }
.acct-default-btn:hover { background: #e6efff; }
.acct-default-hint { color: #7a8494; }
.biz-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 22px; }
.biz-logo-top { border-bottom: 1px solid #eef1f5; padding-bottom: 16px; margin-bottom: 16px; }
.biz-logo-ph { width: 90px; height: 90px; border-radius: 12px; border: 1px solid #e4e9f0; display: flex;
  align-items: center; justify-content: center; color: #b8c0cc; margin-bottom: 8px; background: #f7f9fc; }
.biz-logo-ph svg { width: 44px; height: 44px; }


/* compact grey "post as" account dropdown on the category chooser */
.lc-postas-dd { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; }
.lc-postas-dd-label { font-size: 13px; color: #6b7280; font-weight: 600; }
.lc-acct-select { font-size: 13px; color: #374151; background: #f3f4f6; border: 1px solid #dfe3e8;
  border-radius: 8px; padding: 7px 12px; cursor: pointer; max-width: 340px; }
.lc-acct-select:hover { background: #eceef1; }


/* item-post shipping picker */
.lc-ship-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.lc-ship-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; cursor: pointer; }
.lc-ship-opt input { width: 18px; height: 18px; flex: none; }


/* combined shipping toggle + cart note */
.ship-combined { margin: 6px 0 18px; padding: 12px 14px; background: #f7f9fc; border: 1px solid #e4e9f0; border-radius: 10px; }
.ship-combined-lbl { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: #374151; }
.ship-combined-lbl input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.co-combined { font-size: 13px; color: #6b7280; margin: 6px 0; padding: 6px 10px; background: #f3f4f6; border-radius: 8px; }
.co-combined.on { color: #1e7a41; background: #eaf7ee; border: 1px solid #bfe6c9; font-weight: 600; }

/* Delete Selected must honour the hidden attribute (no photos = no button) */
.up-delsel[hidden] { display: none; }

/* header profile avatar matches the notification bell size (42px) */
.idsw-avwrap .idsw-av { width: 42px; height: 42px; }


/* inline edit for a shipping method */
.ship-edit-panel { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #ececec; }
.ship-edit-form .s243 { margin-top: 10px; }


/* item-post shipping: My methods / Add method tabs + region rows */
.lc-ship-tabs { display: flex; gap: 8px; margin: 8px 0 12px; }
.lc-ship-tab { background: #f3f4f6; border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #4b5563; cursor: pointer; }
.lc-ship-tab.on { background: #111827; color: #fff; }
.lc-ship-addhead { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.lc-ship-rowhead, .lc-ship-row { display: grid; grid-template-columns: 1fr 100px 150px 110px 32px; gap: 8px; align-items: center; }
.lc-ship-rowhead { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.lc-ship-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eef1f5; }
.lc-ship-row:last-child { border-bottom: 0; margin-bottom: 4px; }
.lc-ship-region { min-width: 0; }
.lc-ship-cost { position: relative; }
.lc-ship-sig { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lc-ship-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #374151; cursor: pointer; white-space: nowrap; }
.lc-ship-radio input { width: 18px; height: 18px; flex: none; }
.lc-ship-dollar { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #6b7280; }
.lc-ship-costin { padding-left: 22px; }
.lc-ship-del { background: none; border: 0; color: #dc2626; cursor: pointer; font-size: 15px; padding: 6px 8px; border-radius: 6px; }
.lc-ship-del:hover { background: #fdecec; }
.lc-ship-addbtn { background: #eef2ff; border: 1px solid #dfe3ea; border-radius: 8px; padding: 8px 34px; min-width: 130px; text-align: center; font-size: 13px; font-weight: 600; color: #1558d6; cursor: pointer; margin-top: 4px; }
.lc-ship-addbtn:hover { background: #e2e8ff; }


/* item-post shipping mode radios + combined */
.lc-ship-modes { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 14px; }
.lc-ship-moderadio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; cursor: pointer; }
.lc-ship-moderadio input { width: 16px; height: 16px; }
.lc-ship-combined { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.lc-ship-combined[hidden] { display: none; }
.lc-ship-combined .lc-ship-radio { align-items: flex-start; font-size: 13px; white-space: normal; }


/* item-post "Pickup allowed" checkbox */
.lc-ship-pickup { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 14px; font-size: 13px; color: #374151; cursor: pointer; }
.lc-ship-pickup[hidden] { display: none; }
.lc-ship-modewrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lc-ship-pickfree { margin: 6px 0 14px; }
.lc-ship-pickup input { margin-top: 2px; width: 18px; height: 18px; flex: none; }


/* compact shipping page */
.s498 { padding: 8px 14px; }
.ship-combined { padding: 9px 12px; margin: 2px 0 10px; }
.ship-edit-panel { margin-top: 8px; padding-top: 8px; }
.ship-edit-form .s204 { margin-top: 6px; }
.ship-edit-form .grid { margin-bottom: 0; }
.s497 { margin-bottom: 14px; }


/* shipping: edit fields on one row + name/price on one line */
.ship-edit-4col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .ship-edit-4col { grid-template-columns: 1fr 1fr; } }
.ship-info { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ship-info .s248 { margin: 0; }


/* dashboard shipping: Save button inline at the end of each row */
.sd-rowhead[hidden] { display: none; }
.sd-rowhead, .sd-row { display: grid; grid-template-columns: 300px 130px 175px 110px auto 30px; gap: 8px; align-items: center; }
.sd-rowhead { font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.sd-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eef1f5; }
.sd-row:last-child { border-bottom: 0; }
.sd-save { white-space: nowrap; padding: 0 18px; height: 40px; }
@media (max-width: 820px) { .sd-rowhead { display: none; } .sd-row { grid-template-columns: 1fr 1fr; } }

/* dashboard shipping content card (thin border) */
.ship-page-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; padding: 20px 22px; }

.lc-ship-optlbl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-ship-optfee { color: #555; font-weight: 600; margin-left: 4px; }

/* nbell compact view */
.nbell-menu { width: 360px; }
.nbell-top { padding: 4px 8px 2px; }
.nbell-title { font-size: 18px; }
.nbell-tabs { padding: 2px 6px 6px; }
.nbell-tab { font-size: 13px; padding: 4px 12px; }
.nbell-sec { font-size: 13px; padding: 6px 8px 2px; }
.nbell-item { margin-bottom: 2px; border-radius: 8px; padding: 0; }
.nbell-link { gap: 10px; padding: 5px 6px 5px 8px; }
.nbell-ava, .nbell-ava img { width: 36px; height: 36px; }
.nbell-ava > svg { width: 20px; height: 20px; }
.nbell-ic-badge { width: 16px; height: 16px; font-size: 10px; }
.nbell-text { font-size: 13.5px; }
.nbell-sub { font-size: 12px; }
.nbell-acct { font-size: 10px; margin-bottom: 1px; }
.nbell-time { font-size: 11px; margin-top: 1px; }
.nbell-readtoggle { width: 26px; height: 26px; }
.nbell-readdot { width: 10px; height: 10px; }
.nbell-seeall { padding: 8px; font-size: 14px; }
.nbell-empty { padding: 16px 12px; }

/* item post: every checkbox matches the makes-popup size */
form.lc-form input[type=checkbox] { width: 18px; height: 18px; flex: none; vertical-align: -4px; }

/* fitment popup: whole row hoverable + clickable */
.cp-win-b .cp-tick { padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.cp-win-b .cp-tick:hover { background: #f2f5fa; }
.cp-win-b .cp-tick input { cursor: pointer; }

/* item post: inline make/model search beside the add button */
.cp-addrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.cp-addrow .cp-btn-add { flex: none; }
.cp-inline-search { position: relative; flex: 1 1 260px; max-width: 430px; }
.cp-inline-search .cp-modelsearch-in { width: 100%; box-sizing: border-box; }
.cp-inline-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; background: #fff; z-index: 60; }

/* fitment popups: show-only-selected toggle */
.cp-selview { align-self: flex-end; margin: -6px 18px 8px; border: 0; background: none; color: #1558d6; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.cp-selview:hover { background: #eef4ff; text-decoration: underline; }
.cp-selview[hidden] { display: none; }

/* fitment popups: select-all + show-selected on one row */
.cp-toolrow { display: flex; align-items: center; gap: 10px; margin: -4px 18px 8px; }
.cp-toolrow .cp-all { margin: 0; flex: 1; }
.cp-toolrow .cp-selview { align-self: auto; margin: 0 0 0 auto; flex: none; }

/* edit page: the category cascade stays in the DOM (drives attr/shipping loads) but never shows */
#catCascade[hidden], .cat-sugg[hidden] { display: none; }

/* car detail spec panel (marketplacenz parity) */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; padding: 6px 0 2px; }
.cs-item { display: flex; gap: 10px; align-items: flex-start; }
.cs-ic { width: 26px; height: 26px; flex: none; color: #1558d6; margin-top: 1px; }
.cs-ic svg { width: 100%; height: 100%; display: block; }
.cs-txt { display: flex; flex-direction: column; min-width: 0; }
.cs-lbl { font-size: 12px; color: #6b7280; }
.cs-val { font-size: 15px; color: #111827; font-weight: 700; overflow-wrap: anywhere; }
.cs-h { margin-top: 20px; }
.cs-data { border-top: 1px solid #e5e7eb; }
.cs-row { display: flex; padding: 10px 8px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
.cs-row:nth-child(even) { background: #fafbfc; }
.cs-k { flex: 0 0 42%; color: #374151; }
.cs-v { flex: 1; color: #111827; }
.cs-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; padding: 6px 0; }
.cs-feat { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #111827; }
.cs-check { width: 16px; height: 16px; color: #1a73e8; flex: none; }
@media (max-width: 700px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } .cs-feats { grid-template-columns: 1fr; } }

/* motors price fields: fixed $ prefix + numbers-only manual entry */
.ml-price { position: relative; }
.ml-price-sign { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280; font-weight: 600; pointer-events: none; z-index: 1; }
.ml-price-in { width: 100%; box-sizing: border-box; padding-left: 24px !important; }

/* car-parts hero: wider combined search field */
.ml-fld-search { flex: 3 1 360px; }
.ml-fld-search .ml-inp { width: 100%; box-sizing: border-box; }

.ml-cp-break { flex-basis: 100%; height: 0; margin: 0; }

/* easy-listing helpers */
.lc-price-hint { display:none; font-size:13px; color:#0984e3; margin-top:5px; }
.lc-owner-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.lc-inline-form { display:inline; margin:0; }
.lc-action-btn { cursor:pointer; }
.lc-relist { background:#00b894; color:#fff; border-color:#00b894; }

/* easy-listing form helpers */
.lc-draft-bar { background:#fff8e1; border:1px solid #ffe0a3; border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:14px; }
.lc-draft-bar button { margin-left:8px; padding:4px 12px; border:1px solid #cfd6e0; border-radius:6px; background:#fff; cursor:pointer; }
.lc-draft-bar .lc-draft-restore { color:#0984e3; border-color:#0984e3; }
.lc-inline-err { color:#d63031; font-size:12px; margin-top:4px; }
.s328.lc-invalid, textarea.lc-invalid { border-color:#d63031; }
.lc-more-toggle { background:#f4f6f9; border:1px solid #cfd6e0; border-radius:6px; padding:8px 14px; cursor:pointer; color:#0984e3; font-size:14px; margin-top:8px; }
.lc-optional-attr { display:none; }
#catAttrs.lc-show-optional .lc-optional-attr { display:block; }

/* store / company website admin */
.acct-store-cta { color: #0984e3; border: 1px solid #0984e3; border-radius: 6px; }
.st-wrap { max-width: 1280px; margin: 22px auto 0; padding: 0 16px; }
.st-h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.st-sub { color: #55606c; font-size: 14px; margin-bottom: 18px; }
.st-msg { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.st-msg-ok { background: #e8f8f2; border: 1px solid #b7e7d4; color: #067a52; }
.st-msg-err { background: #fdeceb; border: 1px solid #f5c1be; color: #b3221c; }
.st-empty { background: #fff8e1; border: 1px solid #ffe0a3; border-radius: 8px; padding: 14px; font-size: 14px; }
.st-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.st-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.st-card-head h2 { font-size: 18px; font-weight: 700; }
.st-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; background: #eef3fb; color: #2563eb; border-radius: 5px; padding: 3px 8px; }
.st-visit { margin-left: auto; font-size: 13px; color: #0984e3; text-decoration: none; }
.st-live { background: #f2f8f5; border: 1px solid #cde9db; border-radius: 7px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.st-form .st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-field { margin-bottom: 12px; }
.st-field label { display: block; font-size: 13px; font-weight: 600; color: #2d3436; margin-bottom: 5px; }
.st-field input[type=text], .st-field input[type=email], .st-field textarea { width: 100%; border: 1px solid #ccc; border-radius: 5px; padding: 9px 12px; font-size: 15px; }
.st-field input[type=color] { width: 56px; height: 40px; border: 1px solid #ccc; border-radius: 5px; padding: 2px; }
.st-slugrow { display: flex; align-items: center; gap: 6px; }
.st-slugrow input { flex: 1; }
.st-slugsuffix { font-size: 13px; color: #66707a; white-space: nowrap; }
.st-save { background: #0984e3; color: #fff; border: 0; border-radius: 6px; padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
.st-save:hover { background: #0b6fc0; }
@media (max-width: 640px) { .st-form .st-row { grid-template-columns: 1fr; } }

/* store custom domains */
.st-domains { border-top: 1px solid #eef1f6; margin-top: 16px; padding-top: 14px; }
.st-domains h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.st-dom-row { border: 1px solid #e5e8ee; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.st-dom-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-dom-name { font-weight: 700; font-size: 15px; }
.st-dom-badge { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 8px; text-transform: uppercase; }
.st-dom-badge.pending { background: #fff4e0; color: #b96c00; }
.st-dom-badge.verified { background: #e8f8f2; color: #067a52; }
.st-dom-actions { margin-left: auto; display: flex; gap: 8px; }
.st-dom-btn { border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.st-dom-btn.verify { border-color: #0984e3; color: #0984e3; }
.st-dom-btn.remove { color: #b3221c; }
.st-dom-steps { background: #f8fafc; border: 1px solid #e5e8ee; border-radius: 7px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.st-dom-steps ol { margin: 6px 0 0 18px; }
.st-dom-steps li { margin-bottom: 6px; }
.st-dom-rec { font-family: Consolas, monospace; background: #eef3f8; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
.st-dom-live { font-size: 13px; margin-top: 6px; }
.st-dom-add { display: flex; gap: 8px; margin-top: 6px; }
.st-dom-add input { flex: 1; border: 1px solid #ccc; border-radius: 5px; padding: 8px 12px; font-size: 14px; }
.st-dom-add button { background: #16213a; color: #fff; border: 0; border-radius: 6px; padding: 8px 16px; font-size: 14px; cursor: pointer; }

/* store owner management */
.st-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.st-chip { background: #eef3fb; color: #2563eb; border-radius: 14px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.st-toolbtn { border: 1px solid #cfd6e0; background: #fff; border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; text-decoration: none; color: #23272f; }
.st-toolbtn.warn { border-color: #e0a03c; color: #b96c00; }
.st-toolbtn.ok { border-color: #00b894; color: #067a52; }
.st-paused { color: #b96c00; font-size: 13px; }
.st-uploads { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.st-upl { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.st-upl label { font-weight: 600; }
.st-listings { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e8ee; border-radius: 8px; }
.st-listings th, .st-listings td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eef1f6; font-size: 14px; }
.st-listings tr.st-l-hidden td { color: #98a1ab; }

/* store page tabs + website builder */
.st-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e8ee; margin-bottom: 18px; }
.st-tab { padding: 10px 18px; font-size: 15px; font-weight: 600; color: #55606c; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.st-tab.on { color: #0984e3; border-bottom-color: #0984e3; }
.st-site-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; padding: 0; margin-bottom: 18px; overflow: hidden; }
.st-site-hero { padding: 18px 22px; color: #fff; display: flex; align-items: center; gap: 12px; }
.st-site-hero h2 { font-size: 19px; font-weight: 800; }
.st-site-hero .st-site-url { font-size: 13px; opacity: 0.9; }
.st-site-logo { width: 44px; height: 44px; border-radius: 9px; background: #fff; object-fit: cover; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.st-site-body { padding: 14px 22px 18px; }
.st-site-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.st-site-btn { border: 1px solid #cfd6e0; background: #fff; border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; color: #23272f; }
.st-site-btn.primary { background: #0984e3; border-color: #0984e3; color: #fff; }
.sb-layout { display: grid; grid-template-columns: 420px 1fr; gap: 18px; align-items: start; }
.sb-panel { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.sb-panel h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.sb-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-swatch { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; display: inline-block; }
.sb-swatch.on { border-color: #23272f; box-shadow: 0 0 0 2px #fff inset; }
.sb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sb-sec { display: flex; align-items: center; gap: 8px; border: 1px solid #e5e8ee; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: #f9fafc; }
.sb-sec b { flex: 1; font-size: 14px; }
.sb-arrow { border: 1px solid #cfd6e0; background: #fff; border-radius: 5px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; }
.sb-deals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 300px; overflow-y: auto; }
.sb-deal { border: 1px solid #e5e8ee; border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.sb-deal.on { border-color: #e0a03c; background: #fff8ec; }
.sb-deal button { margin-top: 5px; border: 1px solid #cfd6e0; background: #fff; border-radius: 5px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
.sb-preview { background: #fff; border: 1px solid #e5e8ee; border-radius: 12px; overflow: hidden; position: sticky; top: 12px; }
.sb-preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #f6f8fb; border-bottom: 1px solid #e5e8ee; font-size: 13px; }
.sb-preview iframe { width: 100%; height: 720px; border: 0; }
.sb-save { background: #0984e3; color: #fff; border: 0; border-radius: 7px; padding: 10px 20px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; }
@media (max-width: 1100px) { .sb-layout { grid-template-columns: 1fr; } .sb-preview { position: static; } }
/* storefront promo bar + sale badges + contact section */

/* wix-style builder additions */
.sb-gal { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sb-gal-item { position: relative; }
.sb-gal-item img { width: 86px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e8ee; }
.sb-gal-item button { position: absolute; top: 2px; right: 2px; border: 0; background: rgba(0,0,0,0.6); color: #fff; border-radius: 4px; font-size: 10px; padding: 1px 5px; cursor: pointer; }
.sb-css { width: 100%; min-height: 160px; font-family: Consolas, monospace; font-size: 13px; border: 1px solid #ccc; border-radius: 6px; padding: 10px; }
.sb-hint { background: #f6f8fb; border: 1px solid #e5e8ee; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #55606c; margin-top: 6px; }
.sb-hint code { background: #eef3f8; border-radius: 3px; padding: 1px 4px; }
.sb-radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sb-radio-row label { display: flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }

/* drag-and-drop page designer */
.dd-layout { display: grid; grid-template-columns: 480px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .dd-layout { grid-template-columns: 1fr; } }
.dd-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dd-add { border: 1px dashed #9db1c7; background: #f6faff; color: #2563eb; border-radius: 7px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dd-add:hover { background: #eaf3ff; }
.dd-canvas { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.dd-block { background: #fff; border: 1px solid #dbe2ec; border-radius: 9px; }
.dd-block.dragging { opacity: 0.45; }
.dd-block.dropover { border-color: #0984e3; box-shadow: 0 0 0 2px #cfe6fb; }
.dd-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: grab; }
.dd-grip { color: #9aa7b5; font-size: 15px; }
.dd-title { flex: 1; font-size: 14px; font-weight: 700; }
.dd-sub { color: #8a93a0; font-size: 12px; }
.dd-tool { border: 1px solid #cfd6e0; background: #fff; border-radius: 5px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.dd-tool.del { color: #b3221c; }
.dd-settings { border-top: 1px solid #eef1f6; padding: 10px 14px; display: none; }
.dd-block.open .dd-settings { display: block; }
.dd-settings label { display: block; font-size: 12px; font-weight: 700; color: #55606c; margin: 8px 0 3px; }
.dd-settings input[type=text], .dd-settings textarea, .dd-settings select { width: 100%; border: 1px solid #ccc; border-radius: 5px; padding: 7px 10px; font-size: 14px; }
.dd-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-cats label { display: flex; align-items: center; gap: 4px; border: 1px solid #dbe2ec; border-radius: 14px; padding: 3px 10px; font-size: 12px; font-weight: 600; margin: 0; cursor: pointer; }
.dd-cats label.on { background: #eaf3ff; border-color: #0984e3; color: #0984e3; }
.dd-inline { display: flex; gap: 10px; }
.dd-inline > div { flex: 1; }
.dd-empty { border: 2px dashed #cfd6e0; border-radius: 10px; padding: 30px; text-align: center; color: #8a93a0; font-size: 14px; }

/* template picker */
.tp-group { margin: 22px 0 10px; font-size: 17px; font-weight: 800; }
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .tp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tp-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.tp-card.on { border-color: #0984e3; box-shadow: 0 0 0 2px #cfe6fb; }
.tp-prev { display:block; height: 170px; position: relative; background: #f2f5f9; overflow:hidden; }
.tp-prev-shot { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tp-prev-head { height: 30px; }
.tp-prev-head.tall { height: 52px; }
.tp-prev-head.slim { height: 16px; }
.tp-prev-nav { height: 10px; background: #e6ebf2; }
.tp-prev-cards { display: flex; gap: 4px; padding: 6px; }
.tp-prev-cards span { background: #d5dce6; border-radius: 3px; height: 26px; flex: 1; }
.tp-prev-cards.list { flex-direction: column; padding-right: 40%; }
.tp-prev-cards.list span { height: 8px; }
.tp-prev-cards.large span { height: 34px; }
.tp-prev-cards.compact span { height: 18px; }
.tp-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tp-name { font-size: 15px; font-weight: 800; }
.tp-desc { font-size: 12px; color: #66707a; flex: 1; }
.tp-meta { font-size: 10px; color: #98a1ab; text-transform: uppercase; letter-spacing: 0.4px; }
.tp-apply { background: #0984e3; color: #fff; border: 0; border-radius: 6px; padding: 7px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.tp-current { background: #e8f8f2; color: #067a52; text-align: center; border-radius: 6px; padding: 6px 0; font-size: 12px; font-weight: 700; }

.tp-preview { text-align: center; border: 1px solid #cfd6e0; border-radius: 6px; padding: 6px 0; font-size: 12px; font-weight: 700; color: #23272f; text-decoration: none; }
.tp-preview:hover { border-color: #0984e3; color: #0984e3; }

/* dashboard store: create-tab demo design gallery */
.st-demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-height:460px;overflow-y:auto;padding:4px;border:1px solid #eef1f5;border-radius:12px}
.st-demo{position:relative;border:2px solid #e2e6ee;border-radius:12px;padding:10px;cursor:pointer;background:#fff;display:flex;flex-direction:column;gap:2px}
.st-demo input{position:absolute;opacity:0;pointer-events:none}
.st-demo:has(input:checked){border-color:#2b8fe0;background:#f4f9fe}
.st-demo b{font-size:13px;color:#1e2532}
.st-demo small{color:#7b828c;font-size:11px;line-height:1.4}
.st-demo-prev{display:block;border:1px solid #edf0f4;border-radius:8px;overflow:hidden;margin-bottom:7px;background:#f6f7f9}
.st-demo-prev .dp-head{display:block;height:18px;background:#16213a}
.st-demo-prev .dp-nav{display:block;height:8px;background:#333}
.st-demo-prev .dp-cards{display:flex;gap:4px;padding:6px}
.st-demo-prev .dp-cards i{flex:1;height:24px;background:#fff;border:1px solid #e5e8ee;border-radius:4px}
.st-demo-link{position:absolute;top:8px;right:8px;background:#fff;border:1px solid #dfe3ea;border-radius:8px;font-size:11px;font-weight:700;color:#33507a;padding:3px 9px}
.st-demo-link:hover{background:#2b8fe0;color:#fff;border-color:#2b8fe0}

/* demo gallery v2: large screenshot cards */
.st-demos{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));max-height:640px}
.st-demo-shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid #edf0f4;border-radius:8px;margin-bottom:8px;background:#f6f7f9}
.st-demo b{font-size:14px}
.st-demo small{font-size:12px}
.st-demo-link{font-size:12px;padding:5px 12px}

/* create wizard: category tabs + revealed step 2 */
.st-cattabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.st-cattab{border:1.5px solid #dfe3ea;background:#fff;border-radius:20px;font-weight:700;font-size:13px;color:#4a5262;padding:8px 18px;cursor:pointer}
.st-cattab.on{background:#2b8fe0;border-color:#2b8fe0;color:#fff}
.st-step2{display:none;border-top:1px solid #eef1f5;margin-top:16px;padding-top:16px}
.st-step2.open{display:block}
#st-bizsel{width:100%;max-width:460px;border:1px solid #dfe3ea;border-radius:9px;padding:10px 12px;font-size:14px;background:#fff}

/* st-demos flow fix: no inner scrolling, demos flow with the page */
.st-demos{max-height:none;overflow:visible;border:0;padding:0}

/* create wizard: category selection */
.st-navcats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st-navcats .grp{border:1px solid #e7eaf0;border-radius:12px;padding:12px 14px}
.st-navcats .grp b{display:block;font-size:13px;color:#1e2532;margin-bottom:7px}
.st-navcats .ck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#4a5262;margin:0 12px 7px 0;cursor:pointer}
@media(max-width:900px){.st-navcats{grid-template-columns:1fr}}

/* website card: header action buttons */
.st-hero-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.st-hero-btn{background:#fff;color:#1b2230;font-weight:700;font-size:13px;border-radius:8px;padding:8px 16px;text-decoration:none;border:1px solid rgba(255,255,255,.6)}
.st-hero-btn:hover{background:#f3f6fb}
@media(max-width:700px){.st-hero-right{flex-wrap:wrap}}

/* create form: show-this-listing-on-my-website */
.cp-webshow{border:1px solid #d6e4f5;background:#f2f8ff;border-radius:12px;padding:14px 16px;margin:18px 0}
.cp-webshow-main{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.cp-webshow-main input[type=checkbox]{width:22px;height:22px;margin-top:1px;flex:0 0 auto;accent-color:#2b8fe0}
.cp-webshow-txt b{display:block;font-size:15px;color:#12314f}
.cp-webshow-txt small{display:block;font-size:12.5px;color:#4e6a86;margin-top:2px}
.cp-webshow-warn{margin-top:12px;background:#fff5e8;border:1px solid #f2c98f;border-radius:9px;padding:10px 13px;font-size:13px;color:#8a4b06;line-height:1.5}
.cp-webshow-warn a{display:inline-block;margin-top:4px;font-weight:700;color:#c76a10;text-decoration:none;white-space:nowrap}
.cp-webshow-warn a:hover{text-decoration:underline}

.st-cattabs-top{margin:0 0 16px}

/* forstore category restriction */
.lc-restrict-note{background:#eef7ff;border:1px solid #bcd9f5;border-radius:10px;padding:11px 14px;font-size:13.5px;color:#234;margin:0 0 12px}
.lc-restrict-note a{color:#2b8fe0;font-weight:700;text-decoration:none}
.lc-restrict-warn{background:#fff5e8;border:1px solid #f2c98f;border-radius:9px;padding:10px 13px;font-size:13px;color:#8a4b06;margin:0 0 10px}
.cp-catrestrict{background:#fff5e8;border:1px solid #f2c98f;border-radius:9px;padding:9px 13px;font-size:13px;color:#8a4b06;margin:10px 0 0}
.cp-catrestrict a{color:#c76a10;font-weight:700;text-decoration:none}

.lc-postas-store .lc-postas-store-name{font-weight:800;color:#12314f;font-size:14px}

/* storefront signup: powered-by nzmarketplace + both terms */
.reg-poweredby{background:#eef7ff;border:1px solid #bcd9f5;border-radius:12px;padding:13px 15px;margin:0 0 16px;display:flex;flex-direction:column;gap:3px}
.reg-poweredby .reg-pb-store{font-size:15px;color:#12314f}
.reg-poweredby .reg-pb-note{font-size:12.5px;color:#3d6690}
.reg-poweredby .reg-pb-badge{font-size:12px;color:#2b8fe0;font-weight:700;margin-top:4px}
.reg-terms{display:flex;align-items:flex-start;gap:9px;margin:2px 0 14px;font-size:13px;color:#334;line-height:1.5}
.reg-terms input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex:0 0 auto;accent-color:#2b8fe0}
.reg-terms a{color:#2b8fe0;font-weight:600;text-decoration:none}
.reg-terms a:hover{text-decoration:underline}

/* create chooser: store hint under Post-as (only when the seller has a store) */
.lc-store-hint{background:#eef7ff;border:1px solid #bcd9f5;border-radius:10px;padding:11px 14px;margin:10px 0 4px;font-size:13.5px;color:#234;line-height:1.5}
.lc-store-hint a{color:#2b8fe0;font-weight:700;text-decoration:none;white-space:nowrap}
.lc-store-hint a:hover{text-decoration:underline}

/* templates page category tabs (5.png) */
.tp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.tp-tab{padding:9px 18px;border:1px solid #dfe3ea;border-radius:999px;background:#fff;color:#3a4658;font-weight:700;font-size:13.5px;text-decoration:none}
.tp-tab.on{background:#2b8fe0;border-color:#2b8fe0;color:#fff}
.tp-tab:hover{border-color:#2b8fe0;color:#2b8fe0}
.tp-tab.on:hover{color:#fff}


/* Rounded top search bar (1.png): the whole row is a pill, so the first field and
   the search button carry the curve themselves. The wrapper can no longer clip
   them, because that clipping was also hiding the suggestions that drop under
   the bar - they were being rendered right underneath and cut away. */
.s474 { border-radius: 50px; overflow: visible; }
.s474 .s483 { border-radius: 50px 0 0 50px; padding-left: 22px; }
.s474 button.s487 { border-radius: 0 50px 50px 0; }
.s484 { top: 56px; border-radius: 16px; border-top: 1px solid #ddd; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
/* the stacked version of the same bar on a narrow window */
.s475, .s476 { border-radius: 50px; padding-left: 18px; }
.s477 { border-radius: 50px; }
.s477 .s488 { padding-left: 18px; }
button.s489 { border-radius: 0 50px 50px 0; }


/* Listing pictures on cards: show the whole photo inside the box instead of
   cropping the sides off. The boxes keep their height, so the rows still line
   up; a photo that is a different shape gets white space around it. Covers the
   search results (list and grid), My listings, the homepage grid, watchlist,
   auctions, expired listings and the seller profile grid. */
body:not(.trendora):not(.zproperty):not(.motorlane):not(.jobboard):not(.svcportal) .sp-card-img img,
.my-listing-card-img img,
.s320 .s185,
.s184 .s185,
.s273 .s185,
.s435 .s185 { object-fit: contain; background: #fff; }


/* Marketplace search, grid view: the picture box is square - as tall as it is
   wide - so a card is the same shape whatever the window width. Only this page:
   the list view keeps its own row size, and the Fashion, Property, Cars, Jobs
   and Services portals are left exactly as they were. */
body:not(.trendora):not(.zproperty):not(.motorlane):not(.jobboard):not(.svcportal) .sp-cards-grid .sp-card-img { height: auto; aspect-ratio: 1 / 1; }


/* Grid cards: a line under the picture box, separating the photo from the title
   and price the way marketplacenz does it (1.png). Every page that shows cards
   in a grid: search results, the homepage, My listings, watchlist, auctions, the
   seller profile grid, and the portal card styles. */
.sp-cards-grid .sp-card-img,
.my-listing-card-img,
.s320,
.s184,
.s435,
.td-card-img,
.zp-card-img { border-bottom: 1px solid #e5e5e5; }

/* Car Parts post-form tabs: All other parts / Tyres / Wheels (10.png) */
.cp-post-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cp-post-tab { padding: 7px 20px; border: 1px solid #d7dbe2; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #2b3648; background: #fff; cursor: pointer; }
.cp-post-tab:hover { border-color: #2563eb; color: #2563eb; }
.cp-post-tab.on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Required-field marker: bigger and red on every form (1.png) */
.req-star, .lc-req { color: #dc2626; font-size: 1.3em; font-weight: 700; line-height: 1; }


/* "Areas you service" chip picker (post + edit form) and the read-only list on a listing. */
.sa-wrap .sa-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.sa-chips:empty { margin: 0; }
.sa-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem .25rem .6rem;
           border: 1px solid #cbd5e1; border-radius: 999px; background: #f1f5f9;
           font-size: .82rem; line-height: 1.4; color: #0f172a; }
.sa-chip-all { background: #dbeafe; border-color: #93c5fd; font-weight: 600; }
.sa-chip-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.sa-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1;
             padding: 0 .1rem; color: #64748b; }
.sa-chip-x:hover { color: #dc2626; }
.sa-input-wrap { position: relative; }
.sa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.sa-quick-btn { border: 1px solid #cbd5e1; background: #fff; border-radius: .375rem;
                padding: .25rem .6rem; font-size: .8rem; cursor: pointer; color: #0f172a; }
.sa-quick-btn:hover { background: #f8fafc; }
.sa-quick-clear { color: #b91c1c; border-color: #fecaca; }
.sa-count { font-size: .78rem; color: #64748b; margin-left: auto; }

.sa-detail { margin: .6rem 0; }
.sa-detail-h { font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: .35rem; }
.sa-chips-ro { display: flex; flex-wrap: wrap; gap: .35rem; }
.sa-chip-ro { background: #f8fafc; }
.sa-chips-ro .sa-hidden-chip { display: none; }
.sa-chips-ro.sa-open .sa-hidden-chip { display: inline-flex; }
.sa-more-btn { border: 1px dashed #cbd5e1; background: #fff; border-radius: 999px;
               padding: .25rem .6rem; font-size: .8rem; cursor: pointer; color: #2563eb; }

/* #latLngRow carries Tailwind's `grid` (display:grid), which outranks the plain
   [hidden] attribute - Services hides this row, so make the attribute stick. */
#latLngRow[hidden], #locWrap[hidden], #typeWrap[hidden], .cat-sugg[hidden] { display: none; }


/* ---------- Messenger (port of the Osclass instant_messenger plugin) ---------- */
/* width + centering + side padding come from the header container classes on the
   element itself (max-w-6xl mx-auto px-4), so the page lines up with the top bar. */
.msg-wrap { padding-top: 1.25rem; padding-bottom: 2.5rem; }
.msg-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.msg-unread-pill { background: #dc2626; color: #fff; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; }
.msg-flash { border-radius: .375rem; padding: .55rem .75rem; margin-bottom: .75rem; font-size: .875rem; }
.msg-flash.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.msg-flash.err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.msg-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.msg-f-search { flex: 1 1 16rem; min-width: 12rem; height: 2.5rem; padding: .4rem .6rem; border: 1px solid #cbd5e1; border-radius: .375rem; }
.msg-f-date { height: 2.5rem; padding: .4rem .5rem; border: 1px solid #cbd5e1; border-radius: .375rem; }
.msg-f-star { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: #334155; white-space: nowrap; }
.msg-f-btn { height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: .375rem; background: #2563eb; color: #fff; cursor: pointer; }
.msg-f-clear { font-size: .82rem; color: #64748b; }

.msg-list { border: 1px solid #e2e8f0; border-radius: .5rem; overflow: hidden; }
.msg-row { display: flex; align-items: stretch; border-bottom: 1px solid #f1f5f9; background: #fff; }
.msg-row:last-child { border-bottom: 0; }
.msg-row.unread { background: #f0f7ff; }
.msg-row-main { display: flex; gap: .7rem; padding: .7rem .8rem; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.msg-row-main:hover { background: #f8fafc; }
.msg-row-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.msg-row-top { display: flex; justify-content: space-between; gap: .5rem; }
.msg-name { font-size: .92rem; color: #0f172a; }
.msg-row.unread .msg-name { font-weight: 700; }
.msg-time { font-size: .75rem; color: #94a3b8; white-space: nowrap; }
.msg-sub { font-size: .78rem; color: #2563eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-preview { font-size: .82rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-you { color: #94a3b8; }
.msg-clip { color: #64748b; }
.msg-row-acts { display: flex; align-items: center; gap: .3rem; padding-right: .6rem; }
.msg-star { border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; line-height: 1; color: #cbd5e1; padding: .2rem; }
.msg-star.on { color: #f59e0b; }
.msg-star:hover { color: #f59e0b; }
.msg-block-btn, .msg-unblock { border: 1px solid #e2e8f0; background: #fff; border-radius: .3rem; font-size: .74rem; padding: .18rem .45rem; cursor: pointer; color: #b91c1c; }
.msg-pager { display: flex; gap: .8rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: .85rem; }
.msg-pager-now { color: #64748b; }

.msg-avatar { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 999px; background: #e2e8f0;
              color: #475569; display: inline-flex; align-items: center; justify-content: center;
              font-size: .8rem; font-weight: 600; overflow: hidden; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.msg-blocked { margin-top: 1.75rem; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .8rem; }
.msg-blocked-h { font-size: .95rem; font-weight: 600; }
.msg-blocked-hint { font-size: .8rem; color: #64748b; margin-bottom: .5rem; }
.msg-blocked-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .85rem; border-top: 1px solid #f1f5f9; }

.msg-thread { border: 1px solid #e2e8f0; border-radius: .5rem; overflow: hidden; margin-top: .75rem; background: #fff; }
.msg-thread-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.msg-thread-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-thread-item { font-size: .8rem; color: #2563eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread-acts { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.msg-act { border: 1px solid #cbd5e1; background: #fff; border-radius: .3rem; font-size: .74rem; padding: .22rem .5rem; cursor: pointer; color: #334155; }
.msg-act.on { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.msg-act.danger { color: #b91c1c; border-color: #fecaca; }

.msg-stream { max-height: 60vh; overflow-y: auto; padding: .9rem .8rem; background: #f8fafc; display: flex; flex-direction: column; gap: .5rem; }
.msg-line { display: flex; }
.msg-line.mine { justify-content: flex-end; }
.msg-bubble { max-width: 78%; border-radius: .6rem; padding: .45rem .65rem; font-size: .88rem; line-height: 1.45; }
.msg-bubble.other { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
/* 5.png: solid blue on every one of your own messages was harsh to read, so the
   sent bubble is a soft grey and the received one stays white. */
.msg-bubble.mine { background: #eceff3; border: 1px solid #dde2e9; color: #0f172a; }
.msg-bubble.mine .msg-meta { color: #64748b; opacity: 1; }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-meta { display: flex; align-items: center; gap: .5rem; font-size: .68rem; margin-top: .2rem; opacity: .75; }
.msg-bubble.other .msg-meta { color: #64748b; }
.msg-read { font-weight: 600; }
.msg-del { border: 0; background: transparent; cursor: pointer; font-size: .68rem; color: inherit; text-decoration: underline; padding: 0; }
.msg-att { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .8rem; }
.msg-att a { text-decoration: underline; color: inherit; word-break: break-all; }
.msg-att-size { opacity: .7; font-size: .72rem; }
.msg-att-x { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: .95rem; line-height: 1; padding: 0 .15rem; }

.msg-reply { border-top: 1px solid #e2e8f0; padding: .7rem .8rem; }
.msg-reply-text { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .5rem .6rem; font-size: .88rem; resize: vertical; }
.msg-reply-bar { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.msg-file { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: #334155; cursor: pointer;
            border: 1px dashed #cbd5e1; border-radius: .375rem; padding: .25rem .55rem; }
.msg-file input[type=file] { display: none; }
.msg-file-hint { font-size: .72rem; color: #94a3b8; }
.msg-send { margin-left: auto; border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .45rem 1.1rem; cursor: pointer; }
.msg-blocked-note { border-top: 1px solid #e2e8f0; padding: .8rem; font-size: .85rem; color: #b91c1c; background: #fef2f2; }

@media (max-width: 640px) {
  .msg-bubble { max-width: 90%; }
  .msg-f-search { flex-basis: 100%; }
}


/* inbox extras: usage banner, reset button, per-row tags (1.png / 2.png) */
.msg-total { color: #64748b; font-size: .82rem; margin: -.35rem 0 .75rem; }
.msg-usage { border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; border-radius: .375rem;
             padding: .6rem .8rem; font-size: .82rem; line-height: 1.5; margin-bottom: .85rem; }
.msg-f-reset { display: inline-flex; align-items: center; gap: .25rem; height: 2.5rem; padding: 0 .8rem;
               border: 1px solid #cbd5e1; border-radius: .375rem; color: #475569; font-size: .85rem; }
.msg-f-reset:hover { background: #f8fafc; }
.msg-f-btn { display: inline-flex; align-items: center; gap: .3rem; }
.msg-row-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
.msg-count { font-size: .7rem; color: #94a3b8; }
.msg-unread-tag { font-size: .7rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
                  border-radius: .25rem; padding: 0 .3rem; font-weight: 600; }
.msg-notify { border: 0; background: transparent; cursor: pointer; padding: .2rem; color: #cbd5e1; line-height: 1; }
.msg-notify.on { color: #dc2626; }
.msg-notify:hover { color: #dc2626; }
.msg-thread-subject { font-size: .82rem; color: #334155; font-weight: 600; }
.msg-ajax-err { margin: 0 0 .5rem; }

/* ---------- Two-pane messages (5.png, Fiverr style) ---------- */
/* 5.png: one fixed height whether the thread holds 1 message or 1000 - the stream
   scrolls inside instead of stretching the page. */
.msg-split { display: grid; grid-template-columns: 22rem 1fr; gap: 0;
             border: 1px solid #e2e8f0; border-radius: .5rem; overflow: hidden;
             background: #fff; height: 38rem; }
/* Grid/flex items default to min-height:auto, which lets them grow past the fixed
   height of the split - so every level down to the stream needs min-height:0 or the
   inner scrollbar never appears. */
.msg-side, .msg-pane { min-height: 0; overflow: hidden; }
.msg-pane .msg-thread { min-height: 0; }
.msg-side { border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; min-width: 0; }
.msg-side .msg-filters { padding: .6rem; margin: 0; border-bottom: 1px solid #e2e8f0; gap: .4rem; }
.msg-side .msg-f-search { flex: 1 1 100%; height: 2.2rem; }
.msg-side .msg-f-date { width: 6.2rem; height: 2.2rem; }
.msg-side .msg-f-btn, .msg-side .msg-f-reset { height: 2.2rem; font-size: .8rem; padding: 0 .6rem; }
.msg-side .msg-list { border: 0; border-radius: 0; overflow-y: auto; flex: 1; min-height: 0; }
.msg-side .msg-pager { padding: .5rem; border-top: 1px solid #e2e8f0; margin: 0; font-size: .78rem; }
.msg-list-empty { padding: 2rem 1rem; text-align: center; color: #94a3b8; font-size: .85rem; }

/* the open conversation is highlighted like Fiverr's selected row */
.msg-row.active { background: #eef2f7; }
.msg-row.active .msg-name { font-weight: 700; }
.msg-row-main { cursor: pointer; }

.msg-pane { display: flex; flex-direction: column; min-width: 0; }
.msg-pane .msg-thread { border: 0; border-radius: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }
.msg-pane .msg-stream { flex: 1; max-height: none; min-height: 0; overflow-y: auto; }
.msg-pane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
                  gap: .5rem; height: 100%; min-height: 20rem; color: #94a3b8; font-size: .9rem; }
.msg-back { display: none; color: #475569; }

@media (max-width: 900px) {
  /* one column: the list, or the open conversation with a back arrow */
  .msg-split { grid-template-columns: 1fr; min-height: 0; }
  .msg-side { border-right: 0; }
  .msg-side .msg-list { max-height: none; }
  .msg-pane { display: none; }
  .msg-split.has-open .msg-side { display: none; }
  .msg-split.has-open .msg-pane { display: flex; }
  .msg-back { display: inline-flex; }
}

/* loading earlier messages strip at the top of the stream */
.msg-older { text-align: center; font-size: .78rem; color: #64748b; padding: .4rem 0; }
.msg-older-spin { display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem;
                  border: 2px solid #cbd5e1; border-top-color: #64748b; border-radius: 50%;
                  animation: msg-spin .7s linear infinite; vertical-align: -1px; }
@keyframes msg-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .msg-split { height: auto; }
  .msg-split.has-open { height: calc(100vh - 12rem); }
}

/* ---------- Support (user-facing) ---------- */
.sup-wrap { max-width: 60rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.sup-sub { color: #64748b; font-size: .9rem; margin: .2rem 0 1rem; }
.sup-back { color: #2563eb; font-size: .85rem; }
.sup-grid { display: grid; grid-template-columns: 22rem 1fr; gap: 1.2rem; }
.sup-h2 { font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }
.sup-new, .sup-list { border: 1px solid #e2e8f0; border-radius: .6rem; padding: 1rem; background: #fff; }
.sup-lbl { display: block; font-size: .82rem; font-weight: 600; margin: .5rem 0 .2rem; }
.sup-inp { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .5rem .6rem; font-size: .9rem; box-sizing: border-box; }
textarea.sup-inp { resize: vertical; }
.sup-btn { margin-top: .7rem; border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .55rem 1.1rem; cursor: pointer; }
.sup-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .3rem; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; }
.sup-row:hover { background: #f8fafc; }
.sup-row-main { display: flex; flex-direction: column; min-width: 0; }
.sup-row-subj { font-weight: 600; font-size: .9rem; color: #0f172a; }
.sup-row-time { font-size: .76rem; color: #94a3b8; }
.sup-empty { color: #94a3b8; font-size: .88rem; padding: 1rem 0; }
.sup-pill { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .12rem .55rem; white-space: nowrap; }
.sup-pill.open { background: #dbeafe; color: #1d4ed8; }
.sup-pill.prog { background: #fef3c7; color: #92400e; }
.sup-pill.res { background: #dcfce7; color: #166534; }
.sup-pill.closed { background: #e2e8f0; color: #475569; }
.sup-thead, .sup-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sup-meta { color: #64748b; font-size: .82rem; }
.sup-thread { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.sup-msg { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .6rem .8rem; max-width: 85%; }
.sup-msg.staff { background: #eff6ff; border-color: #bfdbfe; align-self: flex-start; }
.sup-msg.mine { background: #f8fafc; align-self: flex-end; }
.sup-msg.other { background: #fff; align-self: flex-start; }
.sup-msg-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; margin-bottom: .25rem; }
.sup-msg-head strong { color: #0f172a; }
.sup-msg-head span { color: #94a3b8; }
.sup-msg-body { white-space: pre-wrap; font-size: .9rem; color: #1f2937; }
.sup-reply { display: flex; flex-direction: column; gap: .5rem; }
.sup-closed { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .8rem; font-size: .85rem; color: #64748b; }
@media (max-width: 760px) { .sup-grid { grid-template-columns: 1fr; } .sup-msg { max-width: 100%; } }

/* ---------- Support (admin) ---------- */
.admin-badge { display: inline-block; min-width: 1.1rem; text-align: center; background: #dc2626; color: #fff; border-radius: 999px; font-size: .68rem; padding: 0 .35rem; margin-left: .35rem; }
.asup-tabs { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .8rem 0; }
.asup-tab { border: 1px solid #e2e8f0; border-radius: .375rem; padding: .3rem .7rem; font-size: .82rem; color: #334155; text-decoration: none; }
.asup-tab.on { background: #2563eb; color: #fff; border-color: #2563eb; }
.asup-tab span { opacity: .7; margin-left: .2rem; }
.asup-search { margin-left: auto; display: flex; gap: .4rem; }
.asup-search input { border: 1px solid #cbd5e1; border-radius: .375rem; padding: .3rem .5rem; }
.asup-search button { border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .3rem .8rem; cursor: pointer; }
.asup-table td { vertical-align: top; }
.asup-awaiting { background: #fff7ed; }
.asup-subj { font-weight: 600; color: #0f172a; }
.asup-flag { display: inline-block; margin-left: .4rem; font-size: .68rem; background: #fed7aa; color: #9a3412; border-radius: .25rem; padding: 0 .35rem; }
.asup-email { color: #94a3b8; font-size: .76rem; }
.asup-pill { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .12rem .55rem; }
.asup-pill.open { background: #dbeafe; color: #1d4ed8; }
.asup-pill.prog { background: #fef3c7; color: #92400e; }
.asup-pill.res { background: #dcfce7; color: #166534; }
.asup-pill.closed { background: #e2e8f0; color: #475569; }
.asup-open { color: #2563eb; }
.asup-back { color: #2563eb; font-size: .85rem; }
.asup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: .6rem 0 1rem; }
.asup-meta { color: #64748b; font-size: .82rem; }
.asup-thread { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.asup-msg { border: 1px solid #e2e8f0; border-radius: .5rem; padding: .6rem .8rem; max-width: 85%; }
.asup-msg.staff { background: #eff6ff; border-color: #bfdbfe; align-self: flex-end; }
.asup-msg.cust { background: #fff; align-self: flex-start; }
.asup-msg-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; margin-bottom: .25rem; }
.asup-msg-body { white-space: pre-wrap; font-size: .9rem; }
.asup-reply { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.asup-reply textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: .375rem; padding: .5rem .6rem; box-sizing: border-box; }
.asup-reply-bar { display: flex; align-items: center; gap: 1rem; }
.asup-send { border: 0; border-radius: .375rem; background: #2563eb; color: #fff; padding: .5rem 1.1rem; cursor: pointer; }

/* 2.png: Support / Forum header items (sit beside the messages envelope). */
.td-nlink { display:inline-flex; align-items:center; gap:5px; position:relative; font-size:14px; margin-left:18px; }
.nbell + .td-nlink, .nbell + script + .td-nlink { margin-left:34px; }   /* extra air after the bell badge overflow (the bell component ends with a script tag) */
.td-nlink:hover { color:#f0960a; }
.td-nlink-txt { font-weight:500; }
.td-nlink-ico { position:relative; display:inline-flex; }
@media (max-width:1100px){ .td-nlink-txt { display:none; } }
/* Account -> Notifications: opt-in/opt-out toggle switches. */
.ntf-sub { color:#6b7280; font-size:13px; margin-bottom:14px; }
.ntf-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #eee; }
.ntf-txt { display:flex; flex-direction:column; gap:2px; }
.ntf-txt strong { font-size:14px; color:#111; }
.ntf-txt small { font-size:12px; color:#6b7280; }
.ntf-sw { position:relative; display:inline-block; width:44px; height:24px; flex:0 0 auto; }
.ntf-sw input { opacity:0; width:0; height:0; }
.ntf-slider { position:absolute; inset:0; background:#cbd5e1; border-radius:24px; cursor:pointer; transition:background .2s; }
.ntf-slider:before { content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
.ntf-sw input:checked + .ntf-slider { background:#16a34a; }
.ntf-sw input:checked + .ntf-slider:before { transform:translateX(20px); }
/* 5.png: a badge at 0 shows NOTHING (the [hidden] preflight is :where() zero-specificity, so .flex was overriding it). */
.js-msg-badge[hidden], .js-support-badge[hidden], .js-forum-badge[hidden] { display: none; }

/* ---- Jobs for quote: Fiverr-style offer cards in message threads ---- */
.qo-card { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; margin:2px 0; background:#fff; min-width:240px; }
.qo-card.st1 { border-color:#86efac; background:#f0fdf4; }
.qo-card.st2, .qo-card.st3 { opacity:.75; }
.qo-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.qo-card-title { font-weight:600; font-size:13px; color:#374151; }
.qo-pill { font-size:11px; font-weight:600; border-radius:9px; padding:2px 8px; }
.qo-pill.st0 { background:#fef3c7; color:#92400e; }
.qo-pill.st1 { background:#dcfce7; color:#166534; }
.qo-pill.st2 { background:#fee2e2; color:#991b1b; }
.qo-pill.st3 { background:#e5e7eb; color:#374151; }
.qo-amount { font-size:20px; font-weight:700; color:#111; }
.qo-cur { font-size:11px; font-weight:500; color:#6b7280; }
.qo-notetext { font-size:13px; color:#374151; margin-top:4px; white-space:pre-wrap; }
.qo-acts { display:flex; gap:8px; margin-top:10px; }
.qo-btn { border:0; border-radius:6px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.qo-btn.accept { background:#16a34a; color:#fff; }
.qo-btn.decline { background:#fee2e2; color:#991b1b; }
.qo-btn.withdraw { background:#e5e7eb; color:#374151; }
.qo-btn.rate { background:#f59e0b; color:#fff; }
.qo-sysline { text-align:center; font-size:12px; color:#6b7280; padding:2px 8px; }
.qo-sysline.ok { color:#166534; font-weight:600; }
.qo-sysline.star { color:#b45309; }
/* rating */
.qo-ratewrap { border-top:1px dashed #d1d5db; margin-top:10px; padding-top:10px; }
.qo-ratelbl { font-size:13px; font-weight:600; color:#374151; display:block; margin-bottom:4px; }
.qo-rateform { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.qo-stars { display:inline-flex; flex-direction:row-reverse; gap:2px; }
.qo-stars input { display:none; }
.qo-stars label { font-size:22px; color:#d1d5db; cursor:pointer; line-height:1; }
.qo-stars label:hover, .qo-stars label:hover ~ label,
.qo-stars input:checked ~ label { color:#f59e0b; }
.qo-rate-comment { border:1px solid #d1d5db; border-radius:6px; padding:6px 10px; font-size:13px; width:100%; max-width:320px; }
.qo-rated-line { font-size:13px; color:#374151; margin-top:4px; }
.qo-rated-line.them { color:#6b7280; }
.qo-star-str { color:#f59e0b; letter-spacing:1px; }
.qo-userrating { font-size:12px; font-weight:600; color:#b45309; margin-left:8px; }
/* make-an-offer entry (thread + listing page) */
.qo-makewrap { border-top:1px solid #eee; padding:8px 12px; background:#fafafa; }
.qo-makebtn { cursor:pointer; font-size:13px; font-weight:600; color:#166534; list-style:none; }
.qo-makeform { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.qo-makeform.qo-onlisting { margin:10px 0 2px; }
.qo-amt-inp { border:1px solid #d1d5db; border-radius:6px; padding:8px 10px; font-size:14px; width:150px; }
.qo-note-inp { border:1px solid #d1d5db; border-radius:6px; padding:8px 10px; font-size:13px; flex:1; min-width:180px; }
.qo-hint { font-size:12px; color:#6b7280; margin-top:4px; }
.qo-listing-rating { font-size:13px; font-weight:600; color:#374151; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; margin:10px 0 4px; }
.svc-one-note { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px; }

.view-profile-link { color:#2563eb; font-size:13px; font-weight:600; text-decoration:underline; display:inline-block; margin:2px 0 10px; }
.pp-head { display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.pp-logo { width:72px; height:72px; border-radius:12px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#9ca3af; }
.pp-logo img { width:100%; height:100%; object-fit:cover; }
.pp-logo svg { width:40px; height:40px; }
.pp-name { font-size:24px; font-weight:800; color:#111827; margin:0; }
.pp-sub { color:#6b7280; font-size:13px; margin:2px 0; }
.pp-agg { font-size:15px; color:#374151; margin:4px 0 0; }
.pp-agg-none { color:#9ca3af; }
.pp-listing { display:flex; gap:8px; align-items:center; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px; margin-bottom:18px; font-size:14px; color:#111827; }
.pp-listing:hover { border-color:#fca626; }
.pp-listing-cta { margin-left:auto; color:#2563eb; font-size:13px; font-weight:600; }
.pp-h2 { font-size:18px; font-weight:700; color:#111827; margin:16px 0 4px; }
.pp-note { font-size:12px; color:#6b7280; margin-bottom:12px; }
.pp-empty { color:#9ca3af; padding:24px; text-align:center; border:1px dashed #e5e7eb; border-radius:10px; }
.pp-review { border-bottom:1px solid #eee; padding:12px 0; }
.pp-review-head { display:flex; gap:10px; align-items:center; font-size:14px; }
.pp-review-date { color:#9ca3af; font-size:12px; margin-left:auto; }
.pp-review-body { font-size:14px; color:#374151; margin-top:4px; }
.pp-reply { background:#f9fafb; border-left:3px solid #fca626; padding:8px 12px; margin-top:8px; font-size:13px; color:#374151; border-radius:0 8px 8px 0; }
.pp-replyform { display:flex; gap:8px; margin-top:8px; }
.pp-reply-inp { flex:1; border:1px solid #d1d5db; border-radius:6px; padding:7px 10px; font-size:13px; }
.qo-rating-link { display:flex; gap:6px; align-items:center; text-decoration:none; }

.pp-hero { display:flex; gap:20px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px 26px; box-shadow:0 1px 3px rgba(16,22,32,.06); margin-bottom:22px; flex-wrap:wrap; }
.pp-logo-initial { font-size:34px; font-weight:800; color:#fca626; }
.pp-agg-num { font-size:26px; font-weight:800; color:#111827; }
.pp-agg-stars { font-size:18px; }
.pp-agg-count { color:#6b7280; font-size:14px; }
.pp-cta { margin-left:auto; background:#fca626; color:#fff; border:0; border-radius:8px; padding:10px 18px; font-weight:600; font-size:14px; }
.pp-hero .pp-cta { color:#fff; }
.pp-hero .pp-cta:hover { background:#f0960a; }
.pp-grid { display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; }
@media (max-width:820px){ .pp-grid { grid-template-columns:1fr; } }
.pp-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.pp-dist-row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px; color:#374151; }
.pp-dist-star { width:34px; }
.pp-dist-bar { flex:1; height:8px; background:#f3f4f6; border-radius:4px; overflow:hidden; }
.pp-dist-fill { display:block; height:100%; background:#f59e0b; border-radius:4px; }
.pp-dist-n { width:22px; text-align:right; color:#9ca3af; }
.pp-main .pp-h2 { margin-top:0; }
.pp-review { display:flex; gap:12px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.pp-review-ava { width:40px; height:40px; border-radius:50%; background:#eef2ff; color:#4338ca; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pp-review-body-wrap { flex:1; min-width:0; }
.pp-review-name { font-size:14px; color:#111827; }
.svc-seller-card { display:flex; gap:12px; align-items:center; }
.svc-seller-logo { width:56px; height:56px; border-radius:10px; background:#fff7ed; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; border:1px solid #fed7aa; }
.svc-seller-logo img { width:100%; height:100%; object-fit:cover; }
.svc-seller-initial { font-size:24px; font-weight:800; color:#fca626; }
.svc-seller-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.svc-seller-name { font-size:16px; font-weight:700; color:#111827; }
.svc-seller-name:hover { color:#f0960a; }
.svc-seller-role { font-size:12px; color:#6b7280; }
.svc-seller-stars { font-size:13px; color:#374151; font-weight:600; }
.svc-seller-card .view-profile-link { margin:2px 0 0; }
/* services search cards (1.png/12.png): no price, square image, areas line */
.svc-mode .sp-card-price { display: none; }
.svc-mode .sp-card-img { aspect-ratio: 1 / 1; height: auto; }
.svc-mode .sp-card-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qo-filled { color:#166534; font-weight:600; }
/* Forum top-bar notification dropdown (1.png) */
.fnotif { position: relative; display: inline-flex; }
.fnotif-menu { position: absolute; top: calc(100% + 10px); right: -40px; width: 340px; max-width: 92vw; background: #fff; border: 1px solid #e0e5ee; border-radius: 12px; box-shadow: 0 14px 40px rgba(16,22,32,.18); padding: 6px; z-index: 1300; }
.fn-row { display: flex; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: #374151; }
.fn-row:hover { background: #f6f7f9; }
.fn-unread { background: #eff6ff; }
.fn-unread:hover { background: #e0edff; }
.fn-text { flex: 1; }
.fn-time { color: #9ca3af; font-size: 11px; white-space: nowrap; }
.fn-empty { padding: 18px 10px; text-align: center; color: #9ca3af; font-size: 13px; }
.fn-all { display: block; text-align: center; padding: 8px; font-size: 13px; font-weight: 600; color: #2563eb; border-top: 1px solid #eee; margin-top: 4px; }
/* One consistent icon cluster in the top bar, whatever the section skin */
.hdr-icons { display: flex; align-items: center; gap: 26px; }
.hdr-icons .td-nlink, .hdr-icons .nbell, .hdr-icons .nbell + .td-nlink, .hdr-icons .nbell + script + .td-nlink { margin-left: 0; }
.forum-title-row { display: flex; align-items: center; gap: 14px; flex: 1; }
.fn-pill { background: none; color: #ef4444; border: 0; padding: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.fn-pill:hover { color: #b91c1c; text-decoration: underline; }
.fnotif-page { margin: 0 auto; }
.fnotif-page .fnotif-menu { left: 0; right: auto; }
.pfb-row { border-bottom: 1px solid #f0f0f0; padding: 8px 0; }
.pfb-row:last-of-type { border-bottom: 0; }
.pfb-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.pfb-name { color: #111827; }
.pfb-date { margin-left: auto; color: #9ca3af; font-size: 11px; }
.pfb-body { font-size: 13px; color: #374151; margin-top: 2px; }
.pfb-all { display: block; text-align: center; font-size: 13px; font-weight: 600; color: #2563eb; padding-top: 8px; }
.qo-opt-h { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.qo-opt-h:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.pp-review-link { color: #2563eb; }
.pp-review-link:hover { text-decoration: underline; color: #1d4ed8; }
/* 1.png svc polish */
.lc-owner-actions { margin-top: 14px; }
.svc-seller-card { margin-bottom: 12px; }
.svc-seller-card .view-profile-link { margin-bottom: 0; }
.qo-need-provider { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px; margin: 10px 0; text-align: center; }
.qo-need-p { font-size: 14px; font-weight: 600; color: #92400e; margin-bottom: 10px; }
.qo-need-btn { display: inline-block; text-align: center; }

/* per-identity unread count in the account switcher (11.png) */
.idsw-uc { color: #e03131; font-style: normal; font-weight: 700; }

/* TradeMe-style auction info on search cards (10/11/12.png) */
.sp-card-auction { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: 4px; }
.sp-ca-note { display: block; font-size: 13px; color: #6b7280; line-height: 1.3; }
.sp-ca-price { font-size: 17px; color: #111827; font-weight: 700; }
.sp-ca-right { text-align: right; }
.sp-card-loc-flex { display: flex; justify-content: space-between; gap: 8px; }
.sp-card-loc-flex .sp-cl-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ca-closes { font-size: 12.5px; color: #6b7280; white-space: nowrap; }

/* TradeMe-style category facet above keyword results (1-new.png) */
.sp-topcats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; margin: 2px 0 18px; }
.sp-topcat { font-size: 14.5px; font-weight: 600; color: #2563eb; text-decoration: none; }
.sp-topcat:hover { text-decoration: underline; }
.sp-topcat-n { color: #6b7280; font-weight: 400; }
.sp-topcat-showmore { background: none; border: none; color: #2563eb; cursor: pointer; text-align: left; padding: 0; font-size: 14px; font-weight: 600; }
.sp-topcat-showmore:hover { text-decoration: underline; }
@media (max-width: 720px) { .sp-topcats { grid-template-columns: repeat(2, 1fr); } }

/* Envelope per-account picker (6.png) */
.mdrop { position: relative; display: inline-flex; }
.mdrop-btn { background: none; border: none; padding: 0; cursor: pointer; }
.mdrop-menu { display: none; position: absolute; top: calc(100% + 10px); right: -10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 230px; padding: 6px; z-index: 70; }
.mdrop.open .mdrop-menu { display: block; }
.mdrop-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: #111827; text-decoration: none; font-size: 14px; font-weight: 600; }
.mdrop-row:hover { background: #f3f4f6; }
.mdrop-n { color: #e03131; font-style: normal; font-weight: 700; }

/* Owner viewing their own listing (any identity) */
.own-listing-note { color: #374151; font-size: 14px; font-weight: 600; padding: 8px 0; }

/* TradeMe-style store integration on listing pages */
.intrade-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.visit-store { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; text-decoration: none; background: #f9fafb; }
.visit-store:hover { border-color: #2563eb; background: #f3f6ff; }
.vs-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.vs-logo-ph { display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-weight: 800; font-size: 16px; }
.vs-txt { display: flex; flex-direction: column; line-height: 1.25; }
.vs-txt small { color: #6b7280; font-size: 12px; }
.vs-txt b { color: #2563eb; font-size: 14px; }

/* TradeMe-style marketplace store page (/stores/{slug}) */
.ms-wrap { max-width: 1280px; margin: 0 auto; padding: 18px 16px 46px; }   /* 3.png: same width as the top bar container */
.ms-hero { border-radius: 16px; background-size: cover; background-position: center; overflow: hidden; }
.ms-hero-in { display: flex; align-items: center; gap: 18px; width: 100%; padding: 30px 26px; background: linear-gradient(90deg, rgba(8,14,28,.78) 0%, rgba(8,14,28,.45) 55%, rgba(8,14,28,.25) 100%); }
.ms-logo { width: 86px; height: 86px; border-radius: 14px; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.ms-logo-ph { display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-weight: 800; font-size: 34px; flex: none; }
.ms-head { flex: 1; min-width: 0; }
.ms-head h1 { color: #fff; font-size: 28px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ms-trade { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; }
.ms-tag { color: #dbe3ef; margin: 4px 0 0; font-size: 14.5px; }
.ms-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #cbd5e1; font-size: 14px; flex-wrap: wrap; }
.ms-dot { opacity: .6; }
.ms-fb { color: #fff; text-decoration: none; font-weight: 700; }
.ms-fb small { font-weight: 400; opacity: .85; }
.ms-fb:hover { text-decoration: underline; }
.ms-fb-star { color: #fbbf24; }
.ms-mstat { white-space: nowrap; }
.ms-site-btn { flex: none; background: #fff; color: #111827; text-decoration: none; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ms-site-btn:hover { background: #f3f4f6; }
.ms-bar { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; }
.ms-search { display: flex; align-items: center; gap: 0; flex: 1; max-width: 520px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; padding-left: 12px; }
.ms-search:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ms-sicon { width: 18px; height: 18px; color: #9ca3af; flex: none; }
.ms-search input { flex: 1; border: none; outline: none; padding: 11px 10px; font-size: 14px; background: transparent; }
.ms-search button { background: #2563eb; color: #fff; border: none; border-radius: 0 9px 9px 0; padding: 11px 20px; font-weight: 700; cursor: pointer; }
.ms-search button:hover { background: #1d4ed8; }
.ms-clear { color: #6b7280; font-size: 13.5px; text-decoration: none; }
.ms-clear:hover { color: #111827; }
.ms-about { color: #4b5563; margin: 12px 2px 0; max-width: 880px; line-height: 1.55; }
.ms-count { color: #6b7280; font-size: 13px; margin: 12px 2px 0; }
.ms-empty { color: #6b7280; padding: 36px 0; }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 1000px) { .ms-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ms-grid { grid-template-columns: repeat(2, 1fr); } }
.ms-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; text-decoration: none; transition: box-shadow .15s ease; }
.ms-card:hover { box-shadow: 0 6px 18px rgba(17,24,39,.10); }   /* no translateY - the jump was annoying */
.ms-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #f3f4f6; overflow: hidden; }
.ms-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-card-ph { width: 44px; height: 44px; color: #c3c9d2; }
.ms-card-body { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; }
.ms-card-title { color: #111827; font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.ms-card-price { color: #111827; font-size: 15.5px; font-weight: 800; }
.ms-card-loc { color: #6b7280; font-size: 12.5px; }
.st-warn { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin: 14px 0; }

/* TradeMe-style store category nav */
.ms-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ms-cat { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #374151; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.ms-cat small { color: #9ca3af; font-weight: 500; }
.ms-cat:hover { border-color: #2563eb; color: #1d4ed8; }
.ms-cat.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.ms-cat.on small { color: #dbeafe; }

/* store cards: was-price + auction rows match the search cards */
.ms-card-was { color: #9ca3af; font-size: 12.5px; font-weight: 500; text-decoration: line-through; margin-left: 6px; }
.ms-card .sp-card-auction { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.ms-closes { color: #6b7280; }

/* Store settings page (/dashboard/mystore) - separate from Website settings */
.msf-wrap { max-width: 1280px; margin: 0 auto; padding: 26px 16px 50px; }   /* 1.png: same width as the top bar */
.msf-h1 { font-size: 24px; margin: 0 0 6px; }
.msf-sub { color: #6b7280; font-size: 14px; margin: 0 0 18px; }
.msf-msg { border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.msf-msg.ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.msf-msg.err { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.msf-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.msf-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.msf-card-head b { font-size: 17px; }
.msf-card-head small { color: #6b7280; }
.msf-view { margin-left: auto; color: #2563eb; font-weight: 600; font-size: 14px; text-decoration: none; }
.msf-view:hover { text-decoration: underline; }
.msf-form { display: flex; flex-direction: column; gap: 12px; }
.msf-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: #374151; }
.msf-form input[type=text], .msf-form textarea { border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 400; }
.msf-form input:focus, .msf-form textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.msf-slugrow { display: flex; align-items: center; gap: 6px; }
.msf-slugrow small { color: #6b7280; font-weight: 500; }
.msf-slugrow input { flex: 1; }
.msf-save { align-self: flex-start; background: #2563eb; color: #fff; border: none; border-radius: 9px; padding: 10px 22px; font-weight: 700; cursor: pointer; }
.msf-save:hover { background: #1d4ed8; }
.msf-imgrow { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.msf-img { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.msf-img-lab { font-weight: 600; color: #374151; }
.msf-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid #e5e7eb; }
.msf-img img.wide { width: 220px; height: 64px; }
.msf-img input { font-size: 12.5px; }

/* Facebook-page style store header (cover photo + overlapping logo) */
.msp-cover { height: 260px; border-radius: 14px 14px 0 0; background-size: cover; background-position: center; position: relative; }
.msp-bar { display: flex; align-items: flex-end; gap: 18px; padding: 0 26px 16px; background: #fff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 14px 14px; margin-bottom: 4px; }
.msp-logo-wrap { position: relative; flex: none; margin-top: -48px; }
.msp-logo { width: 128px; height: 128px; border-radius: 18px; object-fit: cover; background: #fff; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); display: inline-flex; align-items: center; justify-content: center; }
.msp-logo-ph { background: #2563eb; color: #fff; font-weight: 800; font-size: 46px; }
.msp-info { flex: 1; min-width: 0; padding-top: 12px; }
.msp-info h1 { font-size: 26px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #111827; }
.msp-info h1 .ms-trade { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.msp-tag { color: #6b7280; margin: 3px 0 0; font-size: 14.5px; }
.msp-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: #4b5563; font-size: 14px; flex-wrap: wrap; }
.msp-fb { color: #111827; text-decoration: none; font-weight: 700; }
.msp-fb small { font-weight: 400; color: #6b7280; }
.msp-fb:hover { text-decoration: underline; }
.msp-site-btn { flex: none; align-self: center; background: #2563eb; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 10px; }
.msp-site-btn:hover { background: #1d4ed8; }
/* editable variant (store settings page) */
.msp-editable { border-radius: 14px 14px 0 0; }   /* identical size to the live store header */
.msp-bar-edit { border-radius: 0 0 14px 14px; margin-bottom: 16px; }
.msp-cam { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: rgba(255,255,255,.94); color: #111827; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.msp-cam:hover { background: #fff; }
.msp-cam svg { width: 17px; height: 17px; }
.msp-cam-cover { position: absolute; right: 14px; bottom: 12px; }
.msp-cam-logo { position: absolute; right: -6px; bottom: -6px; padding: 7px; border-radius: 999px; }

@media (max-width: 720px) { .msp-cover { height: 160px; } .msp-logo { width: 96px; height: 96px; } .msp-bar { flex-wrap: wrap; } }

/* 2.png: title row sits ABOVE the box; the cover fills the card edge-to-edge */
.msf-card-head-out { padding: 0 4px; margin-bottom: 10px; }
.msf-card .msp-cover.msp-editable { margin: -18px -20px 0; }
.msf-card .msp-bar-edit { margin: 0 -20px 16px; border-left: none; border-right: none; border-radius: 0; }

/* live character counters on store settings (1.png) */
.msf-count { color: #9ca3af; font-size: 12px; font-weight: 400; align-self: flex-end; }

/* read-only store address on settings */
.msf-urlline { border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 8px; padding: 9px 12px; font-size: 14px; color: #6b7280; font-weight: 400; }
.msf-urlline b { color: #111827; }
.msf-urlhint { color: #9ca3af; font-size: 12.5px; font-weight: 400; }

/* store address copy button */
.msf-urlline { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.msf-copy { background: #2563eb; color: #fff; border: none; border-radius: 7px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; flex: none; }
.msf-copy:hover { background: #1d4ed8; }

/* 1.png: View profile sits inline with the Profile picture heading */
.acct-pic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acct-pic-head .view-profile-link { font-size: 13.5px; }

/* profile completion + age gate (5.png) */
.req { color: #dc2626; font-weight: 700; }
.acct-block { border-radius: 10px; padding: 12px 15px; font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
.acct-block-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.acct-block-danger { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.acct-block a { font-weight: 700; text-decoration: underline; }
.acct-terms { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; margin: 4px 0 14px; }
.acct-terms input { width: 16px; height: 16px; }

/* static content pages (terms, privacy) */
.static-page { max-width: 900px; margin: 0 auto; padding: 26px 18px 60px; }
.static-page-title { font-size: 28px; margin: 0 0 18px; }
.static-page-body { color: #374151; line-height: 1.65; font-size: 15px; }
.static-page-body p { margin: 0 0 12px; }
.static-page-body h2, .static-page-body h3 { margin: 22px 0 10px; color: #111827; }
.static-page-body ul, .static-page-body ol { margin: 0 0 12px 22px; }
.static-page-updated { color: #9ca3af; font-size: 13px; margin-top: 26px; }

/* Store / Website settings top tabs (1.png) */
.settings-toptabs { display: flex; align-items: center; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; }
.stt-tab { padding: 12px 20px; font-size: 15px; font-weight: 600; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.stt-tab:hover { color: #111827; }
.stt-tab.on { color: #2563eb; border-bottom-color: #2563eb; }
.stt-view { margin-left: auto; color: #2563eb; font-weight: 600; font-size: 14px; text-decoration: none; }
.stt-view:hover { text-decoration: underline; }

/* 5.png: notification + messages dropdowns - wider and centered UNDER THE ICON */
.nbell-menu { position: absolute; left: 50%; right: auto; transform: translateX(-50%); top: calc(100% + 8px); width: 480px; max-width: 94vw; }
.mdrop-menu { position: absolute; left: 50%; right: auto; transform: translateX(-50%); top: calc(100% + 10px); width: 360px; min-width: 360px; max-width: 92vw; }
/* on very small screens an icon-centred wide panel can run off an edge -
   fall back to a viewport-centred panel there. */
@media (max-width: 640px) {
  .nbell-menu, .mdrop-menu { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); }
}

.agx-office { color: #6b7280; font-size: 12.5px; margin-top: -2px; }

/* already-messaged notice on a listing (one thread per listing) */
.already-msg { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 12px 14px; }
.already-msg-p { color: #075985; font-size: 13.5px; margin: 0 0 8px; }
.already-msg-btn { display: inline-flex; align-items: center; justify-content: center; }

/* admin upgrade-request verify reminder */
.aur-remind { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; border-radius: 8px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.aur-remind a { color: #b45309; font-weight: 700; text-decoration: underline; }
.aur-proofrow { margin-top: 6px; }

.agent-card-office { color: #6b7280; font-size: 11.5px; margin-top: 1px; }

/* == agent/office public profiles + search-card branding == */
/* --- dashboard agent form: full-width row --- */
.s162-full { grid-column: 1 / -1; }

/* --- search property card: image count badge --- */
.zp-card-img { position: relative; }
.zp-badges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 2; }
.zp-b-imgs, .zp-b-vid { display: inline-flex; align-items: center; gap: 4px;
    background: rgba(17,24,39,.78); color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
    padding: 4px 7px; border-radius: 6px; }
.zp-b-vid { background: rgba(220,38,38,.92); }
.zp-b-imgs-i { width: 13px; height: 13px; fill: currentColor; }
.zp-ca-private { font-size: 12px; font-weight: 600; color: #6b7280; }

/* --- search property card: agency logo + agent avatars strip --- */
.zp-card-agents { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 10px; padding-top: 9px; border-top: 1px solid #eef0f3; min-height: 30px; }
.zp-ca-logo { max-height: 26px; max-width: 120px; object-fit: contain; }
.zp-ca-brand { font-size: 12px; font-weight: 700; color: #374151; letter-spacing: .01em; text-transform: uppercase; }
.zp-ca-avatars { display: inline-flex; align-items: center; }
.zp-ca-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb; margin-left: -8px; background: #f3f4f6; }
.zp-ca-avatars .zp-ca-av:first-child { margin-left: 0; }
.zp-ca-av-i { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #4b5563; }

/* --- reusable property grid for profile pages --- */
.zp-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

/* --- agent profile page --- */
.ap-wrap, .of-wrap { max-width: 1080px; margin: 0 auto; padding: 22px 16px 48px; }
.ap-hero { display: grid; grid-template-columns: 160px 1fr auto; gap: 22px; align-items: start;
    background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 22px; }
.ap-photo { width: 160px; height: 190px; border-radius: 10px; overflow: hidden; background: #eef1f5;
    display: flex; align-items: center; justify-content: center; }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; }
.ap-initials, .of-initials, .of-tm-init { font-weight: 700; color: #64748b; }
.ap-initials { font-size: 44px; }
.ap-name { font-size: 27px; font-weight: 800; color: #111827; margin: 0 0 3px; line-height: 1.15; }
.ap-role { font-size: 15px; color: #374151; font-weight: 600; margin-bottom: 6px; }
.ap-office { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
.ap-i, .of-i { width: 14px; height: 14px; fill: currentColor; vertical-align: -2px; margin-right: 3px; }
.ap-agency { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin: 4px 0 8px; }
.ap-agency-logo { max-height: 30px; max-width: 150px; object-fit: contain; }
.ap-agency-name { font-size: 13px; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: .02em; }
.ap-lic { font-size: 12.5px; color: #6b7280; }
.ap-contact { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px;
    border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ap-btn-call { background: #16a34a; color: #fff; }
.ap-btn-call:hover { background: #15803d; }
.ap-btn-mail { background: #eef2ff; color: #1d4ed8; border: 1px solid #dbe3ff; }
.ap-btn-mail:hover { background: #e2e8ff; }
.ap-h2 { font-size: 18px; font-weight: 700; color: #111827; margin: 26px 0 12px; }
.ap-about, .of-about { background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 18px 20px; margin-top: 18px; }
.ap-about .ap-h2, .of-about .ap-h2 { margin-top: 0; }
.ap-bio { color: #374151; font-size: 14.5px; line-height: 1.6; white-space: pre-line; margin: 0; }
.ap-empty { color: #6b7280; font-size: 14px; }

/* --- office profile page --- */
.of-hero { display: grid; grid-template-columns: 150px 1fr auto; gap: 22px; align-items: center;
    background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 22px; }
.of-logo { width: 150px; height: 110px; display: flex; align-items: center; justify-content: center;
    background: #f8fafc; border-radius: 10px; overflow: hidden; }
.of-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.of-initials { font-size: 34px; }
.of-name { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 5px; }
.of-legal { font-size: 13px; color: #6b7280; }
.of-dot { margin: 0 7px; color: #cbd5e1; }
.of-loc { font-size: 13px; color: #6b7280; margin-top: 7px; }
.of-contact { display: flex; flex-direction: column; gap: 10px; min-width: 170px; }
.of-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.of-tm { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
    background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 16px 10px; transition: box-shadow .12s, border-color .12s; }
.of-tm:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(29,78,216,.10); }
.of-tm-photo { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; background: #eef1f5;
    display: flex; align-items: center; justify-content: center; margin-bottom: 9px; }
.of-tm-photo img { width: 100%; height: 100%; object-fit: cover; }
.of-tm-init { font-size: 24px; }
.of-tm-name { font-size: 14px; font-weight: 700; color: #111827; }
.of-tm-role { font-size: 12px; color: #6b7280; margin-top: 1px; }
.of-tm-count { font-size: 11.5px; color: #1d4ed8; font-weight: 600; margin-top: 5px; }

/* --- links from the listing detail --- */
.agent-card-namelink { color: #1d4ed8; text-decoration: none; font-weight: 700; }
.agent-card-namelink:hover { text-decoration: underline; }
.biz-rea-link { color: #1d4ed8; text-decoration: none; font-weight: 600; }
.biz-rea-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .ap-hero, .of-hero { grid-template-columns: 1fr; text-align: left; }
    .ap-photo { width: 120px; height: 140px; }
    .ap-contact, .of-contact { min-width: 0; }
    .ap-btn { width: 100%; }
}

/* == profile-grid property card (self-contained, site.css) == */
.zp-cards-grid .zp-card { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden;
    text-decoration: none; color: inherit; border: 1px solid #e8eaee; box-shadow: 0 2px 10px rgba(15,23,42,.05); transition: box-shadow .15s; }
.zp-cards-grid .zp-card:hover { box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.zp-cards-grid .zp-card-img { position: relative; aspect-ratio: 4 / 3; background: #e2e8f0; overflow: hidden; border-bottom: 1px solid #e5e5e5; }
.zp-cards-grid .zp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.zp-cards-grid .zp-card-ph { position: absolute; inset: 0; background: linear-gradient(135deg,#cbd5e1,#e2e8f0); }
.zp-cards-grid .zp-b-feat { position: absolute; top: 10px; left: 10px; background: #f59e0b; color: #fff; font-size: 11px;
    font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.zp-cards-grid .zp-card-body { padding: 13px 14px 15px; }
.zp-cards-grid .zp-card-price { font-size: 18px; font-weight: 800; color: #0f172a; }
.zp-cards-grid .zp-card-title { font-size: 14px; font-weight: 600; color: #1e293b; margin-top: 5px; line-height: 1.35; }
.zp-cards-grid .zp-card-loc { font-size: 12.5px; color: #64748b; margin-top: 5px; }
.zp-cards-grid .zp-card-loc::before { content: "\1F4CD"; margin-right: 5px; }

/* == listing gallery media count badge (photos + video) == */
.pd-gallery-card .s335 { position: relative; }
.pd-media-badges { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 2; }
.pd-mb { display: inline-flex; align-items: center; gap: 5px; background: rgba(17,24,39,.80); color: #fff;
    font-size: 13px; font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: 8px; text-decoration: none;
    border: 0; cursor: pointer; font-family: inherit; backdrop-filter: blur(2px); }
.pd-mb-vid:hover { background: rgba(17,24,39,.95); }
.pd-mb-i { width: 15px; height: 15px; fill: currentColor; }

/* == full-screen video popup (listing detail) == */
.pd-vmodal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 28px; }
.pd-vmodal:not([hidden]) { display: flex; }
.pd-vmodal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.86); }
.pd-vmodal-box { position: relative; z-index: 1; width: min(1120px, 96vw); }
.pd-vmodal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.pd-vmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pd-vmodal-x { position: fixed; top: 16px; right: 20px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
.pd-vmodal-x:hover { background: rgba(255,255,255,.32); }
body.pd-vmodal-open { overflow: hidden; }

/* == watchlist heart + refine panel + profile polish == */
/* watchlist heart on property cards (nzmarketplace style) */
.zp-card-wrap { position: relative; }
.zp-fav-form { position: absolute; top: 10px; right: 10px; z-index: 4; margin: 0; padding: 0; }
.zp-fav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #c3cad6;
    box-shadow: 0 1px 5px rgba(15,23,42,.22); transition: transform .1s, color .12s; }
.zp-fav:hover { transform: scale(1.09); color: #ef4444; }
.zp-fav svg { width: 18px; height: 18px; fill: currentColor; }
.zp-fav.on { color: #ef4444; }

/* TradeMe-style refine panel */
body.zproperty .zp-morefilters { border-top: none; }
body.zproperty .zp-morefilters:not([hidden]) { display: block; background: #fff; border-radius: 12px; padding: 6px 2px 4px; margin-top: 8px; }
.zp-mf-title { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 14px; }
.zp-mf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 22px; }
@media (max-width: 900px) { .zp-mf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zp-mf-grid { grid-template-columns: 1fr; } }
.zp-mf-sec { min-width: 0; }
.zp-mf-h { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 7px; }
.zp-mf-range { display: flex; align-items: center; gap: 8px; }
.zp-mf-range .zp-inp { width: 100%; }
.zp-mf-dash { color: #94a3b8; font-size: 13px; }
.zp-mf-checks { display: flex; flex-direction: column; gap: 7px; }
.zp-mf-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #334155; cursor: pointer; }
.zp-mf-check input { width: 16px; height: 16px; accent-color: #2563eb; }
.zp-mf-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 4px; }
.zp-mf-apply { background: #2563eb; color: #fff; border: 0; border-radius: 9px; padding: 11px 26px; font-size: 14px; font-weight: 700; cursor: pointer; }
.zp-mf-apply:hover { background: #1d4ed8; }
.zp-mf-clear { color: #64748b; font-size: 13.5px; text-decoration: none; }
.zp-mf-clear:hover { color: #ef4444; text-decoration: underline; }

/* agent/office profile: match the property search width + 3-per-row bigger grid (5.png) */
.ap-wrap, .of-wrap { max-width: 1280px; }
.zp-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 950px) { .zp-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zp-cards-grid { grid-template-columns: 1fr; } }
.zp-cards-grid .zp-card { border-radius: 14px; }

/* listing-detail seller contact: cleaner, professional rows (listing 254) */
.s358 { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; color: #334155; }
.s358 .i18, .s358 svg { width: 16px; height: 16px; color: #64748b; fill: currentColor; flex: none; }
.s358 a { color: #1d4ed8; text-decoration: none; }
.s358 a:hover { text-decoration: underline; }
.biz-rea-foot { border-top: 1px solid #eef1f6; padding-top: 10px; margin-top: 10px; font-size: 12px; color: #6b7280; line-height: 1.5; }

.agent-card-agency { font-size: 12px; color: #475569; font-weight: 600; margin-top: 2px; }

/* multi-select dropdown inside the refine panel */
.zp-dd { position: relative; }
.zp-dd-btn { width: 100%; text-align: left; background: #f8fafc; border: 1px solid #d5dbe6; border-radius: 8px;
    padding: 9px 30px 9px 12px; font-size: 13.5px; color: #334155; cursor: pointer; position: relative; }
.zp-dd-btn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: translateY(-70%) rotate(45deg); }
.zp-dd-btn.open { border-color: #2563eb; background: #fff; }
.zp-dd-btn.open::after { transform: translateY(-30%) rotate(-135deg); border-color: #2563eb; }
.zp-dd-menu { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; min-width: 100%; white-space: nowrap;
    background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.16);
    padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; }
.zp-dd-menu[hidden] { display: none; }

.zp-dd-range .zp-dd-menu { min-width: 230px; }
.zp-dd-ok { margin-top: 4px; width: 100%; background: #2563eb; color: #fff; border: 0; border-radius: 7px; padding: 8px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.zp-dd-ok:hover { background: #1d4ed8; }

.zp-dd-btn-bar { height: 42px; border-radius: 10px; padding: 9px 30px 9px 12px; background: #f8fafc; }

/* price search field = same width as Property type (shared grid; col1 aligns exactly) */
body.zproperty .zp-row1,
body.zproperty .zp-row2 { grid-template-columns: 1.3fr 1.2fr 1.2fr 0.8fr; }
body.zproperty .zp-fld-loc { grid-column: span 2; }

/* search-bar dropdown must not be clipped/hidden by the hero (2.png) */
body.zproperty .zp-herobg { overflow: visible; z-index: 5; }
body.zproperty .zp-herobg::before { top: 0; bottom: 0; height: auto; }
body.zproperty .zp-dd-menu { z-index: 60; }

.zp-mf-only { grid-column: 1 / -1; padding: 4px 0 0; margin-top: 4px; }
.zp-mf-only .zp-mf-h { margin-bottom: 8px; }
.zp-mf-checks-row { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }

.pd-watch-form { margin: 8px 0 2px; }
.pd-watch { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d5dbe6; border-radius: 8px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: #334155; cursor: pointer; }
.pd-watch:hover { border-color: #ef4444; color: #ef4444; }
.pd-watch svg { width: 15px; height: 15px; fill: currentColor; }

.agent-msg-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; background: #2563eb; color: #fff; border: 0; border-radius: 7px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.agent-msg-btn:hover { background: #1d4ed8; }
.agent-msg-btn svg { width: 14px; height: 14px; fill: currentColor; }
.agent-msg-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
.agent-msg-modal:not([hidden]) { display: flex; }
.agent-msg-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.agent-msg-box { position: relative; z-index: 1; background: #fff; border-radius: 12px; padding: 20px 22px; width: min(440px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.agent-msg-x { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; }
.agent-msg-x:hover { color: #334155; }
.agent-msg-h { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.agent-msg-ta { width: 100%; border: 1px solid #d5dbe6; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; box-sizing: border-box; resize: vertical; }
.agent-msg-ta:focus { outline: none; border-color: #2563eb; }
.agent-msg-send { margin-top: 12px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 11px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.agent-msg-send:hover { background: #1d4ed8; }
.agent-msg-send svg { width: 15px; height: 15px; fill: currentColor; }
body.agent-msg-open { overflow: hidden; }

.agx-master { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #eff4ff; border: 1px solid #dbe6ff; border-radius: 10px; padding: 12px 16px; margin: 8px 0 16px; }
.agx-master-txt { font-size: 13px; color: #334155; }
.agx-login { border-top: 1px dashed #e2e8f0; margin-top: 10px; padding-top: 10px; }
.agx-login-status { font-size: 12px; font-weight: 600; color: #475569; }
.agx-login-em { color: #64748b; font-weight: 400; }
.agx-login-note { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.agx-setpw { display: flex; gap: 6px; margin-top: 7px; }
.agx-setpw input { flex: 1; min-width: 0; border: 1px solid #d5dbe6; border-radius: 6px; padding: 6px 9px; font-size: 12.5px; }
.agx-login form { display: inline; }
.agx-login .agx-pause { margin-top: 6px; }

.agx-toolbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.agx-search { flex: 1; border: 1px solid #d5dbe6; border-radius: 9px; padding: 10px 14px; font-size: 14px; }
.agx-search:focus { outline: none; border-color: #2563eb; }
.agx-addbtn { display: inline-flex; align-items: center; gap: 6px; background: #2563eb; color: #fff; border: 0; border-radius: 9px; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.agx-addbtn:hover { background: #1d4ed8; }
.agx-addbtn svg { width: 14px; height: 14px; fill: currentColor; }

.lc-addagent{display:inline-block;margin-top:2px;color:#2563eb;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.lc-addagent:hover{text-decoration:underline}
/* == Business For Sale search bar (keyword -> category main/sub -> location/radius) == */
.zp-bfs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: end; }
body.zproperty .zp-bfs-grid .zp-fld-loc { grid-column: auto; }
.zp-bfs-grid .zp-search-btn { width: 100%; }
@media (max-width: 760px) { .zp-bfs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .zp-bfs-grid { grid-template-columns: 1fr; } }

/* == category typeahead dropdown (shared - marketplace look) == */
.cat-suggest { position: absolute; background: #fff; border: 1px solid #d0d3d7; z-index: 1000; box-shadow: 0 8px 22px rgba(0,0,0,.16); max-height: 60vh; overflow: auto; border-radius: 8px; }
.cat-suggest[hidden] { display: none; }
.cat-suggest-item { display: block; padding: 9px 12px; text-decoration: none; color: #333; border-bottom: 1px solid #f2f2f2; }
.cat-suggest-item:hover { background: #fff3ec; }
.cs-path { display: block; font-size: 14px; color: #444; line-height: 1.55; white-space: normal; word-break: break-word; }
.cs-path strong { font-weight: 700; color: #111; }
.cs-sep { display: inline-block; font-size: 1.5em; line-height: 0; vertical-align: -0.12em; color: #9a9a9a; margin: 0 4px; }

/* Motor: 2 listings per row for bigger/clearer images (redfin-style) */
body.motorlane:not(.mlsearch-mode) .sp-cards-grid,
body.motorlane.mlsearch-mode .sp-cards-grid,
body.motorlane .sp-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { body.motorlane .sp-cards-grid { grid-template-columns: 1fr; } }

/* == Full-width image gallery at top for property + motor (trulia-style) == */
.pd-gallery-top { margin: 0 0 20px; }
.pd-gallery-top .s336 { width: 100%; height: 480px; object-fit: cover; border-radius: 8px; }
.pd-gallery-top .s337 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; margin-bottom: 0; }
.pd-gallery-top .s338 { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .88; transition: .15s; }
.pd-gallery-top .s338:hover { opacity: 1; transform: translateY(-2px); }
@media (max-width: 760px) { .pd-gallery-top .s336 { height: 300px; } .pd-gallery-top .s337 { grid-template-columns: repeat(4, 1fr); } }

.pd-watch-right { margin: 0 0 12px; }
.pd-watch-right .pd-watch { width: 100%; justify-content: center; }

/* Agency header band flush to the seller-card top (2.png): fill edges, top corners match the card radius */
.s354 > .biz-band:first-child { margin: -20px -20px 14px; border-radius: 6px 6px 0 0; padding: 12px 20px; }

/* Motor cards: taller image to match property card height */
body.motorlane .sp-card-img { aspect-ratio: 3 / 2; height: auto; }

/* == per-category image mode (contain): show whole image, no crop == */
.imgmode-contain .zp-card-img, .imgmode-contain .sp-card-img { background: #eef1f5; }
.imgmode-contain .zp-card-img img, .imgmode-contain .sp-card-img img { object-fit: contain; }

/* detail-page contain mode: whole image, no crop */
.imgmode-contain-d .pd-gallery-top .s336, .imgmode-contain-d .pd-gallery .s336 { object-fit: contain; background: #eef1f5; }

/* Osclass-style DB query counter footer (admin Settings -> page query counter) */
.dbq-footer{position:fixed;bottom:0;left:0;right:0;background:#111;color:#7ee787;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;padding:3px 8px;z-index:99999;opacity:.92}

/* Photo "Optimizing N%" progress (shown while resizing/re-encoding to AVIF) */
.up-frame .up-prep { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 120px; }
.up-prep-txt { font-size: 13px; font-weight: 600; color: #2f6df6; }
.up-prog { width: 84%; height: 8px; background: #e3e9f2; border-radius: 6px; overflow: hidden; }
.up-prog-bar { height: 100%; width: 0; background: #2f6df6; border-radius: 6px; transition: width .12s linear; }

/* Dashboard identity tabs (Personal + each business account) */
.id-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 18px; border-bottom:1px solid #e6e9ef; }
.id-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:9px 9px 0 0; color:#55606e; font-weight:600; font-size:14px; text-decoration:none; border:1px solid transparent; border-bottom:none; margin-bottom:-1px; }
.id-tab:hover { background:#f2f5fa; color:#23272f; }
.id-tab-on { background:#fff; color:#2f6df6; border-color:#e6e9ef; }
.id-tab-n { background:#eef2f8; color:#55606e; border-radius:11px; padding:1px 9px; font-size:12px; font-weight:700; }
.id-tab-on .id-tab-n { background:#e7effe; color:#2f6df6; }

/* BUY_BOX - purchase card under the watchlist in the right column (1.png 2026-08-08) */
.buy-box { border: 1px solid #d9dce1; background: #fff; padding: 14px 16px; border-radius: 8px; width: 100%; box-sizing: border-box; margin: 0 0 12px; }
.buy-box-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #eef0f3; }
.buy-box-price-l { font-size: 13px; color: #5f6368; font-weight: 600; }
.buy-box-price-v { font-size: 22px; color: #111827; font-weight: 700; }
.buy-box .stock-left { margin-top: 10px; }
/* identity auto-switch toast on the listing page (3.png 2026-08-09) */
.pd-switch-toast { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 3000; background: #14335f; color: #fff; padding: 11px 22px; border-radius: 10px; font-size: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.25); transition: opacity .4s; max-width: 90vw; text-align: center; }
.pd-switch-toast.pd-toast-gone { opacity: 0; }
/* seller-only hint beside Edit / Sell another buttons (1.png 2026-08-09) */
.lc-owner-note { align-self: center; font-size: 12.5px; color: #8a94a3; margin-left: 6px; }

/* == z points 1-3.png (2026-08-11): property detail tweaks == */
/* price moved to the right column, bold text only, above the agency box */
.pd-side-price { font-size: 20px; font-weight: 800; color: #16213a; margin: 0 0 12px; }
/* breathing room between the WhatsApp button and the contact button below it */
.s359 { margin-bottom: 10px; }
/* z points 6.png: the guest contact button is an <a> (inline), so width:100% was
   ignored and its padding overflowed the gap. Same size + responsive as WhatsApp. */
a.s362.msg-signin, a.s368 { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; margin-top: 10px; }
/* z points 2.png round 2: location line above the title + Details heading over chips */
.pd-loc-top { margin: 0 0 8px; }
.pd-facts-h { margin: 16px 0 10px; }
/* z points: Property ID rides the address line, right-aligned */
.pd-loc-top { display: flex; align-items: center; gap: 6px; }
.pd-locid { margin-left: auto; color: #8a94a3; font-size: 13.5px; font-weight: 500; }

/* == TradeMe-style auction panel (researched live 2026-08-11) == */
.auction-panel-right { background: #fff; border: 1px solid #e2e6ea; }
.ap-ended { font-size: 15px; font-weight: 700; color: #6b7280; text-align: center; margin-bottom: 4px; }
.ap-closes { font-size: 15px; font-weight: 600; color: #111827; }
.ap-closes-abs { font-size: 13px; font-weight: 400; color: #6b7280; margin-top: 2px; }
.ap-box { text-align: center; margin-top: 12px; }
.ap-label { font-size: 15px; color: #374151; }
.ap-price { font-size: 32px; font-weight: 800; color: #111827; line-height: 1.15; margin: 2px 0 12px; }
.auction-bid-btn { background: #2563eb; font-size: 15px; }
.auction-bid-btn:hover { background: #1d4ed8; }
.ap-buynow-line { font-size: 14px; color: #374151; margin-top: 8px; }
.ap-reserve { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: #374151; }
.ap-reserve-met { color: #15803d; }
.ap-reserve-notmet { color: #b91c1c; }
.ap-reserve-none { color: #b45309; }
.auction-panel-right .bids-trigger { display: block; margin-top: 6px; font-size: 14px; color: #2563eb; text-align: center; }
.auction-panel-right .bids-trigger:hover { text-decoration: underline; }

/* z points 2026-08-12: guest Buy Now links styled as the buttons they mirror */
.buy-now-link { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
/* store-only seller card: letter placeholder when the store has no logo */
.store-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #64748b; font-size: 20px; }
/* watchlist heart overlay on the detail gallery */
.pd-fav-detail { top: 12px; right: 12px; }
.pd-fav-detail .zp-fav { width: 38px; height: 38px; }
.pd-fav-detail .zp-fav svg { width: 20px; height: 20px; }

/* z points 11.png: views / listed / expires ride the breadcrumb line */
.pd-crumb { display: flex; align-items: center; flex-wrap: wrap; }
.pd-crumb-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; color: #6b7280; font-size: 13px; }
.pd-crumb-meta .s254 { display: inline-flex; align-items: center; gap: 4px; }

/* AliExpress-style quantity stepper on the buy box (2026-08-12) */
.stock-qty { display: block; margin: 10px 0; }
.qty-label { display: inline-block; font-size: 13.5px; color: #374151; margin-right: 10px; vertical-align: middle; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid #d5dbe6; border-radius: 8px; overflow: hidden; vertical-align: middle; background: #fff; }
.qty-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f5f6f8; border: 0; cursor: pointer; color: #374151; padding: 0; }
.qty-btn:hover:not([disabled]) { background: #e8ebf0; }
.qty-btn[disabled] { color: #c3c9d4; cursor: not-allowed; }
.qty-btn svg { width: 13px; height: 13px; }
.qty-stepper .stock-qty-in { width: 48px; height: 36px; border: 0; border-left: 1px solid #e3e7ee; border-right: 1px solid #e3e7ee; border-radius: 0; text-align: center; font-size: 14.5px; font-weight: 600; color: #111827; -moz-appearance: textfield; appearance: textfield; margin: 0; padding: 0; }
.qty-stepper .stock-qty-in::-webkit-outer-spin-button, .qty-stepper .stock-qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper .stock-qty-in:focus { outline: none; background: #f8fafc; }
.qty-warn { color: #b91c1c; font-size: 12.5px; font-weight: 600; margin-top: 6px; }

/* "You can't buy your own item." popup (2026-08-12) */
.own-buy-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.own-buy-modal[hidden] { display: none; }
.obm-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.obm-box { position: relative; background: #fff; border-radius: 14px; padding: 26px 30px; max-width: 340px; width: calc(100% - 40px); text-align: center; box-shadow: 0 18px 50px rgba(15,23,42,.25); }
.obm-icon { width: 44px; height: 44px; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.obm-msg { font-size: 15.5px; font-weight: 600; color: #111827; margin-bottom: 16px; }
.obm-ok { background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 9px 34px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.obm-ok:hover { background: #1d4ed8; }

/* z points 10.png: visit-store band without the duplicate logo/name */
.visit-store-plain { justify-content: center; }
.visit-store-plain .vs-txt b { font-size: 14.5px; }

/* z points 12.png: watchlist heart on the breadcrumb row (works with 0 photos) */
.pd-fav-crumb { position: static; margin-left: auto; }
.pd-crumb-meta ~ .pd-fav-crumb { margin-left: 14px; }   /* meta present: heart sits right beside it */
.pd-fav-crumb .zp-fav { box-shadow: 0 1px 5px rgba(15,23,42,.18); }
/* z points 11.png: fashion card meta = location + size, bigger and darker
   (trendora.css loads after site.css, so the selectors out-rank its rule) */
body.trendora .td-grid .td-card-meta, body.trendora .td-card .td-card-meta { font-size: 13.5px; color: #374151; font-weight: 600; }
.td-card .td-card-meta { font-size: 13.5px; color: #374151; font-weight: 600; }

/* store categories page (marketplace-store selection, 2026-08-12) */
.stc-h1 { font-size: 24px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.stc-sub { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.stc-sub a { color: #2563eb; }
.stc-ok { background: #dcfce7; border: 1px solid #86efac; color: #15803d; border-radius: 8px; padding: 9px 14px; font-size: 14px; margin-bottom: 14px; }
.stc-grp { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.stc-grp-h { font-size: 15px; font-weight: 800; color: #111827; margin-bottom: 10px; }
.stc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.stc-ck { font-size: 14px; color: #374151; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.stc-save { background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 11px 26px; font-size: 15px; font-weight: 600; cursor: pointer; }
.stc-save:hover { background: #1d4ed8; }

/* z points 15.png: breathing room between Visit our store and the buttons below */
.visit-store { margin-bottom: 10px; }

/* store settings sub-tabs (z points 1.png round 7) */
.stt-subtabs { display: flex; gap: 4px; margin: 10px 0 18px; border-bottom: 1px solid #e5e7eb; }
.stt-sub { padding: 8px 16px; font-size: 14px; font-weight: 600; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.stt-sub:hover { color: #2563eb; }
.stt-sub.on { color: #2563eb; border-bottom-color: #2563eb; }

/* default-account row on Store settings (z points 1.png round 9) */
.msf-defrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.msf-def { color: #2563eb; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid #bfd3f7; background: #eff4ff; padding: 8px 14px; border-radius: 8px; }
.msf-def:hover { background: #e2ecfe; }
.msf-def.on { color: #15803d; border-color: #86efac; background: #dcfce7; cursor: default; }
.msf-def-hint { color: #6b7280; font-size: 13px; }

/* Buyer-action guard popup (2026-08-13): switch-to-personal / own-listing */
.obm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.obm-switch { text-decoration: none; display: inline-block; padding: 9px 16px; }
.obm-switch:hover { text-decoration: none; color: #fff; }
.obm-close { background: #e5e7eb; color: #374151; }
.obm-close:hover { background: #d1d5db; }

/* ADVANCED (variant) listing (2026-08-13): post-form editor */
.lc-mode-tabs { display: flex; gap: 10px; }
.lc-mode-tab { flex: 1; display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: #374151; }
.lc-mode-tab.on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.lc-var-head, .lc-var-row { display: grid; grid-template-columns: 1fr 1fr 120px 100px 34px; gap: 8px; align-items: center; }
.lc-var-head { font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 4px; }
.lc-var-row { margin-bottom: 8px; }
.lc-var-del { background: #fee2e2; color: #b91c1c; border: 0; border-radius: 8px; height: 34px; font-size: 18px; cursor: pointer; }
.lc-var-add { background: #f3f4f6; border: 1px dashed #9ca3af; color: #374151; border-radius: 8px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* ADVANCED (variant) listing: detail-page colour/size picker */
.pd-variants { border-top: 1px solid #f3f4f6; padding-top: 12px; margin-top: 4px; }
.pd-var-group { margin-bottom: 10px; }
.pd-var-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.pd-var-label b { color: #111827; }
.pd-var-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-var-chip { border: 1.5px solid #d1d5db; background: #fff; border-radius: 8px; padding: 6px 14px; font-size: 13.5px; color: #374151; cursor: pointer; }
.pd-var-chip:hover { border-color: #9ca3af; }
.pd-var-chip.on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 700; }
.pd-var-chip.off { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.pd-var-warn { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; margin-top: 4px; }
.co-line-var { display: inline-block; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 8px; }

/* variant option rows: dropdown cells fill their grid column */
.lc-var-cell select, .lc-var-cell input { width: 100%; }

/* per-option photo cell (Temu-style variant images, 2026-08-13) */
.lc-var-head, .lc-var-row { grid-template-columns: 1fr 1fr 110px 90px 84px 34px; }
.lc-var-imgcell { display: flex; }
.lc-var-imgbtn { width: 100%; height: 38px; border: 1.5px dashed #9ca3af; border-radius: 8px; background: #f9fafb center/cover no-repeat; color: #6b7280; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lc-var-imgbtn.has { border-style: solid; border-color: #2563eb; color: transparent; }