/* ═══════════════════════════════════════════════════════════════
   MyUsedRobot — Mobile CSS  v4.0  (Amazon-inspired)
   Breakpoints: 480 · 600 · 768 · 1024
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1. GLOBAL RESETS
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  *,*::before,*::after{box-sizing:border-box}
  body{overflow-x:hidden;font-size:14px;-webkit-text-size-adjust:100%}
  img,svg,video{max-width:100%;height:auto;display:block}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  button,a{min-height:36px;touch-action:manipulation}
}

/* ══════════════════════════════════════════════════════════════
   2. TOPBAR — Mobile redesign v2
   Desktop: Logo | Search | [Sell] [Theme] | Auth
   Mobile:  Logo | Search | [🏠] [🤖] | [Sign In/Avatar] | [☰]
   ══════════════════════════════════════════════════════════════ */

/* ── Visibility helpers ── */
.tb-desktop      { display: flex !important }
.tb-desktop-block{ display: block !important }
.tb-mobile       { display: none !important }

@media (max-width: 768px) {
  .tb-desktop       { display: none !important }
  .tb-desktop-block { display: none !important }
  .tb-mobile        { display: flex !important }
}

@media (max-width: 768px) {
/* ── Base topbar ── */
.topbar {
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

/* ── Row 1 ── */
.topbar-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  padding: 8px 10px;
  gap: 8px;
  flex-wrap: nowrap;
}

/* ── Logo ── */
.logo {
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-mid { opacity: .4 }

/* ── Search ── */
.search-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  max-width: none;
}
.search-select { display: none }
.search-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  font-size: 13px;
  border-radius: 6px 0 0 6px;
  border-right: none;
  padding: 0 10px;
}
.search-btn {
  height: 36px;
  width: 42px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 0 6px 6px 0;
  font-size: 16px;
}

/* ── Right side ── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Mobile pin buttons (Home + Listings) ── */
.mob-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 16px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.mob-pin-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

/* ── Login button mobile ── */


/* ── Hamburger button ── */
.mob-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  flex-shrink: 0;
  transition: border-color .18s, background .18s;
}
.mob-menu-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
}

@media (max-width: 768px) {
  .btn-login {
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 6px;
  }
  .btn-user { height: 34px; padding: 0; gap: 4px }
  #user-name { display: none }
}
@media (max-width: 768px) {
  .mob-menu-btn { display: flex }
}

/* ── Desktop catnav ── */
.catnav {
  background: var(--white);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.catnav::-webkit-scrollbar { display: none }
.catnav-inner {
  display: flex;
  padding: 0 10px;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
}
.cat-link {
  padding: 8px 14px;
  font-size: 12.5px;
  white-space: nowrap;
  min-height: 38px;
  scroll-snap-align: start;
}

/* ═══════════════════════════════════════════
   MOBILE HAMBURGER MENU
═══════════════════════════════════════════ */
.mob-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  z-index: 300;
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s cubic-bezier(.22,.61,.36,1);
}
.mob-menu.open {
  display: block;
  max-height: 90vh;
  overflow-y: auto;
  animation: mur-mob-menu-in .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes mur-mob-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User banner inside menu */
.mob-menu-user {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--accent-light);
  border-bottom: 1px solid rgba(0,168,120,.15);
}
.mob-menu-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
}
.mob-menu-dashboard {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  transition: background .18s;
}
.mob-menu-dashboard:hover {
  background: var(--accent);
  color: #fff;
}

/* Nav section */
.mob-menu-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.mob-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--surface);
  transition: background .15s, color .15s;
  min-height: 48px;
}
.mob-menu-link:last-child { border-bottom: none }
.mob-menu-link:hover {
  background: var(--accent-light);
  color: var(--accent-dark);
}
.mob-menu-link:active { background: var(--accent-light) }

