/* ============================================================
   SELLNOW — CSS v3
   Typography: Fraunces (display) + Figtree (body)
   Accent: Swiss Red #D0021B
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea,button{font-family:inherit}
ul,ol{list-style:none}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Ink */
  --ink:         #111110;
  --ink-soft:    #38382f;
  --ink-muted:   #706f69;
  --ink-faint:   #aeada6;

  /* Surfaces */
  --surface:     #ffffff;
  --surface-2:   #f9f9f6;
  --surface-3:   #f1f1ec;
  --border:      #e5e5de;
  --border-dark: #ccccc0;

  /* Swiss Red — primary brand colour */
  --red:         #D0021B;
  --red-hover:   #a80016;
  --red-soft:    #fbe9ec;
  --red-muted:   #f5c6cc;

  /* Status */
  --success:     #1e6e45;
  --success-bg:  #d6f5e3;
  --info:        #1d4071;
  --info-bg:     #ddeaf8;
  --warn:        #c85a12;
  --warn-bg:     #fde8d4;
  --danger:      #b91c1c;
  --danger-bg:   #fee2e2;

  /* WhatsApp */
  --wa:          #25D366;
  --wa-dark:     #128C7E;

  /* Typography */
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-xs:   4px;   --r-sm:  8px;
  --r-md:   14px;  --r-lg:  20px;
  --r-xl:   28px;  --r-2xl: 36px;
  --r-full: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,.06);
  --sh-sm: 0 1px 4px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --sh-lg: 0 12px 36px rgba(0,0,0,.09),0 4px 10px rgba(0,0,0,.05);
  --sh-xl: 0 28px 60px rgba(0,0,0,.11),0 8px 20px rgba(0,0,0,.06);

  /* Red glow for primary buttons */
  --sh-red: 0 4px 18px rgba(208,2,27,.28);
  --sh-red-lg: 0 8px 28px rgba(208,2,27,.36);

  /* Motion */
  --ease:     cubic-bezier(.22,.68,0,1.1);
  --ease-out: cubic-bezier(.25,.46,.45,.94);
  --dur:      200ms;
  --dur-med:  300ms;
}

/* ── Base ──────────────────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:1rem;line-height:1.65;
  color:var(--ink);background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--font-head);line-height:1.1;color:var(--ink);font-weight:700}
h1{font-size:clamp(1.9rem,5.5vw,3.8rem);letter-spacing:-.025em;font-variation-settings:"opsz" 72}
h2{font-size:clamp(1.3rem,2.8vw,2rem);letter-spacing:-.02em;font-variation-settings:"opsz" 36}
h3{font-size:clamp(1rem,2vw,1.3rem);letter-spacing:-.01em;font-variation-settings:"opsz" 18}
p{line-height:1.7}

/* ── Container ─────────────────────────────────────────────── */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:1.1rem}
@media(min-width:640px){.container{padding-inline:1.5rem}}
@media(min-width:1024px){.container{padding-inline:2rem}}
@media(min-width:1280px){.container{padding-inline:2.5rem}}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — Swiss Red primary
   ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.25rem;border-radius:var(--r-full);
  font-family:var(--font-body);font-size:.875rem;font-weight:600;line-height:1.2;
  white-space:nowrap;cursor:pointer;
  transition:all var(--dur) var(--ease-out);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;
}
/* Primary = Swiss Red */
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--sh-red)}
.btn-primary:hover{background:var(--red-hover);transform:translateY(-1px);box-shadow:var(--sh-red-lg)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--sh-sm)}

.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--border-dark)}
.btn-outline:hover{border-color:var(--ink);background:var(--surface-2)}

.btn-ghost{background:transparent;color:var(--ink-muted);border:1.5px solid transparent}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}

/* Hero CTA = Red with slightly bigger feel */
.btn-sell{
  background:var(--red);color:#fff;
  padding:.8rem 2rem;font-size:1rem;
  box-shadow:var(--sh-red);
}
.btn-sell:hover{background:var(--red-hover);transform:translateY(-2px);box-shadow:var(--sh-red-lg)}

.btn-white{background:#fff;color:var(--ink);font-weight:700}
.btn-white:hover{background:var(--surface-2);transform:translateY(-1px)}

.btn-sm{padding:.4rem .9rem;font-size:.8rem}
.btn-lg{padding:.8rem 1.8rem;font-size:1rem}
.btn-xl{padding:.95rem 2.25rem;font-size:1.05rem}
.btn-full{width:100%;border-radius:var(--r-md)}

/* Danger button */
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#991b1b;transform:translateY(-1px)}

/* Contact buttons */
.btn-whatsapp{
  background:var(--wa);color:#fff;flex:1;
  padding:.85rem 1.25rem;border-radius:var(--r-md);font-size:.95rem;
  box-shadow:0 3px 12px rgba(37,211,102,.28);min-height:52px;
}
.btn-whatsapp:hover{background:var(--wa-dark);transform:translateY(-1px);box-shadow:0 5px 20px rgba(37,211,102,.36)}
.btn-email{
  background:var(--surface-2);color:var(--ink);flex:1;
  padding:.85rem 1.25rem;border-radius:var(--r-md);
  border:1.5px solid var(--border);font-size:.95rem;min-height:52px;
}
.btn-email:hover{background:var(--surface-3);border-color:var(--ink);transform:translateY(-1px)}

/* ── Badges ────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .6rem;border-radius:var(--r-full);
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.badge-new      {background:var(--success-bg);color:var(--success)}
.badge-used     {background:var(--surface-3);color:var(--ink-soft)}
.badge-pickup   {background:var(--info-bg);color:var(--info)}
.badge-delivery {background:var(--warn-bg);color:var(--warn)}
.badge-featured {background:#fef7c3;color:#92600a}
.badge-sold     {background:var(--danger-bg);color:var(--danger);font-size:.75rem;padding:.3rem .75rem}
.badge-superadmin{background:var(--red-soft);color:var(--red)}
.badge-user     {background:var(--info-bg);color:var(--info)}

/* ── Flash messages ────────────────────────────────────────── */
.flash{padding:.9rem 1.1rem;border-radius:var(--r-md);font-size:.875rem;font-weight:500;margin-bottom:1.25rem;animation:slideDown .3s var(--ease-out)}
.flash-success{background:var(--success-bg);color:var(--success);border-left:3px solid var(--success)}
.flash-error  {background:var(--danger-bg);color:var(--danger);border-left:3px solid var(--danger)}
.flash-info   {background:var(--info-bg);color:var(--info);border-left:3px solid var(--info)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════
   HEADER — mobile-first
   ═══════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--dur) var(--ease-out);
}
.site-header.scrolled{box-shadow:var(--sh-md)}
.header-inner{display:flex;align-items:center;height:60px;gap:.6rem}
@media(min-width:768px){.header-inner{height:68px;gap:1.25rem}}

