/*! BUY.net.pk design system — buy.css
   Load order in production: tw-x-base.css, tw-site.css, tw-x-variants.css, buy.css.
   1 fonts · 2 tokens · 3 base · 4 components (@layer components, prefix b-) · 5 legacy restyle (unlayered).
   Rules: logical properties only (RTL), borders before shadows, 44px touch targets. See docs/DESIGN.md. */

/* ───────────────────────────── 1. Fonts (self-hosted, variable) ───────────────────────────── */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Nastaliq Urdu";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/noto-nastaliq-urdu-arabic-wght-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ───────────────────────────── 2. Tokens ───────────────────────────── */
:root{
  /* brand */
  --color-primary:#388E3C; --color-primary-dark:#2E7D32; --color-primary-light:#4CAF50;
  --color-primary-50:#EAF5EA; --color-primary-100:#CFE8D0;
  --color-primary-deep:#1B5E20; /* hover / pressed of solid green fills, deep green text */
  --color-primary-fill:#2E7D32; /* solid fills under small white text: 5.13:1 (plain logo green #388E3C is 4.12:1) */
  /* logo red: the small energetic second colour (hero full stops, unread counts, saved heart, Urgent). Never a second primary */
  --color-accent:#ED3237; --color-accent-dark:#C9272C; --color-accent-50:#FDECEC;
  --color-accent-fill:#C9272C; /* red fills under small white text (counts, Urgent): 5.51:1; #ED3237 is 4.11:1 */
  --color-secondary:#16A34A; --color-secondary-dark:#15803D; --color-secondary-50:#EAF7EE;
  --color-dark:#092A32; --color-dark-2:#0E3B46;
  /* neutrals */
  --color-surface:#F6F8FA; --color-border:#E2E8EC; --color-border-strong:#CBD5DC;
  --color-ink:#101828; --color-ink-2:#344054; --color-muted:#667085;
  /* status */
  --color-amber:#F59E0B; --color-amber-50:#FEF5DC; --color-amber-ink:#8A4B08;
  --color-danger:#DC2626; --color-danger-50:#FDECEC; --color-danger-ink:#B42318;
  --color-success:#16A34A; --color-success-50:#EAF7EE; --color-success-ink:#166534;
  --color-info-50:#E8F1FD; --color-info-ink:#1849A9;
  --color-whatsapp:#128C4B; --color-carnet:#F26A1B;
  /* type */
  --font-heading:"Bricolage Grotesque","Inter","Noto Nastaliq Urdu",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Inter","Noto Nastaliq Urdu",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Inter",system-ui,sans-serif;
  /* --fs-* (not --text-*: those belong to Tailwind and must keep their values) */
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem; --fs-16:1rem;
  --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-30:1.875rem; --fs-38:2.375rem;
  --fs-hero:clamp(2.5rem,13.2vw,6.5rem);
  /* shape */
  --r-xs:6px; --r-ctl:10px; --r-card:14px; --r-panel:20px; --r-hero:24px; --r-pill:999px;
  --radius-card:14px; /* legacy name, same value as --r-card */
  --shadow-line:0 1px 2px #092A320F;
  --shadow-card:0 1px 2px #092A320F,0 8px 24px -12px #092A3233;
  --shadow-hover:0 2px 4px #092A3212,0 16px 32px -16px #092A3240;
  --shadow-pop:0 2px 6px #092A3214,0 18px 40px -12px #092A3238;
  --ring:0 0 0 3px #388E3C38;
  --line:1px solid var(--color-border);
  /* rhythm */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --gutter:16px; --section-y:clamp(40px,6vw,72px); --container:1280px;
  --ctl-h:44px; --header-h:56px; --bottom-nav-h:64px;
  /* layers */
  --z-raised:5; --z-sticky:30; --z-header:40; --z-bottom-nav:45; --z-dropdown:50;
  --z-backdrop:60; --z-sheet:70; --z-modal:80; --z-toast:90;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:640px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px;--header-h:72px;--fs-hero:clamp(4.75rem,7.6vw,6.5rem)}}