/* Actions section */
.mob-menu-actions { padding: 12px 16px }
.mob-menu-cta {
  display: block;
  text-align: center;
  background: var(--accent);
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  transition: background .18s;
}
.mob-menu-cta:hover { background: var(--accent-dark) }
.mob-menu-/* footer base style in topbar.css */
.mob-menu-theme,
.mob-menu-logout {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  transition: background .18s;
}
.mob-menu-logout {
  color: var(--red);
  border-color: rgba(229,57,53,.3);
}
.mob-menu-logout:hover { background: var(--red); color: #fff }
.mob-menu-theme:hover  { background: var(--accent-light); color: var(--accent) }

@media (max-width: 480px) {
  .topbar-inner { padding: 6px 8px; gap: 6px }
  .logo { font-size: 12px; letter-spacing: .5px }
  .search-input { height: 34px; font-size: 12px }
  .search-btn   { height: 34px; width: 38px }
  .btn-login    { padding: 0 8px; font-size: 10px; height: 30px }
  .mob-pin-btn  { width: 30px; height: 30px; font-size: 14px }
  .mob-menu-btn { width: 30px; height: 30px; font-size: 16px }
}

/* ══════════════════════════════════════════════════════════════
   3. PAGE CONTAINER
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .page{padding:12px 10px}
  .page-header{margin-bottom:14px}
  .page-title{font-size:18px!important;line-height:1.3}
  .page-sub{font-size:12px!important;margin-top:4px}
}
@media(max-width:480px){
  .page{padding:10px 8px}
}

/* ══════════════════════════════════════════════════════════════
   4. ADS SLOT
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .gads-slot,.gads{
    min-height:50px;max-height:60px;
    overflow:hidden;margin-bottom:10px
  }
  .gads-placeholder{font-size:9px;padding:8px}
}

/* ══════════════════════════════════════════════════════════════
   5. ROTATING BANNER
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .rot-banner{
    height:auto;min-height:160px;
    border-radius:10px;margin:10px 0
  }
  .rb-slide{
    flex-direction:column;align-items:flex-start;
    padding:16px 14px;gap:8px;min-height:160px
  }
  .rb-badge{font-size:8px;padding:2px 8px}
  .rb-title{font-size:14px;line-height:1.3;max-width:100%}
  .rb-sub{font-size:11px}
  .rb-price{font-size:15px}
  .rb-cta{padding:8px 14px;font-size:12px;align-self:flex-start;min-height:34px}
  .rb-ctrl-left,.rb-ctrl-right{width:26px;height:26px;font-size:13px}
  .rb-dots{bottom:8px}
}
@media(max-width:480px){
  .rb-slide{padding:12px 10px;min-height:140px}
  .rb-title{font-size:13px}
  .rb-sub{display:none}
}

/* ══════════════════════════════════════════════════════════════
   6. FILTER BAR
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .filter-bar{
    padding:8px 0;
    gap:6px;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    align-items:center
  }
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-label{display:none}
  .filter-sep{display:none}
  .filter-chip{
    font-size:11px;padding:5px 11px;
    height:30px;white-space:nowrap;flex-shrink:0;
    border-radius:20px
  }
  .filter-brand,
  #filter-country,
  #filter-price{
    font-size:11px;padding:4px 8px;
    height:30px;flex-shrink:0;
    max-width:120px;border-radius:6px
  }
  .filter-sort{
    font-size:11px;padding:4px 8px;
    height:30px;flex-shrink:0;border-radius:6px
  }
  .results-bar{
    flex-direction:column;align-items:flex-start;gap:6px
  }
  #results-count{font-size:11px}
}

/* ══════════════════════════════════════════════════════════════
   7. LISTINGS GRID — 2-col on phones, 1-col on tiny screens
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .listings-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sponsored-listing{
    grid-column:span 2;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr auto
  }
  .sl-img{min-height:100px}
  .sl-action{
    border-left:none;border-top:1px solid var(--border);
    flex-direction:row;align-items:center;gap:12px;
    padding:12px 14px
  }
}
@media(max-width:600px){
  .listings-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  /* Sponsored — horizontal mini layout */
  .sponsored-listing{
    grid-column:span 2;
    display:grid;
    grid-template-columns:90px 1fr;
    grid-template-rows:1fr auto
  }
  .sl-img{
    grid-row:span 1;
    min-height:90px;max-width:90px;
    border-radius:10px 0 0 0
  }
  .sl-body{padding:10px 10px 8px}
  .sl-eyebrow{font-size:8px;margin-bottom:3px}
  .sl-title{font-size:13px;margin-bottom:4px;
    -webkit-line-clamp:2;display:-webkit-box;
    -webkit-box-orient:vertical;overflow:hidden}
  .sl-desc{display:none}
  .sl-action{
    grid-column:span 2;
    flex-direction:row;align-items:center;
    justify-content:space-between;
    gap:8px;padding:8px 12px;
    border-left:none;border-top:1px solid var(--border)
  }
  .sl-price{font-size:18px}
  .sl-price-sub{font-size:10px}
  .sl-btn{padding:7px 12px;font-size:11px;white-space:nowrap;min-height:30px}

  /* Regular listing cards */
  .lc-img{height:100px}
  .lc-body{padding:8px}
  .lc-brand{font-size:8px}
  .lc-name{font-size:11px;line-height:1.3}
  .lc-price{font-size:14px}
  .lc-footer{padding:5px 8px;gap:4px}
  .lc-fav{width:22px;height:22px;font-size:13px}
  .lc-location{font-size:9px}
  .lc-spec{font-size:9px}
  .lc-badges{gap:3px}
  .lc-badge{font-size:7px;padding:1px 5px}
}
@media(max-width:360px){
  .listings-grid{grid-template-columns:1fr;gap:8px}
  .sponsored-listing{
    grid-column:span 1;
    grid-template-columns:1fr
  }
  .sl-img{max-width:100%;min-height:130px}
  .sl-action{grid-column:span 1}
}