/* Logo */
.logo{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
.logo-mark{
  width:34px;height:34px;background:var(--red);color:#fff;
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:800;font-size:1.05rem;flex-shrink:0;
}
.logo-text{
  font-family:var(--font-head);font-weight:700;font-size:1.1rem;
  letter-spacing:-.02em;color:var(--ink);font-variation-settings:"opsz" 18;
}

/* Desktop search */
.header-search{flex:1;max-width:400px;display:none;position:relative;align-items:center}
@media(min-width:768px){.header-search{display:flex}}
.header-search input{
  width:100%;padding:.5rem 1rem .5rem 2.5rem;
  border:1.5px solid var(--border);border-radius:var(--r-full);
  font-size:.875rem;background:var(--surface-2);outline:none;height:40px;
  transition:all var(--dur) var(--ease-out);color:var(--ink);
}
.header-search input:focus{border-color:var(--red);background:var(--surface);box-shadow:0 0 0 3px rgba(208,2,27,.08)}
.header-search .search-btn{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--ink-faint);display:flex;align-items:center;pointer-events:none}

/* Desktop nav */
.header-nav{display:none;align-items:center;gap:.75rem;margin-left:auto;flex-shrink:0}
@media(min-width:768px){.header-nav{display:flex}}
.nav-link{font-size:.875rem;font-weight:500;color:var(--ink-muted);padding:.3rem .5rem;border-radius:var(--r-sm);transition:color var(--dur);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--ink)}
.lang-switch{
  font-size:.78rem;font-weight:700;color:var(--ink-muted);
  padding:.28rem .7rem;border:1.5px solid var(--border);
  border-radius:var(--r-full);transition:all var(--dur);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.lang-switch:hover{border-color:var(--red);color:var(--red)}

/* Mobile right-side controls */
.header-mobile-right{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex-shrink:0}
@media(min-width:768px){.header-mobile-right{display:none}}
.mobile-search-icon{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);color:var(--ink-soft);transition:background var(--dur);
  -webkit-tap-highlight-color:transparent;flex-shrink:0;
}
.mobile-search-icon:hover{background:var(--surface-2)}
.lang-switch-mobile{
  font-size:.72rem;font-weight:700;color:var(--ink-muted);
  padding:.22rem .55rem;border:1.5px solid var(--border);
  border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.lang-switch-mobile:hover{border-color:var(--red);color:var(--red)}

/* Hamburger */
.hamburger{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:40px;height:40px;border-radius:var(--r-sm);
  flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.hamburger:hover{background:var(--surface-2)}
.hamburger span{
  display:block;width:20px;height:2px;background:var(--ink);
  border-radius:2px;transition:all .25s var(--ease-out);transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(0,7px)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(0,-7px)}
@media(min-width:768px){.hamburger{display:none}}

/* Mobile searchbar */
.mobile-searchbar{display:none;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--surface)}
.mobile-searchbar.open{display:block}
.mobile-searchbar form{
  display:flex;background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:var(--r-full);overflow:hidden;align-items:center;
  transition:border-color var(--dur);
}
.mobile-searchbar form:focus-within{border-color:var(--red)}
.mobile-searchbar input{
  flex:1;padding:.65rem 1rem;border:none;outline:none;
  font-size:.95rem;background:transparent;color:var(--ink);min-width:0;
}
.mobile-searchbar button{padding:.65rem .9rem;display:flex;align-items:center;color:var(--ink-muted);flex-shrink:0}

/* Mobile nav drawer */
.mobile-nav{
  display:none;flex-direction:column;background:var(--surface);
  border-bottom:1px solid var(--border);padding:.5rem .75rem 1rem;gap:.15rem;
}
.mobile-nav.open{display:flex}
.mobile-link{
  display:flex;align-items:center;padding:.85rem 1rem;font-size:.95rem;
  font-weight:500;color:var(--ink-soft);border-radius:var(--r-md);
  transition:background var(--dur);-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;min-height:48px;
}
.mobile-link:hover,.mobile-link:active{background:var(--surface-2)}
.mobile-link-cta{
  background:var(--red);color:#fff !important;justify-content:center;
  border-radius:var(--r-full);font-weight:600;margin-top:.5rem;
  box-shadow:var(--sh-red);
}
.mobile-link-cta:hover,.mobile-link-cta:active{background:var(--red-hover) !important}
.mobile-nav-divider{height:1px;background:var(--border);margin:.3rem 0}

/* Filter backdrop */
.filter-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:299}
.filter-backdrop.open{display:block}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero{position:relative;padding:3rem 0 3.5rem;overflow:hidden;background:var(--surface)}
@media(min-width:768px){.hero{padding:5rem 0 5rem}}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.08}
.hero-blob-1{width:500px;height:500px;background:radial-gradient(circle,#D0021B,transparent 70%);top:-200px;right:-80px}
.hero-blob-2{width:350px;height:350px;background:radial-gradient(circle,#111110,transparent 70%);bottom:-80px;left:0}
.hero-content{position:relative;z-index:1;text-align:center;max-width:720px;margin-inline:auto;padding-inline:.5rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--surface-2);border:1px solid var(--border);
  padding:.3rem .85rem;border-radius:var(--r-full);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:1.25rem;animation:fadeUp .6s var(--ease-out) both;
}
.hero-title{
  font-size:clamp(2rem,7vw,4.5rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.06;color:var(--ink);
  margin-bottom:1rem;animation:fadeUp .7s var(--ease-out) .08s both;
  font-variation-settings:"opsz" 144;
}
/* Red highlight on first word */
.hero-title .highlight{color:var(--red)}
.hero-sub{
  font-size:clamp(.9rem,2.2vw,1.1rem);color:var(--ink-muted);
  max-width:460px;margin:0 auto 2rem;line-height:1.72;
  animation:fadeUp .7s var(--ease-out) .16s both;
}

/* Hero search */
.hero-search-form{animation:fadeUp .7s var(--ease-out) .24s both;margin-bottom:1.5rem}
.hero-search-wrap{display:flex;flex-direction:column;gap:.6rem;max-width:600px;margin-inline:auto}
@media(min-width:600px){
  .hero-search-wrap{
    flex-direction:row;align-items:center;background:var(--surface);
    border:2px solid var(--border-dark);border-radius:var(--r-full);
    padding:.3rem .3rem .3rem 1.1rem;gap:.4rem;box-shadow:var(--sh-lg);
    transition:border-color var(--dur),box-shadow var(--dur);
  }
  .hero-search-wrap:focus-within{border-color:var(--red);box-shadow:0 0 0 4px rgba(208,2,27,.08),var(--sh-lg)}
}
.search-icon{color:var(--ink-faint);flex-shrink:0;display:none}
@media(min-width:600px){.search-icon{display:block}}
.hero-input-wrap{
  display:flex;align-items:center;background:var(--surface);
  border:1.5px solid var(--border-dark);border-radius:var(--r-full);
  padding:.6rem 1rem .6rem .85rem;gap:.5rem;box-shadow:var(--sh-md);
}
@media(min-width:600px){.hero-input-wrap{flex:1;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;gap:.35rem}}
.hero-input{flex:1;border:none;outline:none;font-size:.95rem;color:var(--ink);background:transparent;min-width:0;padding:.2rem 0}
.hero-input::placeholder{color:var(--ink-faint)}
.hero-select{border:none;outline:none;font-size:.85rem;color:var(--ink-soft);background:transparent;padding:.2rem .4rem;cursor:pointer;border-left:1px solid var(--border);max-width:150px;display:none}
@media(min-width:600px){.hero-select{display:block}}
.hero-submit{width:100%;padding:.75rem;font-size:.95rem;border-radius:var(--r-full)}
@media(min-width:600px){.hero-submit{width:auto;padding:.65rem 1.5rem;flex-shrink:0}}

.hero-cta-row{animation:fadeUp .7s var(--ease-out) .32s both;margin-bottom:2rem}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;
  max-width:400px;margin-inline:auto;
  animation:fadeUp .7s var(--ease-out) .4s both;
}
.stat-item{text-align:center;padding:.85rem .75rem;border-right:1px solid var(--border)}
.stat-item:last-child{border-right:none}
.stat-num{display:block;font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.2;font-variation-settings:"opsz" 18}
.stat-label{font-size:.64rem;color:var(--ink-faint);font-weight:500;text-transform:uppercase;letter-spacing:.05em;display:block;margin-top:.15rem}
.stat-divider{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════ */
.section{padding:3rem 0}
@media(min-width:768px){.section{padding:4.5rem 0}}
.section-alt{background:var(--surface-2)}
.section-header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
@media(min-width:768px){.section-header{margin-bottom:2rem}}
.section-title{font-size:clamp(1.2rem,2.5vw,1.7rem);letter-spacing:-.02em;font-variation-settings:"opsz" 36}
.section-link{font-size:.84rem;font-weight:600;color:var(--ink-muted);white-space:nowrap;transition:color var(--dur)}
.section-link:hover{color:var(--red)}
.section-cta{text-align:center;margin-top:2rem}

/* ═══════════════════════════════════════════════════════════
   CATEGORIES
   ═══════════════════════════════════════════════════════════ */
.categories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(min-width:480px){.categories-grid{grid-template-columns:repeat(4,1fr);gap:.75rem}}
@media(min-width:640px){.categories-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:900px){.categories-grid{grid-template-columns:repeat(9,1fr)}}
.category-card{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:1rem .5rem;background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-lg);text-align:center;
  transition:all var(--dur-med) var(--ease);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
@media(min-width:640px){.category-card{padding:1.25rem .75rem}}
.category-card:hover,.category-card:active{
  border-color:var(--red);background:var(--red);
  transform:translateY(-3px);box-shadow:var(--sh-md);
}
.category-icon{font-size:1.5rem;line-height:1;display:block;transition:transform var(--dur-med)}
@media(min-width:640px){.category-icon{font-size:1.75rem}}
.category-card:hover .category-icon{transform:scale(1.12)}
.category-name{font-size:.7rem;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--ink-soft);transition:color var(--dur)}
@media(min-width:640px){.category-name{font-size:.75rem}}
.category-card:hover .category-name{color:#fff}

/* ═══════════════════════════════════════════════════════════
   LISTINGS GRID & CARD
   ═══════════════════════════════════════════════════════════ */
.listings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:480px){.listings-grid{gap:1rem}}
@media(min-width:900px){.listings-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.listings-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.listings-grid-main{grid-template-columns:repeat(3,1fr)}}

.listing-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:all var(--dur-med) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.listing-card:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:var(--sh-lg)}
.listing-card:active{transform:translateY(-1px)}
.card-link{display:block;height:100%}
.card-image-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-3)}
.card-image{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out)}
.listing-card:hover .card-image{transform:scale(1.05)}
.card-badges{position:absolute;top:.5rem;left:.5rem;display:flex;gap:.3rem;flex-wrap:wrap}
.card-delivery{position:absolute;bottom:.5rem;left:.5rem;display:flex;gap:.3rem}
.card-body{padding:.75rem}
@media(min-width:640px){.card-body{padding:1rem}}
.card-category{font-size:.68rem;font-weight:600;color:var(--ink-faint);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em;display:block}
.card-title{font-family:var(--font-body);font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:.65rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:640px){.card-title{font-size:.925rem}}
.card-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:.4rem;flex-wrap:wrap}
.card-price{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--red);letter-spacing:-.02em;white-space:nowrap;font-variation-settings:"opsz" 18}
@media(min-width:640px){.card-price{font-size:1.1rem}}
.card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.card-location,.card-time{font-size:.68rem;color:var(--ink-faint);display:flex;align-items:center;gap:.2rem;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════
   SELL BANNER
   ═══════════════════════════════════════════════════════════ */
.sell-banner{background:var(--red);padding:3rem 0}
.sell-banner-inner{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
@media(min-width:640px){.sell-banner-inner{flex-direction:row;align-items:center;justify-content:space-between}}
.sell-banner-text h3{font-size:clamp(1.25rem,3vw,1.8rem);color:#fff;margin-bottom:.35rem;font-variation-settings:"opsz" 36}
.sell-banner-text p{color:rgba(255,255,255,.7);font-size:.9rem}
.sell-banner .btn-white:hover{background:var(--surface-3)}

/* ═══════════════════════════════════════════════════════════
   LISTING PAGE (filters + results)
   ═══════════════════════════════════════════════════════════ */
.page-listing{padding:1.5rem 0 4rem}
@media(min-width:768px){.page-listing{padding:2rem 0 4rem}}
.listing-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-title{font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:-.02em;font-variation-settings:"opsz" 36}
.page-sub{color:var(--ink-muted);margin-top:.3rem;font-size:.9rem}
.result-count{font-size:.84rem;color:var(--ink-muted);margin-top:.2rem}
.listing-layout{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:900px){.listing-layout{flex-direction:row;align-items:flex-start;gap:2rem}}

/* Filter sidebar */
.filter-sidebar{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;display:none}
@media(min-width:900px){.filter-sidebar{display:block;width:270px;flex-shrink:0;position:sticky;top:80px}}
@media(max-width:899px){
  .filter-sidebar{
    position:fixed;inset:0;z-index:300;width:100%;max-width:320px;
    border-radius:0;border:none;border-right:1px solid var(--border);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-100%);transition:transform .3s var(--ease-out);padding:1rem;
  }
  .filter-sidebar.open{display:block;transform:translateX(0)}
}
.filter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.filter-header h2{font-size:.95rem;font-variation-settings:"opsz" 18}
.filter-close{display:none;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:1rem;color:var(--ink-muted);transition:background var(--dur)}
.filter-close:hover{background:var(--surface-2)}
@media(max-width:899px){.filter-close{display:flex}}
.filter-form{display:flex;flex-direction:column;gap:1rem}
.filter-group{display:flex;flex-direction:column;gap:.4rem}
.filter-group>label{font-size:.72rem;font-weight:700;color:var(--ink-muted);letter-spacing:.07em;text-transform:uppercase}
.filter-select{
  width:100%;padding:.6rem .85rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:.875rem;color:var(--ink);background:var(--surface);outline:none;cursor:pointer;
  transition:border-color var(--dur);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23706f69' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.25rem;min-height:44px;
}
.filter-select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,2,27,.08)}
.input-icon-wrap{position:relative}
.input-icon-wrap>svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}
.input-icon-wrap input{
  width:100%;padding:.6rem .85rem .6rem 2.3rem;border:1.5px solid var(--border);
  border-radius:var(--r-sm);font-size:.875rem;color:var(--ink);background:var(--surface);
  outline:none;transition:border-color var(--dur);min-height:44px;
}
.input-icon-wrap input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,2,27,.08)}
.toggle-group{display:flex;flex-direction:column;gap:.25rem}
.toggle-option{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;padding:.5rem .6rem;
  border-radius:var(--r-sm);font-size:.875rem;color:var(--ink-soft);
  transition:background var(--dur);min-height:40px;-webkit-tap-highlight-color:transparent;
}
.toggle-option:hover{background:var(--surface-2)}
.toggle-option input[type="radio"]{accent-color:var(--red);width:16px;height:16px}
.price-range{display:flex;align-items:center;gap:.4rem}
.price-range input{
  flex:1;padding:.6rem .7rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:.85rem;outline:none;color:var(--ink);background:var(--surface);
  min-width:0;min-height:44px;transition:border-color var(--dur);
}
.price-range input:focus{border-color:var(--red)}
.price-range span{color:var(--ink-faint);flex-shrink:0}

