/* ==========================================================================
   KnaBecha — design system
   Palette taken from the brand logo: royal blue (K / "Kna"), signal red
   ("Becha" / ribbon), golden yellow (কেনাবেচা pill), deep navy (".com").
   ========================================================================== */
:root {
  --kb-blue: #0A4FC4;
  --kb-blue-600: #0843A8;
  --kb-blue-700: #06347F;
  --kb-blue-900: #061F4D;
  --kb-blue-50: #EEF4FF;
  --kb-blue-100: #DCE8FF;
  --kb-red: #E3141B;
  --kb-red-600: #C30F16;
  --kb-red-50: #FFF0F0;
  --kb-gold: #FFC21A;
  --kb-gold-600: #E2A400;
  --kb-gold-50: #FFF8E0;
  --kb-navy: #0B1533;
  --kb-ink: #1B2440;
  --kb-muted: #5E6A85;
  --kb-subtle: #8A94AB;
  --kb-line: #E4E8F0;
  --kb-line-2: #EEF1F6;
  --kb-bg: #F4F6FB;
  --kb-white: #fff;
  --kb-green: #12A150;
  --kb-green-50: #E8F7EF;

  --kb-radius-sm: 10px;
  --kb-radius: 14px;
  --kb-radius-lg: 20px;
  --kb-shadow-xs: 0 1px 2px rgba(11, 21, 51, .06);
  --kb-shadow-sm: 0 2px 8px rgba(11, 21, 51, .06), 0 1px 2px rgba(11, 21, 51, .04);
  --kb-shadow: 0 10px 30px -12px rgba(11, 21, 51, .18), 0 2px 6px rgba(11, 21, 51, .05);
  --kb-shadow-lg: 0 24px 60px -20px rgba(11, 21, 51, .30);
  --kb-ease: cubic-bezier(.2, .7, .2, 1);

  --bs-primary: var(--kb-blue);
  --bs-primary-rgb: 10, 79, 196;
  --bs-danger: var(--kb-red);
  --bs-danger-rgb: 227, 20, 27;
  --bs-warning-rgb: 255, 194, 26;
  --bs-success-rgb: 18, 161, 80;
  --bs-body-font-family: "Plus Jakarta Sans", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--kb-ink);
  --bs-body-bg: var(--kb-bg);
  --bs-border-color: var(--kb-line);
  --bs-link-color: var(--kb-blue);
  --bs-link-color-rgb: 10, 79, 196;
  --bs-link-hover-color: var(--kb-blue-700);
  --bs-border-radius: var(--kb-radius-sm);
  --bs-border-radius-lg: var(--kb-radius);
  --bs-focus-ring-color: rgba(10, 79, 196, .25);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { font-size: .95rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.bn { font-family: "Hind Siliguri", var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--kb-navy); font-weight: 800; letter-spacing: -.02em; }