/* Category hues: add b-hue-{key} to a tile, placeholder or avatar. Keys match categories.color. */
.b-hue-green{--hue-bg:#E4F4EC;--hue-fg:#0B6B47}
.b-hue-blue{--hue-bg:#E6EEFD;--hue-fg:#1D4FBF}
.b-hue-amber{--hue-bg:#FDF1D3;--hue-fg:#92580A}
.b-hue-rose{--hue-bg:#FDE6EA;--hue-fg:#B4234A}
.b-hue-violet{--hue-bg:#EEE9FD;--hue-fg:#5B34C4}
.b-hue-teal{--hue-bg:#DDF4F1;--hue-fg:#0F6E66}
.b-hue-orange{--hue-bg:#FDE9D9;--hue-fg:#B5470F}
.b-hue-slate{--hue-bg:#E9EEF2;--hue-fg:#3A4A5A}
.b-hue-lime{--hue-bg:#ECF6D5;--hue-fg:#4A6B10}
.b-hue-sky{--hue-bg:#E0F1FB;--hue-fg:#0B5E8E}
.b-hue-pink{--hue-bg:#FBE6F2;--hue-fg:#AD2470}

/* ───────────────────────────── 3. Base ───────────────────────────── */
@layer base{
  html{scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
  body{font-family:var(--font-sans);line-height:1.5;color:var(--color-ink);background:var(--color-surface)}
  h1,h2,h3,h4{font-family:var(--font-heading);color:var(--color-dark);letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
  :focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
  [dir=rtl] body{line-height:2}
  [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{letter-spacing:0;line-height:1.9}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  }
}

/* ───────────────────────────── 4. Components ───────────────────────────── */
@layer components{

/* ── Layout ── */
.b-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.b-container--narrow{max-width:880px}
.b-section{padding-block:var(--section-y)}
.b-section--flush{padding-block-start:0}
.b-section--snug{padding-block:calc(var(--section-y)*.55)}
.b-section--white{background:#fff;border-block:1px solid var(--color-border)}
.b-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin-block-end:20px}
.b-section__title{font:700 var(--fs-24)/1.15 var(--font-heading);letter-spacing:-.025em;color:var(--color-dark)}
.b-section__sub{margin-block-start:4px;font-size:var(--fs-15);color:var(--color-muted)}
.b-link{display:inline-flex;align-items:center;gap:4px;color:var(--color-primary-dark);font-weight:600;font-size:var(--fs-15);text-decoration:underline transparent;text-underline-offset:3px;white-space:nowrap;padding-block:11px;margin-block:-11px}
.b-link:hover{text-decoration-color:currentColor}
.b-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.b-grid--1,.b-grid--wide{grid-template-columns:minmax(0,1fr)}
.b-stack{display:grid;gap:var(--gap,16px);align-content:start}
.b-stack>*{min-width:0}
.b-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,12px)}
.b-row--between{justify-content:space-between}
.b-layout{display:grid;gap:24px;align-items:start}
.b-layout>*{min-width:0}
.b-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.b-carousel::-webkit-scrollbar,.b-chips--scroll::-webkit-scrollbar,.b-tabs::-webkit-scrollbar{display:none}
.b-carousel>*{flex:none;width:min(78vw,300px);scroll-snap-align:start}
.b-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.b-muted{color:var(--color-muted)}
.b-divider{height:1px;border:0;background:var(--color-border)}
.b-has-bottom-nav{padding-block-end:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px))}
@media (min-width:640px){
  .b-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .b-grid--1{grid-template-columns:minmax(0,1fr)}
  .b-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-carousel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible;margin-inline:0;padding-inline:0}
  .b-carousel>*{width:auto}
}
@media (min-width:1024px){
  .b-section__title{font-size:1.75rem}
  .b-grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:20px}
  .b-grid--3{--cols:3}.b-grid--5{--cols:5}.b-grid--1{--cols:1}.b-grid--wide{--cols:2}
  .b-carousel{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:20px}
  .b-layout--sidebar{grid-template-columns:280px minmax(0,1fr)}
  .b-layout--aside{grid-template-columns:minmax(0,1fr) 380px;gap:32px}
  .b-has-bottom-nav{padding-block-end:0}
  .b-until-lg{display:none!important}
  .b-sticky{position:sticky;inset-block-start:calc(var(--header-h) + 20px)}
}
@media (max-width:1023.98px){.b-only-lg{display:none!important}}

/* ── Shared colour transition (hover, focus, selected) ── */
.b-ad-card,
.b-btn,
.b-cat-tile,
.b-catnav__link,
.b-chat__item,
.b-check input,
.b-chip,
.b-icon-btn,
.b-input,.b-select,.b-textarea,
.b-input-group,
.b-loc,
.b-modes__tab,
.b-navlist__link,
.b-pagination__item,
.b-pro-card,
.b-search,
.b-store-card,
.b-tabs__tab,
.b-toggle input{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}

/* ── Icons ── */
.b-icon{display:inline-block;vertical-align:-.2em;width:1.25em;height:1.25em;flex:none;stroke-width:1.75}
.b-icon--sm{width:1em;height:1em}
.b-icon--lg{width:1.5em;height:1.5em}
[dir=rtl] .b-flip-rtl{transform:scaleX(-1)}

/* ── Buttons ── */
.b-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ctl-h);padding:10px 18px;border:1px solid transparent;border-radius:var(--r-ctl);font:600 var(--fs-15)/1.2 var(--font-sans);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none}
.b-btn svg{width:18px;height:18px;flex:none}
.b-btn--primary{background:var(--color-primary-fill);color:#fff}
.b-btn--primary:hover{background:var(--color-primary-deep)}
.b-btn--outline{background:#fff;border-color:var(--color-border-strong);color:var(--color-dark)}
.b-btn--outline:hover{border-color:var(--color-dark);background:var(--color-surface)}
.b-btn--soft{background:var(--color-primary-50);color:var(--color-primary-dark)}
.b-btn--soft:hover{background:var(--color-primary-100)}
.b-btn--ghost{background:transparent;color:var(--color-ink-2)}
.b-btn--ghost:hover{background:#EEF2F5;color:var(--color-dark)}
.b-btn--dark{background:var(--color-dark);color:#fff}
.b-btn--dark:hover{background:var(--color-dark-2)}
.b-btn--white{background:#fff;color:var(--color-dark)}
.b-btn--white:hover{background:var(--color-primary-50)}
.b-btn--whatsapp{background:#fff;border-color:#128C4B80;color:#0B6E3A}
.b-btn--whatsapp:hover{background:#EAF7EE}
.b-btn--danger{background:#fff;border-color:#DC262680;color:var(--color-danger-ink)}
.b-btn--danger:hover{background:var(--color-danger-50)}
.b-btn--sm{min-height:36px;padding:6px 12px;border-radius:8px;font-size:var(--fs-14)}
.b-btn--sm::after,.b-chip::after,.b-seg__btn::after,.b-search__btn::after{content:"";position:absolute;inset:-4px 0}
.b-btn--sm svg{width:16px;height:16px}
.b-btn--lg{min-height:52px;padding:14px 24px;border-radius:12px;font-size:var(--fs-16)}
.b-btn--lg svg{width:20px;height:20px}
.b-btn--block{display:flex;width:100%}
.b-btn--icon{width:var(--ctl-h);padding:0}
.b-btn--icon.b-btn--sm{width:36px}
.b-btn:disabled,.b-btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.b-btn.is-loading{color:transparent!important;pointer-events:none}
.b-btn.is-loading::before{content:"";position:absolute;width:18px;height:18px;border:2px solid #fff;border-inline-end-color:transparent;border-radius:50%;animation:b-spin .7s linear infinite}
.b-btn--outline.is-loading::before,.b-btn--soft.is-loading::before{border-color:var(--color-primary);border-inline-end-color:transparent}
.b-icon-btn{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-ctl);color:var(--color-ink-2);cursor:pointer}
.b-icon-btn:hover{background:#EEF2F5;color:var(--color-dark)}
.b-icon-btn svg{width:22px;height:22px}
.b-icon-btn__count{position:absolute;inset-block-start:4px;inset-inline-end:2px;min-width:18px;height:18px;padding-inline:5px;border-radius:9px;background:var(--color-accent-fill);color:#fff;font:700 12px/18px var(--font-sans);text-align:center;box-shadow:0 0 0 2px #fff}

/* ── Forms ── */
.b-field{display:grid;gap:6px;align-content:start}
.b-label{display:block;font:600 var(--fs-14)/1.3 var(--font-sans);color:var(--color-dark)}
.b-label__opt{font-weight:400;color:var(--color-muted)}
.b-input,.b-select,.b-textarea{display:block;width:100%;min-height:var(--ctl-h);padding:9px 14px;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background-color:#fff;color:var(--color-ink);font:400 var(--fs-16)/1.5 var(--font-sans)}
.b-input::placeholder,.b-textarea::placeholder,.b-search__input::placeholder,.b-composer__input::placeholder{color:var(--color-muted);opacity:1}
.b-input:hover,.b-select:hover,.b-textarea:hover{border-color:#9AA8B4}
.b-input:focus,.b-select:focus,.b-textarea:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--ring)}
.b-select,.b-search__select{appearance:none;padding-inline-end:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
[dir=rtl] .b-select,[dir=rtl] .b-search__select{background-position:left 12px center}
.b-textarea{min-height:112px;resize:vertical}
.b-input.is-invalid,.b-select.is-invalid,.b-textarea.is-invalid,.b-input[aria-invalid=true]{border-color:var(--color-danger)}
.b-input.is-invalid:focus{box-shadow:0 0 0 3px #DC262633}
.b-help{font-size:var(--fs-13);line-height:1.4;color:var(--color-muted)}
.b-help svg{display:inline-block;vertical-align:-.15em;width:1em;height:1em}
.b-error{display:flex;gap:6px;font-size:var(--fs-13);line-height:1.4;font-weight:500;color:var(--color-danger-ink)}
.b-input-group{display:flex;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background:#fff;overflow:hidden}
.b-input-group:focus-within{border-color:var(--color-primary);box-shadow:var(--ring)}
.b-input-group__addon{display:flex;align-items:center;padding-inline:12px;background:var(--color-surface);color:var(--color-ink-2);font:600 var(--fs-14)/1 var(--font-sans);white-space:nowrap}
.b-input-group__addon:first-child{border-inline-end:var(--line)}
.b-input-group__addon:last-child{border-inline-start:var(--line)}
.b-input-group .b-input,.b-input-group .b-select{border:0;border-radius:0;box-shadow:none;min-height:42px}
.b-form-row{display:grid;gap:16px}
.b-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;color:var(--color-muted);font-size:var(--fs-14)}
.b-check,.b-toggle{display:flex;align-items:center;gap:10px;min-height:var(--ctl-h);font-size:var(--fs-15);line-height:1.35;color:var(--color-ink);cursor:pointer}
.b-check--compact{min-height:36px}
.b-check input{appearance:none;flex:none;width:20px;height:20px;border:1.5px solid #8795A1;border-radius:6px;background:#fff center/14px no-repeat;cursor:pointer}
.b-check input[type=radio]{border-radius:50%}
.b-check input:checked{border-color:var(--color-primary-fill);background-color:var(--color-primary-fill);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.b-check input[type=radio]:checked{background-image:radial-gradient(#fff 0 4px,transparent 4.5px)}
.b-check__count{margin-inline-start:auto;font-size:var(--fs-13);color:var(--color-muted);font-variant-numeric:tabular-nums}
.b-toggle input{appearance:none;position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:#8795A1;cursor:pointer}
.b-toggle input::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .2s var(--ease)}
.b-toggle input:checked{background:var(--color-primary-fill)}
.b-toggle input:checked::after{transform:translateX(16px)}
[dir=rtl] .b-toggle input:checked::after{transform:translateX(-16px)}
.b-toggle--end{justify-content:space-between}
.b-seg{display:inline-flex;padding:3px;border-radius:12px;background:#EAEFF3}
.b-seg__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;min-width:42px;padding-inline:14px;border-radius:9px;font:600 var(--fs-14)/1 var(--font-sans);color:var(--color-ink-2);cursor:pointer;white-space:nowrap}
.b-seg__btn svg{width:18px;height:18px}
.b-seg__btn:hover{color:var(--color-dark)}
.b-seg__btn.is-active,.b-seg__btn[aria-pressed=true],.b-seg__btn[aria-selected=true]{background:#fff;color:var(--color-dark);box-shadow:var(--shadow-line)}
.b-seg--block{display:flex}.b-seg--block .b-seg__btn{flex:1}
.b-choice{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--ctl-h);padding:10px 14px;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background:#fff;font:500 var(--fs-15)/1.3 var(--font-sans);color:var(--color-ink);cursor:pointer}
.b-choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.b-choice:hover{border-color:#9AA8B4}
.b-choice:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-50);color:var(--color-primary-dark);font-weight:600;box-shadow:inset 0 0 0 1px var(--color-primary)}
.b-choice:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
.b-otp{display:flex;gap:8px;direction:ltr}
.b-otp input{width:100%;max-width:52px;height:56px;padding:0;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background:#fff;text-align:center;font:700 1.5rem/1 var(--font-heading);color:var(--color-dark)}
.b-otp input:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--ring)}
@media (min-width:640px){.b-form-row{grid-template-columns:repeat(2,minmax(0,1fr))}.b-form-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Chips ── */
.b-chips{display:flex;flex-wrap:wrap;gap:8px}
.b-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);padding-block:4px}
.b-chips--scroll>*{flex:none}
.b-chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:1px solid var(--color-border-strong);border-radius:var(--r-pill);background:#fff;color:var(--color-ink-2);font:500 var(--fs-14)/1.2 var(--font-sans);white-space:nowrap;cursor:pointer}
.b-chip svg{width:16px;height:16px;flex:none}
.b-chip:hover{border-color:var(--color-dark);color:var(--color-dark)}
.b-chip.is-active,.b-chip[aria-pressed=true],.b-chip[aria-current]{border-color:var(--color-primary);background:var(--color-primary-50);color:var(--color-primary-dark);font-weight:600}
.b-chip--quiet{border-color:transparent;background:#EAEFF3}
.b-chip__x{display:grid;place-items:center;width:20px;height:20px;margin-inline-end:-6px;border-radius:50%;color:inherit}
.b-chip__x:hover{background:#0000001a}

/* ── Badges ── */
.b-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-xs);background:#EAEFF3;color:var(--color-ink-2);font:600 var(--fs-12)/1.35 var(--font-sans);letter-spacing:0;white-space:nowrap}
.b-badge svg{width:13px;height:13px;flex:none}
.b-badge--featured{background:var(--color-amber);color:#3A2403}
.b-badge--urgent{background:var(--color-accent-fill);color:#fff}
.b-badge--warning,.b-status-changes_requested{background:var(--color-amber-50);color:var(--color-amber-ink);box-shadow:inset 0 0 0 1px #F59E0B73}
.b-badge--verified{background:var(--color-primary-50);color:var(--color-primary-dark)}
.b-badge--success,.b-status-live,.b-status-approved{background:var(--color-success-50);color:var(--color-success-ink)}
.b-badge--danger,.b-status-rejected,.b-status-suspended{background:var(--color-danger-50);color:var(--color-danger-ink)}
.b-badge--info,.b-status-pending{background:var(--color-info-50);color:var(--color-info-ink)}
.b-badge--dark,.b-status-sold{background:var(--color-dark);color:#fff}
.b-badge--outline,.b-status-paused,.b-status-draft{background:#fff;color:var(--color-ink-2);box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.b-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-badge--lg{padding:5px 10px;font-size:var(--fs-13)}
.b-trust{display:flex;flex-wrap:wrap;gap:6px 14px}
.b-trust--stack{flex-direction:column}
.b-trust__item{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-13)/1.3 var(--font-sans);color:var(--color-ink-2)}
.b-trust__item svg{width:16px;height:16px;flex:none;color:var(--color-primary)}
.b-trust__item.is-missing{color:var(--color-muted)}
.b-trust__item.is-missing svg{color:#9AA8B4}
.b-verified{display:inline-flex;vertical-align:-.15em;color:var(--color-primary)}
.b-verified svg{width:1.05em;height:1.05em}
.b-rating{display:inline-flex;align-items:center;gap:4px;font:600 var(--fs-13)/1 var(--font-sans);color:var(--color-ink)}
.b-rating svg{width:14px;height:14px;fill:var(--color-amber);stroke:var(--color-amber)}
.b-rating__count{font-weight:400;color:var(--color-muted)}

/* ── Cards, price, placeholders ── */
.b-card{background:#fff;border:var(--line);border-radius:var(--r-card)}
.b-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-block-end:var(--line)}
.b-card__title{font:700 var(--fs-18)/1.2 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
.b-card__body{padding:20px}
.b-card__foot{padding:14px 20px;border-block-start:var(--line)}
.b-card--panel{border-radius:var(--r-panel)}
.b-card--tint{background:var(--color-primary-50);border-color:var(--color-primary-100)}
.b-card--pop{box-shadow:var(--shadow-pop)}
.b-price{display:inline-flex;align-items:baseline;font:700 var(--fs-18)/1.1 var(--font-heading);letter-spacing:-.02em;color:var(--color-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.b-price__cur,.b-price__unit{font-size:.7em;font-weight:600;letter-spacing:0}
.b-price__cur{margin-inline-end:.2em}
.b-price__unit{margin-inline-start:.22em}
.b-price--lg{font-size:var(--fs-24)}
.b-price--xl{font-size:clamp(2rem,5vw,2.6rem);font-weight:800;letter-spacing:-.035em}
.b-price--muted{color:var(--color-muted)}
.b-ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--hue-bg,#E9EEF2);color:var(--hue-fg,#3A4A5A);overflow:hidden}
.b-ph--box{position:relative;inset:auto;aspect-ratio:4/3;border-radius:var(--r-ctl)}
.b-ph::before{content:"";position:absolute;height:76%;aspect-ratio:1;border-radius:50%;background:#fff;opacity:.6}
.b-ph svg{position:relative;width:auto;height:36%;max-height:104px;aspect-ratio:1;stroke-width:1.2}
.b-ph__tag{position:absolute;inset-block-end:8px;inset-inline-start:8px;padding:2px 6px;border-radius:4px;background:#ffffffe0;color:var(--color-ink-2);font:600 var(--fs-12)/1.3 var(--font-sans)}

/* ── Ad card ── */
.b-ad-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:var(--line);border-radius:var(--r-card);overflow:hidden}
.b-ad-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-card)}
.b-ad-card:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}
.b-ad-card__media{position:relative;flex:none;aspect-ratio:4/3;background:var(--color-surface);overflow:hidden}
.b-ad-card__media img{width:100%;height:100%;object-fit:cover}
.b-ad-card__media>.b-badge{position:absolute;z-index:2;inset-block-start:8px;inset-inline-start:8px}
.b-ad-card__count{position:absolute;z-index:2;inset-block-end:8px;inset-inline-end:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;background:#092A32B8;color:#fff;font:600 var(--fs-12)/1.3 var(--font-sans)}
.b-ad-card__count svg{width:12px;height:12px}
.b-ad-card__save{position:absolute;z-index:3;inset-block-start:8px;inset-inline-end:8px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--color-ink-2);box-shadow:0 1px 3px #092A3233;cursor:pointer}
.b-ad-card__save::after{content:"";position:absolute;inset:-4px}
.b-ad-card__save svg{width:18px;height:18px}
.b-ad-card__save:hover{color:var(--color-accent)}
.b-ad-card__save[aria-pressed=true]{color:var(--color-accent)}
.b-ad-card__save[aria-pressed=true] svg{fill:currentColor}
.b-save[aria-pressed=true] svg{color:var(--color-accent);fill:currentColor} /* saved heart = logo red, also on the ad page */
.b-ad-card__body{display:flex;flex-direction:column;flex:1;gap:4px;min-width:0;padding:12px 12px 12px}
.b-ad-card__title{font:500 var(--fs-14)/1.4 var(--font-sans);letter-spacing:0;color:var(--color-ink);text-wrap:wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.b-ad-card__title a{outline:0}
.b-ad-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.b-ad-card__specs{font-size:var(--fs-13);color:var(--color-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-ad-card__specs>*{unicode-bidi:isolate}
.b-ad-card__specs>*+*{margin-inline-start:8px;padding-inline-start:8px;border-inline-start:1px solid var(--color-border-strong)}
.b-ad-card__trust{display:flex;align-items:center;gap:5px;font:500 var(--fs-12)/1.3 var(--font-sans);color:var(--color-primary-dark)}
.b-ad-card__trust svg{width:14px;height:14px}
.b-ad-card__meta{display:flex;justify-content:space-between;gap:8px;margin-block-start:auto;padding-block-start:6px;font-size:var(--fs-12);line-height:1.4;color:var(--color-muted)}
.b-ad-card__meta>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-ad-card__meta>:last-child{flex:none}
.b-ad-card.is-sold .b-ad-card__media>:not(.b-badge){filter:grayscale(1);opacity:.6}
.b-ad-card.is-sold .b-price{color:var(--color-muted)}
/* list: wide rows on desktop */
.b-ad-card--list{flex-direction:row}
.b-ad-card--list .b-ad-card__media{width:38%;max-width:260px;aspect-ratio:auto;min-height:112px}
.b-ad-card--list .b-ad-card__body{padding-block:12px;padding-inline:14px 52px;gap:5px}
.b-ad-card--list .b-ad-card__save{box-shadow:none;border:var(--line)}
/* row: compact, borderless, for dense lists */
.b-ad-card--row{flex-direction:row;align-items:center;gap:12px;border:0;border-radius:0;background:none;overflow:visible;padding-block:10px;border-block-end:var(--line)}
.b-ad-card--row:hover{box-shadow:none}
.b-ad-card--row .b-ad-card__media{width:84px;border-radius:var(--r-ctl)}
.b-ad-card--row .b-ad-card__body{padding:0;gap:2px}
.b-ad-card--row .b-ad-card__title{-webkit-line-clamp:1}
.b-ad-card--row .b-ad-card__meta{margin:0;padding:0}
.b-ad-card--row .b-ph__tag{display:none}
@media (min-width:640px){
  .b-ad-card__body{padding:14px 14px 12px}
  .b-ad-card__title{font-size:var(--fs-15)}
  .b-ad-card:not(.b-ad-card--row) .b-price{font-size:var(--fs-20)}
  .b-ad-card--list .b-ad-card__body{padding-block:16px 14px;padding-inline:18px 60px}
  .b-ad-card--list .b-price{font-size:var(--fs-20)}
  .b-ad-card--list .b-ad-card__title{font-size:var(--fs-16)}
}

/* ── Category tiles ── */
.b-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.b-cat-tile{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px 4px 10px;border:var(--line);border-radius:var(--r-card);background:#fff;text-align:center;font:600 var(--fs-13)/1.25 var(--font-sans);color:var(--color-dark)}
.b-cat-tile:hover{border-color:var(--hue-fg,var(--color-primary));box-shadow:var(--shadow-line)}
.b-cat-tile__icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--hue-bg,var(--color-primary-50));color:var(--hue-fg,var(--color-primary-dark))}
.b-cat-tile__icon svg{width:26px;height:26px;stroke-width:1.6}
.b-cat-tile__sub{display:none;font-weight:400;font-size:var(--fs-13);line-height:1.35;color:var(--color-muted)}
.b-cat-tile__text{min-width:0;overflow-wrap:anywhere}
@media (min-width:640px){.b-cat-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.b-cat-tile{font-size:var(--fs-14);padding:16px 8px 14px}}
@media (min-width:1024px){
  .b-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
  .b-cat-tile{flex-direction:row;gap:14px;padding:12px 14px;text-align:start;font-size:var(--fs-15)}
  .b-cat-tile__sub{display:block;margin-block-start:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .b-cat-tile__text{overflow-wrap:normal}
}

/* ── Service provider and store cards ── */
.b-pro-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;background:#fff;border:var(--line);border-radius:var(--r-card)}
.b-pro-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-card)}
.b-pro-card__top{display:flex;align-items:center;gap:12px;min-width:0}
.b-pro-card__top>:last-child{min-width:0}
.b-pro-card__name{font:700 var(--fs-16)/1.25 var(--font-heading);letter-spacing:-.01em;color:var(--color-dark)}
.b-pro-card__name a::after{content:"";position:absolute;inset:0}
.b-pro-card__service{font-size:var(--fs-14);line-height:1.4;color:var(--color-ink-2)}
.b-pro-card__area{display:flex;align-items:center;gap:6px;font-size:var(--fs-13);color:var(--color-muted)}
.b-pro-card__area svg{width:14px;height:14px}
.b-pro-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-block-start:auto;padding-block-start:12px;border-block-start:var(--line)}
.b-pro-card__from{display:block;font-size:var(--fs-12);color:var(--color-muted);line-height:1.2}
.b-pro-card__foot .b-btn{position:relative;z-index:1}
.b-store-card{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:14px;background:#fff;border:var(--line);border-radius:var(--r-card)}
.b-store-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-card)}
.b-store-card__name{font:700 var(--fs-16)/1.25 var(--font-heading);letter-spacing:-.01em;color:var(--color-dark)}
.b-store-card__name a::after{content:"";position:absolute;inset:0}
.b-store-card__meta{font-size:var(--fs-13);line-height:1.4;color:var(--color-muted)}

/* ── Avatar, stat, progress ── */
.b-avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--hue-bg,var(--color-primary-50));color:var(--hue-fg,var(--color-primary-dark));font:700 var(--fs-16)/1 var(--font-heading);overflow:hidden}
.b-avatar img{width:100%;height:100%;object-fit:cover}
.b-avatar svg{width:50%;height:50%}
.b-avatar--sm{width:32px;height:32px;font-size:var(--fs-13)}
.b-avatar--lg{width:64px;height:64px;font-size:var(--fs-24)}
.b-avatar--xl{width:96px;height:96px;font-size:2rem}
.b-avatar--square{border-radius:22%}
.b-avatar--ring{box-shadow:0 0 0 4px #fff}
.b-stat{display:grid;gap:2px;padding:16px;background:#fff;border:var(--line);border-radius:var(--r-card)}
.b-stat__label{display:flex;align-items:center;gap:6px;font-size:var(--fs-13);color:var(--color-muted)}
.b-stat__label svg{width:16px;height:16px}
.b-stat__value{font:700 1.75rem/1.15 var(--font-heading);letter-spacing:-.02em;color:var(--color-dark);font-variant-numeric:tabular-nums}
.b-stat__hint{font-size:var(--fs-13);color:var(--color-muted)}
.b-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.b-progress{height:8px;border-radius:4px;background:#E3E9ED;overflow:hidden}
.b-progress>span{display:block;width:var(--value,0%);height:100%;border-radius:inherit;background:var(--color-primary)}
@media (min-width:768px){.b-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}

} /* end core components */

@layer components{

/* ── Header ── */
.b-header{position:sticky;inset-block-start:0;z-index:var(--z-header);background:#fff;border-block-end:var(--line)}
.b-header__bar{display:flex;align-items:center;gap:8px;height:var(--header-h)}
.b-header__logo{display:inline-flex;align-items:center;flex:none;min-height:44px;margin-inline-end:auto;border-radius:8px}
.b-header__logo img,.b-header__logo svg{display:block;height:38px;width:auto}
.b-header .b-header__search{display:none;flex:1;min-width:0;max-width:600px}
.b-header__actions{display:flex;align-items:center;gap:2px}
.b-header__actions .b-btn{margin-inline-start:8px}
.b-header--home.is-top .b-header__search{visibility:hidden}
.b-catnav{display:none;border-block-start:var(--line)}
.b-catnav__list{display:flex;align-items:center;gap:2px;height:44px;margin-inline:-10px}
.b-catnav__link{display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:10px;border-radius:8px;font:500 var(--fs-14)/1 var(--font-sans);color:var(--color-ink-2);white-space:nowrap}
.b-catnav__link:hover{background:#EEF2F5;color:var(--color-dark)}
.b-catnav__link[aria-current]{color:var(--color-primary-dark);font-weight:600}
.b-catnav__link svg{width:16px;height:16px}
.b-catnav__end{margin-inline-start:auto}
@media (min-width:1024px){
  .b-header__bar{gap:16px}
  .b-header__logo{margin-inline-end:4px}
  .b-header__logo img,.b-header__logo svg{height:46px}
  .b-header .b-header__search{display:flex}
  .b-header__actions{margin-inline-start:auto}
  .b-catnav{display:block}
}

/* ── Location chip (the "Nearby" control; also the header city selector) ── */
.b-loc{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:var(--ctl-h);max-width:100%;padding:8px 12px;border:1px solid var(--color-border-strong);border-radius:var(--r-pill);background:#fff;color:var(--color-dark);font:600 var(--fs-14)/1.2 var(--font-sans);letter-spacing:0;white-space:nowrap;cursor:pointer}
.b-loc:hover{border-color:var(--color-dark)}
.b-loc>svg:first-child{width:18px;height:18px;color:var(--color-primary)}
.b-loc>svg:last-child{width:16px;height:16px;color:var(--color-muted)}
.b-loc__text{overflow:hidden;text-overflow:ellipsis}
.b-loc__sub{font-weight:400;color:var(--color-muted)}
.b-loc--lg .b-loc__sub{display:none}

/* ── Search bar ── */
.b-search{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--color-border-strong);border-radius:12px;background:#fff}
.b-search:focus-within{border-color:var(--color-primary);box-shadow:var(--ring)}
.b-search__field{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding-inline-start:14px}
.b-search__field>svg{width:20px;height:20px;flex:none;color:var(--color-muted)}
.b-search__input{flex:1;min-width:0;height:42px;padding:0;border:0;background:none;color:var(--color-ink);font:400 var(--fs-16)/1.3 var(--font-sans);outline:0}
.b-search__select{flex:none;max-width:11rem;padding-inline:14px 36px;border:0;border-inline-start:var(--line);border-radius:0;background-color:transparent;color:var(--color-ink-2);font:500 var(--fs-14)/1.2 var(--font-sans);text-overflow:ellipsis;cursor:pointer}
.b-search__select:focus-visible{outline-offset:-3px;border-radius:8px}
.b-search__btn{flex:none;margin:3px;min-height:36px;border-radius:9px}
.b-search--hero{border-radius:16px;box-shadow:var(--shadow-pop)}
.b-search--hero:focus-within{box-shadow:var(--ring),var(--shadow-pop)}
.b-search--hero .b-search__field{padding-inline-start:18px}
.b-search--hero .b-search__input{height:58px;font-size:var(--fs-18)}
.b-search--hero .b-search__btn{margin:7px;min-height:44px;padding-inline:22px;border-radius:11px;font-size:var(--fs-16)}
@media (max-width:639.98px){
  .b-search--hero{flex-wrap:wrap}
  .b-search--hero .b-search__field{flex-basis:100%;border-block-end:var(--line)}
  .b-search--hero .b-search__input{height:54px;font-size:var(--fs-16)}
  .b-search--hero .b-search__select{flex:1;max-width:none;border-inline-start:0;padding-inline-start:18px}
}

/* ── Hero: the tagline is the search ── */
.b-hero{background:#fff;border-block-end:var(--line);padding-block:clamp(20px,4vw,52px) clamp(28px,4.6vw,60px)}
.b-hero__grid{display:grid;gap:28px}
.b-hero__grid>*{min-width:0}
.b-hero__title{display:grid;gap:.06em;margin-inline-start:-.13em;font:800 var(--fs-hero)/1.02 var(--font-heading);letter-spacing:-.045em;color:var(--color-dark);text-wrap:nowrap}
.b-hero__line{display:flex;flex-wrap:wrap;align-items:center;gap:.12em .24em}
.b-modes{position:relative;display:inline-flex;flex-wrap:wrap;isolation:isolate}
.b-modes__tab{position:relative;z-index:1;padding:.03em .13em .09em;border-radius:.2em;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
.b-modes__tab:hover{background:#EFF3F5}
.b-modes__tab[aria-selected=true]{background:var(--color-primary-100)}
.b-modes__tab:focus-visible{outline-offset:-3px}
.b-modes__glider{position:absolute;z-index:0;inset-block-start:0;inset-inline-start:0;width:var(--w,0);height:var(--h,100%);border-radius:.2em;background:var(--color-primary-100);transform:translate(var(--x,0),var(--y,0));transition:transform .4s var(--ease),width .4s var(--ease)}
.b-modes.has-glider .b-modes__tab[aria-selected=true]{background:none}
.b-dot{color:var(--color-accent)} /* the logo's red full stops */
.b-hero__near{padding-inline-start:.13em;color:var(--color-primary)}
.b-hero__lead{max-width:40em;text-wrap:pretty;margin-block:14px 18px;font-size:var(--fs-16);line-height:1.5;color:var(--color-ink-2)}
.b-hero__panel[hidden]{display:none}
.b-hero__popular{display:flex;align-items:center;gap:10px;margin-block-start:14px;font-size:var(--fs-14);color:var(--color-muted)}
.b-hero__popular .b-chips{flex:1;min-width:0}
.b-pitch{display:grid;gap:14px;padding:18px;border:1px solid var(--color-border-strong);border-radius:16px;background:#fff;box-shadow:var(--shadow-pop)}
.b-pitch__title{font:700 var(--fs-20)/1.2 var(--font-heading);letter-spacing:-.02em;color:var(--color-dark)}
.b-pitch__text{margin-block-start:4px;font-size:var(--fs-15);color:var(--color-ink-2)}
@media (min-width:640px){
  .b-loc--lg{min-height:52px;padding-inline:16px;font-size:var(--fs-16)}
  .b-loc--lg .b-loc__sub{display:inline}
  .b-hero__lead{font-size:var(--fs-18);margin-block:18px 22px}
  .b-pitch{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:18px 20px 18px 24px}
}
@media (min-width:1024px){
  .b-hero__grid{grid-template-columns:minmax(0,1fr) minmax(340px,392px);gap:clamp(32px,5vw,72px);align-items:center}
}

/* ── AI ad creator demo card (one orchestrated animation; add .is-playing with JS) ── */
.b-ai-demo{display:grid;gap:14px;padding:18px;border:var(--line);border-radius:var(--r-hero);background:var(--color-surface)}
.b-ai-demo__head{display:flex;align-items:center;gap:10px;font:700 var(--fs-16)/1.2 var(--font-heading);color:var(--color-dark)}
.b-ai-demo__head>svg{width:20px;height:20px;color:var(--color-primary)}
.b-ai-demo__head .b-badge{margin-inline-start:auto}
.b-ai-demo__photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.b-ai-demo__photo{position:relative;aspect-ratio:1;border-radius:var(--r-ctl);overflow:hidden;background:#fff;border:var(--line)}
.b-ai-demo__photo--add{display:grid;place-items:center;border:1.5px dashed #9AA8B4;color:var(--color-muted)}
.b-ai-demo__status{display:grid;font:500 var(--fs-14)/1.4 var(--font-sans);color:var(--color-ink-2)}
.b-ai-demo__status>*{grid-area:1/1;display:flex;align-items:center;gap:8px}
.b-ai-demo__status svg{width:16px;height:16px;color:var(--color-primary)}
.b-ai-demo__status>:first-child{opacity:0}
.b-ai-demo__sheet{border:var(--line);border-radius:var(--r-card);background:#fff}
.b-ai-demo__row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;min-height:42px;padding:8px 14px;font-size:var(--fs-14);line-height:1.35}
.b-ai-demo__row+.b-ai-demo__row{border-block-start:var(--line)}
@media (max-width:639.98px){.b-ai-demo__row--more,.b-ai-demo>.b-btn{display:none}.b-ai-demo{padding:14px;gap:12px}}
.b-ai-demo__row dt{color:var(--color-muted);font-size:var(--fs-13)}
.b-ai-demo__row dd{grid-area:1/2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;font-weight:600;color:var(--color-dark)}
.b-ai-demo__row::after{content:"";grid-area:1/2;width:68%;height:10px;border-radius:5px;background:#E3E9ED;opacity:0}
.b-ai-demo__row:nth-child(even)::after{width:46%}
.b-ai-demo.is-playing .b-ai-demo__photo:not(.b-ai-demo__photo--add){animation:b-pop .45s var(--ease) both;animation-delay:calc(var(--i,0)*.22s + .25s)}
.b-ai-demo.is-playing .b-ai-demo__status>:first-child{animation:b-drafting 2.4s linear both;animation-delay:1s}
.b-ai-demo.is-playing .b-ai-demo__status>:last-child{animation:b-rise .4s var(--ease) both;animation-delay:3.4s}
.b-ai-demo.is-playing .b-ai-demo__row dd{animation:b-rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*.32s + 1.7s)}
.b-ai-demo.is-playing .b-ai-demo__row::after{animation:b-skel .35s linear both;animation-delay:calc(var(--i,0)*.32s + 1.55s)}
@keyframes b-pop{from{opacity:0;transform:scale(.7)}}
@keyframes b-rise{from{opacity:0;transform:translateY(5px)}}
@keyframes b-skel{from{opacity:1}to{opacity:0}}
@keyframes b-drafting{0%,100%{opacity:0}8%,92%{opacity:1}}
@keyframes b-spin{to{transform:rotate(360deg)}}
@keyframes b-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* ── Dark band (car.net.pk) and in-feed promo ── */
.b-band{display:grid;gap:24px;padding:clamp(22px,4vw,48px);border-radius:var(--r-hero);background:var(--color-dark);color:#C9D6DA}
.b-band__by{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-13)/1.3 var(--font-sans);color:#A9BBC0}
.b-band__by::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-carnet)}
.b-band__title{margin-block:10px 8px;font:700 clamp(1.6rem,3.6vw,2.4rem)/1.08 var(--font-heading);letter-spacing:-.03em;color:#fff}
.b-band__text{max-width:34em;font-size:var(--fs-16);line-height:1.5}
.b-band__links{display:grid;border-block-start:1px solid #FFFFFF2E}
.b-band__link{display:flex;align-items:center;gap:14px;min-height:54px;padding:8px 4px;border-block-end:1px solid #FFFFFF2E;color:#fff;font:600 var(--fs-16)/1.25 var(--font-sans);transition:background-color .15s,padding .2s var(--ease)}
.b-band__link:hover{background:#FFFFFF12;padding-inline:12px}
.b-band__link>svg:first-child{width:22px;height:22px;color:#81C784}
.b-band__link>svg:last-child{width:16px;height:16px;margin-inline-start:auto;color:#A9BBC0}
.b-band__link small{display:block;font-weight:400;font-size:var(--fs-13);color:#A9BBC0}
.b-promo-card{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:18px;border-radius:var(--r-card);background:var(--color-dark);color:#C9D6DA;font-size:var(--fs-14);line-height:1.45}
.b-grid>.b-promo-card{grid-column:1/-1}
.b-promo-card__title{margin-block:8px 6px;font:700 var(--fs-20)/1.15 var(--font-heading);letter-spacing:-.02em;color:#fff}
@media (min-width:640px){.b-grid>.b-promo-card{grid-column:auto}}
@media (min-width:1024px){.b-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}}

/* ── Tips, link cloud, install strip ── */
.b-tips{display:grid;gap:18px 32px}
.b-tips__item{display:flex;gap:12px;font-size:var(--fs-14);line-height:1.5;color:var(--color-ink-2)}
.b-tips__item>svg{width:22px;height:22px;flex:none;margin-block-start:1px;color:var(--color-primary)}
.b-tips__title{display:block;font:600 var(--fs-15)/1.35 var(--font-sans);color:var(--color-dark)}
.b-linkcloud{columns:2;column-gap:24px}
.b-linkcloud__group{break-inside:avoid;margin-block-end:20px}
.b-linkcloud__title{margin-block-end:4px;font:600 var(--fs-14)/1.3 var(--font-sans);letter-spacing:0;color:var(--color-dark)}
.b-linkcloud a{display:block;padding-block:4px;font-size:var(--fs-14);line-height:1.4;color:var(--color-muted)}
.b-linkcloud a:hover{color:var(--color-primary-dark);text-decoration:underline}
.b-app-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;padding:18px;border:var(--line);border-radius:var(--r-panel);background:#fff}
.b-app-strip__text{flex:1 1 220px;min-width:0;font-size:var(--fs-14);color:var(--color-muted)}
.b-app-strip__title{display:block;font:700 var(--fs-18)/1.25 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
@media (min-width:768px){.b-tips{grid-template-columns:repeat(2,minmax(0,1fr))}.b-linkcloud{columns:4}.b-app-strip{padding:20px 24px}}
@media (min-width:1024px){.b-tips{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── Footer ── */
.b-footer{padding-block:48px 24px;background:var(--color-dark);color:#B7C7CC;font-size:var(--fs-14);line-height:1.5}
.b-footer a{color:#D5E0E3}
.b-footer a:hover{color:#fff;text-decoration:underline}
.b-footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.b-footer__brand{grid-column:1/-1;display:grid;gap:12px;align-content:start;max-width:22rem}
.b-footer__brand img,.b-footer__brand>svg{height:48px;width:auto}
.b-footer__title{margin-block-end:8px;font:600 var(--fs-14)/1.3 var(--font-sans);letter-spacing:0;color:#fff}
.b-footer__col a{display:inline-block;padding-block:5px}
.b-footer__contact{display:grid;gap:2px}
.b-footer__contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:600}
.b-footer__contact svg{width:16px;height:16px;color:#81C784}
.b-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-block-start:36px;padding-block-start:20px;border-block-start:1px solid #FFFFFF24;font-size:var(--fs-13);color:#A9BBC0}
@media (min-width:768px){.b-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.b-footer__grid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:40px}.b-footer__brand{grid-column:auto}}

/* ── Mobile bottom nav and sticky bars ── */
.b-bottom-nav{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-bottom-nav);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px));padding-block-end:env(safe-area-inset-bottom,0px);background:#fff;border-block-start:var(--line)}
.b-bottom-nav__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:500 var(--fs-12)/1 var(--font-sans);color:var(--color-muted)}
.b-bottom-nav__item svg{width:22px;height:22px}
.b-bottom-nav__item[aria-current=page]{color:var(--color-primary-dark);font-weight:600}
.b-bottom-nav__item--sell{justify-content:flex-end;padding-block-end:9px;color:var(--color-dark);font-weight:600}
.b-bottom-nav__sell{display:grid;place-items:center;width:52px;height:52px;margin-block-start:-20px;border-radius:50%;background:var(--color-primary-fill);color:#fff;box-shadow:0 0 0 5px #fff,0 8px 16px -6px #2E7D3299}
.b-bottom-nav__sell svg{width:26px;height:26px;stroke-width:2.2}
.b-bottom-nav__count{position:absolute;inset-block-start:8px;inset-inline-start:calc(50% + 4px);min-width:18px;height:18px;padding-inline:5px;border-radius:9px;background:var(--color-accent-fill);color:#fff;font:700 12px/18px var(--font-sans);text-align:center;box-shadow:0 0 0 2px #fff}
.b-sticky-bar{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-bottom-nav);display:flex;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-block-start:var(--line);box-shadow:0 -8px 24px -16px #092A3240}
.b-sticky-bar>.b-btn{flex:1;padding-inline:10px}
.b-sticky-bar>.b-btn--icon{flex:none}
.b-has-sticky-bar{padding-block-end:calc(66px + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){.b-bottom-nav,.b-sticky-bar{display:none}.b-has-sticky-bar{padding-block-end:0}}

} /* end shell */

@layer components{

/* ── Skip link, grids that are not ad grids ── */
.b-skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:var(--z-toast);padding:10px 16px;border-radius:var(--r-ctl);background:var(--color-dark);color:#fff;font:600 var(--fs-14)/1 var(--font-sans);transform:translateY(-200%)}
.b-skip:focus{transform:none}
.b-rows{display:grid;column-gap:32px}
@media (min-width:640px){.b-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.b-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Breadcrumb, pagination, tabs ── */
.b-breadcrumb ol{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;font-size:var(--fs-13);line-height:1.4;color:var(--color-muted);white-space:nowrap}
.b-breadcrumb li+li::before{content:"/";margin-inline-end:6px;color:var(--color-border-strong)}
.b-breadcrumb a{color:var(--color-ink-2)}
.b-breadcrumb a:hover{color:var(--color-primary-dark);text-decoration:underline}
.b-breadcrumb [aria-current]{color:var(--color-muted)}
.b-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.b-pagination__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding-inline:12px;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background:#fff;color:var(--color-ink-2);font:600 var(--fs-15)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.b-pagination__item svg{width:18px;height:18px}
a.b-pagination__item:hover{border-color:var(--color-dark);color:var(--color-dark)}
.b-pagination__item[aria-current]{border-color:var(--color-dark);background:var(--color-dark);color:#fff}
.b-pagination__item[aria-disabled=true]{opacity:.45;pointer-events:none}
.b-pagination__gap{min-width:24px;text-align:center;color:var(--color-muted)}
.b-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px var(--color-border)}
.b-tabs__tab{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:var(--ctl-h);padding-inline:14px;color:var(--color-muted);font:600 var(--fs-15)/1 var(--font-sans);white-space:nowrap;cursor:pointer;box-shadow:inset 0 -2px transparent}
.b-tabs__tab:hover{color:var(--color-dark)}
.b-tabs__tab[aria-selected=true],.b-tabs__tab[aria-current],.b-tabs__tab.is-active{color:var(--color-dark);box-shadow:inset 0 -2px var(--color-primary)}
.b-tabs__tab:focus-visible{outline-offset:-2px}
.b-tabs__count{padding:2px 7px;border-radius:var(--r-pill);background:#EAEFF3;color:var(--color-ink-2);font-size:var(--fs-12);font-variant-numeric:tabular-nums}

/* ── Alerts, toast, tooltip, empty, skeleton ── */
.b-alert{display:flex;gap:10px;padding:12px 14px;border:var(--line);border-radius:12px;background:#fff;color:var(--color-ink-2);font-size:var(--fs-14);line-height:1.45}
.b-alert>svg{width:20px;height:20px;flex:none;margin-block-start:1px}
.b-alert__title{display:block;font-weight:600;color:inherit}
.b-alert__body{flex:1;min-width:0}
.b-alert--info{border-color:#B9D2F7;background:var(--color-info-50);color:var(--color-info-ink)}
.b-alert--success{border-color:#B5E0C4;background:var(--color-success-50);color:var(--color-success-ink)}
.b-alert--warning{border-color:#F3D08A;background:var(--color-amber-50);color:var(--color-amber-ink)}
.b-alert--danger{border-color:#F5B5B0;background:var(--color-danger-50);color:var(--color-danger-ink)}
.b-alert--safety{border-color:var(--color-primary-100);background:var(--color-primary-50);color:#1B5E20}
.b-toasts{position:fixed;inset-inline:16px;inset-block-end:calc(var(--bottom-nav-h) + 16px);z-index:var(--z-toast);display:grid;gap:8px;justify-items:center;pointer-events:none}
.b-toast{display:flex;align-items:center;gap:10px;max-width:420px;padding:12px 14px;border-radius:12px;background:var(--color-dark);color:#fff;font:500 var(--fs-14)/1.4 var(--font-sans);box-shadow:var(--shadow-pop);pointer-events:auto}
.b-toast>svg{width:18px;height:18px;flex:none;color:#81C784}
.b-toast--error>svg{color:#FCA5A5}
.b-toast__action{margin:-8px -6px -8px 2px;padding:8px;color:#81C784;font-weight:600;cursor:pointer}
.b-tip{position:relative}
.b-tip::after{content:attr(data-tip);position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;z-index:var(--z-dropdown);padding:6px 10px;border-radius:8px;background:var(--color-dark);color:#fff;font:500 var(--fs-12)/1.3 var(--font-sans);white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s,transform .15s}
[dir=rtl] .b-tip::after{transform:translate(50%,4px)}
.b-tip:hover::after,.b-tip:focus-visible::after,.b-tip.is-open::after{opacity:1;transform:translate(-50%,0)}
[dir=rtl] .b-tip:hover::after,[dir=rtl] .b-tip:focus-visible::after,[dir=rtl] .b-tip.is-open::after{transform:translate(50%,0)}
.b-empty{display:grid;justify-items:center;gap:6px;padding:40px 20px;text-align:center}
.b-empty__icon{display:grid;place-items:center;width:56px;height:56px;margin-block-end:8px;border-radius:16px;background:#EAEFF3;color:var(--color-ink-2)}
.b-empty__icon svg{width:26px;height:26px}
.b-empty__title{font:700 var(--fs-18)/1.25 var(--font-heading);color:var(--color-dark)}
.b-empty__text{max-width:38ch;font-size:var(--fs-15);color:var(--color-muted)}
.b-empty .b-btn{margin-block-start:12px}
.b-skeleton{display:block;border-radius:8px;background:linear-gradient(90deg,#E6EBEF 25%,#F2F5F7 40%,#E6EBEF 60%) 0 0/300% 100%;animation:b-shimmer 1.6s linear infinite}
.b-skeleton--text{height:12px}
.b-skeleton--media{aspect-ratio:4/3;border-radius:0}
@media (min-width:1024px){.b-toasts{inset-inline:auto 24px;inset-block-end:24px;justify-items:end}}

/* ── Overlays: backdrop, bottom sheet (side drawer from 768px), modal, menu ── */
.b-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:#092A3299;opacity:0;transition:opacity .25s}
.b-backdrop.is-open{opacity:1}
.b-sheet{position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-sheet);display:flex;flex-direction:column;max-height:88dvh;border-radius:var(--r-panel) var(--r-panel) 0 0;background:#fff;box-shadow:var(--shadow-pop);transform:translateY(105%);transition:transform .3s var(--ease)}
.b-sheet.is-open{transform:none}
.b-sheet__grip{flex:none;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--color-border-strong)}
.b-sheet__head,.b-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px;padding-inline:20px 8px;border-block-end:var(--line)}
.b-sheet__title,.b-modal__title{font:700 var(--fs-18)/1.2 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
.b-sheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px}
.b-sheet__foot,.b-modal__foot{display:flex;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-block-start:var(--line)}
.b-sheet__foot>.b-btn,.b-modal__foot>.b-btn{flex:1}
.b-modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:end center;padding:16px;opacity:0;transition:opacity .2s}
.b-modal.is-open{opacity:1}
.b-modal__dialog{width:100%;max-width:480px;max-height:calc(100dvh - 32px);overflow-y:auto;border-radius:var(--r-panel);background:#fff;box-shadow:var(--shadow-pop)}
.b-modal__body{padding:20px}
.b-menu{position:absolute;z-index:var(--z-dropdown);min-width:208px;padding:6px;border:var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-pop)}
.b-menu--end{inset-inline-end:0}
.b-menu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border-radius:8px;color:var(--color-ink);font:500 var(--fs-14)/1.3 var(--font-sans);text-align:start;white-space:nowrap;cursor:pointer}
.b-menu__item svg{width:18px;height:18px;color:var(--color-muted)}
.b-menu__item:hover{background:var(--color-surface)}
.b-menu__item--danger,.b-menu__item--danger svg{color:var(--color-danger-ink)}
.b-menu__sep{height:1px;margin:6px -6px;background:var(--color-border)}
/* is-static: show an overlay in normal flow (component gallery, docs) */
.b-sheet.is-static,.b-modal.is-static,.b-toast.is-static,.b-menu.is-static{position:relative;inset:auto;z-index:auto;transform:none;opacity:1}
.b-modal.is-static{padding:0;place-items:start}
@media (min-width:768px){
  .b-sheet{inset-block:0;inset-inline:auto 0;width:420px;max-height:none;border-radius:0;transform:translateX(105%)}
  [dir=rtl] .b-sheet{transform:translateX(-105%)}
  .b-sheet.is-open,[dir=rtl] .b-sheet.is-open{transform:none}
  .b-sheet__grip{display:none}
  .b-sheet__head{padding-block:12px}
  .b-modal{place-items:center}
}

/* ── Table ── */
.b-table-wrap{overflow-x:auto;border:var(--line);border-radius:var(--r-card);background:#fff}
.b-table{width:100%;border-collapse:collapse;font-size:var(--fs-14);line-height:1.4}
.b-table th{padding:10px 16px;border-block-end:var(--line);background:var(--color-surface);color:var(--color-muted);font:600 var(--fs-13)/1.3 var(--font-sans);text-align:start;white-space:nowrap}
.b-table td{padding:12px 16px;border-block-end:var(--line);vertical-align:middle;color:var(--color-ink)}
.b-table tr:last-child td{border-block-end:0}
.b-table__num{text-align:end!important;font-variant-numeric:tabular-nums}

/* ── Steps (wizard), how-it-works sequence, FAQ ── */
.b-steps{display:flex;align-items:center;gap:8px;counter-reset:b-step}
.b-steps__item{display:flex;align-items:center;gap:8px;flex:1;min-width:0;counter-increment:b-step;color:var(--color-muted);font:600 var(--fs-14)/1.2 var(--font-sans)}
.b-steps__item:last-child{flex:none}
.b-steps__item::before{content:counter(b-step);display:grid;place-items:center;flex:none;width:28px;height:28px;border:1.5px solid var(--color-border-strong);border-radius:50%;background:#fff center/14px no-repeat;color:var(--color-ink-2);font:700 var(--fs-13)/1 var(--font-heading)}
.b-steps__item:not(:last-child)::after{content:"";flex:1;min-width:8px;height:2px;border-radius:1px;background:var(--color-border)}
.b-steps__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-steps__item.is-done{color:var(--color-ink-2)}
.b-steps__item.is-done::before{content:"";border-color:var(--color-primary-fill);background-color:var(--color-primary-fill);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.b-steps__item.is-done::after{background:var(--color-primary)}
.b-steps__item.is-current{color:var(--color-dark)}
.b-steps__item.is-current::before{border-color:var(--color-dark);background-color:var(--color-dark);color:#fff}
.b-howto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;counter-reset:b-how}
.b-howto__item{counter-increment:b-how;padding-block-start:14px;border-block-start:2px solid var(--color-dark);font-size:var(--fs-14);line-height:1.5;color:var(--color-ink-2)}
.b-howto__item::before{content:counter(b-how);display:block;margin-block-end:6px;font:800 2.25rem/1 var(--font-heading);letter-spacing:-.03em;color:var(--color-primary)}
.b-howto__title{display:block;margin-block-end:2px;font:700 var(--fs-18)/1.25 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
.b-faq{border:var(--line);border-radius:var(--r-card);background:#fff}
.b-faq details+details{border-block-start:var(--line)}
.b-faq summary,.b-filter__group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer}
.b-faq summary{min-height:56px;padding:14px 18px;color:var(--color-dark);font:600 var(--fs-16)/1.35 var(--font-sans)}
.b-faq summary::-webkit-details-marker,.b-filter__group>summary::-webkit-details-marker{display:none}
.b-faq summary::after,.b-filter__group>summary::after{content:"";flex:none;width:9px;height:9px;margin-inline-end:4px;border:solid var(--color-muted);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.b-faq details[open]>summary::after,.b-filter__group[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.b-faq__a{padding:0 18px 16px;max-width:70ch;font-size:var(--fs-15);line-height:1.6;color:var(--color-ink-2)}
@media (max-width:767.98px){.b-steps__item:not(.is-current) .b-steps__label{display:none}.b-steps__item.is-current{flex:none}}
@media (min-width:768px){.b-howto{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── Browse: filters and toolbar ── */
.b-filter{border:var(--line);border-radius:var(--r-card);background:#fff}
.b-filter__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-block-end:var(--line)}
.b-filter__title{font:700 var(--fs-16)/1.2 var(--font-heading);color:var(--color-dark)}
.b-filter__group{padding:12px 16px;border-block-end:var(--line)}
.b-filter__group:last-child{border-block-end:0}
.b-filter__group>summary{min-height:36px;color:var(--color-dark);font:600 var(--fs-14)/1.3 var(--font-sans)}
.b-filter__body{display:grid;gap:8px;padding-block:8px 4px}
.b-filter__body--tight{gap:0}
.b-sheet .b-filter{border:0;border-radius:0}
.b-sheet .b-filter__head{display:none}
.b-sheet .b-filter__group>summary{min-height:44px}
.b-sheet .b-filter__group{padding-inline:0}
.b-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.b-toolbar__end{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.b-toolbar .b-select{width:auto;min-width:10.5rem;font-size:var(--fs-14);font-weight:500}
.b-filterbar{position:sticky;inset-block-start:var(--header-h);z-index:var(--z-sticky);display:flex;gap:8px;margin-inline:calc(var(--gutter)*-1);padding:8px var(--gutter);border-block-end:var(--line);background:#fff}
.b-filterbar>.b-btn{flex:1;padding-inline:8px}
.b-page-head{padding-block:16px 20px}
.b-page-head__title{margin-block-start:8px;font:800 clamp(1.6rem,4.4vw,2.25rem)/1.1 var(--font-heading);letter-spacing:-.03em;color:var(--color-dark)}
.b-page-head__count{font:500 var(--fs-15)/1.4 var(--font-sans);letter-spacing:0;color:var(--color-muted)}
.b-featured-row{padding:16px;border:1px solid #F3D08A;border-radius:var(--r-panel);background:#FFFBF0}
.b-featured-row__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:12px;font:600 var(--fs-14)/1.3 var(--font-sans);color:var(--color-amber-ink)}
.b-prose{max-width:72ch;font-size:var(--fs-16);line-height:1.65;color:var(--color-ink-2)}
.b-prose>*+*{margin-block-start:.9em}
.b-prose h2,.b-prose h3{margin-block-start:1.4em;font:700 var(--fs-20)/1.25 var(--font-heading);letter-spacing:-.02em;color:var(--color-dark)}
.b-prose a{color:var(--color-primary-dark);text-decoration:underline;text-underline-offset:3px}
.b-prose ul{padding-inline-start:1.2em;list-style:disc}
.b-prose li+li{margin-block-start:.3em}
@media (min-width:1024px){.b-filterbar{display:none}.b-page-head{padding-block:20px 24px}}

/* ── Ad detail ── */
.b-ad-layout{display:grid;gap:20px}
.b-ad-layout>*{min-width:0}
.b-gallery{display:grid;gap:8px}
.b-gallery__main{position:relative;aspect-ratio:4/3;border:var(--line);border-radius:var(--r-panel);background:var(--color-surface);overflow:hidden}
.b-gallery__main img{width:100%;height:100%;object-fit:contain}
.b-gallery__nav{position:absolute;inset-block-start:calc(50% - 22px);z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--color-dark);box-shadow:0 1px 4px #092A3233;cursor:pointer}
.b-gallery__nav--prev{inset-inline-start:12px}
.b-gallery__nav--next{inset-inline-end:12px}
.b-gallery__count{position:absolute;inset-block-end:12px;inset-inline-end:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:#092A32CC;color:#fff;font:600 var(--fs-13)/1.4 var(--font-sans)}
.b-gallery__count svg{width:14px;height:14px}
.b-gallery__badges{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;display:flex;gap:6px}
.b-gallery__thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.b-gallery__thumb{position:relative;flex:none;width:84px;aspect-ratio:4/3;border-radius:var(--r-ctl);background:var(--color-surface);overflow:hidden;cursor:pointer;outline:2px solid transparent;outline-offset:0;transition:outline-color .15s}
.b-gallery__thumb[aria-current=true]{outline-color:var(--color-primary)}
.b-gallery__thumb .b-ph__tag{display:none}
.b-gallery.is-sold .b-gallery__main .b-ph{filter:grayscale(1);opacity:.6}
.b-specs{display:flex;flex-wrap:wrap;gap:1px;border:var(--line);border-radius:var(--r-card);background:var(--color-border);overflow:hidden}
.b-specs__item{display:flex;align-items:center;gap:10px;flex:1 1 max(30%,140px);padding:12px 14px;background:#fff;font:600 var(--fs-15)/1.3 var(--font-sans);color:var(--color-dark)}
.b-specs__item svg{width:20px;height:20px;flex:none;color:var(--color-muted)}
.b-specs__label{display:block;font-weight:400;font-size:var(--fs-12);color:var(--color-muted)}
.b-attrs{display:grid;column-gap:40px}
.b-attrs__row{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-block-end:var(--line);font-size:var(--fs-15);line-height:1.4}
.b-attrs__row dt{color:var(--color-muted)}
.b-attrs__row dd{font-weight:600;color:var(--color-ink);text-align:end}
.b-map-ph{position:relative;aspect-ratio:16/7;min-height:160px;border:var(--line);border-radius:var(--r-card);background:#EDF3F0;overflow:hidden}
.b-map-ph>svg{position:absolute;inset:0;width:100%;height:100%}
.b-map-ph__area{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:min(36%,150px);aspect-ratio:1;border:2px solid var(--color-primary);border-radius:50%;background:#388E3C26;transform:translate(-50%,-50%)}
[dir=rtl] .b-map-ph__area{transform:translate(50%,-50%)}
.b-map-ph__label{position:absolute;inset-block-end:10px;inset-inline-start:10px;padding:4px 10px;border-radius:var(--r-pill);background:#fff;color:var(--color-ink-2);font:500 var(--fs-13)/1.4 var(--font-sans);box-shadow:var(--shadow-line)}
.b-seller{display:flex;align-items:center;gap:12px;min-width:0}
.b-seller__name{font:700 var(--fs-16)/1.25 var(--font-heading);letter-spacing:-.01em;color:var(--color-dark)}
.b-seller__meta{font-size:var(--fs-13);line-height:1.4;color:var(--color-muted)}
.b-contact{display:grid;gap:8px}
.b-contact__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b-ad-head{display:grid;gap:8px}
.b-ad-head__title{font:700 var(--fs-20)/1.25 var(--font-heading);letter-spacing:-.02em;color:var(--color-dark)}
.b-ad-head__meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-13);color:var(--color-muted)}
.b-ad-head__meta>*{display:inline-flex;align-items:center;gap:5px}
.b-ad-head__meta svg{width:14px;height:14px}
.b-h{font:700 var(--fs-20)/1.25 var(--font-heading);letter-spacing:-.02em;color:var(--color-dark)}
.b-h--sm{font-size:var(--fs-16);letter-spacing:-.01em}
.b-list-check{display:grid;gap:8px;font-size:var(--fs-14);line-height:1.45;color:var(--color-ink-2)}
.b-list-check li{display:flex;gap:8px}
.b-list-check svg{width:16px;height:16px;flex:none;margin-block-start:2px;color:var(--color-primary)}
@media (max-width:1023.98px){
  .b-gallery--bleed{margin-inline:calc(var(--gutter)*-1)}
  .b-gallery--bleed .b-gallery__main{border-inline:0;border-radius:0}
  .b-gallery--bleed .b-gallery__thumbs{padding-inline:var(--gutter)}
  .b-gallery__nav{display:none}
}
@media (min-width:640px){.b-attrs{grid-template-columns:repeat(2,minmax(0,1fr))}.b-ad-head__title{font-size:var(--fs-24)}}
@media (min-width:1024px){
  .b-gallery__main{aspect-ratio:16/10}.b-gallery__thumb{width:96px}
  .b-ad-layout{grid-template-columns:minmax(0,1fr) 380px;gap:24px 32px;align-items:start}
  .b-ad-layout__side{grid-column:2;grid-row:1/span 2}
}

/* ── Confirm chip (AI suggestions that need the seller's answer) ── */
.b-confirm{position:relative;display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:3px 10px;border-radius:var(--r-pill);background:var(--color-amber-50);color:var(--color-amber-ink);box-shadow:inset 0 0 0 1px #F59E0B80;font:600 var(--fs-13)/1.2 var(--font-sans);white-space:nowrap}
button.b-confirm{cursor:pointer}
button.b-confirm::after{content:"";position:absolute;inset:-8px -2px}
.b-confirm svg{width:14px;height:14px}
.b-confirm.is-confirmed{background:var(--color-success-50);color:var(--color-success-ink);box-shadow:inset 0 0 0 1px #16A34A66}

/* ── Store front ── */
.b-store-head{border:var(--line);border-radius:var(--r-hero);background:#fff;overflow:hidden}
.b-store-head__cover{position:relative;aspect-ratio:5/1;min-height:112px;max-height:220px;width:100%;background:var(--hue-bg,var(--color-primary-50));overflow:hidden}
.b-store-head__cover img,.b-store-head__cover>svg{width:100%;height:100%;object-fit:cover}
.b-store-head__body{display:grid;gap:14px;padding:0 16px 18px}
.b-store-head__top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-block-start:-32px}
.b-store-head__top .b-avatar{position:relative;z-index:1}
.b-store-head__name{font:800 clamp(1.5rem,4vw,2rem)/1.15 var(--font-heading);letter-spacing:-.03em;color:var(--color-dark)}
.b-store-head__tag{font-size:var(--fs-15);color:var(--color-ink-2)}
.b-store-head__actions{display:flex;gap:8px;margin-inline-start:auto}
.b-hours{display:grid;gap:0;font-size:var(--fs-14)}
.b-hours__row{display:flex;justify-content:space-between;gap:16px;padding-block:6px;color:var(--color-ink-2)}
.b-hours__row.is-today{font-weight:600;color:var(--color-dark)}
.b-hours__row dd{font-variant-numeric:tabular-nums}
@media (min-width:768px){.b-store-head__body{padding:0 28px 24px}.b-store-head__top{margin-block-start:-40px}}

} /* end ui */

/* ═════ App-only components: chat, dashboard, post-ad wizard, auth ═════ */
@layer components{

/* ── Chat ── */
.b-chat{display:grid;height:calc(100dvh - var(--header-h) - var(--bottom-nav-h));min-height:420px;background:#fff}
.b-chat__list{display:flex;flex-direction:column;min-width:0;min-height:0}
.b-chat__list-head{display:grid;gap:10px;padding:14px 16px;border-block-end:var(--line)}
.b-chat__items{flex:1;overflow-y:auto;overscroll-behavior:contain}
.b-chat__item{position:relative;display:flex;gap:12px;padding:12px 16px;border-block-end:var(--line)}
.b-chat__item:hover{background:var(--color-surface)}
.b-chat__item.is-active{background:var(--color-primary-50)}
.b-chat__thumb{position:relative;flex:none;width:52px;height:52px;border-radius:var(--r-ctl);overflow:hidden;background:var(--color-surface)}
.b-chat__main{flex:1;min-width:0;display:grid;gap:1px}
.b-chat__top{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-12);color:var(--color-muted)}
.b-chat__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 var(--fs-14)/1.4 var(--font-sans);color:var(--color-dark)}
.b-chat__name a::after{content:"";position:absolute;inset:0}
.b-chat__ad{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-13);color:var(--color-ink-2)}
.b-chat__preview{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);color:var(--color-muted)}
.b-chat__preview>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-chat__item.is-unread .b-chat__preview{color:var(--color-ink);font-weight:600}
.b-chat__unread{flex:none;min-width:20px;height:20px;padding-inline:6px;border-radius:10px;background:var(--color-accent-fill);color:#fff;font:700 12px/20px var(--font-sans);text-align:center}
.b-chat__thread{display:none;flex-direction:column;min-width:0;min-height:0;background:var(--color-surface)}
.b-chat.is-open .b-chat__list{display:none}
.b-chat.is-open .b-chat__thread{display:flex}
@media (max-width:1023.98px){.b-chat.is-open{position:fixed;inset:0;z-index:calc(var(--z-bottom-nav) + 1);height:auto}}
.b-chat__head{position:relative;display:flex;align-items:center;gap:10px;padding-block:8px;padding-inline:4px 8px;border-block-end:var(--line);background:#fff}
.b-chat__context{display:flex;align-items:center;gap:12px;padding:8px 16px;border-block-end:var(--line);background:#fff;font-size:var(--fs-13)}
.b-chat__body{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:16px}
.b-chat__body>*{flex:none}
.b-chat__day{align-self:center;padding:2px 10px;border-radius:var(--r-pill);background:#E3E9ED;color:var(--color-ink-2);font:500 var(--fs-12)/1.5 var(--font-sans)}
.b-chat__system{align-self:center;max-width:44ch;font-size:var(--fs-13);line-height:1.4;color:var(--color-muted);text-align:center}
.b-bubble{align-self:flex-start;max-width:min(80%,520px);padding:8px 12px;border:var(--line);border-radius:16px;border-end-start-radius:5px;background:#fff;color:var(--color-ink);font-size:var(--fs-15);line-height:1.45;overflow-wrap:anywhere}
.b-bubble--out{align-self:flex-end;border-color:transparent;border-end-start-radius:16px;border-end-end-radius:5px;background:var(--color-primary-100);color:#0E2A10}
.b-bubble__meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-block-start:2px;font-size:var(--fs-12);line-height:1.3;color:var(--color-muted)}
.b-bubble--out .b-bubble__meta{color:#1B5E20}
.b-bubble__meta svg{width:14px;height:14px}
.b-bubble--img{padding:4px}
.b-bubble--img .b-bubble__meta{padding:2px 8px 2px}
.b-bubble__img{display:block;position:relative;width:min(240px,62vw);aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.b-offer{align-self:flex-start;width:min(300px,86%);border:1px solid var(--color-border-strong);border-radius:16px;background:#fff;overflow:hidden}
.b-offer--out{align-self:flex-end}
.b-offer__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px 2px;font:600 var(--fs-13)/1.3 var(--font-sans);color:var(--color-muted)}
.b-offer__head svg{width:16px;height:16px;color:var(--color-primary)}
.b-offer__amount{padding:0 14px 10px}
.b-offer__note{padding:0 14px 10px;font-size:var(--fs-13);line-height:1.4;color:var(--color-ink-2)}
.b-offer__actions{display:flex;border-block-start:var(--line)}
.b-offer__actions>*{flex:1;min-height:44px;padding-inline:6px;font:600 var(--fs-14)/1 var(--font-sans);color:var(--color-ink-2);cursor:pointer}
.b-offer__actions>*+*{border-inline-start:var(--line)}
.b-offer__actions>*:hover{background:var(--color-surface)}
.b-offer__actions>.is-accept{color:var(--color-primary-dark)}
.b-offer__actions>.is-decline{color:var(--color-danger-ink)}
.b-offer__state{display:flex;align-items:center;gap:6px;padding:8px 14px;border-block-start:var(--line);background:var(--color-surface);font:600 var(--fs-13)/1.3 var(--font-sans);color:var(--color-ink-2)}
.b-offer__state svg{width:16px;height:16px}
.b-offer--accepted{border-color:#16A34A8C}
.b-offer--accepted .b-offer__state{border-color:#16A34A40;background:var(--color-success-50);color:var(--color-success-ink)}
.b-offer--rejected .b-offer__state{background:var(--color-danger-50);color:var(--color-danger-ink)}
.b-offer--rejected .b-price,.b-offer--countered .b-price,.b-offer--expired .b-price{color:var(--color-muted)}
.b-quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px 12px 0;background:#fff;border-block-start:var(--line)}
.b-quick::-webkit-scrollbar{display:none}
.b-quick>*{flex:none}
.b-composer{display:flex;align-items:flex-end;gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:#fff}
.b-composer__input{flex:1;min-width:0;min-height:44px;max-height:120px;padding:10px 16px;border:1px solid var(--color-border-strong);border-radius:22px;background:#fff;color:var(--color-ink);font:400 var(--fs-16)/1.4 var(--font-sans);resize:none}
.b-composer__input:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--ring)}
.b-composer__send{border-radius:50%}
@media (min-width:1024px){
  .b-chat{grid-template-columns:360px minmax(0,1fr);height:calc(100dvh - var(--header-h) - 45px - 48px);border:var(--line);border-radius:var(--r-panel);overflow:hidden}
  .b-chat__list,.b-chat.is-open .b-chat__list{display:flex;border-inline-end:var(--line)}
  .b-chat__thread{display:flex}
  .b-chat__head{padding-block:10px;padding-inline:16px 12px}
  .b-chat__body{padding:20px 24px}
  .b-composer{padding:10px 16px 14px}
  .b-quick{padding:10px 16px 0}
}

/* ── Dashboard shell (app.buy.net.pk) ── */
.b-dash{display:grid;gap:20px;padding-block:16px 40px}
.b-dash>*{min-width:0}
.b-dash__nav{display:none}
.b-dash__tabs{position:sticky;inset-block-start:var(--header-h);z-index:var(--z-sticky);margin-inline:calc(var(--gutter)*-1);padding-inline:calc(var(--gutter) - 14px);background:#fff}
.b-dash__title{font:800 clamp(1.5rem,4vw,2rem)/1.15 var(--font-heading);letter-spacing:-.03em;color:var(--color-dark)}
.b-navlist{display:grid;gap:2px}
.b-navlist__label{padding:14px 12px 6px;font:600 var(--fs-12)/1.3 var(--font-sans);color:var(--color-muted)}
.b-navlist__link{display:flex;align-items:center;gap:12px;min-height:var(--ctl-h);padding:8px 12px;border-radius:var(--r-ctl);color:var(--color-ink-2);font:500 var(--fs-15)/1.3 var(--font-sans)}
.b-navlist__link svg{width:20px;height:20px;color:var(--color-muted)}
.b-navlist__link:hover{background:#EAEFF3;color:var(--color-dark)}
.b-navlist__link[aria-current=page]{background:var(--color-primary-50);color:var(--color-primary-dark);font-weight:600}
.b-navlist__link[aria-current=page] svg{color:currentColor}
.b-navlist__count{margin-inline-start:auto;padding:1px 7px;border-radius:var(--r-pill);background:#EAEFF3;color:var(--color-ink-2);font-size:var(--fs-12);font-weight:600;font-variant-numeric:tabular-nums}
.b-ad-row{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px 14px;padding:12px;border:var(--line);border-radius:var(--r-card);background:#fff}
.b-ad-row__media{position:relative;aspect-ratio:4/3;align-self:start;border-radius:var(--r-ctl);overflow:hidden;background:var(--color-surface)}
.b-ad-row__media .b-ph__tag{display:none}
.b-ad-row__main{display:grid;gap:4px;align-content:start;min-width:0}
.b-ad-row__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 var(--fs-15)/1.35 var(--font-sans);letter-spacing:0;color:var(--color-dark)}
.b-ad-row__meta{font-size:var(--fs-13);line-height:1.4;color:var(--color-muted)}
.b-ad-row__note{display:flex;gap:6px;font-size:var(--fs-13);line-height:1.4;color:var(--color-amber-ink)}
.b-ad-row__note svg{width:16px;height:16px;flex:none;margin-block-start:1px}
.b-ad-row__stats{grid-column:1/-1;order:2;display:flex;flex-wrap:wrap;gap:6px 18px;padding-block-start:10px;border-block-start:var(--line);font-size:var(--fs-13);color:var(--color-muted)}
.b-ad-row__stats>*{display:inline-flex;align-items:center;gap:6px}
.b-ad-row__stats b{font-weight:600;color:var(--color-ink);font-variant-numeric:tabular-nums}
.b-ad-row__stats svg{width:16px;height:16px}
.b-ad-row__actions{grid-column:1/-1;order:3;position:relative;display:flex;align-items:center;gap:8px}
.b-ad-row__actions>.b-btn:not(.b-btn--icon){flex:1}
.b-checklist{display:grid;gap:2px}
.b-checklist__item{display:flex;align-items:center;gap:10px;min-height:var(--ctl-h);font-size:var(--fs-15);color:var(--color-ink)}
.b-checklist__item>svg{width:20px;height:20px;flex:none;color:#9AA8B4}
.b-checklist__item.is-done>svg{color:var(--color-primary)}
.b-checklist__item.is-pending>svg{color:var(--color-amber)}
.b-checklist__item small{display:block;font-size:var(--fs-13);color:var(--color-muted)}
.b-checklist__item .b-btn,.b-checklist__item .b-badge{margin-inline-start:auto}
@media (min-width:768px){
  .b-ad-row{grid-template-columns:132px minmax(0,1fr) auto;padding:14px}
  .b-ad-row__stats{grid-column:2/-1;padding:0;border:0}
  .b-ad-row__media{grid-row:span 2}
  .b-ad-row__actions{grid-column:3;grid-row:1}
  .b-ad-row__actions>.b-btn:not(.b-btn--icon){flex:none}
}
@media (min-width:1024px){
  .b-dash{grid-template-columns:248px minmax(0,1fr);gap:32px;align-items:start;padding-block:28px 64px}
  .b-dash__nav{display:block;position:sticky;inset-block-start:calc(var(--header-h) + 45px + 24px)}
  .b-dash__tabs{display:none}
}

/* ── Post ad: uploader, AI assist, confirm chips, preview ── */
.b-uploader{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.b-uploader__slot{position:relative;aspect-ratio:1;border:var(--line);border-radius:12px;background:var(--color-surface);overflow:hidden}
.b-uploader__slot img{width:100%;height:100%;object-fit:cover}
.b-uploader__slot .b-ph__tag{display:none}
.b-uploader__slot--add{display:grid;place-content:center;justify-items:center;gap:4px;border:1.5px dashed #8795A1;background:#fff;color:var(--color-primary-dark);font:600 var(--fs-13)/1.2 var(--font-sans);text-align:center;cursor:pointer}
.b-uploader__slot--add:hover{border-color:var(--color-primary);background:var(--color-primary-50)}
.b-uploader__slot--add svg{width:24px;height:24px}
.b-uploader__slot.is-cover{outline:2px solid var(--color-primary);outline-offset:-2px}
.b-uploader__cover{position:absolute;inset-block-end:0;inset-inline:0;padding:3px 6px;background:var(--color-primary-fill);color:#fff;font:600 var(--fs-12)/1.4 var(--font-sans);text-align:center}
.b-uploader__set-cover{position:absolute;inset-block-end:4px;inset-inline-start:4px;padding:3px 7px;border-radius:6px;background:#ffffffeb;color:var(--color-ink);font:600 var(--fs-12)/1.3 var(--font-sans);cursor:pointer}
.b-uploader__remove{position:absolute;inset-block-start:4px;inset-inline-end:4px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#092A32CC;color:#fff;cursor:pointer}
.b-uploader__remove::after,.b-uploader__set-cover::after{content:"";position:absolute;inset:-8px}
.b-uploader__remove svg{width:14px;height:14px}
.b-ai-assist{display:grid;gap:14px;padding:16px;border:1px solid var(--color-primary-100);border-radius:var(--r-panel);background:var(--color-primary-50)}
.b-ai-assist>*{min-width:0}
.b-ai-assist__head{display:flex;align-items:center;gap:10px;font:700 var(--fs-18)/1.2 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
.b-ai-assist__head>svg{width:22px;height:22px;color:var(--color-primary)}
.b-ai-assist__status{display:flex;align-items:center;gap:8px;font-size:var(--fs-14);color:#1B5E20}
.b-ai-assist__status svg{width:16px;height:16px}
.b-suggest{border:1px solid var(--color-primary-100);border-radius:var(--r-card);background:#fff}
.b-suggest__row{display:grid;gap:2px 12px;padding:10px 14px;font-size:var(--fs-15);line-height:1.4}
.b-suggest__row+.b-suggest__row{border-block-start:var(--line)}
.b-suggest__label{font-size:var(--fs-13);color:var(--color-muted)}
.b-suggest__value{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;font-weight:600;color:var(--color-dark)}
.b-speak{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:8px;padding:6px;border:1px solid var(--color-border-strong);border-radius:var(--r-card);background:#fff}
.b-speak:focus-within{border-color:var(--color-primary);box-shadow:var(--ring)}
.b-speak textarea{flex:1 1 220px;min-width:0;min-height:44px;padding:9px 8px;border:0;background:none;font:400 var(--fs-16)/1.45 var(--font-sans);color:var(--color-ink);resize:none;outline:0}
.b-wizard-bar{position:sticky;inset-block-end:0;z-index:var(--z-sticky);display:flex;gap:8px;margin-inline:calc(var(--gutter)*-1);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));border-block-start:var(--line);background:#fff}
.b-wizard-bar>.b-btn--primary{flex:1}
.b-step-card{border:var(--line);border-radius:var(--r-panel);background:#fff}
.b-step-card__head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.b-step-card__num{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--color-dark);color:#fff;font:700 var(--fs-13)/1 var(--font-heading)}
.b-step-card.is-done .b-step-card__num{background:var(--color-primary-fill)}
.b-step-card.is-todo .b-step-card__num{border:1.5px solid var(--color-border-strong);background:#fff;color:var(--color-ink-2)}
.b-step-card.is-todo .b-step-card__title{color:var(--color-muted)}
.b-step-card__title{font:700 var(--fs-18)/1.2 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
.b-step-card__summary{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-14);color:var(--color-muted)}
.b-step-card__head>.b-link,.b-step-card__head>.b-btn{margin-inline-start:auto}
.b-step-card__body{display:grid;gap:18px;padding:4px 16px 20px}
@media (min-width:640px){
  .b-uploader{grid-template-columns:repeat(5,minmax(0,1fr))}
  .b-suggest__row{grid-template-columns:110px minmax(0,1fr);align-items:center}
  .b-step-card__head{padding:18px 24px}
  .b-step-card__body{padding:4px 24px 24px}
  .b-ai-assist{padding:20px}
}
@media (min-width:1024px){.b-wizard-bar{margin-inline:0;padding-inline:0;border:0;background:none;position:static;justify-content:flex-end}.b-wizard-bar>.b-btn--primary{flex:none;min-width:200px}}

/* ── Auth ── */
.b-auth{display:grid;min-height:100dvh;background:#fff}
.b-auth__main{display:flex;flex-direction:column;gap:32px;padding:20px var(--gutter) 32px}
.b-auth__card{display:grid;gap:20px;width:100%;max-width:400px;margin:auto}
.b-auth__title{font:800 var(--fs-30)/1.1 var(--font-heading);letter-spacing:-.03em;color:var(--color-dark)}
.b-auth__sub{margin-block-start:6px;font-size:var(--fs-15);color:var(--color-muted)}
.b-auth__aside{display:none;flex-direction:column;justify-content:space-between;gap:32px;padding:56px;background:var(--color-dark);color:#C9D6DA}
.b-auth__tagline{font:800 clamp(2.5rem,4.4vw,4rem)/1.02 var(--font-heading);letter-spacing:-.045em;color:#fff}
.b-auth__tagline em{font-style:normal;color:#66BB6A} /* logo green family, 6.5:1 on navy */
.b-auth__foot{font-size:var(--fs-13);line-height:1.5;color:var(--color-muted)}
.b-auth__foot a,.b-auth__card p a{color:var(--color-primary-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.b-or{display:flex;align-items:center;gap:12px;font-size:var(--fs-13);color:var(--color-muted)}
.b-or::before,.b-or::after{content:"";flex:1;height:1px;background:var(--color-border)}
@media (min-width:1024px){.b-auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.b-auth__aside{display:flex}.b-auth__main{padding:32px 56px 40px}}

} /* end app */

@layer components{
/* ── RTL / Urdu: Nastaliq needs taller lines and no tracking. Layout already mirrors through logical properties. ── */
[dir=rtl] [class*="__title"],[dir=rtl] [class*="__name"],[dir=rtl] .b-h{line-height:1.9;letter-spacing:0}
[dir=rtl] :is(.b-prose,.b-hero__lead,.b-section__sub,.b-tips__item,.b-alert,.b-bubble,.b-help,.b-faq__a,.b-band__text,.b-pitch__text,.b-empty__text,.b-footer,.b-howto__item){line-height:2.1}
[dir=rtl] .b-hero__title{font-size:calc(var(--fs-hero)*.7);font-weight:700;line-height:1.9;text-wrap:wrap}
[dir=rtl] .b-ad-card__title{-webkit-line-clamp:1}
/* urdu: wrapped Nastaliq text in paragraphs, tiles, small print and definition lists must not overlap (2-line tiles, cookie notice) */
[dir=rtl] :is(p,small,li,dt,dd,label,.b-cat-tile__text,.b-band__by,.b-field__hint,.b-help-text){line-height:1.95}
}

/* ───────────────────────────── 5. Legacy classes (older views) ─────────────────────────────
   Unlayered on purpose so it wins over the frozen Tailwind build. Cosmetic properties only:
   radius, font, colours, shadow, focus ring. No display, size, spacing or position here. */
.btn,.btn-primary,.btn-secondary,.btn-dark,.btn-outline,.btn-outline-green,.btn-outline-orange,.btn-ghost,.btn-white{border-radius:var(--r-ctl);font-family:var(--font-sans);font-weight:600;letter-spacing:0;box-shadow:none}
.btn-primary{background-color:var(--color-primary-fill);color:#fff}
.btn-primary:hover{background-color:var(--color-primary-deep)}
.btn-outline{border-color:var(--color-border-strong);color:var(--color-dark)}
.btn-outline:hover{border-color:var(--color-dark);background-color:var(--color-surface)}
.btn-outline-green,.btn-outline-orange{border-color:#388E3C80;color:var(--color-primary-dark)}
.btn-outline-green:hover,.btn-outline-orange:hover{background-color:var(--color-primary-50)}
.btn-ghost{color:var(--color-ink-2)}
.btn-ghost:hover{background-color:#EEF2F5;color:var(--color-dark)}
.btn-sm{border-radius:8px}
.btn-lg{border-radius:12px}
.card{border-radius:var(--r-card);border-color:var(--color-border);box-shadow:none}
.card-hover:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-card)}
.input,.select,.textarea{border-radius:var(--r-ctl);border-color:var(--color-border-strong);font-family:var(--font-sans);color:var(--color-ink);box-shadow:none}
.input::placeholder,.textarea::placeholder{color:var(--color-muted)}
.input:hover,.select:hover,.textarea:hover{border-color:#9AA8B4}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--ring)}
.checkbox,.radio{accent-color:var(--color-primary-fill);border-color:#8795A1}
.label{font-family:var(--font-sans);font-weight:600;color:var(--color-dark)}
.help{color:var(--color-muted)}
.field-error{color:var(--color-danger-ink)}
.badge,.badge-orange,.badge-orange-soft,.badge-green,.badge-green-soft,.badge-dark,.badge-red,.badge-gray,.badge-white,.badge-yellow{border-radius:var(--r-xs);font-family:var(--font-sans);font-size:var(--fs-12);font-weight:600;letter-spacing:0;text-transform:none;box-shadow:none}
.badge-orange{background-color:var(--color-primary-fill);color:#fff}
.badge-orange-soft,.badge-green-soft{background-color:var(--color-primary-50);color:var(--color-primary-dark)}
.badge-yellow{background-color:var(--color-amber);color:#3A2403}
.badge-gray{background-color:#EAEFF3;color:var(--color-ink-2)}
.chip{border-color:var(--color-border-strong);font-family:var(--font-sans);color:var(--color-ink-2)}
.chip:hover{border-color:var(--color-dark);color:var(--color-dark)}
.chip-active{border-color:var(--color-primary);background-color:var(--color-primary-50);color:var(--color-primary-dark)}
.section-title{font-family:var(--font-heading);font-weight:700;letter-spacing:-.025em;color:var(--color-dark)}
.section-sub{color:var(--color-muted)}
.eyebrow{letter-spacing:0;text-transform:none;font-weight:600;color:var(--color-primary-dark)}
.link{color:var(--color-primary-dark);text-underline-offset:3px}
.stat-num{font-family:var(--font-heading);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.divider{border-color:var(--color-border)}

/* ==== MODULE: content (legal / help / blog pages, cars hub, cookie notice) ==== */
@layer components{
.b-prose ol{padding-inline-start:1.3em;list-style:decimal}
.b-prose h2{font-size:var(--fs-22,1.375rem);scroll-margin-block-start:calc(var(--header-h) + 16px)}
.b-prose h3{font-size:var(--fs-18);scroll-margin-block-start:calc(var(--header-h) + 16px)}
.b-prose strong{color:var(--color-dark);font-weight:600}
.b-prose blockquote{padding:14px 16px;border:1px solid var(--color-primary-100);border-radius:12px;background:var(--color-primary-50);color:#1B5E20;font-size:var(--fs-15);line-height:1.6}
.b-prose blockquote>*+*{margin-block-start:.5em}
.b-prose--wide{max-width:none}
.b-doc{display:grid;gap:24px;align-items:start}
.b-doc__main{min-width:0}
.b-doc__body{padding:20px}
.b-doc__meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-block-start:8px;font-size:var(--fs-13);color:var(--color-muted)}
.b-doc__meta span{display:inline-flex;align-items:center;gap:5px}
.b-doc__meta svg{width:14px;height:14px}
.b-toc{font-size:var(--fs-14);line-height:1.4}
.b-toc__title{margin-block-end:8px;font:600 var(--fs-13)/1.3 var(--font-sans);color:var(--color-muted)}
.b-toc ol{display:grid;gap:2px}
.b-toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--color-ink-2)}
.b-toc a:hover{background:#EAEFF3;color:var(--color-dark)}
.b-toc a[aria-current]{background:var(--color-primary-50);color:var(--color-primary-dark);font-weight:600}
.b-linkcards{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.b-linkcard{position:relative;display:flex;gap:14px;align-items:flex-start;min-width:0;padding:16px;border:var(--line);border-radius:var(--r-card);background:#fff;color:var(--color-ink-2);font-size:var(--fs-14);line-height:1.5;transition:border-color .15s,box-shadow .15s}
a.b-linkcard:hover,.b-linkcard:has(a:hover){border-color:var(--color-primary);box-shadow:var(--shadow-card)}
.b-linkcard__icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--hue-bg,var(--color-primary-50));color:var(--hue-fg,var(--color-primary-dark))}
.b-linkcard__icon svg{width:22px;height:22px}
.b-linkcard__body{min-width:0;flex:1}
.b-linkcard__title{display:block;font:700 var(--fs-16)/1.3 var(--font-heading);letter-spacing:-.01em;color:var(--color-dark)}
.b-linkcard__title a::after{content:"";position:absolute;inset:0}
.b-linkcard__meta{display:inline-flex;align-items:center;gap:5px;margin-block-start:8px;font-size:var(--fs-13);color:var(--color-muted)}
.b-linkcard__meta svg{width:14px;height:14px}
.b-linkcard__list{display:grid;gap:2px;margin-block-start:8px}
.b-linkcard__list a{position:relative;z-index:1;display:block;padding-block:4px;color:var(--color-primary-dark)}
.b-linkcard__list a:hover{text-decoration:underline}
.b-sister{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-14)/1.3 var(--font-sans);color:var(--color-ink-2)}
.b-sister::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-carnet)}
.b-post-card{position:relative;display:flex;flex-direction:column;min-width:0;border:var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.b-post-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-card)}
.b-post-card__media{position:relative;aspect-ratio:16/9;background:var(--hue-bg,var(--color-primary-50));color:var(--hue-fg,var(--color-primary-dark));display:grid;place-items:center}
.b-post-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-post-card__media svg{width:40px;height:40px;stroke-width:1.4}
.b-post-card__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.b-post-card__cat{font:600 var(--fs-13)/1.3 var(--font-sans);color:var(--color-primary-dark)}
.b-post-card__title{font:700 var(--fs-18)/1.25 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
.b-post-card__title a::after{content:"";position:absolute;inset:0}
.b-post-card__text{font-size:var(--fs-14);line-height:1.5;color:var(--color-ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-post-card__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-block-start:auto;padding-block-start:6px;font-size:var(--fs-13);color:var(--color-muted)}
.b-post-card--wide .b-post-card__title{font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.15}
.b-posts{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.b-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.b-share__label{font:600 var(--fs-14)/1 var(--font-sans);color:var(--color-ink-2);margin-inline-end:4px}
.b-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border:1px solid var(--color-primary-100);border-radius:var(--r-card);background:var(--color-primary-50)}
.b-cta__title{font:700 var(--fs-18)/1.25 var(--font-heading);letter-spacing:-.015em;color:var(--color-dark)}
.b-cta__text{margin-block-start:2px;font-size:var(--fs-14);color:#1B5E20}
.b-cta__actions{display:flex;flex-wrap:wrap;gap:8px}
.b-consent{position:fixed;inset-inline:12px;inset-block-end:calc(12px + env(safe-area-inset-bottom));z-index:var(--z-toast,90);display:grid;gap:12px;max-width:560px;margin-inline:auto;padding:16px;border:1px solid var(--color-border-strong);border-radius:16px;background:#fff;box-shadow:var(--shadow-pop);font-size:var(--fs-14);line-height:1.5;color:var(--color-ink-2)}
.b-has-bottom-nav .b-consent{inset-block-end:calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom))}
.b-consent[hidden]{display:none}
.b-consent__title{font:700 var(--fs-16)/1.3 var(--font-heading);color:var(--color-dark)}
.b-consent__actions{display:flex;flex-wrap:wrap;gap:8px}
.b-consent__actions .b-btn{flex:1 1 auto}
.b-consent a{color:var(--color-primary-dark);text-decoration:underline;text-underline-offset:3px}
}
@media (min-width:640px){
  .b-linkcards,.b-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-doc__body{padding:28px 32px}
  .b-consent{inset-inline-start:auto;inset-inline-end:20px;margin-inline:0}
}
@media (min-width:1024px){
  .b-linkcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .b-linkcards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .b-posts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-post-card--wide{grid-column:1/-1;flex-direction:row}
  .b-post-card--wide .b-post-card__media{flex:0 0 46%;aspect-ratio:auto;min-height:260px}
  .b-post-card--wide .b-post-card__body{padding:24px 28px;justify-content:center}
  .b-doc{grid-template-columns:240px minmax(0,1fr);gap:32px}
  .b-doc--aside{grid-template-columns:minmax(0,1fr) 300px}
  .b-has-bottom-nav .b-consent{inset-block-end:20px}
}
@media (max-width:1023.98px){.b-doc__side--toc{display:none}}
/* ==== END MODULE: content ==== */

/* ==== MODULE: shell (site chrome: layout, search suggestions, city picker, small gaps the shared components need) ==== */
@layer components{
/* Category row: one line, clip what does not fit, language link pinned at the end */
.b-catnav__row{display:flex;align-items:center;gap:12px}
.b-catnav__list--clip{flex:1;min-width:0;flex-wrap:wrap;align-content:flex-start;overflow:hidden;padding-block:4px;margin-inline:-10px 0}
.b-catnav__lang{flex:none;margin-inline-end:-10px}
/* Sticky footer on short pages (body class comes from layouts.site / layouts.minimal) */
body.b-site{display:flex;flex-direction:column;min-height:100dvh}
body.b-site>main{flex:1 0 auto}
/* Alert close button */
.b-alert__close{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:-4px -6px -4px auto;border-radius:8px;color:inherit;opacity:.7;cursor:pointer}
.b-alert__close:hover{opacity:1;background:#0000000f}
.b-alert__close svg{width:16px;height:16px}
/* Search suggestions (<x-site.search-box> autocomplete) */
.b-search{position:relative}
.b-search__suggest{inset-block-start:calc(100% + 6px);inset-inline:0;max-height:min(60vh,420px);overflow-y:auto;list-style:none;margin:0}
.b-search__suggest .b-menu__item{white-space:normal}
.b-search__suggest .b-menu__item.is-active{background:var(--color-surface)}
.b-search__suggest small{display:block;font-size:var(--fs-12);color:var(--color-muted)}
/* Hire tab: the service select is the main field of the hero search */
.b-search__select--main{flex:1;min-width:0;max-width:none;height:58px;padding-inline-start:0;border-inline-start:0;color:var(--color-ink);font:400 var(--fs-18)/1.3 var(--font-sans)}
@media (max-width:639.98px){.b-search--hero .b-search__select--main{height:54px;padding-inline-start:0;font-size:var(--fs-16)}}
/* "All categories" tile: white glyph box */
.b-cat-tile__icon--plain{background:#fff;box-shadow:inset 0 0 0 1px var(--color-border-strong)}
/* Footer social links + language link */
.b-footer__social{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-14)}
.b-footer__social a,.b-footer__bottom a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#FFFFFF59}
.b-footer__social a:hover,.b-footer__bottom a:hover{text-decoration-color:currentColor}
/* Input group addon used as a button (show / hide password) or holding an icon */
button.b-input-group__addon{border:0;cursor:pointer}
button.b-input-group__addon:hover{color:var(--color-dark)}
.b-input-group__addon svg{width:18px;height:18px}
.b-input-group .b-input{flex:1;min-width:0}
/* Linked stat tile */
a.b-stat:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-card)}
/* Slim header (layouts.minimal) and plain pages (city picker, errors) */
.b-header--slim .b-header__logo{margin-inline-end:auto}
.b-plain{padding-block:24px 56px}
.b-plain__title{font:800 clamp(1.6rem,4.4vw,2.25rem)/1.1 var(--font-heading);letter-spacing:-.03em;color:var(--color-dark)}
.b-city-list{columns:2;column-gap:24px}
.b-city-list button,.b-city-list a{display:block;width:100%;padding-block:7px;text-align:start;font-size:var(--fs-15);color:var(--color-ink-2);cursor:pointer;break-inside:avoid}
.b-city-list button:hover,.b-city-list a:hover{color:var(--color-primary-dark);text-decoration:underline}
@media (min-width:768px){.b-city-list{columns:4}}
/* Error pages */
.b-errorpage{display:grid;justify-items:center;gap:10px;padding-block:clamp(32px,8vw,88px);text-align:center}
.b-errorpage__code{font:800 clamp(3.5rem,12vw,6.5rem)/1 var(--font-heading);letter-spacing:-.05em;color:var(--color-primary-100)}
.b-errorpage__title{font:800 clamp(1.5rem,4vw,2.1rem)/1.15 var(--font-heading);letter-spacing:-.03em;color:var(--color-dark)}
.b-errorpage__text{max-width:44ch;color:var(--color-ink-2)}
.b-errorpage__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-block-start:10px}
.b-errorpage .b-search{max-width:520px;margin-block-start:10px;text-align:start}
/* Account head row used by @section('account_title') views */
.b-dash__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px}
.b-dash__main{display:grid;gap:20px;align-content:start;min-width:0}
/* Auth extras: language link row, OTP single field */
.b-auth__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.b-auth__card .b-alert{margin:0}
.b-code-input{font:700 1.5rem/1 var(--font-heading);letter-spacing:.35em;text-align:center;direction:ltr}
}
/* ==== END MODULE: shell ==== */

/* ==== MODULE: communication (notification centre + preferences matrix) ==== */
@layer components{
.b-notif{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-block-end:var(--line)}
.b-notif:first-child{border-start-start-radius:calc(var(--r-card) - 1px);border-start-end-radius:calc(var(--r-card) - 1px)}
.b-notif:last-child{border-block-end:0;border-end-start-radius:calc(var(--r-card) - 1px);border-end-end-radius:calc(var(--r-card) - 1px)}
.b-notif.is-unread{background:var(--color-primary-50)}
.b-notif__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-surface);color:var(--color-ink-2)}
.b-notif.is-unread .b-notif__icon{background:#fff;color:var(--color-primary-dark)}
.b-notif__icon svg{width:20px;height:20px}
.b-notif__main{flex:1;min-width:0}
.b-notif__title{display:block;font:600 var(--fs-15)/1.35 var(--font-sans);color:var(--color-ink);text-decoration:none}
a.b-notif__title::after{content:"";position:absolute;inset:0}
a.b-notif__title:focus-visible{outline:0}
a.b-notif__title:focus-visible::after{box-shadow:inset var(--ring);border-radius:inherit}
.b-notif__text{margin-block-start:2px;font-size:var(--fs-14);line-height:1.45;color:var(--color-ink-2);overflow-wrap:anywhere}
.b-notif__meta{margin-block-start:4px;font-size:var(--fs-13);color:var(--color-muted)}
.b-notif__actions{position:relative;z-index:1;flex:none;display:flex;gap:2px}
.b-prefs__head,.b-prefs__row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,76px);gap:8px;align-items:center;padding:14px 20px;border-block-end:var(--line)}
.b-prefs__row:last-child{border-block-end:0}
.b-prefs__head{padding-block:10px;background:var(--color-surface);font:600 var(--fs-13)/1.3 var(--font-sans);color:var(--color-muted)}
.b-prefs__head span+span{text-align:center}
.b-prefs__label{display:flex;gap:12px;min-width:0}
.b-prefs__label>svg{flex:none;width:20px;height:20px;margin-block-start:2px;color:var(--color-primary-dark)}
.b-prefs__label b{display:block;font:600 var(--fs-15)/1.35 var(--font-sans);color:var(--color-ink)}
.b-prefs__label small{display:block;margin-block-start:2px;font-size:var(--fs-13);line-height:1.45;color:var(--color-muted)}
.b-prefs__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:var(--ctl-h);cursor:pointer}
.b-prefs__cell em{display:none;font-style:normal;font-size:var(--fs-12);color:var(--color-muted)}
.b-prefs__cell input{width:22px;height:22px;accent-color:var(--color-primary-fill);cursor:pointer}
.b-prefs__cell input:disabled{cursor:not-allowed}
.b-prefs__cell--off{cursor:default;color:var(--color-border-strong)}
.b-prefs__cell svg{width:18px;height:18px;color:var(--color-muted)}
@media (max-width:639.98px){
  .b-prefs__head{display:none}
  .b-prefs__row{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 16px}
  .b-prefs__label{grid-column:1/-1}
  .b-prefs__cell em{display:block}
}
}
/* ==== END MODULE: communication ==== */

/* ==== MODULE: monetisation (pricing page, checkout, order page) ==== */
@layer components{
/* plan cards */
.b-plans{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.b-plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;background:#fff;border:var(--line);border-radius:var(--r-card)}
.b-plan.is-popular{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.b-plan.is-current{background:var(--color-primary-50);border-color:var(--color-primary-100)}
.b-plan__tag{align-self:flex-start}
.b-plan__name{font:700 var(--fs-20)/1.2 var(--font-heading);letter-spacing:-.02em;color:var(--color-dark)}
.b-plan__desc{margin-block-start:2px;font-size:var(--fs-14);line-height:1.45;color:var(--color-muted)}
.b-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.b-plan__per{font-size:var(--fs-14);color:var(--color-muted)}
.b-plan__alt{flex-basis:100%;font-size:var(--fs-13);color:var(--color-muted)}
.b-plan__was{font-size:var(--fs-14);color:var(--color-muted);text-decoration:line-through}
.b-plan .b-list-check{flex:1;align-content:start}
@media (min-width:640px){.b-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.b-plans{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
/* comparison table */
.b-compare th,.b-compare td{position:relative;text-align:center}
.b-compare th:first-child,.b-compare td:first-child{position:sticky;inset-inline-start:0;z-index:1;min-width:150px;max-width:44vw;background:#fff;text-align:start;white-space:normal;font-weight:500;color:var(--color-ink-2);box-shadow:1px 0 var(--color-border)}
.b-compare thead th{background:var(--color-surface);color:var(--color-dark);font:700 var(--fs-15)/1.3 var(--font-heading)}
.b-compare thead th:first-child{background:var(--color-surface)}
.b-compare thead small{display:block;margin-block-start:2px;font:500 var(--fs-13)/1.3 var(--font-sans);color:var(--color-muted)}
.b-compare td{font-variant-numeric:tabular-nums;white-space:nowrap}
.b-compare .is-yes svg{width:18px;height:18px;color:var(--color-primary)}
.b-compare .is-no{color:var(--color-border-strong)}
.b-compare .is-popular{background:var(--color-primary-50)}
/* promotion rows */
.b-boosts{display:grid;gap:12px}
.b-boost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:16px;background:#fff;border:var(--line);border-radius:var(--r-card)}
.b-boost__icon{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-ctl);background:var(--color-primary-50);color:var(--color-primary-dark)}
.b-boost__icon svg{width:22px;height:22px}
.b-boost__title{font:700 var(--fs-16)/1.3 var(--font-heading);letter-spacing:-.01em;color:var(--color-dark)}
.b-boost__text{font-size:var(--fs-14);line-height:1.45;color:var(--color-muted)}
.b-boost__opts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-block-start:8px}
.b-boost__opt{display:inline-flex;align-items:baseline;gap:8px;min-height:var(--ctl-h);padding:10px 14px;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background:#fff;font:500 var(--fs-14)/1.3 var(--font-sans);color:var(--color-ink-2)}
.b-boost__opt b{font:700 var(--fs-16)/1.2 var(--font-heading);color:var(--color-dark);font-variant-numeric:tabular-nums}
a.b-boost__opt:hover{border-color:var(--color-primary);background:var(--color-primary-50)}
.b-boost__opt.is-off{background:var(--color-surface);color:var(--color-muted);cursor:not-allowed}
.b-boost__opt.is-off b{color:var(--color-muted)}
.b-boost__note{grid-column:1/-1;font-size:var(--fs-13);color:var(--color-muted)}
@media (min-width:768px){
  .b-boost{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .b-boost__icon{grid-row:span 2}
  .b-boost__opts{grid-column:3;grid-row:1/span 2;margin-block-start:0;justify-content:flex-end}
}
/* payment method radio cards */
.b-methods{display:grid;gap:10px}
.b-method{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding:14px 16px;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background:#fff;cursor:pointer}
.b-method input{position:absolute;opacity:0;inset:0;cursor:pointer}
.b-method>svg{grid-row:span 2;width:24px;height:24px;color:var(--color-ink-2)}
.b-method__title{font:600 var(--fs-15)/1.3 var(--font-sans);color:var(--color-ink)}
.b-method__text{font-size:var(--fs-13);line-height:1.4;color:var(--color-muted)}
.b-method:hover{border-color:#9AA8B4}
.b-method:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-50);box-shadow:inset 0 0 0 1px var(--color-primary)}
.b-method:has(input:checked)>svg{color:var(--color-primary-dark)}
.b-method:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
/* order summary + account details */
.b-summary{display:grid;gap:10px;font-size:var(--fs-15)}
.b-summary__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;color:var(--color-ink-2)}
.b-summary__row dd{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-ink);font-weight:500;text-align:end}
.b-summary__row--discount dd{color:var(--color-primary-dark)}
.b-summary__row--total{padding-block-start:12px;border-block-start:var(--line);color:var(--color-dark);font-weight:600}
.b-kv{display:grid;gap:0}
.b-kv__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding-block:10px;border-block-end:var(--line)}
.b-kv__row:last-child{border-block-end:0}
.b-kv__row dt{font-size:var(--fs-14);color:var(--color-muted)}
.b-kv__row dd{display:flex;align-items:center;gap:8px;font:600 var(--fs-15)/1.3 var(--font-sans);color:var(--color-ink);overflow-wrap:anywhere}
.b-kv__mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-15);letter-spacing:.02em;direction:ltr}
/* order timeline */
.b-timeline{display:grid;gap:14px}
.b-timeline__item{position:relative;padding-inline-start:22px;font-size:var(--fs-14);line-height:1.45;color:var(--color-ink-2)}
.b-timeline__item::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:5px;width:10px;height:10px;border-radius:50%;background:var(--color-border-strong)}
.b-timeline__item::after{content:"";position:absolute;inset-inline-start:4.5px;inset-block:19px -12px;width:1px;background:var(--color-border)}
.b-timeline__item:last-child::after{display:none}
.b-timeline__item.is-good::before{background:var(--color-primary)}
.b-timeline__item.is-bad::before{background:var(--color-danger)}
.b-timeline__item time{display:block;font-size:var(--fs-13);color:var(--color-muted)}
/* order rows */
.b-order{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:16px 20px;border-block-end:var(--line)}
.b-order:last-child{border-block-end:0}
.b-order__title{font:600 var(--fs-15)/1.35 var(--font-sans);color:var(--color-ink)}
.b-order__title a::after{content:"";position:absolute;inset:0}
.b-order{position:relative}
.b-order:hover{background:var(--color-surface)}
.b-order__meta{font-size:var(--fs-13);color:var(--color-muted)}
.b-order__end{text-align:end}
}
/* ==== END MODULE: monetisation ==== */

/* ==== MODULE: listing (ad page lightbox + map) ==== */
.b-lightbox{position:fixed;inset:0;z-index:calc(var(--z-modal, 1000) + 10);display:flex;align-items:center;justify-content:center;background:#05161bf2;padding:56px 12px}
.b-lightbox__img{max-width:100%;max-height:100%;object-fit:contain;user-select:none}
.b-lightbox__close,.b-lightbox__nav{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r-pill);background:#ffffff1f;color:#fff;cursor:pointer}
.b-lightbox__close:hover,.b-lightbox__nav:hover{background:#ffffff38}
.b-lightbox__close{inset-block-start:10px;inset-inline-end:10px}
.b-lightbox__nav{inset-block-start:50%;transform:translateY(-50%)}
.b-lightbox__nav--prev{inset-inline-start:10px}
.b-lightbox__nav--next{inset-inline-end:10px}
.b-lightbox__count{position:absolute;inset-block-end:14px;inset-inline:0;text-align:center;color:#fff;font:500 var(--fs-14)/1 var(--font-sans)}
.b-gallery__main img{width:100%;height:100%;object-fit:cover}
.b-gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.b-ad-map{height:280px;border-radius:var(--r-lg, 12px);overflow:hidden;border:var(--line);z-index:0;position:relative}
/* ==== END MODULE: listing ==== */

/* ==== MODULE: chat (inbox + thread page, offer cards, account offers list) ==== */
@media (min-width:1024px){.b-chat-wrap{padding-block:24px 24px}}
@media (max-width:1023.98px){.b-chat-wrap{padding-inline:0}}
.b-chat__search .b-search__field{display:flex;align-items:center;gap:8px;min-height:40px;padding-inline:12px;border:1px solid var(--color-border-strong);border-radius:var(--r-ctl);background:#fff}
.b-chat__search .b-search__input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:var(--fs-15)}
.b-chat__seg-row{overflow-x:auto}
.b-chat__empty,.b-chat__placeholder{display:grid;place-items:center;flex:1;padding:24px 16px}
.b-chat__more{padding:12px 16px}
.b-chat__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.b-chat__thumb--sm{width:44px;height:44px}
.b-chat__who{flex:1;min-width:0}
.b-chat__who .b-seller__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-chat__who .b-verified{margin-inline-start:4px}
.b-chat__ctx-main{flex:1;min-width:0;display:grid;gap:2px}
.b-chat__ad--strong{display:block;font-weight:600;color:var(--color-dark)}
.b-chat__context[aria-disabled=true]{pointer-events:none}
.b-chat__msgs{display:flex;flex-direction:column;gap:8px}
.b-chat__msgs>*{flex:none}
.b-chat__older{align-self:center;font-size:var(--fs-13)}
.b-bubble__text{display:block;white-space:pre-line}
.b-bubble--img .b-bubble__text{padding:6px 8px 0}
.b-bubble__img img{display:block;width:100%;height:100%;object-fit:cover}
.b-bubble__warn{display:flex;gap:6px;margin-block-start:6px;padding:6px 8px;border-radius:8px;background:var(--color-warning-50,#FFF7E6);color:var(--color-warning-ink,#7A4B00);font-size:var(--fs-12);line-height:1.35}
.b-bubble__warn svg{flex:none;width:14px;height:14px;margin-block-start:1px}
.b-bubble.is-sending{opacity:.6}
.b-bubble.is-failed{border-color:var(--color-danger,#D92D20);cursor:pointer}
.b-tick{display:inline-flex}
.b-tick .b-tick__two,.b-tick[data-state=delivered] .b-tick__one,.b-tick[data-state=read] .b-tick__one{display:none}
.b-tick[data-state=delivered] .b-tick__two,.b-tick[data-state=read] .b-tick__two{display:inline-block}
.b-tick[data-state=read]{color:var(--color-primary)}
.b-offer__hint{display:flex;align-items:center;gap:6px;padding:6px 14px 8px;font-size:var(--fs-12);color:var(--color-muted)}
.b-offer__hint svg{width:14px;height:14px}
.b-offer__counter{display:flex;gap:8px;padding:10px 14px;border-block-start:var(--line)}
.b-offer__counter-field{flex:1;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--color-muted)}
.b-offer__counter-field .b-input{min-height:38px;padding-inline:10px}
.b-offer__actions>.b-offer__state--plain{flex:1;border:0;background:none;cursor:default}
.b-offer__actions>.b-offer__withdraw{flex:none;padding-inline:14px}
.b-chat__compose{background:#fff;border-block-start:var(--line)}
.b-chat__compose .b-quick{border-block-start:0}
.b-chat__tip{display:flex;align-items:center;gap:6px;padding:8px 16px 0;font-size:var(--fs-12);color:var(--color-muted)}
.b-chat__tip svg{width:14px;height:14px;flex:none}
.b-chat__err{padding:6px 16px 0}
.b-chat__preview-img{position:relative;display:inline-flex;margin:8px 16px 0;border-radius:10px;overflow:hidden;border:var(--line)}
.b-chat__preview-img[hidden]{display:none}
.b-chat__preview-img img{display:block;width:64px;height:64px;object-fit:cover}
.b-chat__preview-img .b-icon-btn{position:absolute;inset-block-start:0;inset-inline-end:0;min-width:28px;min-height:28px;width:28px;height:28px;background:#fff9}
.b-composer label.b-icon-btn{cursor:pointer}
.b-composer label.b-icon-btn:focus-within{box-shadow:var(--ring)}
.b-chat__notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-block-start:var(--line);background:#fff;font-size:var(--fs-14);color:var(--color-ink-2)}
.b-chat__notice>span{flex:1;min-width:12ch}
.b-chat__notice svg{flex:none;width:18px;height:18px;color:var(--color-danger-ink)}
.b-offer-list{display:grid;gap:0;margin-block-start:12px;border:var(--line);border-radius:var(--r-panel);background:#fff;overflow:hidden}
.b-offer-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-block-end:var(--line)}
.b-offer-row:last-child{border-block-end:0}
.b-offer-row__main{flex:1;min-width:0;display:grid;gap:2px}
.b-offer-row__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--color-dark)}
.b-offer-row__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;font-size:var(--fs-13);color:var(--color-muted)}
.b-offer-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@media (max-width:479.98px){.b-offer-row{flex-wrap:wrap}.b-offer-row__side{flex-direction:row;width:100%;justify-content:space-between;align-items:center}}
/* ==== END MODULE: chat ==== */

/* ==== MODULE: qa — compact cookie banner on phones (sits above the bottom nav, page can scroll past it) */
@media (max-width:639.98px){
  .b-consent{inset-inline:8px;padding:12px 14px;gap:8px;border-radius:12px;font-size:13px;line-height:1.4}
  .b-consent__title{display:none}
  .b-consent__actions{flex-wrap:nowrap}
  body:has(.b-consent:not([hidden])){padding-block-end:170px}
  body.b-has-bottom-nav:has(.b-consent:not([hidden])){padding-block-end:calc(var(--bottom-nav-h) + 170px + env(safe-area-inset-bottom,0px))}
}
/* qa: ad page sticky bar — buttons sit inside display:contents wrappers, so share the width and never push off-screen */
.b-sticky-bar .b-btn{flex:1 1 0;min-width:0;padding-inline:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-sticky-bar .b-btn--icon{flex:none}
@media (max-width:419.98px){.b-sticky-bar{gap:6px}.b-sticky-bar .b-btn{gap:4px;padding-inline:6px;font-size:14px}.b-sticky-bar .b-btn--outline .b-icon{display:none}}
.b-has-sticky-bar .b-consent{inset-block-end:calc(76px + env(safe-area-inset-bottom,0px))}