/* Main + sort bar */
.listing-main{flex:1;min-width:0}
.sort-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.result-count-sm{font-size:.84rem;color:var(--ink-muted)}
.sort-right{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap}
.sort-label{font-size:.8rem;color:var(--ink-muted);display:none;white-space:nowrap}
@media(min-width:600px){.sort-label{display:block}}
.sort-select{
  padding:.4rem .85rem;border:1.5px solid var(--border);border-radius:var(--r-full);
  font-size:.82rem;outline:none;cursor:pointer;background:var(--surface);color:var(--ink);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23706f69' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;padding-right:1.7rem;min-height:38px;
}
.filter-toggle-btn{display:flex}
@media(min-width:900px){.filter-toggle-btn{display:none !important}}

/* Empty state */
.empty-state{text-align:center;padding:4rem 1.5rem}
.empty-icon{font-size:2.75rem;display:block;margin-bottom:1rem}
.empty-state h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--ink-soft)}
.empty-state p{font-size:.875rem;color:var(--ink-muted);margin-bottom:1.5rem}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:2.5rem;flex-wrap:wrap}
.page-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:.875rem;font-weight:500;color:var(--ink-soft);
  transition:all var(--dur);text-decoration:none;min-width:38px;-webkit-tap-highlight-color:transparent;
}
.page-btn:hover{border-color:var(--red);color:var(--red)}
.page-btn.active{background:var(--red);color:#fff;border-color:var(--red)}

/* ═══════════════════════════════════════════════════════════
   ADD LISTING / FORM
   ═══════════════════════════════════════════════════════════ */
.page-add{padding:2rem 0 5rem}
.add-layout{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:1024px){.add-layout{flex-direction:row;align-items:flex-start;gap:2.5rem}}
.add-form-col{flex:1;min-width:0}
.add-header{margin-bottom:1.5rem}

.form-section{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:1rem}
@media(min-width:640px){.form-section{padding:1.75rem}}
.form-section-title{
  font-family:var(--font-body);font-size:.875rem;font-weight:700;
  letter-spacing:-.01em;margin-bottom:1.1rem;color:var(--ink);
  padding-bottom:.75rem;border-bottom:1px solid var(--border);
}
.form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.form-group:last-child{margin-bottom:0}
.form-group label{
  display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;
}
.req{color:var(--red)}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group textarea{
  width:100%;padding:.7rem .95rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:.95rem;color:var(--ink);background:var(--surface);outline:none;
  transition:border-color var(--dur),box-shadow var(--dur);line-height:1.5;min-height:48px;-webkit-appearance:none;
}
.form-group input:focus,.form-group textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(208,2,27,.08);
}
.form-group textarea{resize:vertical;min-height:120px;line-height:1.6}
.char-count{font-size:.72rem;color:var(--ink-faint);text-align:right;margin-top:.2rem}
.hint{font-size:.75rem;color:var(--ink-faint);margin-top:.25rem}