/* ══════════════════════════════════════════════════════════════
   8. MAIN GRID (content + sidebar)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .main-grid{grid-template-columns:1fr;gap:16px}
  .sidebar{
    display:grid;grid-template-columns:1fr 1fr;gap:12px
  }
}
@media(max-width:600px){
  .main-grid{gap:12px}
  .sidebar{grid-template-columns:1fr}
  .sb-block:nth-child(n+3){display:none} /* show max 2 sidebar blocks */
}

/* ══════════════════════════════════════════════════════════════
   9. CONTENT GRIDS (news, manufacturers, parts, partners)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .section-head{margin-bottom:10px}
  .section-title{font-size:10px;letter-spacing:1px}
  .section-link{font-size:11px}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   10. CARDS (news, reviews, parts, partners)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .card-img{height:130px!important}
  .card-body{padding:12px}
  .card-eyebrow{font-size:8px}
  .card-title{font-size:13px;line-height:1.4}
  .card-desc{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:11px
  }
  .card-meta{font-size:10px;gap:4px}
  /* Hero card: remove span 2 on mobile */
  .card[style*="grid-column:span 2"]{grid-column:span 1!important}
}

/* ══════════════════════════════════════════════════════════════
   11. LISTING DETAIL PAGE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .detail-wrap{
    grid-template-columns:1fr!important;
    gap:14px
  }
  /* Price card first on mobile (Amazon pattern) */
  .detail-sidebar{order:-1}
  .detail-img{height:220px!important}
  .detail-specs{grid-template-columns:repeat(2,1fr)!important}
  .detail-name{font-size:20px}
  .similar-grid{grid-template-columns:repeat(2,1fr)}
  .market-bar{padding:10px 12px}
  .locked-box{padding:16px 14px}
}
@media(max-width:480px){
  .detail-img{height:180px!important}
  .detail-body{padding:14px}
  .detail-name{font-size:17px;line-height:1.3}
  .detail-specs{grid-template-columns:1fr!important}
  .detail-spec{padding:8px 10px}
  .price-main{font-size:24px}
  .price-card{padding:14px}
  .similar-grid{grid-template-columns:1fr}
  .market-bar{flex-direction:column;gap:6px}
}