a { text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--kb-gold); color: var(--kb-navy); }
.text-muted { color: var(--kb-muted) !important; }
.text-subtle { color: var(--kb-subtle) !important; }
.text-navy { color: var(--kb-navy) !important; }
.text-brand { color: var(--kb-blue) !important; }
.text-red { color: var(--kb-red) !important; }
.text-gold { color: var(--kb-gold-600) !important; }
.bg-soft { background: var(--kb-bg) !important; }
.fw-800 { font-weight: 800 !important; }
.fs-7 { font-size: .8125rem !important; }
.fs-8 { font-size: .75rem !important; }
.min-w-0 { min-width: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--kb-navy); color: #fff; padding: .5rem 1rem; border-radius: 8px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid rgba(10, 79, 196, .35); outline-offset: 2px; }
.container-xxl { max-width: 1320px; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 700; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.1rem; --bs-btn-border-radius: 12px; letter-spacing: -.005em; transition: transform .15s var(--kb-ease), box-shadow .2s var(--kb-ease), background-color .2s, color .2s, border-color .2s; }
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-y: .38rem; --bs-btn-padding-x: .8rem; --bs-btn-border-radius: 10px; --bs-btn-font-size: .82rem; }
.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.5rem; --bs-btn-border-radius: 14px; }
.btn-primary { --bs-btn-bg: var(--kb-blue); --bs-btn-border-color: var(--kb-blue); --bs-btn-hover-bg: var(--kb-blue-600); --bs-btn-hover-border-color: var(--kb-blue-600); --bs-btn-active-bg: var(--kb-blue-700); --bs-btn-active-border-color: var(--kb-blue-700); --bs-btn-disabled-bg: var(--kb-blue); --bs-btn-disabled-border-color: var(--kb-blue); box-shadow: 0 6px 16px -8px rgba(10, 79, 196, .6); }
.btn-danger, .btn-sell { --bs-btn-bg: var(--kb-red); --bs-btn-border-color: var(--kb-red); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--kb-red-600); --bs-btn-hover-border-color: var(--kb-red-600); --bs-btn-hover-color: #fff; --bs-btn-active-bg: #a50c12; --bs-btn-active-border-color: #a50c12; box-shadow: 0 8px 18px -10px rgba(227, 20, 27, .7); }
.btn-sell { background-image: linear-gradient(135deg, #F02A30 0%, var(--kb-red) 55%, #C40E14 100%); border: 0; padding-inline: 1.15rem; }
.btn-sell .bi { color: var(--kb-gold); }
.btn-gold { --bs-btn-bg: var(--kb-gold); --bs-btn-border-color: var(--kb-gold); --bs-btn-color: var(--kb-navy); --bs-btn-hover-bg: var(--kb-gold-600); --bs-btn-hover-border-color: var(--kb-gold-600); --bs-btn-hover-color: var(--kb-navy); --bs-btn-active-bg: var(--kb-gold-600); }
.btn-success { --bs-btn-bg: var(--kb-green); --bs-btn-border-color: var(--kb-green); --bs-btn-hover-bg: #0e8a44; --bs-btn-hover-border-color: #0e8a44; }
.btn-whatsapp { --bs-btn-bg: #25D366; --bs-btn-border-color: #25D366; --bs-btn-color: #fff; --bs-btn-hover-bg: #1ebe5b; --bs-btn-hover-border-color: #1ebe5b; --bs-btn-hover-color: #fff; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--kb-line); --bs-btn-color: var(--kb-ink); --bs-btn-hover-bg: var(--kb-blue-50); --bs-btn-hover-border-color: var(--kb-blue-100); --bs-btn-hover-color: var(--kb-blue); }
.btn-soft { --bs-btn-bg: var(--kb-blue-50); --bs-btn-border-color: transparent; --bs-btn-color: var(--kb-blue); --bs-btn-hover-bg: var(--kb-blue-100); --bs-btn-hover-color: var(--kb-blue-700); --bs-btn-active-bg: var(--kb-blue-100); --bs-btn-active-color: var(--kb-blue-700); }
.btn-soft-danger { --bs-btn-bg: var(--kb-red-50); --bs-btn-border-color: transparent; --bs-btn-color: var(--kb-red); --bs-btn-hover-bg: #ffe0e0; --bs-btn-hover-color: var(--kb-red-600); }
.btn-outline-primary { --bs-btn-color: var(--kb-blue); --bs-btn-border-color: var(--kb-blue-100); --bs-btn-hover-bg: var(--kb-blue); --bs-btn-hover-border-color: var(--kb-blue); --bs-btn-active-bg: var(--kb-blue-700); border-width: 1.5px; }
.btn-icon { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; border-radius: 12px; }
.btn-icon.btn-sm { width: 34px; height: 34px; border-radius: 10px; }
.btn-link { font-weight: 700; text-decoration: none; }
.btn[disabled] .spinner-border, .btn.is-loading .spinner-border { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: .85; }

/* ---------- Forms ---------- */
.form-label { font-weight: 700; font-size: .86rem; color: var(--kb-navy); margin-bottom: .4rem; }
.form-label .req { color: var(--kb-red); margin-left: 2px; }
.form-control, .form-select { border-radius: 12px; border: 1.5px solid var(--kb-line); padding: .66rem .9rem; font-size: .95rem; background-color: #fff; transition: border-color .15s, box-shadow .15s; }
.form-control-lg, .form-select-lg { padding: .82rem 1rem; border-radius: 14px; font-size: 1rem; }
.form-control:hover, .form-select:hover { border-color: #cfd6e3; }
.form-control:focus, .form-select:focus { border-color: var(--kb-blue); box-shadow: 0 0 0 4px rgba(10, 79, 196, .12); }
.form-control::placeholder { color: #9aa3b8; }
.form-text { color: var(--kb-muted); font-size: .8rem; }
.form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid #c2cad9; }
.form-check-input:checked { background-color: var(--kb-blue); border-color: var(--kb-blue); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.input-group-text { border: 1.5px solid var(--kb-line); background: var(--kb-bg); border-radius: 12px; font-weight: 600; color: var(--kb-muted); }
.invalid-feedback { font-weight: 600; font-size: .8rem; }
.was-validated .form-control:invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--kb-red); background-image: none; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(227, 20, 27, .12); }
.password-field { position: relative; }
.password-field .toggle-password { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--kb-muted); padding: .35rem .5rem; }
.char-count { font-size: .75rem; color: var(--kb-subtle); }

/* Option chips (radio/checkbox styled as pills) */
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-option { position: relative; }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option label { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border: 1.5px solid var(--kb-line); border-radius: 999px; font-weight: 600; font-size: .88rem; cursor: pointer; background: #fff; transition: all .15s; user-select: none; }
.chip-option label:hover { border-color: var(--kb-blue-100); background: var(--kb-blue-50); }
.chip-option input:checked + label { border-color: var(--kb-blue); background: var(--kb-blue-50); color: var(--kb-blue); box-shadow: inset 0 0 0 1px var(--kb-blue); }
.chip-option input:focus-visible + label { outline: 3px solid rgba(10, 79, 196, .3); }

/* ---------- Cards & surfaces ---------- */
.card { --bs-card-border-color: var(--kb-line); --bs-card-border-radius: var(--kb-radius); --bs-card-cap-bg: #fff; box-shadow: var(--kb-shadow-xs); }
.surface { background: #fff; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow-xs); }
.surface-pad { padding: 1.25rem; }
@media (min-width: 768px) { .surface-pad { padding: 1.5rem; } }
.card-title-sm { font-size: 1rem; font-weight: 800; color: var(--kb-navy); margin: 0; }
.divider { height: 1px; background: var(--kb-line); margin: 1rem 0; }
.badge { font-weight: 700; letter-spacing: .01em; border-radius: 8px; padding: .38em .62em; }
.badge-soft-primary { background: var(--kb-blue-50); color: var(--kb-blue); }
.badge-soft-success { background: var(--kb-green-50); color: var(--kb-green); }
.badge-soft-warning { background: var(--kb-gold-50); color: #9a6b00; }
.badge-soft-danger { background: var(--kb-red-50); color: var(--kb-red); }
.badge-soft-secondary { background: #EEF1F6; color: var(--kb-muted); }
.badge-soft-light { background: #F4F6FB; color: var(--kb-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }

/* ---------- Header ---------- */
.site-header { background: #fff; position: sticky; top: 0; z-index: 1030; transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(11, 21, 51, .35); }
.header-main { padding: .7rem 0; border-bottom: 1px solid var(--kb-line-2); }
.brand-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo img { height: 46px; width: auto; display: block; }
@media (max-width: 575.98px) { .brand-logo img { height: 36px; } }
.header-search { flex: 1; max-width: 680px; }
.search-pill { display: flex; align-items: stretch; background: var(--kb-bg); border: 1.5px solid var(--kb-line); border-radius: 14px; overflow: hidden; transition: border-color .15s, box-shadow .15s, background .15s; }
.search-pill:focus-within { border-color: var(--kb-blue); background: #fff; box-shadow: 0 0 0 4px rgba(10, 79, 196, .1); }
.search-pill .search-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .7rem 1rem .7rem .4rem; font-size: .95rem; outline: none; }
.search-pill .search-icon { display: grid; place-items: center; padding-left: .95rem; color: var(--kb-subtle); }
.search-pill .search-location { border: 0; border-left: 1.5px solid var(--kb-line); background: transparent; font-weight: 600; font-size: .86rem; color: var(--kb-ink); max-width: 170px; padding: 0 2rem 0 .9rem; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235E6A85' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 12px; }
.search-pill .search-btn { border: 0; background: var(--kb-blue); color: #fff; padding: 0 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; transition: background .15s; }
.search-pill .search-btn:hover { background: var(--kb-blue-600); }
.header-actions { display: flex; align-items: center; gap: .35rem; }
.header-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--kb-ink); font-size: 1.2rem; transition: background .15s, color .15s; border: 0; background: transparent; }
.header-icon:hover, .header-icon[aria-expanded="true"] { background: var(--kb-blue-50); color: var(--kb-blue); }
.header-icon .count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kb-red); color: #fff; font-size: .66rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; line-height: 1; }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--kb-blue), var(--kb-blue-700)); font-size: .85rem; flex-shrink: 0; overflow: hidden; }
.avatar-sm { width: 30px; height: 30px; font-size: .72rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-xl { width: 104px; height: 104px; font-size: 2rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-chip { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem; border-radius: 999px; border: 1.5px solid var(--kb-line); background: #fff; color: var(--kb-ink); font-weight: 700; font-size: .86rem; }
.user-chip:hover { border-color: var(--kb-blue-100); background: var(--kb-blue-50); }

.dropdown-menu { --bs-dropdown-border-color: var(--kb-line); --bs-dropdown-border-radius: 14px; --bs-dropdown-link-active-bg: var(--kb-blue-50); --bs-dropdown-link-active-color: var(--kb-blue); --bs-dropdown-link-hover-bg: var(--kb-bg); --bs-dropdown-item-padding-y: .55rem; --bs-dropdown-item-padding-x: 1rem; box-shadow: var(--kb-shadow-lg); padding: .4rem; animation: dropIn .16s var(--kb-ease); }
.dropdown-item { border-radius: 10px; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-item .bi { color: var(--kb-muted); font-size: 1.05rem; width: 1.2rem; text-align: center; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.notif-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.notif-menu .notif-head { padding: .85rem 1rem; border-bottom: 1px solid var(--kb-line); display: flex; justify-content: space-between; align-items: center; }
.notif-list { max-height: 380px; overflow-y: auto; }

/* Category strip */
.cat-strip { background: var(--kb-blue); position: relative; }
.cat-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--kb-red) 0 33%, var(--kb-gold) 33% 66%, var(--kb-red) 66% 100%); opacity: .95; }
.cat-strip-inner { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; padding-top: .35rem; padding-bottom: .5rem; }
.cat-strip-inner::-webkit-scrollbar { display: none; }
.cat-strip a { color: rgba(255, 255, 255, .88); font-weight: 600; font-size: .86rem; white-space: nowrap; padding: .4rem .8rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; transition: background .15s, color .15s; }
.cat-strip a:hover, .cat-strip a.active { background: rgba(255, 255, 255, .14); color: #fff; }
.cat-strip a .bi { opacity: .85; }
.cat-strip .all-cats { background: rgba(255, 255, 255, .12); color: #fff; }
.cat-strip .nav-training { font-family: "Hind Siliguri", var(--bs-body-font-family); color: var(--kb-navy); background: var(--kb-gold); }
.cat-strip .nav-training .bi { color: var(--kb-red); opacity: 1; }
.cat-strip .nav-training:hover, .cat-strip .nav-training.active { background: #FFD34D; color: var(--kb-navy); }

/* Mobile search row */
.mobile-search { padding-top: .55rem; padding-bottom: .7rem; }

/* Mobile bottom nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1035; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--kb-line); display: grid; grid-template-columns: repeat(5, 1fr); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; font-weight: 700; color: var(--kb-muted); padding: .25rem 0; position: relative; }
.bottom-nav a .bi { font-size: 1.3rem; }
.bottom-nav a.active { color: var(--kb-blue); }
.bottom-nav .sell-fab { margin-top: -26px; }
.bottom-nav .sell-fab span.fab { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(135deg, #F02A30, var(--kb-red) 60%, #B50D13); color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 10px 20px -8px rgba(227, 20, 27, .7); border: 4px solid #fff; }
.bottom-nav .dot { position: absolute; top: 2px; right: calc(50% - 16px); width: 16px; height: 16px; border-radius: 8px; background: var(--kb-red); color: #fff; font-size: .6rem; display: grid; place-items: center; border: 2px solid #fff; }
@media (max-width: 991.98px) { body.has-bottom-nav { padding-bottom: 76px; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 85% -10%, rgba(255, 194, 26, .18), transparent 60%), linear-gradient(135deg, var(--kb-blue-700) 0%, var(--kb-blue) 55%, #1667E8 100%); color: #fff; padding: 3rem 0 4.5rem; isolation: isolate; }
.hero::before { /* red ribbon inspired by the logo's K swoosh */ content: ""; position: absolute; z-index: -1; right: -120px; top: -40px; width: 560px; height: 140%; background: linear-gradient(160deg, rgba(227, 20, 27, .95), rgba(195, 15, 22, .85)); transform: skewX(-24deg); opacity: .9; }
.hero::after { content: ""; position: absolute; z-index: -1; right: 260px; top: -40px; width: 70px; height: 140%; background: rgba(255, 255, 255, .12); transform: skewX(-24deg); }
@media (max-width: 991.98px) { .hero::before { width: 300px; right: -170px; opacity: .55; } .hero::after { display: none; } }
.hero h1 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.hero .lead { color: rgba(255, 255, 255, .85); font-size: 1.05rem; max-width: 560px; }
.tagline-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem .35rem .4rem; border-radius: 999px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 700; font-size: .9rem; }
.tagline-pill .bn-pill { background: linear-gradient(180deg, #D01016, #A90B11); border: 2px solid var(--kb-gold); color: var(--kb-gold); padding: .1rem .7rem; border-radius: 999px; font-family: "Hind Siliguri", sans-serif; font-weight: 700; }
.hero-search { background: #fff; border-radius: 18px; padding: .5rem; box-shadow: var(--kb-shadow-lg); display: flex; gap: .5rem; align-items: stretch; max-width: 760px; }
.hero-search .field { display: flex; align-items: center; gap: .5rem; padding: 0 .8rem; flex: 1; min-width: 0; }
.hero-search .field .bi { color: var(--kb-subtle); font-size: 1.1rem; }
.hero-search input, .hero-search select { border: 0; outline: none; width: 100%; padding: .75rem 0; font-size: 1rem; background: transparent; color: var(--kb-ink); min-width: 0; }
.hero-search .field-loc { flex: 0 0 210px; border-left: 1.5px solid var(--kb-line); }
.hero-search .btn { padding-inline: 1.6rem; }
@media (max-width: 767.98px) {
  .hero { padding: 1.75rem 0 3.25rem; }
  .hero-search { flex-direction: column; padding: .6rem; }
  .hero-search .field { padding: .1rem .6rem; border: 1.5px solid var(--kb-line); border-radius: 12px; }
  .hero-search .field-loc { flex: 1; border-left: 1.5px solid var(--kb-line); }
}
.hero-stats { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-stats .stat strong { display: block; font-size: 1.35rem; font-weight: 800; color: #fff; }
.hero-stats .stat span { font-size: .82rem; color: rgba(255, 255, 255, .75); }
.hero-quick a { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); padding: .32rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 600; margin: 0 .35rem .45rem 0; transition: background .15s; }
.hero-quick a:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.hero-art { position: relative; }
.hero-card { background: #fff; color: var(--kb-ink); border-radius: 18px; box-shadow: var(--kb-shadow-lg); overflow: hidden; width: 260px; }
.hero-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; }
.hero-card .p { padding: .8rem 1rem; }
.hero-card.c2 { position: absolute; right: 0; top: 70px; width: 220px; transform: rotate(4deg); }
.hero-card.c1 { transform: rotate(-3deg); }
.float-chip { position: absolute; background: #fff; color: var(--kb-navy); border-radius: 14px; padding: .55rem .8rem; box-shadow: var(--kb-shadow); font-weight: 700; font-size: .82rem; display: flex; align-items: center; gap: .5rem; animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Overlap section under the hero */
.overlap-up { margin-top: -2.5rem; position: relative; z-index: 2; }

/* ---------- Section headings ---------- */
.section { padding: 2.25rem 0; }
@media (min-width: 992px) { .section { padding: 2.75rem 0; } }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.section-head h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); margin: 0; display: flex; align-items: center; gap: .6rem; }
.section-head h2 .mark { width: 8px; height: 26px; border-radius: 4px; background: linear-gradient(180deg, var(--kb-red), var(--kb-gold)); display: inline-block; }
.section-head p { margin: .2rem 0 0; color: var(--kb-muted); font-size: .9rem; }
.see-all { font-weight: 700; font-size: .9rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.see-all:hover .bi { transform: translateX(3px); }
.see-all .bi { transition: transform .15s; }

/* ---------- Category tiles ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }
@media (max-width: 575.98px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; } }
.cat-tile { --accent: var(--kb-blue); background: #fff; border: 1px solid var(--kb-line); border-radius: 16px; padding: 1.05rem .8rem; text-align: center; color: var(--kb-ink); display: flex; flex-direction: column; align-items: center; gap: .55rem; transition: transform .2s var(--kb-ease), box-shadow .2s var(--kb-ease), border-color .2s; position: relative; overflow: hidden; }
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow); border-color: transparent; color: var(--kb-navy); }
.cat-tile .icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.55rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, #fff); transition: transform .2s; }
.cat-tile:hover .icon { transform: scale(1.06) rotate(-4deg); }
.cat-tile .name { font-weight: 700; font-size: .86rem; line-height: 1.25; }
.cat-tile .count { font-size: .74rem; color: var(--kb-subtle); font-weight: 600; }
@media (max-width: 575.98px) { .cat-tile { padding: .8rem .4rem; border-radius: 14px; } .cat-tile .icon { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 13px; } .cat-tile .name { font-size: .76rem; } }

/* ---------- Ad cards ---------- */
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) { .ad-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }
.ad-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ad-card { background: #fff; border: 1px solid var(--kb-line); border-radius: 16px; overflow: hidden; position: relative; display: flex; flex-direction: column; transition: transform .2s var(--kb-ease), box-shadow .2s var(--kb-ease), border-color .2s; height: 100%; }
.ad-card:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow); border-color: transparent; }
.ad-card .media { position: relative; aspect-ratio: 4 / 3; background: var(--kb-line-2); overflow: hidden; }
.ad-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kb-ease); }
.ad-card:hover .media img { transform: scale(1.04); }
.ad-card .badges { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; z-index: 2; }
.ad-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: .28rem .55rem; border-radius: 999px; color: #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); }
.ad-badge.red { background: linear-gradient(135deg, #F02A30, var(--kb-red)); }
.ad-badge.gold { background: linear-gradient(135deg, #FFD34D, var(--kb-gold)); color: var(--kb-navy); }
.ad-badge.blue { background: linear-gradient(135deg, #2B6CE0, var(--kb-blue)); }
.ad-badge.dark { background: rgba(11, 21, 51, .78); backdrop-filter: blur(4px); }
.ad-badge.green { background: var(--kb-green); }
.ad-card .photos-count { position: absolute; bottom: .55rem; left: .6rem; background: rgba(11, 21, 51, .66); color: #fff; font-size: .7rem; font-weight: 700; padding: .18rem .5rem; border-radius: 8px; z-index: 2; }
.fav-btn { position: absolute; top: .5rem; right: .5rem; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--kb-ink); display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 4px 12px -4px rgba(11, 21, 51, .35); transition: transform .15s, color .15s; }
.fav-btn:hover { transform: scale(1.08); color: var(--kb-red); }
.fav-btn.is-saved { color: var(--kb-red); }
.fav-btn.is-saved .bi-heart::before { content: "\f415"; } /* bi-heart-fill */
.fav-btn.pop { animation: pop .35s var(--kb-ease); }
@keyframes pop { 40% { transform: scale(1.3); } }
.ad-card .body { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.ad-card .price { font-size: 1.08rem; font-weight: 800; color: var(--kb-blue); letter-spacing: -.01em; }
.ad-card .price .neg { font-size: .7rem; font-weight: 700; color: var(--kb-muted); background: var(--kb-bg); border-radius: 6px; padding: .1rem .35rem; margin-left: .3rem; vertical-align: middle; }
.ad-card .title { font-weight: 600; color: var(--kb-ink); font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.43em; }
.ad-card .title a { color: inherit; }
.ad-card .title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ad-card .specs { display: flex; flex-wrap: wrap; gap: .25rem; }
.ad-card .specs span { font-size: .7rem; font-weight: 600; color: var(--kb-muted); background: var(--kb-bg); padding: .12rem .45rem; border-radius: 6px; }
.ad-card .meta { margin-top: auto; padding-top: .4rem; display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; color: var(--kb-subtle); }
.ad-card .meta span { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-card.is-boosted { border-color: rgba(227, 20, 27, .28); box-shadow: 0 0 0 1px rgba(227, 20, 27, .08); }
.ad-card.is-featured-gold { border-color: rgba(255, 194, 26, .7); }
@media (max-width: 575.98px) { .ad-card .body { padding: .6rem .65rem .7rem; } .ad-card .price { font-size: .95rem; } .ad-card .title { font-size: .8rem; } .ad-card .specs { display: none; } .fav-btn { width: 32px; height: 32px; font-size: .95rem; } }

/* List variant */
.ad-list .ad-card { flex-direction: row; }
.ad-list .ad-card .media { width: 240px; flex-shrink: 0; aspect-ratio: auto; min-height: 170px; }
.ad-list .ad-card .title { font-size: 1rem; -webkit-line-clamp: 2; min-height: 0; }
.ad-list .ad-card .body { padding: 1rem 1.15rem; }
.ad-list.ad-grid { grid-template-columns: 1fr; }
@media (max-width: 575.98px) { .ad-list .ad-card .media { width: 128px; min-height: 120px; } .ad-list .ad-card .body { padding: .65rem .75rem; } .ad-list.ad-grid { grid-template-columns: 1fr; } }

/* Horizontal scroller rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1200px) { .rail { grid-auto-columns: calc((100% - 3rem) / 4); } }
@media (max-width: 575.98px) { .rail { grid-auto-columns: 62%; gap: .65rem; } }
.rail-wrap { position: relative; }
.rail-nav { position: absolute; top: 38%; z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--kb-line); background: #fff; box-shadow: var(--kb-shadow); display: grid; place-items: center; color: var(--kb-navy); transition: opacity .2s, transform .15s; }
.rail-nav:hover { transform: scale(1.06); color: var(--kb-blue); }
.rail-nav.prev { left: -18px; } .rail-nav.next { right: -18px; }
@media (max-width: 991.98px) { .rail-nav { display: none; } }

/* Featured band */
.featured-band { background: linear-gradient(180deg, #fff 0%, var(--kb-gold-50) 100%); border-top: 1px solid var(--kb-line-2); border-bottom: 1px solid var(--kb-line-2); }

/* Promo banners */
.promo-card { border-radius: 20px; padding: 1.5rem; color: #fff; position: relative; overflow: hidden; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; transition: transform .2s var(--kb-ease), box-shadow .2s; }
.promo-card:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow-lg); color: #fff; }
.promo-card h3 { color: inherit; font-size: 1.25rem; margin-bottom: .35rem; }
.promo-card p { color: inherit; opacity: .88; font-size: .9rem; margin: 0; max-width: 300px; }
.promo-card .promo-cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .86rem; margin-top: 1rem; background: rgba(255, 255, 255, .18); padding: .45rem .9rem; border-radius: 999px; width: max-content; }
.promo-card::after { content: ""; position: absolute; z-index: -1; right: -40px; top: -30px; width: 160px; height: 260px; transform: skewX(-24deg); background: rgba(255, 255, 255, .13); }
.promo-card .promo-icon { position: absolute; right: 1.2rem; bottom: .8rem; font-size: 4.4rem; opacity: .22; z-index: -1; }
.promo-card.theme-red { background: linear-gradient(135deg, #F0353B, var(--kb-red) 50%, #A80C12); }
.promo-card.theme-blue { background: linear-gradient(135deg, #2F73EA, var(--kb-blue) 50%, var(--kb-blue-700)); }
.promo-card.theme-gold { background: linear-gradient(135deg, #FFD95E, var(--kb-gold) 55%, #F1A800); color: var(--kb-navy); }
.promo-card.theme-gold:hover { color: var(--kb-navy); }
.promo-card.theme-gold .promo-cta { background: rgba(11, 21, 51, .1); }
.promo-card.theme-navy { background: linear-gradient(135deg, #1A2650, var(--kb-navy)); }
.promo-card .promo-img { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; opacity: .35; }

/* Locations */
.loc-card { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid var(--kb-line); border-radius: 16px; padding: .9rem 1rem; color: var(--kb-ink); transition: all .2s var(--kb-ease); }
.loc-card:hover { border-color: var(--kb-blue-100); box-shadow: var(--kb-shadow-sm); transform: translateY(-2px); color: var(--kb-navy); }
.loc-card .pin { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--kb-red-50); color: var(--kb-red); font-size: 1.2rem; flex-shrink: 0; }
.loc-card strong { display: block; font-weight: 800; }
.loc-card small { color: var(--kb-subtle); font-weight: 600; }

/* Popular search chips */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-cloud a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 999px; background: #fff; border: 1px solid var(--kb-line); color: var(--kb-ink); font-weight: 600; font-size: .86rem; transition: all .15s; }
.tag-cloud a:hover { border-color: var(--kb-blue); color: var(--kb-blue); background: var(--kb-blue-50); }
.tag-cloud a .bi { color: var(--kb-subtle); }

/* Trust section */
.trust-item { display: flex; gap: 1rem; align-items: flex-start; }
.trust-item .ti-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; }
.trust-item h3 { font-size: 1rem; margin-bottom: .25rem; }
.trust-item p { color: var(--kb-muted); font-size: .88rem; margin: 0; }

/* CTA band */
.cta-band { border-radius: 24px; background: var(--kb-navy); color: #fff; padding: 2rem; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; z-index: -1; right: 10%; top: -50%; width: 220px; height: 220%; background: var(--kb-red); transform: skewX(-24deg); }
.cta-band::after { content: ""; position: absolute; z-index: -1; right: calc(10% + 240px); top: -50%; width: 60px; height: 220%; background: var(--kb-blue); transform: skewX(-24deg); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .78); }
@media (min-width: 768px) { .cta-band { padding: 2.75rem 3rem; } }
@media (max-width: 767.98px) { .cta-band::before { right: -120px; opacity: .6; } .cta-band::after { display: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--kb-navy); color: rgba(255, 255, 255, .72); padding-top: 3rem; margin-top: 3rem; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--kb-blue) 0 40%, var(--kb-red) 40% 80%, var(--kb-gold) 80%); }
.site-footer h4 { color: #fff; font-size: .95rem; font-weight: 800; margin-bottom: 1rem; }
.site-footer a { color: rgba(255, 255, 255, .72); font-size: .9rem; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-logo { background: #fff; border-radius: 14px; padding: .4rem .7rem; display: inline-block; }
.footer-logo img { height: 46px; display: block; }
.social-links { display: flex; gap: .5rem; }
.social-links a { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; color: #fff; font-size: 1.05rem; transition: background .15s, transform .15s; }
.social-links a:hover { background: var(--kb-red); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.5rem; padding: 1.2rem 0; font-size: .82rem; }
.pay-chip { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255, 255, 255, .08); border-radius: 8px; padding: .3rem .6rem; font-weight: 700; font-size: .78rem; color: #fff; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { --bs-breadcrumb-divider: "›"; font-size: .84rem; margin-bottom: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb-item a { color: var(--kb-muted); font-weight: 600; }
.breadcrumb-item a:hover { color: var(--kb-blue); }
.breadcrumb-item.active { color: var(--kb-ink); font-weight: 600; }
.page-head { padding: 1.25rem 0 .5rem; }
.page-head h1 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); margin: .35rem 0 0; }

/* ---------- Listing / filters ---------- */
.filter-card { background: #fff; border: 1px solid var(--kb-line); border-radius: 16px; overflow: hidden; }
.filter-section { padding: 1rem 1.1rem; border-bottom: 1px solid var(--kb-line-2); }
.filter-section:last-child { border-bottom: 0; }
.filter-section h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kb-muted); font-weight: 800; margin-bottom: .7rem; }
.filter-cats a { display: flex; justify-content: space-between; align-items: center; color: var(--kb-ink); padding: .38rem .55rem; border-radius: 9px; font-size: .88rem; font-weight: 600; }
.filter-cats a:hover { background: var(--kb-bg); }
.filter-cats a.active { background: var(--kb-blue-50); color: var(--kb-blue); }
.filter-cats a small { color: var(--kb-subtle); font-weight: 600; }
.filter-cats .sub { padding-left: .8rem; border-left: 2px solid var(--kb-line); margin: .2rem 0 .4rem .6rem; }
.results-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.active-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.active-chips a { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .45rem .32rem .75rem; border-radius: 999px; background: var(--kb-blue-50); color: var(--kb-blue); font-size: .8rem; font-weight: 700; }
.active-chips a .bi { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 79, 196, .12); font-size: .7rem; }
.active-chips a:hover { background: var(--kb-blue-100); }
.view-toggle .btn { --bs-btn-padding-x: .6rem; }
.view-toggle .btn.active { background: var(--kb-blue-50); color: var(--kb-blue); border-color: var(--kb-blue-100); }
.subcat-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.subcat-pills::-webkit-scrollbar { display: none; }
.subcat-pills a { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 12px; background: #fff; border: 1px solid var(--kb-line); color: var(--kb-ink); font-weight: 600; font-size: .86rem; }
.subcat-pills a:hover { border-color: var(--kb-blue-100); color: var(--kb-blue); }
.subcat-pills a.active { background: var(--kb-blue); color: #fff; border-color: var(--kb-blue); }
.subcat-pills a small { opacity: .7; }

/* ---------- Ad detail ---------- */
.gallery { background: #fff; border: 1px solid var(--kb-line); border-radius: 18px; overflow: hidden; }
.gallery-main { position: relative; aspect-ratio: 4 / 3; background: #0f1630; overflow: hidden; cursor: zoom-in; touch-action: pan-y; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.gallery-main .g-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--kb-navy); display: grid; place-items: center; font-size: 1.2rem; box-shadow: var(--kb-shadow); z-index: 2; transition: transform .15s; }
.gallery-main .g-nav:hover { transform: translateY(-50%) scale(1.06); }
.gallery-main .g-prev { left: .8rem; } .gallery-main .g-next { right: .8rem; }
.gallery-main .g-count { position: absolute; bottom: .8rem; right: .8rem; background: rgba(11, 21, 51, .7); color: #fff; font-size: .78rem; font-weight: 700; padding: .25rem .6rem; border-radius: 8px; }
.gallery-main .g-badges { position: absolute; top: .8rem; left: .8rem; display: flex; gap: .4rem; z-index: 2; }
.gallery-thumbs { display: flex; gap: .5rem; padding: .65rem; overflow-x: auto; scrollbar-width: thin; }
.gallery-thumbs button { flex: 0 0 78px; height: 60px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--kb-line-2); opacity: .7; transition: all .15s; }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button.active, .gallery-thumbs button:hover { border-color: var(--kb-blue); opacity: 1; }
.lightbox { position: fixed; inset: 0; background: rgba(6, 10, 25, .96); z-index: 2000; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; animation: fadeIn .2s; }
.lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.lightbox .lb-close { position: absolute; top: 1rem; right: 1rem; color: #fff; background: rgba(255, 255, 255, .12); border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 1.4rem; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; background: rgba(255, 255, 255, .12); border: 0; width: 52px; height: 52px; border-radius: 50%; font-size: 1.4rem; }
.lightbox .lb-prev { left: 1rem; } .lightbox .lb-next { right: 1rem; }
.lightbox .lb-count { position: absolute; bottom: 1.2rem; color: rgba(255, 255, 255, .8); font-weight: 700; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.ad-title { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.25; margin: 0; }
.ad-price { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; color: var(--kb-blue); letter-spacing: -.02em; }
.ad-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; color: var(--kb-muted); font-size: .86rem; font-weight: 500; }
.ad-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.spec { background: var(--kb-bg); border-radius: 12px; padding: .7rem .85rem; }
.spec small { display: block; color: var(--kb-muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.spec strong { font-weight: 700; color: var(--kb-navy); font-size: .95rem; }
.description { white-space: pre-line; color: var(--kb-ink); font-size: .95rem; line-height: 1.7; }
.description.collapsed { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.seller-card .seller-head { display: flex; gap: .85rem; align-items: center; }
.verified-badge { display: inline-flex; align-items: center; gap: .25rem; color: var(--kb-blue); font-weight: 700; font-size: .78rem; background: var(--kb-blue-50); padding: .15rem .5rem; border-radius: 999px; }
.verified-badge .bi { font-size: .9rem; }
.rating-stars { color: var(--kb-gold); letter-spacing: 1px; }
.rating-stars .bi-star { color: #d5dbe6; }
.seller-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.seller-stats div { background: var(--kb-bg); border-radius: 12px; padding: .6rem .3rem; }
.seller-stats strong { display: block; font-weight: 800; color: var(--kb-navy); }
.seller-stats small { color: var(--kb-muted); font-size: .72rem; font-weight: 600; }
.safety-box { background: var(--kb-gold-50); border: 1px solid #FBE3A1; border-radius: 16px; padding: 1rem 1.1rem; }
.safety-box h6 { display: flex; align-items: center; gap: .5rem; color: #7a5500; font-weight: 800; }
.safety-box ul { margin: 0; padding-left: 1.1rem; color: #6b5310; font-size: .85rem; }
.safety-box li { margin-bottom: .25rem; }
.sticky-side { position: sticky; top: 140px; }
.mobile-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1036; background: #fff; border-top: 1px solid var(--kb-line); padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); display: flex; gap: .5rem; box-shadow: 0 -10px 30px -16px rgba(11, 21, 51, .35); }
.mobile-action-bar .btn { flex: 1; }
.mobile-action-bar .btn-icon { flex: 0 0 48px; width: 48px; height: auto; min-height: 44px; }
@media (max-width: 991.98px) { body.has-action-bar { padding-bottom: 84px; } body.has-action-bar .bottom-nav { display: none; } }
.status-banner { border-radius: 14px; padding: .85rem 1rem; display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; }
.status-banner .bi { font-size: 1.25rem; }
.status-banner.warning { background: var(--kb-gold-50); color: #6b5310; border: 1px solid #FBE3A1; }
.status-banner.danger { background: var(--kb-red-50); color: #8d0d12; border: 1px solid #ffd2d3; }
.status-banner.info { background: var(--kb-blue-50); color: var(--kb-blue-700); border: 1px solid var(--kb-blue-100); }
.status-banner.success { background: var(--kb-green-50); color: #0a6b35; border: 1px solid #c5ecd6; }

/* ---------- Seller profile ---------- */
.profile-cover { height: 150px; border-radius: 20px 20px 0 0; background: linear-gradient(120deg, var(--kb-blue-700), var(--kb-blue) 60%, var(--kb-red) 60.2%, #b50d13); position: relative; overflow: hidden; }
.profile-cover::after { content: ""; position: absolute; left: 58%; top: 0; width: 26px; height: 100%; background: var(--kb-gold); transform: skewX(-24deg); }
.profile-body { margin-top: -52px; position: relative; padding: 0 1.5rem 1.5rem; }
.profile-body .avatar-xl { border: 5px solid #fff; box-shadow: var(--kb-shadow); }
.rating-bar { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.rating-bar .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--kb-line-2); overflow: hidden; }
.rating-bar .bar span { display: block; height: 100%; background: var(--kb-gold); border-radius: 4px; }
.review-item { padding: 1rem 0; border-bottom: 1px solid var(--kb-line-2); }
.review-item:last-child { border-bottom: 0; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.star-input input { display: none; }
.star-input label { font-size: 1.8rem; color: #d5dbe6; cursor: pointer; transition: color .1s, transform .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--kb-gold); }
.star-input label:active { transform: scale(.9); }

/* ---------- Tabs (pill style) ---------- */
.nav-pills-soft { gap: .35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.nav-pills-soft::-webkit-scrollbar { display: none; }
.nav-pills-soft .nav-link { color: var(--kb-muted); font-weight: 700; font-size: .86rem; border-radius: 10px; padding: .5rem .85rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.nav-pills-soft .nav-link:hover { color: var(--kb-ink); background: #fff; }
.nav-pills-soft .nav-link.active { background: #fff; color: var(--kb-blue); box-shadow: var(--kb-shadow-sm); }
.nav-pills-soft .nav-link .count { font-size: .7rem; background: var(--kb-line-2); color: var(--kb-muted); border-radius: 6px; padding: .05rem .4rem; }
.nav-pills-soft .nav-link.active .count { background: var(--kb-blue-50); color: var(--kb-blue); }
.tab-shell { background: var(--kb-line-2); border-radius: 14px; padding: .3rem; display: inline-flex; max-width: 100%; }

/* ---------- Dashboard (account) ---------- */
.dash-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) { .dash-layout { grid-template-columns: minmax(0, 1fr); } }
.dash-nav { background: #fff; border: 1px solid var(--kb-line); border-radius: 18px; padding: .75rem; position: sticky; top: 140px; }
.dash-nav .dn-user { display: flex; align-items: center; gap: .7rem; padding: .5rem .5rem 1rem; border-bottom: 1px solid var(--kb-line-2); margin-bottom: .5rem; }
.dash-nav .dn-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kb-subtle); font-weight: 800; padding: .7rem .7rem .35rem; }
.dash-nav a { display: flex; align-items: center; gap: .7rem; padding: .58rem .7rem; border-radius: 11px; color: var(--kb-ink); font-weight: 600; font-size: .9rem; }
.dash-nav a .bi { font-size: 1.1rem; color: var(--kb-muted); width: 1.2rem; text-align: center; }
.dash-nav a:hover { background: var(--kb-bg); }
.dash-nav a.active { background: var(--kb-blue-50); color: var(--kb-blue); }
.dash-nav a.active .bi { color: var(--kb-blue); }
.dash-nav a .badge { margin-left: auto; }
.dash-mobile-nav { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; }
.dash-mobile-nav::-webkit-scrollbar { display: none; }
.dash-mobile-nav a { flex-shrink: 0; padding: .5rem .85rem; border-radius: 12px; background: #fff; border: 1px solid var(--kb-line); font-weight: 700; font-size: .82rem; color: var(--kb-ink); display: inline-flex; align-items: center; gap: .35rem; }
.dash-mobile-nav a.active { background: var(--kb-blue); color: #fff; border-color: var(--kb-blue); }
.stat-card { background: #fff; border: 1px solid var(--kb-line); border-radius: 16px; padding: 1.1rem; display: flex; gap: .9rem; align-items: center; height: 100%; transition: box-shadow .2s, transform .2s; }
a.stat-card:hover { box-shadow: var(--kb-shadow-sm); transform: translateY(-2px); }
.stat-card .si { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.stat-card .sv { font-size: 1.45rem; font-weight: 800; color: var(--kb-navy); line-height: 1.1; letter-spacing: -.02em; }
.stat-card .sl { font-size: .8rem; color: var(--kb-muted); font-weight: 600; }
.si-blue { background: var(--kb-blue-50); color: var(--kb-blue); }
.si-red { background: var(--kb-red-50); color: var(--kb-red); }
.si-gold { background: var(--kb-gold-50); color: #b98400; }
.si-green { background: var(--kb-green-50); color: var(--kb-green); }
.si-navy { background: #E9ECF4; color: var(--kb-navy); }
.si-purple { background: #F1EBFF; color: #6a35c9; }
@media (max-width: 575.98px) { .stat-card { padding: .85rem; gap: .65rem; } .stat-card .si { width: 40px; height: 40px; font-size: 1.1rem; } .stat-card .sv { font-size: 1.2rem; } }

/* My ads rows */
.my-ad { display: flex; gap: 1rem; padding: 1rem; background: #fff; border: 1px solid var(--kb-line); border-radius: 16px; transition: box-shadow .2s, border-color .3s; }
.my-ad + .my-ad { margin-top: .75rem; }
.my-ad.highlight { border-color: var(--kb-green); box-shadow: 0 0 0 4px rgba(18, 161, 80, .12); }
.my-ad .thumb { width: 150px; height: 112px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--kb-line-2); position: relative; }
.my-ad .thumb img { width: 100%; height: 100%; object-fit: cover; }
.my-ad .stats { display: flex; gap: 1rem; font-size: .8rem; color: var(--kb-muted); font-weight: 600; flex-wrap: wrap; }
.my-ad .stats span { display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 575.98px) { .my-ad { flex-direction: column; padding: .8rem; } .my-ad .thumb { width: 100%; height: 170px; } }

/* Empty states */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state .es-icon { width: 88px; height: 88px; border-radius: 28px; margin: 0 auto 1.1rem; display: grid; place-items: center; font-size: 2.3rem; background: var(--kb-blue-50); color: var(--kb-blue); position: relative; }
.empty-state .es-icon::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 9px; background: var(--kb-gold); transform: rotate(14deg); z-index: -1; }
.empty-state h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.empty-state p { color: var(--kb-muted); max-width: 420px; margin: 0 auto 1.2rem; }

/* ---------- Post ad ---------- */
.stepper { display: flex; gap: .5rem; align-items: center; overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper .step { display: flex; align-items: center; gap: .5rem; color: var(--kb-subtle); font-weight: 700; font-size: .84rem; white-space: nowrap; }
.stepper .step .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--kb-line-2); color: var(--kb-muted); font-size: .8rem; }
.stepper .step.done .n { background: var(--kb-green); color: #fff; }
.stepper .step.current { color: var(--kb-navy); }
.stepper .step.current .n { background: var(--kb-blue); color: #fff; box-shadow: 0 0 0 4px rgba(10, 79, 196, .15); }
.stepper .line { flex: 0 0 28px; height: 2px; background: var(--kb-line); border-radius: 2px; }
.pick-cat { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1.5px solid var(--kb-line); border-radius: 14px; background: #fff; color: var(--kb-ink); font-weight: 700; width: 100%; text-align: left; transition: all .15s; }
.pick-cat:hover { border-color: var(--kb-blue-100); background: var(--kb-blue-50); }
.pick-cat.active { border-color: var(--kb-blue); background: var(--kb-blue-50); color: var(--kb-blue); }
.pick-cat .icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.pick-cat .chev { margin-left: auto; color: var(--kb-subtle); }
.form-section { background: #fff; border: 1px solid var(--kb-line); border-radius: 18px; padding: 1.25rem; }
@media (min-width: 768px) { .form-section { padding: 1.6rem; } }
.form-section + .form-section { margin-top: 1rem; }
.form-section-title { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem; }
.form-section-title .n { width: 30px; height: 30px; border-radius: 10px; background: var(--kb-blue-50); color: var(--kb-blue); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.form-section-title h2 { font-size: 1.05rem; margin: 0; }
.form-section-title p { margin: 0; font-size: .8rem; color: var(--kb-muted); }
.uploader { border: 2px dashed #cbd4e4; border-radius: 16px; background: var(--kb-bg); padding: 1.5rem; text-align: center; transition: all .15s; cursor: pointer; }
.uploader:hover, .uploader.dragover { border-color: var(--kb-blue); background: var(--kb-blue-50); }
.uploader .up-icon { width: 58px; height: 58px; margin: 0 auto .7rem; border-radius: 16px; background: #fff; display: grid; place-items: center; font-size: 1.6rem; color: var(--kb-blue); box-shadow: var(--kb-shadow-sm); }
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .65rem; margin-top: .9rem; }
.upload-item { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--kb-line-2); border: 2px solid transparent; cursor: grab; transition: transform .15s, box-shadow .15s, border-color .15s; }
.upload-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.upload-item.is-cover { border-color: var(--kb-gold); }
.upload-item.dragging { opacity: .45; transform: scale(.96); }
.upload-item.drop-target { box-shadow: 0 0 0 3px var(--kb-blue); }
.upload-item .ui-actions { position: absolute; top: .35rem; right: .35rem; display: flex; gap: .3rem; }
.upload-item .ui-actions button { width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .94); color: var(--kb-ink); display: grid; place-items: center; font-size: .85rem; box-shadow: var(--kb-shadow-sm); }
.upload-item .ui-actions button:hover { color: var(--kb-red); }
.upload-item .cover-label { position: absolute; left: .35rem; bottom: .35rem; background: var(--kb-gold); color: var(--kb-navy); font-size: .65rem; font-weight: 800; text-transform: uppercase; padding: .15rem .45rem; border-radius: 6px; }
.upload-item .set-cover { position: absolute; left: .35rem; bottom: .35rem; background: rgba(11, 21, 51, .72); color: #fff; font-size: .65rem; font-weight: 700; border: 0; padding: .2rem .5rem; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.upload-item:hover .set-cover, .upload-item:focus-within .set-cover { opacity: 1; }
@media (hover: none) { .upload-item .set-cover { opacity: 1; } }
.upload-item .progress-ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .75); }
.upload-item .ui-num { position: absolute; left: .35rem; top: .35rem; background: rgba(11, 21, 51, .66); color: #fff; font-size: .65rem; font-weight: 800; border-radius: 6px; padding: .1rem .4rem; }
.sticky-submit { position: sticky; bottom: 0; z-index: 10; background: rgba(244, 246, 251, .92); backdrop-filter: blur(8px); padding: .85rem 0 calc(.85rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--kb-line); margin-top: 1rem; }
.tips-card { background: linear-gradient(180deg, var(--kb-blue-50), #fff); border: 1px solid var(--kb-blue-100); border-radius: 18px; padding: 1.2rem; }
.tips-card li { margin-bottom: .55rem; font-size: .87rem; color: var(--kb-ink); }
.tips-card li .bi { color: var(--kb-green); margin-right: .35rem; }

/* ---------- Boost ---------- */
.package-card { position: relative; border: 2px solid var(--kb-line); border-radius: 20px; background: #fff; padding: 1.4rem; cursor: pointer; transition: all .2s var(--kb-ease); height: 100%; display: flex; flex-direction: column; }
.package-card:hover { border-color: var(--kb-blue-100); box-shadow: var(--kb-shadow); transform: translateY(-2px); }
.package-card input { position: absolute; opacity: 0; pointer-events: none; }
.package-card.selected, .package-card:has(input:checked) { border-color: var(--kb-blue); box-shadow: 0 0 0 4px rgba(10, 79, 196, .12), var(--kb-shadow); }
.package-card .pk-check { position: absolute; top: 1rem; right: 1rem; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--kb-line); display: grid; place-items: center; color: transparent; transition: all .15s; }
.package-card:has(input:checked) .pk-check, .package-card.selected .pk-check { background: var(--kb-blue); border-color: var(--kb-blue); color: #fff; }
.package-card .pk-price { font-size: 2rem; font-weight: 800; color: var(--kb-navy); letter-spacing: -.03em; }
.package-card .pk-days { font-weight: 700; color: var(--kb-muted); }
.package-card ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; font-size: .87rem; }
.package-card ul .bi { color: var(--kb-green); margin-right: .35rem; }
.package-card .popular-tag { position: absolute; top: -12px; left: 1.2rem; background: linear-gradient(135deg, #F02A30, var(--kb-red)); color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .7rem; border-radius: 999px; }
.pay-method { position: relative; }
.pay-method input { position: absolute; opacity: 0; }
.pay-method label { display: flex; align-items: center; gap: .75rem; border: 2px solid var(--kb-line); border-radius: 14px; padding: .85rem 1rem; cursor: pointer; font-weight: 700; background: #fff; transition: all .15s; }
.pay-method input:checked + label { border-color: var(--kb-blue); background: var(--kb-blue-50); }
.pay-method .pm-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .78rem; }
.pay-instructions { background: var(--kb-navy); color: #fff; border-radius: 18px; padding: 1.3rem; position: relative; overflow: hidden; }
.pay-instructions::after { content: ""; position: absolute; right: -30px; top: -20px; width: 90px; height: 200%; background: var(--kb-red); transform: skewX(-24deg); opacity: .35; }
.pay-instructions .pi-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .15); position: relative; z-index: 1; }
.pay-instructions .pi-row:last-child { border-bottom: 0; }
.pay-instructions .pi-row span { color: rgba(255, 255, 255, .7); font-size: .85rem; }
.pay-instructions .pi-row strong { font-size: 1.05rem; }
.copy-btn { border: 0; background: rgba(255, 255, 255, .12); color: #fff; border-radius: 8px; padding: .2rem .5rem; font-size: .75rem; font-weight: 700; margin-left: .4rem; }
.copy-btn:hover { background: rgba(255, 255, 255, .22); }
.success-hero { text-align: center; padding: 2rem 1rem 1rem; }
.success-hero .check { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 2.6rem; color: #fff; background: linear-gradient(135deg, #22c06a, var(--kb-green)); box-shadow: 0 16px 30px -12px rgba(18, 161, 80, .6); animation: popIn .5s var(--kb-ease); }
.success-hero .check.pending { background: linear-gradient(135deg, #FFD34D, var(--kb-gold-600)); color: var(--kb-navy); box-shadow: 0 16px 30px -12px rgba(226, 164, 0, .6); }
@keyframes popIn { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 1.1rem 2.2rem; }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: var(--kb-line); }
.timeline li:last-child::before { display: none; }
.timeline .tl-dot { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: var(--kb-line-2); color: var(--kb-muted); }
.timeline li.done .tl-dot { background: var(--kb-green); color: #fff; }
.timeline li.current .tl-dot { background: var(--kb-gold); color: var(--kb-navy); box-shadow: 0 0 0 4px rgba(255, 194, 26, .25); }
.timeline li.failed .tl-dot { background: var(--kb-red); color: #fff; }
.boost-progress { height: 8px; border-radius: 4px; background: var(--kb-line-2); overflow: hidden; }
.boost-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--kb-red), var(--kb-gold)); border-radius: 4px; }

/* ---------- Chat ---------- */
.chat-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); background: #fff; border: 1px solid var(--kb-line); border-radius: 20px; overflow: hidden; height: calc(100vh - 230px); min-height: 520px; }
@media (max-width: 991.98px) { .chat-shell { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 200px); height: calc(100dvh - 200px); } .chat-shell.has-active .chat-list { display: none; } .chat-shell:not(.has-active) .chat-pane { display: none; } }
.chat-list { border-right: 1px solid var(--kb-line); display: flex; flex-direction: column; min-height: 0; }
.chat-list .cl-head { padding: 1rem; border-bottom: 1px solid var(--kb-line); }
.chat-list .cl-items { overflow-y: auto; flex: 1; }
.conv { display: flex; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--kb-line-2); color: var(--kb-ink); position: relative; transition: background .15s; }
.conv:hover { background: var(--kb-bg); }
.conv.active { background: var(--kb-blue-50); }
.conv.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kb-blue); }
.conv .c-thumb { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--kb-line-2); }
.conv .c-thumb img { width: 100%; height: 100%; object-fit: cover; }
.conv .c-name { font-weight: 700; font-size: .9rem; }
.conv .c-ad { font-size: .76rem; color: var(--kb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .c-last { font-size: .8rem; color: var(--kb-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .c-last { color: var(--kb-ink); font-weight: 700; }
.conv .c-time { font-size: .7rem; color: var(--kb-subtle); white-space: nowrap; }
.conv .c-badge { background: var(--kb-red); color: #fff; font-size: .66rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; }
.chat-pane .cp-head { padding: .75rem 1rem; border-bottom: 1px solid var(--kb-line); display: flex; align-items: center; gap: .75rem; }
.chat-pane .cp-ad { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; background: var(--kb-bg); border-bottom: 1px solid var(--kb-line); }
.chat-pane .cp-ad img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: .35rem; background: linear-gradient(180deg, #fbfcfe, #f6f8fc); }
.msg { max-width: min(78%, 520px); padding: .6rem .85rem; border-radius: 16px; font-size: .92rem; line-height: 1.45; position: relative; word-wrap: break-word; white-space: pre-line; animation: msgIn .2s var(--kb-ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.them { align-self: flex-start; background: #fff; border: 1px solid var(--kb-line); border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; background: var(--kb-blue); color: #fff; border-bottom-right-radius: 6px; }
.msg .m-time { display: block; font-size: .66rem; margin-top: .2rem; opacity: .7; text-align: right; }
.msg.me .m-time .bi-check2-all.read { color: var(--kb-gold); opacity: 1; }
.msg-day { align-self: center; font-size: .72rem; font-weight: 700; color: var(--kb-muted); background: #fff; border: 1px solid var(--kb-line); border-radius: 999px; padding: .2rem .7rem; margin: .6rem 0; }
.chat-compose { border-top: 1px solid var(--kb-line); padding: .75rem; display: flex; gap: .5rem; align-items: flex-end; background: #fff; }
.chat-compose textarea { resize: none; max-height: 140px; border-radius: 14px; }
.quick-replies { display: flex; gap: .4rem; overflow-x: auto; padding: 0 .75rem .6rem; scrollbar-width: none; background: #fff; }
.quick-replies::-webkit-scrollbar { display: none; }
.quick-replies button { flex-shrink: 0; border: 1px solid var(--kb-blue-100); background: var(--kb-blue-50); color: var(--kb-blue); border-radius: 999px; padding: .3rem .75rem; font-size: .78rem; font-weight: 700; }

/* ---------- Notifications ---------- */
.notif-item { display: flex; gap: .8rem; padding: .85rem 1rem; color: var(--kb-ink); border-bottom: 1px solid var(--kb-line-2); position: relative; transition: background .15s; }
.notif-item:hover { background: var(--kb-bg); color: var(--kb-ink); }
.notif-item.unread { background: #F7FAFF; }
.notif-item.unread::after { content: ""; position: absolute; right: 1rem; top: 1.1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--kb-blue); }
.notif-item .n-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.05rem; }
.notif-item .n-title { font-weight: 700; font-size: .88rem; }
.notif-item .n-msg { font-size: .82rem; color: var(--kb-muted); line-height: 1.4; }
.notif-item .n-time { font-size: .72rem; color: var(--kb-subtle); margin-top: .15rem; }
.n-blue { background: var(--kb-blue-50); color: var(--kb-blue); }
.n-green { background: var(--kb-green-50); color: var(--kb-green); }
.n-red { background: var(--kb-red-50); color: var(--kb-red); }
.n-gold { background: var(--kb-gold-50); color: #b98400; }
.n-gray { background: var(--kb-line-2); color: var(--kb-muted); }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100vh - 140px); display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none !important; } }
.auth-side { background: linear-gradient(140deg, var(--kb-blue-700), var(--kb-blue) 60%); color: #fff; padding: 3rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.auth-side::before { content: ""; position: absolute; z-index: -1; right: -100px; top: -10%; width: 300px; height: 130%; background: var(--kb-red); transform: skewX(-24deg); opacity: .9; }
.auth-side::after { content: ""; position: absolute; z-index: -1; right: 220px; top: -10%; width: 34px; height: 130%; background: var(--kb-gold); transform: skewX(-24deg); }
.auth-side h2 { color: #fff; font-size: 2rem; }
.auth-side .perk { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; font-weight: 600; }
.auth-side .perk .bi { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 1.1rem; }
.auth-form-col { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h1 { font-size: 1.65rem; }
.divider-text { display: flex; align-items: center; gap: .75rem; color: var(--kb-subtle); font-size: .8rem; font-weight: 600; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--kb-line); }
.demo-creds { background: var(--kb-gold-50); border: 1px dashed #F0CE6A; border-radius: 14px; padding: .8rem 1rem; font-size: .82rem; }
.demo-creds button { border: 0; background: #fff; border-radius: 8px; padding: .2rem .55rem; font-weight: 700; font-size: .75rem; color: var(--kb-navy); box-shadow: var(--kb-shadow-xs); }

/* ---------- Static pages ---------- */
.prose { font-size: 1rem; line-height: 1.75; color: var(--kb-ink); }
.prose h2 { font-size: 1.45rem; margin: 1.6rem 0 .7rem; }
.prose h3 { font-size: 1.12rem; margin: 1.5rem 0 .5rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.page-hero { background: linear-gradient(135deg, var(--kb-blue-700), var(--kb-blue)); color: #fff; padding: 2.5rem 0; position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -20%; width: 240px; height: 140%; background: var(--kb-red); transform: skewX(-24deg); opacity: .85; }
.page-hero h1 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.page-hero p { color: rgba(255, 255, 255, .82); }
.page-hero .breadcrumb-item a, .page-hero .breadcrumb-item.active, .page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .8); }
.faq-accordion .accordion-item { border: 1px solid var(--kb-line); border-radius: 14px !important; overflow: hidden; margin-bottom: .6rem; }
.faq-accordion .accordion-button { font-weight: 700; color: var(--kb-navy); padding: 1rem 1.15rem; }
.faq-accordion .accordion-button:not(.collapsed) { background: var(--kb-blue-50); color: var(--kb-blue); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 4px rgba(10, 79, 196, .12); }
.contact-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-item .ci-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--kb-blue-50); color: var(--kb-blue); font-size: 1.2rem; flex-shrink: 0; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; top: 86px; right: 16px; z-index: 2100; display: flex; flex-direction: column; gap: .6rem; max-width: calc(100vw - 32px); width: 380px; pointer-events: none; }
@media (max-width: 575.98px) { .toast-stack { top: auto; bottom: 92px; right: 12px; left: 12px; width: auto; } }
.kb-toast { pointer-events: auto; display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--kb-line); border-left: 4px solid var(--kb-green); border-radius: 14px; padding: .85rem 1rem; box-shadow: var(--kb-shadow-lg); animation: toastIn .3s var(--kb-ease); font-size: .9rem; font-weight: 600; }
.kb-toast.error { border-left-color: var(--kb-red); }
.kb-toast.info { border-left-color: var(--kb-blue); }
.kb-toast .bi { font-size: 1.2rem; }
.kb-toast.success .bi { color: var(--kb-green); } .kb-toast.error .bi { color: var(--kb-red); } .kb-toast.info .bi { color: var(--kb-blue); }
.kb-toast .t-close { margin-left: auto; border: 0; background: transparent; color: var(--kb-subtle); padding: 0 .2rem; }
.kb-toast.hide { animation: toastOut .25s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- Modals ---------- */
.modal-content { border: 0; border-radius: 20px; box-shadow: var(--kb-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--kb-line-2); padding: 1.1rem 1.35rem; }
.modal-title { font-weight: 800; color: var(--kb-navy); font-size: 1.1rem; }
.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--kb-line-2); padding: .9rem 1.35rem; }
.confirm-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: .9rem; }
.offcanvas { border: 0 !important; }
.offcanvas-header { border-bottom: 1px solid var(--kb-line); }
.offcanvas-title { font-weight: 800; color: var(--kb-navy); }

/* ---------- Skeleton ---------- */
.skeleton { background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.page-loading .listing-results { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* ---------- Tables ---------- */
.table { --bs-table-border-color: var(--kb-line-2); font-size: .9rem; margin-bottom: 0; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--kb-muted); font-weight: 800; background: var(--kb-bg); border-bottom: 1px solid var(--kb-line); padding: .75rem 1rem; white-space: nowrap; }
.table > tbody td { padding: .8rem 1rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F8FAFE; }
.table-card { background: #fff; border: 1px solid var(--kb-line); border-radius: 16px; overflow: hidden; }
.table-thumb { width: 54px; height: 42px; border-radius: 9px; object-fit: cover; background: var(--kb-line-2); }

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-border-radius: 10px; --bs-pagination-color: var(--kb-ink); --bs-pagination-border-color: var(--kb-line); --bs-pagination-hover-bg: var(--kb-blue-50); --bs-pagination-hover-color: var(--kb-blue); --bs-pagination-active-bg: var(--kb-blue); --bs-pagination-active-border-color: var(--kb-blue); gap: .3rem; flex-wrap: wrap; }
.page-link { border-radius: 10px !important; font-weight: 700; min-width: 40px; text-align: center; }
nav[aria-label="Pagination Navigation"] p.small { display: none; }

/* ---------- Utilities / animation ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--kb-ease), transform .6s var(--kb-ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.back-to-top { position: fixed; right: 18px; bottom: 96px; z-index: 1020; width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--kb-navy); color: #fff; box-shadow: var(--kb-shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: all .2s; }
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 992px) { .back-to-top { bottom: 24px; } }
.verify-bar { background: var(--kb-gold-50); border-bottom: 1px solid #FBE3A1; font-size: .86rem; color: #6b5310; padding: .5rem 0; }

/* ---------- Language switch (EN / বাংলা) ---------- */
.lang-switch { display: inline-flex; align-items: center; background: var(--kb-bg); border: 1.5px solid var(--kb-line); border-radius: 999px; padding: 2px; flex-shrink: 0; }
.lang-switch a { font-size: .74rem; font-weight: 800; color: var(--kb-muted); padding: .22rem .55rem; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.lang-switch a.bn { font-family: "Hind Siliguri", sans-serif; font-size: .8rem; font-weight: 700; }
.lang-switch a.active { background: var(--kb-blue); color: #fff; }
.lang-switch a:not(.active):hover { color: var(--kb-blue); }
.site-footer .lang-switch { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.site-footer .lang-switch a { color: rgba(255, 255, 255, .75); font-size: .74rem; }
.site-footer .lang-switch a.bn { font-size: .8rem; }
.site-footer .lang-switch a.active { color: #fff; }
/* Bangla script needs a little more line height and no negative tracking */
html[lang="bn"] body { font-family: "Hind Siliguri", "Plus Jakarta Sans", system-ui, sans-serif; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6, html[lang="bn"] .btn { letter-spacing: 0; }
html[lang="bn"] .hero h1 { line-height: 1.25; }
html[lang="bn"] .ad-badge, html[lang="bn"] .filter-section h6, html[lang="bn"] .spec small, html[lang="bn"] .dn-label { text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   Mobile & tablet refinements
   Everything below only tightens sizing on smaller screens; desktop is unchanged.
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Header: hide the category strip once the user scrolls so the sticky header stays slim */
  .cat-strip { transition: max-height .2s var(--kb-ease); max-height: 60px; overflow: hidden; }
  .site-header.is-compact .cat-strip { max-height: 0; }
  .sticky-side, .dash-nav { position: static; }
  /* Filter drawer: full-height sheet with the Apply button always reachable */
  .offcanvas-lg.offcanvas-start { width: min(92vw, 380px); }
  .listing-aside { margin-top: 0 !important; padding: 0; height: 0; }
  .offcanvas-lg .filter-card { overflow: visible; border: 0; border-radius: 0; }
  .offcanvas-lg .offcanvas-body { padding-bottom: 0 !important; }
  .offcanvas-lg .filter-actions { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--kb-line); z-index: 2; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .section { padding: 1.75rem 0; }
  .site-footer { margin-top: 2rem; padding-top: 2.25rem; }
  .footer-bottom { margin-top: 1.75rem; }
}

@media (max-width: 767.98px) {
  /* Typography & touch targets */
  body { font-size: .92rem; }
  .btn-lg { --bs-btn-padding-y: .72rem; --bs-btn-padding-x: 1.2rem; --bs-btn-font-size: 1rem; }
  /* 16px inputs stop iOS Safari from zooming in when a field is focused */
  .form-control, .form-select, .search-pill .search-input, .hero-search input, .hero-search select, .chat-compose textarea { font-size: 16px; }
  .form-control-lg, .form-select-lg { padding: .72rem .9rem; }
  .form-select-sm { font-size: 14px; }

  /* Hero: compact so content starts above the fold */
  .hero { padding: 1.25rem 0 3rem; }
  .hero h1 { font-size: 1.6rem; margin-bottom: .5rem !important; }
  .hero .lead { font-size: .92rem; margin-bottom: 1rem !important; }
  .tagline-pill { font-size: .78rem; margin-bottom: .75rem !important; }
  .hero-search { gap: .45rem; border-radius: 16px; padding: .5rem; }
  .hero-search .field { padding: 0 .65rem; }
  .hero-search input, .hero-search select { padding: .62rem 0; }
  .hero-search .btn { --bs-btn-padding-y: .65rem; }
  .hero-quick { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--bs-gutter-x) * -.5); padding-inline: calc(var(--bs-gutter-x) * .5); margin-top: .75rem !important; }
  .hero-quick::-webkit-scrollbar { display: none; }
  .hero-quick a { flex-shrink: 0; white-space: nowrap; margin-bottom: 0; }
  .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1rem; text-align: center; }
  .hero-stats .stat strong { font-size: 1.05rem; }
  .hero-stats .stat span { font-size: .68rem; line-height: 1.2; display: block; }
  .overlap-up { margin-top: -2rem; }

  /* Section heads */
  .section { padding: 1.4rem 0; }
  .section-head { margin-bottom: .85rem; align-items: center; }
  .section-head h2 { font-size: 1.12rem; gap: .5rem; }
  .section-head h2 .mark { height: 20px; width: 6px; }
  .section-head p { font-size: .8rem; }
  .see-all { font-size: .82rem; }
  .surface-pad { padding: 1rem; }

  /* Promo banners become a swipeable row instead of three tall stacked cards */
  .promo-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; }
  .promo-row::-webkit-scrollbar { display: none; }
  .promo-row > * { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
  .promo-card { min-height: 150px; padding: 1.1rem 1.15rem; border-radius: 16px; }
  .promo-card h3 { font-size: 1.05rem; }
  .promo-card p { font-size: .82rem; }
  .promo-card .promo-cta { margin-top: .75rem; font-size: .8rem; padding: .38rem .8rem; }
  .promo-card .promo-icon { font-size: 3.2rem; }

  /* Locations */
  .loc-card { padding: .65rem .7rem; gap: .6rem; border-radius: 14px; }
  .loc-card .pin { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
  .loc-card strong { font-size: .88rem; }
  .loc-card small { font-size: .72rem; }

  /* Popular searches: a single swipeable line */
  .tag-cloud { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
  .tag-cloud::-webkit-scrollbar { display: none; }
  .tag-cloud a { flex-shrink: 0; white-space: nowrap; padding: .42rem .8rem; font-size: .82rem; }

  /* Trust + CTA */
  .trust-item { gap: .75rem; }
  .trust-item .ti-icon { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 13px; }
  .trust-item h3 { font-size: .92rem; }
  .trust-item p { font-size: .82rem; }
  .cta-band { padding: 1.4rem 1.25rem; border-radius: 18px; }
  .cta-band h2 { font-size: 1.25rem; }
  .cta-band p { font-size: .88rem; }

  /* Listing */
  .page-head { padding: 1rem 0 .25rem; }
  .page-head h1 { font-size: 1.25rem; }
  .results-bar { gap: .5rem; margin-bottom: .75rem; }
  .results-bar > div { flex-wrap: wrap; }
  .subcat-pills a { padding: .42rem .75rem; font-size: .8rem; border-radius: 10px; }
  .filter-section { padding: .85rem 1rem; }

  /* Ad detail */
  .gallery { border-radius: 14px; }
  .gallery-main .g-nav { width: 36px; height: 36px; font-size: 1rem; }
  .gallery-thumbs button { flex-basis: 64px; height: 50px; }
  .ad-price { font-size: 1.5rem; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .spec { padding: .55rem .7rem; }
  .spec strong { font-size: .88rem; word-break: break-word; }
  .description { font-size: .92rem; }

  /* Seller profile */
  .profile-cover { height: 110px; border-radius: 16px 16px 0 0; }
  .profile-body { padding: 0 1rem 1rem; margin-top: -44px; }
  .profile-body .avatar-xl { width: 84px; height: 84px; font-size: 1.6rem; }

  /* Dashboard */
  .dash-mobile-nav { margin-inline: calc(var(--bs-gutter-x) * -.5); padding-inline: calc(var(--bs-gutter-x) * .5); }
  .my-ad { flex-direction: row; flex-wrap: wrap; gap: .75rem; padding: .75rem; }
  .my-ad .thumb { width: 96px; height: 80px; border-radius: 10px; }
  .my-ad > .flex-grow-1 { flex-basis: calc(100% - 96px - .75rem); }
  .my-ad .btn-sm { --bs-btn-padding-x: .6rem; --bs-btn-padding-y: .32rem; --bs-btn-font-size: .78rem; }
  .my-ad .thumb .ad-badge { font-size: .56rem; padding: .18rem .4rem; }
  .my-ad .stats { gap: .2rem .7rem; font-size: .74rem; }

  /* Post ad / boost */
  .form-section { padding: 1rem; border-radius: 16px; }
  .form-section-title { margin-bottom: .85rem; }
  .pick-cat { padding: .7rem .8rem; border-radius: 12px; font-size: .92rem; }
  .pick-cat .icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 10px; }
  .uploader { padding: 1.1rem; }
  .sticky-submit { padding-top: .6rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
  .sticky-submit > div { flex-wrap: nowrap !important; }
  .sticky-submit .btn { white-space: nowrap; }
  .upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .package-card { padding: 1.1rem; border-radius: 16px; }
  .package-card .pk-price { font-size: 1.6rem; }
  .pay-instructions .pi-row { flex-wrap: wrap; gap: .25rem .75rem; }
  .pay-instructions .pi-row strong { font-size: .95rem; word-break: break-all; }

  /* Chat */
  .chat-shell { border-radius: 16px; min-height: 420px; }
  .msg { max-width: 86%; font-size: .9rem; }
  .chat-messages { padding: 1rem .75rem; }

  /* Auth & static pages */
  .auth-form-col { padding: 1.25rem 1rem 1.5rem; align-items: flex-start; }
  .auth-card h1 { font-size: 1.4rem; }
  .page-hero { padding: 1.5rem 0; }
  .page-hero::before { width: 140px; right: -80px; opacity: .55; }
  .prose { font-size: .95rem; }
  .prose h2 { font-size: 1.2rem; }

  /* Tables scroll inside their card instead of squashing */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table > thead th, .table > tbody td { padding: .6rem .7rem; }

  /* Modals as bottom sheets feel natural on phones */
  .modal-dialog-centered { align-items: flex-end; min-height: calc(100% - .5rem); }
  .modal-dialog { margin: .5rem; }
  .modal-header { padding: .9rem 1.1rem; }
  .modal-body { padding: 1.1rem; }
  .modal-footer { padding: .75rem 1.1rem; }
  .modal-footer .btn { flex: 1; }

  /* Footer */
  .site-footer h4 { margin-bottom: .65rem; font-size: .9rem; }
  .site-footer a { font-size: .84rem; }
  .site-footer ul { gap: .45rem; }
  .footer-logo img { height: 38px; }
}

@media (max-width: 575.98px) {
  /* Header */
  .header-main { padding: .5rem 0 0; }
  .header-main > .container-xxl:first-child { gap: .5rem !important; }
  .brand-logo img { height: 34px; }
  .header-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .mobile-search { padding-top: .45rem; padding-bottom: .55rem; }
  .mobile-search .search-pill { border-radius: 12px; }
  .mobile-search .search-input { padding: .55rem .75rem .55rem .4rem; }
  .cat-strip a { font-size: .8rem; padding: .35rem .7rem; }

  /* Category tiles: 4 compact tiles per row */
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .35rem; }
  .cat-tile { padding: .55rem .2rem .6rem; gap: .35rem; border-radius: 12px; border-color: transparent; background: transparent; }
  .cat-tile:hover { transform: none; box-shadow: none; }
  .cat-tile .icon { width: 48px; height: 48px; font-size: 1.3rem; border-radius: 14px; }
  .cat-tile .name { font-size: .72rem; font-weight: 600; line-height: 1.2; }
  .cat-tile .count { display: none; }

  /* Ad cards: always two per row on phones (also on the listing page) */
  .ad-grid, .ad-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .ad-list.ad-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-card { border-radius: 12px; }
  .ad-card:hover { transform: none; }
  .ad-card .badges { top: .4rem; left: .4rem; gap: .25rem; max-width: calc(100% - 44px); }
  .ad-badge { font-size: .58rem; padding: .2rem .42rem; letter-spacing: .02em; }
  .ad-card .media .ad-badge.blue { font-size: 0; gap: 0; padding: .2rem .3rem; }
  .ad-card .media .ad-badge.blue .bi { font-size: .7rem; }
  .ad-card .price { font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
  .ad-card .price .neg { margin-left: 0; font-size: .62rem; }
  .ad-card .meta { font-size: .68rem; }
  .ad-card .meta span:first-child { min-width: 0; }
  .fav-btn { top: .4rem; right: .4rem; }
  .ad-list .ad-card .media { width: 120px; min-height: 110px; }
  .ad-list .ad-card .title { font-size: .86rem; }
  .ad-list .ad-card .media .badges { max-width: calc(100% - .8rem); }
  .ad-list .ad-card .fav-btn { left: calc(120px - 2.4rem); right: auto; }
  .rail { grid-auto-columns: 46%; gap: .6rem; }

  /* Ad detail */
  .ad-title { font-size: 1.15rem; }
  .ad-meta { font-size: .78rem; gap: .3rem .8rem; }
  .seller-stats strong { font-size: .95rem; }

  /* Dashboard stat cards */
  .stat-card { padding: .7rem; gap: .55rem; border-radius: 14px; }
  .stat-card .si { width: 36px; height: 36px; font-size: 1rem; border-radius: 11px; }
  .stat-card .sv { font-size: 1.1rem; }
  .stat-card .sl { font-size: .72rem; line-height: 1.25; }
  .dash-mobile-nav a { padding: .42rem .7rem; font-size: .78rem; }
  .nav-pills-soft .nav-link { padding: .42rem .65rem; font-size: .8rem; }

  /* Misc */
  .empty-state { padding: 2rem 1rem; }
  .empty-state .es-icon { width: 68px; height: 68px; font-size: 1.8rem; border-radius: 22px; }
  .back-to-top { right: 12px; bottom: 88px; width: 40px; height: 40px; }
  body.has-action-bar .back-to-top { bottom: 96px; }
  .mobile-action-bar { padding: .5rem .65rem calc(.5rem + env(safe-area-inset-bottom)); }
  .breadcrumb { font-size: .78rem; }
  .pagination .page-link { min-width: 36px; padding: .35rem .55rem; }
}

@media (max-width: 359.98px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .lang-switch a { padding: .2rem .4rem; }
}