.form-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:520px){.form-row{grid-template-columns:1fr 1fr}}

.input-prefix{position:relative}
.input-prefix span{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);font-size:.9rem;font-weight:600;color:var(--ink-muted);pointer-events:none}
.input-prefix input{padding-left:2.75rem !important}

/* Condition toggle */
.condition-toggle{display:flex;gap:.6rem;flex-wrap:wrap}
.condition-opt{
  flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;
  gap:.45rem;padding:.8rem 1rem;border:2px solid var(--border);border-radius:var(--r-md);
  cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink-muted);
  transition:all var(--dur);min-height:52px;-webkit-tap-highlight-color:transparent;
}
.condition-opt input{display:none}
.condition-opt:hover{border-color:var(--border-dark);color:var(--ink)}
.condition-opt.active{border-color:var(--red);background:var(--red);color:#fff}

/* Checkbox group */
.checkbox-group{display:flex;flex-wrap:wrap;gap:.5rem}
.checkbox-opt{
  display:flex;align-items:center;gap:.45rem;padding:.55rem .95rem;
  border:1.5px solid var(--border);border-radius:var(--r-full);cursor:pointer;
  font-size:.875rem;font-weight:500;transition:all var(--dur);
  min-height:44px;-webkit-tap-highlight-color:transparent;
}
.checkbox-opt:hover{border-color:var(--border-dark)}
.checkbox-opt input[type="checkbox"]{accent-color:var(--red);width:16px;height:16px}
.checkbox-opt:has(input:checked){border-color:var(--red);background:var(--red-soft)}

/* Payment info box */
.payment-info-box{
  background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:1rem 1.1rem;margin-top:.75rem;
}
.payment-info-box .pay-section{margin-bottom:.85rem}
.payment-info-box .pay-section:last-child{margin-bottom:0}
.pay-section-title{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-muted);margin-bottom:.5rem;display:block;
}
.pay-detail-row{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.35rem;font-size:.88rem}
.pay-detail-key{color:var(--ink-faint);min-width:90px;flex-shrink:0;font-size:.8rem}
.pay-detail-val{color:var(--ink-soft);word-break:break-all;font-weight:500}