/* ══════════════════════════════════════════════════════════════
   12. SELL / FORM
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .form-row{grid-template-columns:1fr!important}
  .form-row.thirds{grid-template-columns:1fr!important}
  .form-row.halves{grid-template-columns:1fr!important}
  .condition-toggle{grid-template-columns:1fr 1fr;gap:6px}
  .contact-opts{grid-template-columns:1fr}
  .form-card{padding:14px 12px;border-radius:8px;margin-bottom:10px}
  .form-section-title{font-size:13px}
  .form-label{font-size:12px;margin-bottom:4px}
  .form-input,.form-select,.form-textarea{
    font-size:14px;padding:9px 12px
  }
  .steps{display:none}
  .form-actions{flex-direction:column;gap:8px}
  .btn-back,.btn-submit{
    width:100%;justify-content:center;text-align:center
  }
  .upload-area{padding:16px 12px}
  .photo-preview-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .condition-toggle{grid-template-columns:1fr}
  .photo-preview-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   13. REGISTER
   ══════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  .register-page{padding:16px 10px 32px}
  .register-card{padding:22px 14px;border-radius:10px;max-width:100%}
  .register-logo{font-size:14px}
  .register-title{font-size:18px}
}

/* ══════════════════════════════════════════════════════════════
   14. WAITLIST / INDEX HERO
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .waitlist{
    grid-template-columns:1fr;
    padding:18px 14px;gap:14px;border-radius:10px
  }
  .wl-divider{display:none}
  .wl-text h2{font-size:18px}
  .wl-text p{font-size:12px}
  .role-toggle{grid-template-columns:1fr 1fr;gap:6px}
  .role-btn{padding:8px 6px;font-size:11px}
  .wl-input{height:38px;font-size:13px}
  .wl-submit{padding:11px;font-size:13px}
}

/* ══════════════════════════════════════════════════════════════
   15. SIDEBAR BLOCKS
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .sb-head{padding:10px 12px;font-size:11px}
  .sb-nl-input{height:34px;font-size:12px}
  .sb-nl-btn{padding:8px;font-size:12px}
  .sb-ad-img{height:70px}
  .trend-item{padding:8px 12px}
  .trend-num{font-size:15px}
  .trend-title{font-size:10px}
}

/* ══════════════════════════════════════════════════════════════
   16. FOOTER
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px}
}
@media(max-width:600px){
  footer{padding:20px 12px}
  .footer-inner{padding:0}
  .footer-grid{
    grid-template-columns:1fr;gap:14px
  }
  .footer-brand{text-align:left}
  .footer-tagline{font-size:11px}
  .footer-col-title{font-size:9px;letter-spacing:1.5px;margin-bottom:8px}
  .footer-col a{font-size:12px;padding:4px 0;display:block}
  .footer-bottom{
    flex-direction:column;gap:8px;
    text-align:center;padding-top:14px
  }
  .footer-copy{font-size:10px;letter-spacing:.5px}
  .footer-links-b{
    justify-content:center;flex-wrap:wrap;gap:10px
  }
  .footer-links-b a{font-size:10px}
  .footer-lang{margin-top:10px}
  .lang-btn-footer{font-size:12px;padding:6px 10px}
}

/* ══════════════════════════════════════════════════════════════
   17. AUTH MODAL
   ══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .auth-overlay{padding:12px}
  .auth-modal{
    padding:22px 14px;
    border-radius:12px;
    max-width:calc(100vw - 24px);
    width:100%
  }
  .auth-title{font-size:17px}
  .auth-sub{font-size:12px}
  .oauth-btn{padding:10px 12px;font-size:13px;min-height:42px}
  .auth-register-btn{padding:11px;font-size:13px}
  .auth-divider{margin:10px 0}
}

/* ══════════════════════════════════════════════════════════════
   18. MANUFACTURERS / PARTNERS
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .mfg-header{padding:12px}
  .mfg-name{font-size:15px}
  .mfg-stats{gap:0}
  .mfg-stat{padding:8px;min-width:56px}
  .mfg-stat-val{font-size:14px}
  .mfg-stat-label{font-size:8px}
  .sell-cta{padding:16px 12px}
  .sell-cta-title{font-size:15px}
  .partner-tier-label{font-size:12px}
}

/* ══════════════════════════════════════════════════════════════
   19. HUMAN UPGRADES
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .hu-hero{height:360px}
  .coming-soon-text{font-size:20px;letter-spacing:2px}
  .hu-title{font-size:18px}
  .hu-sub{font-size:12px;padding:0 16px}
  .hu-cta-group{flex-direction:column;gap:8px;align-items:center}
}
@media(max-width:480px){
  .hu-hero{height:300px}
  .coming-soon-text{font-size:16px}
}

/* ══════════════════════════════════════════════════════════════
   20. 404 PAGE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .err-code{font-size:72px}
  .err-robot{font-size:44px}
  .err-title{font-size:18px}
  .err-sub{font-size:12px;padding:0 8px}
  .err-actions{flex-direction:column;gap:8px;width:100%;padding:0 20px}
  .btn-primary,.btn-outline{
    width:100%;text-align:center;
    display:block;padding:12px
  }
}

/* ══════════════════════════════════════════════════════════════
   21. LOAD MORE / UTILITY
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .load-more-wrap{margin:14px 0}
  .btn-load-more{
    width:100%;padding:12px;
    font-size:13px
  }
  .breadcrumb{
    font-size:11px;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis
  }
}

/* ══════════════════════════════════════════════════════════════
   22. LANDSCAPE PHONE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px) and (orientation:landscape){
  .rot-banner{min-height:120px}
  .rb-slide{min-height:120px;padding:10px 12px}
  .hu-hero{height:240px}
  .auth-modal{max-height:88vh;overflow-y:auto}
}


/* ═══════════════════════════════════════════════
   v5.0 — Startup-grade mobile improvements
═══════════════════════════════════════════════ */