/* Image upload */
.image-upload-zone{
  border:2px dashed var(--border-dark);border-radius:var(--r-lg);
  padding:2rem 1.5rem;text-align:center;cursor:pointer;
  transition:all var(--dur);position:relative;background:var(--surface-2);
  -webkit-tap-highlight-color:transparent;
}
.image-upload-zone:hover,.image-upload-zone.dragover{border-color:var(--red);background:var(--red-soft)}
.drop-inner svg{color:var(--ink-faint);margin:0 auto .75rem}
.drop-inner p{font-weight:500;color:var(--ink-soft);margin-bottom:.25rem;font-size:.9rem}
.drop-inner small{color:var(--ink-faint);font-size:.78rem}
.file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;font-size:0}
.image-preview-grid{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.preview-item{position:relative;width:80px;height:65px;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid var(--border);flex-shrink:0}
.preview-item img{width:100%;height:100%;object-fit:cover}
.preview-remove{
  position:absolute;top:2px;right:2px;width:20px;height:20px;
  background:rgba(0,0,0,.7);color:#fff;border-radius:50%;font-size:.65rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:none;line-height:1;-webkit-tap-highlight-color:transparent;
}

/* Tips sidebar */
.add-tips{display:none}
@media(min-width:1024px){.add-tips{display:block;width:240px;flex-shrink:0;position:sticky;top:80px}}
.tips-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:1rem}
.tips-card h3{font-size:.9rem;margin-bottom:.9rem;font-variation-settings:"opsz" 18}
.tips-card ul{display:flex;flex-direction:column;gap:.55rem}
.tips-card li{font-size:.825rem;color:var(--ink-soft);display:flex;gap:.35rem}
.tips-card-free{background:var(--red);color:#fff;text-align:center}
.tips-card-free p{font-size:.84rem;color:rgba(255,255,255,.7);margin-top:.4rem}
.free-badge{display:inline-block;background:#fff;color:var(--red);font-weight:800;font-size:1rem;padding:.3rem 1rem;border-radius:var(--r-full);font-family:var(--font-head);font-variation-settings:"opsz" 18}

.form-submit-row{margin-top:1.25rem}
.submit-note{text-align:center;font-size:.78rem;color:var(--ink-faint);margin-top:.65rem}
.error-box{background:var(--danger-bg);border:1.5px solid #fca5a5;border-radius:var(--r-md);padding:.9rem 1.1rem;margin-bottom:1.25rem;font-size:.875rem;color:var(--danger)}
.error-box ul{margin-top:.4rem;padding-left:1.2rem;list-style:disc}
.error-box li{margin-bottom:.2rem}
.success-card{text-align:center;padding:4rem 1.5rem;max-width:440px;margin:0 auto}
.success-icon{width:68px;height:68px;background:var(--success-bg);color:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin:0 auto 1.25rem}
.success-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════
   SINGLE AD PAGE
   ═══════════════════════════════════════════════════════════ */
.page-single{padding:1.25rem 0 3.5rem}
.breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--ink-faint);margin-bottom:1.5rem;flex-wrap:wrap;line-height:1.5}
.breadcrumb a{color:var(--ink-muted);transition:color var(--dur)}
.breadcrumb a:hover{color:var(--red)}
.single-layout{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:3rem}
@media(min-width:860px){.single-layout{grid-template-columns:1fr 400px}}
@media(min-width:1100px){.single-layout{grid-template-columns:1fr 430px}}

/* Gallery */
.gallery{display:flex;flex-direction:column;gap:.65rem}
@media(min-width:860px){.gallery{position:sticky;top:80px}}
.gallery-main{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-3);aspect-ratio:4/3}
.gallery-main-img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.sold-overlay{position:absolute;inset:0;background:rgba(0,0,0,.52);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:2rem;font-weight:800;color:#fff;letter-spacing:.12em;font-variation-settings:"opsz" 72}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-radius:50%;font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur);color:var(--ink);box-shadow:var(--sh-sm);line-height:1;-webkit-tap-highlight-color:transparent}
.gallery-nav.prev{left:.6rem}
.gallery-nav.next{right:.6rem}
.gallery-nav:hover{background:#fff;box-shadow:var(--sh-md)}
.gallery-counter{position:absolute;bottom:.65rem;right:.65rem;background:rgba(0,0,0,.52);color:#fff;padding:.18rem .6rem;border-radius:var(--r-full);font-size:.72rem;font-weight:600}
.gallery-thumbs{display:flex;gap:.45rem;flex-wrap:wrap}
.thumb-btn{width:68px;height:54px;border-radius:var(--r-sm);overflow:hidden;border:2.5px solid transparent;padding:0;cursor:pointer;transition:border-color var(--dur);flex-shrink:0;-webkit-tap-highlight-color:transparent}
.thumb-btn img{width:100%;height:100%;object-fit:cover}
.thumb-btn.active{border-color:var(--red)}
.thumb-btn:hover{border-color:var(--border-dark)}
.gallery-placeholder{aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--surface-2);border:1.5px dashed var(--border-dark);display:flex;align-items:center;justify-content:center}

/* Details */
.detail-badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.85rem}
.detail-title{font-size:clamp(1.3rem,3.5vw,1.9rem);letter-spacing:-.02em;margin-bottom:.65rem;line-height:1.2;font-variation-settings:"opsz" 36}
.detail-price{font-family:var(--font-head);font-size:clamp(1.6rem,4vw,2.25rem);font-weight:800;color:var(--red);letter-spacing:-.03em;margin-bottom:1.25rem;font-variation-settings:"opsz" 72}
.detail-description{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.detail-description h3{font-family:var(--font-body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:.55rem}
.desc-text{font-size:.9rem;color:var(--ink-soft);line-height:1.75;white-space:pre-line;word-break:break-word}

.detail-meta-table{background:var(--surface-2);border-radius:var(--r-md);overflow:hidden;margin-bottom:1.25rem;border:1px solid var(--border)}
.meta-row{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .9rem;border-bottom:1px solid var(--border);font-size:.875rem}
.meta-row:last-child{border-bottom:none}
.meta-key{width:90px;flex-shrink:0;font-size:.72rem;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;padding-top:.05rem}
.meta-val{color:var(--ink-soft);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-size:.875rem}

/* Payment info display on ad page */
.payment-info-card{background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;margin-bottom:1rem}
.payment-info-card h4{font-family:var(--font-body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:.75rem}
.pay-method{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--border)}
.pay-method:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.pay-method-title{font-size:.8rem;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:.35rem}
.pay-method-detail{font-size:.875rem;color:var(--ink-muted);display:flex;flex-direction:column;gap:.2rem;padding-left:1.25rem}
.pay-method-detail span{color:var(--ink)}

/* Shipping cost badge */
.shipping-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--success-bg);color:var(--success);
  padding:.3rem .75rem;border-radius:var(--r-full);font-size:.78rem;font-weight:600;
}
.shipping-badge.paid{background:var(--warn-bg);color:var(--warn)}

/* Contact box */
.contact-box{border:2px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:.85rem}
.contact-title{font-family:var(--font-body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:.85rem}
.contact-btns{display:flex;gap:.65rem;flex-wrap:wrap}
.contact-btns .btn{flex:1;min-width:130px}

/* Share */
.share-box{margin-bottom:1.25rem}
.share-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:.55rem}
.share-btns{display:flex;gap:.45rem}
.share-btn{width:42px;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);transition:all var(--dur);color:var(--ink-soft);cursor:pointer;-webkit-tap-highlight-color:transparent}
.share-btn:hover{border-color:var(--red);color:var(--red)}
.share-wa{color:var(--wa);border-color:#b7efcd}
.share-wa:hover{background:var(--wa);color:#fff;border-color:var(--wa)}
.share-fb{color:#1877f2;border-color:#bfcfe7}
.share-fb:hover{background:#1877f2;color:#fff;border-color:#1877f2}

.back-link{font-size:.84rem;color:var(--ink-muted);transition:color var(--dur)}
.back-link:hover{color:var(--red)}
.related-section{border-top:1px solid var(--border);padding-top:2.5rem}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer{background:var(--surface-2);border-top:1px solid var(--border);padding:2.5rem 0 1.75rem}
.footer-inner{display:flex;flex-direction:column;gap:1.75rem}
.footer-brand{display:flex;flex-direction:column;gap:.35rem}
.footer-logo{display:flex;align-items:center;gap:.45rem}
.footer-tag{font-size:.8rem;color:var(--ink-faint)}
.footer-links{display:flex;flex-wrap:wrap;gap:0;margin:-.25rem}
.footer-link{font-size:.84rem;color:var(--ink-muted);padding:.3rem .7rem;border-radius:var(--r-sm);transition:color var(--dur);margin:.1rem}
.footer-link:hover{color:var(--red)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--ink-faint)}
.footer-langs{display:flex;gap:.4rem}
.footer-langs a{padding:.18rem .55rem;border:1.5px solid var(--border);border-radius:var(--r-full);font-size:.72rem;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;transition:all var(--dur)}
.footer-langs a:hover,.footer-langs a.active{border-color:var(--red);color:var(--red)}

/* ═══════════════════════════════════════════════════════════
   ADMIN LAYOUT
   ═══════════════════════════════════════════════════════════ */
.admin-body{background:#f5f4f0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.admin-login-wrap{width:100%;max-width:380px}
.admin-login-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-2xl);padding:2.25rem;box-shadow:var(--sh-lg)}
.admin-logo{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.admin-login-title{font-size:1.35rem;margin-bottom:1.5rem;font-variation-settings:"opsz" 36}
.admin-login-card .form-group{margin-bottom:.9rem}
.admin-login-card .form-group label{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.05em}
.admin-login-card input{
  width:100%;padding:.7rem .95rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:.95rem;outline:none;transition:border-color var(--dur);color:var(--ink);min-height:48px;
}
.admin-login-card input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,2,27,.08)}
.admin-back{text-align:center;margin-top:1rem;font-size:.84rem;color:var(--ink-muted)}
.admin-back a{color:var(--ink-muted);text-decoration:underline}
.admin-forgot{text-align:center;margin-top:.75rem;font-size:.82rem}
.admin-forgot a{color:var(--red);font-weight:500}
.admin-forgot a:hover{text-decoration:underline}

/* Admin page layout */
.admin-page{display:flex;min-height:100vh;background:#f5f4f0}
.admin-nav{width:230px;flex-shrink:0;background:var(--ink);min-height:100vh;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-nav-header{padding:1.35rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.07)}
.admin-site-link{display:flex;align-items:center;gap:.45rem}
.admin-site-link .logo-mark{background:var(--red)}
.admin-site-link .logo-text{color:rgba(255,255,255,.9)}
.admin-nav-links{flex:1;padding:.6rem;display:flex;flex-direction:column;gap:.15rem}
.admin-nav-link{display:flex;align-items:center;gap:.55rem;padding:.6rem .85rem;border-radius:var(--r-sm);font-size:.875rem;font-weight:500;color:rgba(255,255,255,.55);transition:all var(--dur)}
.admin-nav-link:hover{background:rgba(255,255,255,.1);color:#fff}
.admin-nav-link.active{background:rgba(208,2,27,.3);color:#fff}
.nav-icon{font-size:.95rem}
.admin-nav-section{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.25);padding:.75rem .85rem .25rem;margin-top:.35rem}
.admin-nav-footer{padding:.6rem;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:.15rem}
.admin-logout{color:rgba(255,120,120,.65) !important}
.admin-logout:hover{color:#ff8080 !important;background:rgba(255,100,100,.1) !important}
.admin-main{flex:1;min-width:0;overflow-x:hidden}
.admin-content{padding:1.5rem;max-width:1100px}
@media(min-width:768px){.admin-content{padding:2rem}}

.admin-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;gap:1rem;flex-wrap:wrap}
.admin-page-header h1{font-size:1.4rem;font-variation-settings:"opsz" 36}

/* Admin stats */
.admin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;margin-bottom:2rem}
@media(min-width:640px){.admin-stats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.admin-stats{grid-template-columns:repeat(5,1fr)}}
.admin-stat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;display:flex;align-items:center;gap:.85rem}
.stat-icon{font-size:1.5rem;flex-shrink:0}
.stat-info{display:flex;flex-direction:column;min-width:0}
.admin-stat-card .stat-num{font-family:var(--font-head);font-size:1.35rem;font-weight:700;color:var(--ink);font-variation-settings:"opsz" 18;white-space:nowrap}
.admin-stat-card .stat-label{font-size:.72rem;color:var(--ink-muted)}
.admin-section{margin-top:1.75rem}
.admin-section h2{font-size:1.05rem;margin-bottom:.9rem;font-variation-settings:"opsz" 18}

/* Admin tables */
.admin-table-wrap{overflow-x:auto;border:1.5px solid var(--border);border-radius:var(--r-md);margin-bottom:1rem}
.admin-table{width:100%;border-collapse:collapse;font-size:.84rem}
.admin-table th{padding:.65rem .9rem;text-align:left;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.admin-table td{padding:.65rem .9rem;border-bottom:1px solid var(--border);color:var(--ink-soft);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--surface-2)}
.admin-table a{color:var(--ink);font-weight:500}
.admin-table a:hover{color:var(--red)}
.td-id{font-weight:600;color:var(--ink-faint);font-size:.78rem;width:48px}
.td-thumb{width:66px}
.td-title{max-width:220px}
.td-actions{white-space:nowrap;width:90px}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-sm);font-size:.9rem;transition:background var(--dur);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn-icon:hover{background:var(--surface-3)}
.btn-icon.btn-danger:hover{background:var(--danger-bg)}