/* ── Safe area for notched phones ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .mur-topbar { padding-top: env(safe-area-inset-top, 0) }
  footer       { padding-bottom: env(safe-area-inset-bottom, 0) }
}

/* ── Improved touch targets (min 44px) ── */
@media (max-width: 768px) {
  .cat-link { min-height: 44px; display: flex; align-items: center }
  .btn-contact, .btn-sell, #btn-login-top { min-height: 44px }
  .oauth-btn { min-height: 48px; padding: 13px 16px }
  .auth-register-btn { min-height: 48px }
  .dash-nav-item { min-height: 44px }
  .action-btn { min-height: 36px; padding: 6px 12px }
}

/* ── Card grid responsive improvements ── */
@media (max-width: 640px) {
  .listings-grid, .grid-3 { grid-template-columns: 1fr !important }
  .grid-2 { grid-template-columns: 1fr !important }
  .stat-grid { grid-template-columns: 1fr 1fr }
  .fav-grid  { grid-template-columns: 1fr }
  .form-row-2, .form-row { grid-template-columns: 1fr !important }
  .lc-wrap { grid-template-columns: 1fr }
}

/* ── Improved auth modal on mobile ── */
@media (max-width: 480px) {
  .auth-modal {
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-width: 100%;
    margin: 0;
    padding: 24px 20px 32px;
    animation: slideUp .3s cubic-bezier(.22,.61,.36,1);
  }
  .auth-overlay {
    align-items: flex-end !important;
  }
  @keyframes slideUp {
    from { transform: translateY(100%) }
    to   { transform: translateY(0) }
  }
}

/* ── Better mobile topbar ── */
@media (max-width: 900px) {
  .tb-inner { padding: 0 14px; gap: 10px }
  .search-wrap { max-width: 100% }
  .search-cat { max-width: 110px; font-size: 11px }
}

/* ── Page header on mobile ── */
@media (max-width: 640px) {
  .page-header { padding: 16px 14px 12px }
  h1.page-title, .page-title { font-size: 20px !important }
  .page-sub { font-size: 12px }
  .gads-slot { margin: 0 -14px }
}

/* ── Dashboard mobile ── */
@media (max-width: 900px) {
  .dash-wrap { grid-template-columns: 1fr; gap: 0; padding: 0 }
  .dash-sidebar { border-radius: 0; border-left: 0; border-right: 0; border-top: 0 }
  .dash-main { padding: 16px 14px }
}

/* ── Listing cards on mobile ── */
@media (max-width: 640px) {
  .lc-card { min-height: auto }
  .lc-img  { height: 160px }
  .lc-body { padding: 12px }
  .lc-name { font-size: 14px }
  .lc-price { font-size: 18px }
}

/* ── Detail page on mobile ── */
@media (max-width: 768px) {
  .detail-wrap { grid-template-columns: 1fr !important; gap: 16px }
  .detail-sidebar { order: -1 }
  .price-card { margin-bottom: 0 }
}

/* ── Chat panel mobile ── */
@media (max-width: 640px) {
  .chat-panel.open {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 500;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,.2);
  }
  .chat-msgs { height: 50vh }
}

/* ── Sidebar mobile collapse ── */
@media (max-width: 900px) {
  .main-grid { display: flex; flex-direction: column }
  .sidebar { order: 2 }
  .sb-block { margin-bottom: 12px }
}

/* ── Tables mobile scroll ── */
@media (max-width: 640px) {
  .listings-table { font-size: 11px }
  .listings-table th,
  .listings-table td { padding: 8px 8px }
  .action-group { gap: 4px }
}

/* ── Prevent horizontal overflow ── */
* { max-width: 100%; box-sizing: border-box }
img { max-width: 100%; height: auto }
pre, code { overflow-x: auto }

/* ══════════════════════════════════════════════════════════════
   NEWS CAROUSEL — Mobile only (one card at a time)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Convert grid-2 and grid-3 in news to carousel */
  .grid-2, .grid-3 {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
    /* No grid — horizontal scroll */
  }
  .grid-2::-webkit-scrollbar,
  .grid-3::-webkit-scrollbar { display: none }

  /* Each card = one screen width */
  .grid-2 .card,
  .grid-3 .card {
    flex: 0 0 85vw;
    max-width: 85vw;
    scroll-snap-align: start;
    grid-column: unset !important; /* remove span 2 */
  }

  /* Carousel dots indicator */
  .grid-2::after,
  .grid-3::after {
    content: '';
    flex: 0 0 4px;
  }

  /* Card image height on mobile */
  .card-img {
    height: 140px !important;
  }

  /* Latest news strip — horizontal scroll too */
  .ni-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .ni-list::-webkit-scrollbar { display: none }
  .ni-item {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }

  /* Trending sidebar — horizontal on mobile */
  .sb-block:has(.trend-item) {
    overflow: hidden;
  }

  /* Section head spacing */
  .section-head {
    padding: 0 0 8px;
  }

  /* Cat pills scroll */
  .cat-pills {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .cat-pills::-webkit-scrollbar { display: none }
  .cat-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Scroll hint — shows briefly on first load */
@media (max-width: 768px) {
  .grid-2, .grid-3 {
    --scroll-hint: 0;
    animation: scrollHint 1s ease 1s both;
  }
  @keyframes scrollHint {
    0%   { scroll-padding-left: 0 }
    50%  { scroll-padding-left: 20px }
    100% { scroll-padding-left: 0 }
  }
}

/* ── Language dropdown always hidden unless .vis ── */
.lang-dd { display: none !important }
.lang-dd.vis { display: block !important }

/* ── Footer language section mobile ── */
@media (max-width: 768px) {
  .footer-lang { margin-top: 12px }
  .footer-lang-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 1.5px; color: var(--text3); margin-bottom: 6px }
  .lang-sw-footer { position: relative; display: inline-block }
  .lang-btn-footer {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; padding: 7px 12px; font-size: 12px;
    cursor: pointer; font-family: "DM Sans", sans-serif;
    color: var(--text); width: 100%; max-width: 200px;
  }
  .lang-dd {
    display: none !important;
    position: absolute !important;
    bottom: auto !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    min-width: 200px;
    z-index: 500;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 280px;
    overflow-y: auto;
  }
  .lang-dd.vis { display: block !important }
}