.status-badge{display:inline-block;padding:.18rem .55rem;border-radius:var(--r-full);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.status-active{background:var(--success-bg);color:var(--success)}
.status-sold{background:var(--danger-bg);color:var(--danger)}
.status-pending{background:var(--warn-bg);color:var(--warn)}
.status-rejected{background:var(--surface-3);color:var(--ink-muted)}
.status-select{padding:.25rem .5rem;font-size:.8rem;border:1px solid var(--border);border-radius:var(--r-sm);outline:none;cursor:pointer;min-height:36px}

.admin-filters{display:flex;gap:.65rem;margin-bottom:1.25rem;flex-wrap:wrap;align-items:center}
.admin-filters input{padding:.5rem .85rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.875rem;outline:none;color:var(--ink);transition:border-color var(--dur);min-height:42px}
.admin-filters input:focus{border-color:var(--red)}

.admin-edit-form{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;max-width:720px}
.admin-edit-form .form-group{margin-bottom:.9rem}
.admin-edit-form .form-group label{display:block;font-size:.75rem;font-weight:700;color:var(--ink-soft);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.05em}
.admin-edit-form input,.admin-edit-form textarea,.admin-edit-form select{
  width:100%;padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:.9rem;color:var(--ink);outline:none;transition:border-color var(--dur);background:var(--surface);min-height:44px;
}
.admin-edit-form input:focus,.admin-edit-form textarea:focus,.admin-edit-form select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,2,27,.08)}
.admin-edit-form textarea{min-height:110px;resize:vertical}
.form-actions{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}