/* ══ PREMIUM MOBILE & TABLET POLISH ════════════════════════════ */

/* ── Tablet specific (769-1024) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .rot-banner { height: 220px; margin: 16px 20px; }
  .rb-slide { padding: 20px 60px 36px 24px; gap: 16px; }
  .rb-title { font-size: 18px; }
  .rb-sub { font-size: 11px; }
  .gads-slot { margin: 16px 20px; }
}

/* ── Mobile small (< 480) polish ── */
@media (max-width: 480px) {
  /* Better button tap targets */
  .btn-sell, .btn-login, .mob-menu-btn, .mob-pin-btn {
    min-height: 36px;
    min-width: 36px;
  }

  /* Smoother topbar on small screens */
  .topbar-inner {
    gap: 6px;
    padding: 0 10px;
  }
  .logo {
    font-size: 12px;
    letter-spacing: 1.2px;
  }

  /* Prevent overflow */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Rotating banner on phone */
  .rot-banner {
    height: auto;
    min-height: 180px;
    margin: 12px;
    border-radius: 8px;
  }
  .rb-slide {
    padding: 18px 16px 32px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .rb-title { font-size: 14px; line-height: 1.3; }
  .rb-sub { font-size: 10px; display: block; width: 100%; }
  .rb-price { font-size: 14px; }
  .rb-cta { padding: 8px 14px; font-size: 12px; }
  .rb-controls { bottom: 8px; }
  .rb-btn { width: 22px; height: 22px; font-size: 14px; }

  /* Google Ads slot on phone */
  .gads-slot { margin: 12px !important; }
  .gads-inner { min-height: 50px; }

  /* Newsletter strip compacter */
  .nl-strip { padding: 16px 14px !important; }
  .nl-title { font-size: 14px !important; }
  .nl-sub { font-size: 11px !important; }
  .nl-input { font-size: 13px; padding: 8px 12px; }
  .nl-btn { font-size: 13px; padding: 8px 14px; }
}

/* ── Landscape mobile (important for video/forms) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .auth-modal {
    max-height: 90vh;
    overflow-y: auto;
  }
  .mob-menu {
    max-height: 80vh;
  }
}

/* ── Ultra-wide screens (quality upgrade) ── */
@media (min-width: 1600px) {
  .topbar-inner { max-width: 1400px; }
  .catnav-inner { max-width: 1400px; }
  .rot-banner { margin: 20px auto; max-width: 1400px; }
  .gads-slot { max-width: 1400px; margin: 0 auto 16px; }
}

/* ── Safe area insets for notched phones ── */
@supports (padding: env(safe-area-inset-left)) {
  .topbar-inner {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .catnav-inner {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
}

/* ── Sticky banner controls on scroll ── */
.rot-banner {
  -webkit-user-select: none;
  user-select: none;
}
.rb-cta {
  -webkit-user-select: auto;
  user-select: auto;
}