/* Admin image management */
.admin-img-grid{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.75rem;margin-bottom:.75rem}
.admin-img-item{position:relative;width:90px;height:72px;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid var(--border)}
.admin-img-item img{width:100%;height:100%;object-fit:cover}
.img-primary-badge{position:absolute;bottom:2px;left:2px;background:var(--red);color:#fff;font-size:.55rem;font-weight:700;padding:.1rem .35rem;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}
.admin-img-delete{position:absolute;top:2px;right:2px;width:20px;height:20px;background:rgba(185,28,28,.85);color:#fff;border-radius:50%;font-size:.6rem;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;line-height:1;transition:background var(--dur)}
.admin-img-delete:hover{background:var(--danger)}
.admin-img-upload-zone{border:2px dashed var(--border-dark);border-radius:var(--r-md);padding:1.25rem;text-align:center;position:relative;cursor:pointer;background:var(--surface-2);transition:all var(--dur)}
.admin-img-upload-zone:hover{border-color:var(--red);background:var(--red-soft)}
.admin-img-upload-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.admin-img-upload-zone p{font-size:.84rem;color:var(--ink-muted)}
.admin-img-upload-zone small{font-size:.72rem;color:var(--ink-faint)}
.admin-new-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.65rem}
.admin-new-preview-item{width:72px;height:58px;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid var(--border)}
.admin-new-preview-item img{width:100%;height:100%;object-fit:cover}

/* Role badge */
.role-badge{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:var(--r-full);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.role-superadmin{background:var(--red-soft);color:var(--red)}
.role-user{background:var(--info-bg);color:var(--info)}

/* User card in user management */
.user-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:.85rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.user-avatar{width:44px;height:44px;border-radius:50%;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:var(--ink-muted);flex-shrink:0;border:2px solid var(--border)}
.user-info{flex:1;min-width:0}
.user-name{font-weight:600;color:var(--ink);font-size:.95rem}
.user-email{font-size:.8rem;color:var(--ink-muted);margin-top:.1rem}
.user-meta{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;flex-wrap:wrap}
.user-actions{display:flex;gap:.5rem;align-items:center}

/* Password reset */
.reset-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-2xl);padding:2.25rem;box-shadow:var(--sh-lg);max-width:400px;margin:0 auto}
.reset-icon{width:56px;height:56px;border-radius:50%;background:var(--red-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:1.5rem}
.reset-success{text-align:center;padding:1.5rem 0}

/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.badge-mini{font-size:.68rem}
.text-center{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.anim-in{opacity:1 !important;transform:none !important}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
/* =============================================================
   MOBILE + ADMIN + COOKIE — v7 FINAL
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   1. GLOBAL MOBILE PADDING — applies to EVERY page
   ───────────────────────────────────────────────────────────── */
.container {
  padding-inline: 1.1rem !important;
}
@media (min-width: 480px)  { .container { padding-inline: 1.35rem !important; } }
@media (min-width: 640px)  { .container { padding-inline: 1.5rem  !important; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem    !important; } }
@media (min-width: 1280px) { .container { padding-inline: 2.5rem  !important; } }

/* Ad/single page — breadcrumb, badges, price all need padding */
@media (max-width: 640px) {
  .page-single { padding: 1rem 0 2.5rem; }
  .breadcrumb  { font-size: .72rem; gap: .3rem; }
  .detail-title { font-size: 1.2rem; line-height: 1.25; }
  .detail-price { font-size: 1.55rem; }
  .contact-btns { flex-direction: column; gap: .5rem; }
  .contact-btns .btn { flex: none; width: 100%; }
  .single-layout { gap: 1.25rem; margin-bottom: 2rem; }
  
  /* Listing page */
  .page-listing { padding: 1rem 0 2.5rem; }
  .listing-header { flex-wrap: wrap; gap: .5rem; }
  
  /* Hero */
  .hero { padding: 2rem 0 2.5rem; }
  .hero-stats { border-radius: var(--r-xl); }
  .stat-item { padding: .7rem .4rem; }
  .stat-num { font-size: .9rem; }
  .stat-label { font-size: .56rem; }
  
  /* Cards */
  .card-body { padding: .65rem; }
  .card-title { font-size: .82rem; }
  .card-price { font-size: .95rem; }
  
  /* Section */
  .section { padding: 2rem 0; }
  .section-header { margin-bottom: 1rem; }
}

/* ─────────────────────────────────────────────────────────────
   2. ADMIN MOBILE — Complete rewrite
   ───────────────────────────────────────────────────────────── */

/* Topbar: hidden on desktop, shown on mobile */
.admin-topbar { display: none; }

@media (max-width: 767px) {

  /* Topbar */
  .admin-topbar {
    display: flex !important;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: #111110;
    position: sticky;
    top: 0;
    z-index: 600;
    min-height: 54px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
  }
  .admin-topbar-logo {
    display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0;
  }
  .admin-topbar-logo .logo-mark {
    background: #D0021B;
    width: 30px; height: 30px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .admin-topbar-logo .logo-text {
    color: rgba(255,255,255,.92);
    font-size: 1rem; font-weight: 700;
  }
  .admin-menu-btn {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Page: block layout */
  .admin-page {
    display: block !important;
  }

  /* Sidebar: COMPLETELY off-screen via transform */
  .admin-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 82vw !important;
    height: 100% !important;
    min-height: unset !important;
    z-index: 700 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* KEY FIX: use transform not left positioning */
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.25,.46,.45,.94) !important;
    box-shadow: none !important;
    /* Reset flex layout that desktop uses */
    display: flex !important;
    flex-direction: column !important;
  }

  .admin-nav.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.4) !important;
  }

  /* Main content: full width */
  .admin-main {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }
  .admin-content {
    padding: 1rem !important;
    max-width: 100% !important;
  }

  .admin-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
  }
  .admin-table-wrap { overflow-x: auto; }
  .admin-page-header { flex-wrap: wrap; gap: .5rem; }
  .admin-page-header h1 { font-size: 1.1rem; }
  .form-actions { flex-wrap: wrap; gap: .5rem; }
}

/* Backdrop */
.admin-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 699;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.admin-nav-backdrop.open { display: block !important; }

/* Desktop: hide topbar, always show nav */
@media (min-width: 768px) {
  .admin-topbar   { display: none !important; }
  .admin-nav      { transform: none !important; position: sticky !important; }
  .admin-nav-backdrop { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   3. LANGUAGE SWITCH — side by side in header
   ───────────────────────────────────────────────────────────── */
.lang-switch-group {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
}
.lang-switch-group a {
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-muted);
  padding: .26rem .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: all var(--dur);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.lang-switch-group a:first-child {
  border-right: 1px solid var(--border-dark);
}
.lang-switch-group a:hover,
.lang-switch-group a.active {
  background: var(--ink);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   4. COOKIE BANNER — floating bottom-right icon + popup
   ───────────────────────────────────────────────────────────── */

/* Floating trigger icon */
.cookie-trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 8000;
  transition: transform .2s var(--ease-out), box-shadow .2s;
  border: 1.5px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.cookie-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(0,0,0,.22);
}
.cookie-trigger.hidden { display: none; }

/* Banner popup */
.cookie-banner {
  position: fixed;
  bottom: 5.5rem;
  right: 1.25rem;
  width: 320px;
  max-width: calc(100vw - 2rem);
  background: #111110;
  color: rgba(255,255,255,.88);
  border-radius: 18px;
  padding: 1.2rem 1.3rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
  z-index: 8001;
  display: none;
  animation: cookiePop .3s cubic-bezier(.25,.46,.45,.94) both;
}
.cookie-banner.visible {
  display: block;
}
@keyframes cookiePop {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.cookie-title {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .45rem;
  font-variation-settings: "opsz" 18;
}
.cookie-text {
  font-size: .78rem;
  color: rgba(255,255,255,.58);
  line-height: 1.55;
  margin-bottom: .9rem;
}
.cookie-text a {
  color: rgba(255,255,255,.78);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.cookie-btn-accept {
  flex: 1; min-width: 100px;
  padding: .55rem .9rem;
  background: var(--red);
  color: #fff; border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.cookie-btn-accept:hover { background: #a80016; }
.cookie-btn-decline {
  padding: .55rem .8rem;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .79rem; font-weight: 500;
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cookie-btn-decline:hover {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
}
.cookie-close {
  position: absolute;
  top: .75rem; right: .85rem;
  background: rgba(255,255,255,.1);
  border: none; color: rgba(255,255,255,.5);
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.cookie-close:hover { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 400px) {
  .cookie-banner { right: .75rem; bottom: 5rem; width: calc(100vw - 1.5rem); }
  .cookie-trigger { bottom: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.25rem; }
}