/* PreOwned by ZABAZINGO — storefront (v5, SOCIAL · ROUNDED · BORDERLESS)
   Source of truth: https://collection.zabazingo.eu/ (token adaptation) + the
   operator's TikTok/IG reference set (design-reference/*.png).
   Design language: warm dark, cream ink, sand accent. Headings/body = PPNeue (readable).
   NotoSerifDisplay is the ZABAZINGO LOGO FONT — wordmark/monogram ONLY, never text.
   headings + PPNeue body. ROUNDED corners (pills + perfect-circle avatars exactly
   like TikTok/IG) — the earlier "scharfkantig" was sign.it contamination; the
   social components follow the reference = rounded. BORDERLESS: --bd is
   transparent, separation comes from spacing + subtle surface bg + sand hover.
   NO emoji. Icons = premium inline SVG only. NO native/system controls. */

/* ---- fonts: the real collection families, hosted locally ---- */
@font-face {
  font-family: "PPNeue"; src: url("/fonts/PPNeueMontreal-Regular.otf") format("opentype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "PPNeue"; src: url("/fonts/PPNeueMontreal-Semibold.otf") format("opentype");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "NotoSerifDisplay"; src: url("/fonts/NotoSerifDisplay_ExtraCondensed-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-display: block;
}
@font-face {
  font-family: "NotoSerifDisplay"; src: url("/fonts/NotoSerifDisplay_ExtraCondensed-Regular.ttf") format("truetype");
  font-weight: 400; font-display: block;
}
@font-face {
  font-family: "NotoSerifDisplay"; src: url("/fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf") format("truetype");
  font-weight: 700; font-display: block;
}

:root {
  /* collection tokens (confirmed, literal) */
  --bg: #1c1b18;
  --bg-deep: #141311;
  --bg-2: #232220;
  --bg-3: #2b2926;
  --ink: #f3eee4;
  --ink-2: rgba(243, 238, 228, 0.60);
  --ink-3: rgba(243, 238, 228, 0.38);
  --ac: #c9bfa8;
  --ac-h: #d9d0bb;
  --coin: #d4a24c;           /* ZZ Coin gold — gamified currency for paid boosts (OPIN-009) */
  --terra: #A53A2A;          /* ZABA terracotta — actions/CTA accent per CI */
  --terra-h: #bd4634;
  --eco: #9db389;            /* warm sage, harmonised with the sand palette */
  --line: rgba(243, 238, 228, 0.10);
  --bd: transparent;        /* radical-minimal (TikTok/IG): NO structural lines — separation via spacing + surface bg. Hover affordance uses --ac. */
  --sans: "PPNeue", -apple-system, system-ui, "Segoe UI", sans-serif;
  /* ZABAZINGO LOGO FONT — wordmark/monogram ONLY. Forbidden for body/headings
     (illegible at text sizes). Used solely by .brand / .rail-brand / .auth-card .logo. */
  --logo: "NotoSerifDisplay", Georgia, serif;
  /* headings/titles use the READABLE sans now, NOT the logo serif */
  --display: "PPNeue", -apple-system, system-ui, "Segoe UI", sans-serif;
  /* social7 CI: ONE radius everywhere = 5px ("almost pointed"). NO per-section
     deviation. EXCEPTION: avatars stay perfect circles (border-radius:50% via the
     .av rule — a person photo is not a container). The dense product grid is the
     other exception (0 = pointed, edge-to-edge). BORDERLESS (--bd transparent).
     NO drop-shadows anywhere — separation comes from the 5px radius + subtle
     surface bg only. */
  --r: 5px;                  /* cards, banner, tiles */
  --r-s: 5px;                /* buttons, chips, icons, like, pills */
  --r-m: 5px;                /* inputs, list rows, segmented controls */
  --maxw: 720px;
  --gut: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; padding-bottom: calc(78px + env(safe-area-inset-bottom));
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---- top bar: REMOVED (social7). The operator wants NO top header anywhere —
   the left nav rail (with its monogram) is the only chrome. Search moved to the
   "Suchen" nav item. .topbar / .brand / .search styles deleted. ---- */

/* ---- charity DEMOTED: subtle one-line strip (not the hero, shown once) ---- */
.impact-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 14px; padding: 0;
  color: var(--ink-3); font-size: 12px; letter-spacing: .01em; line-height: 1.5;
}
.impact-note b { color: var(--ink-2); font-weight: 600; }
.impact-note .dot { width: 5px; height: 5px; flex: 0 0 auto; background: var(--ac); display: inline-block; }

/* ---- editorial section title (collection "The Collection" treatment) ---- */
.feed-head { padding: 6px 0 2px; }
.feed-head .eyebrow {
  font-family: var(--sans); font-size: 10px; letter-spacing: .3em; color: var(--ac);
  text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: .6rem;
}
.feed-head .eyebrow::before { display: none; }
.feed-head h2 {
  font-family: var(--display); font-weight: 200; font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: .98; letter-spacing: -.025em; margin: .35rem 0 0;
}
.feed-head h2 em { font-style: italic; color: var(--ac); font-weight: 400; }

/* ---- chips ---- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap; background: var(--bg-2); border: .5px solid var(--bd);
  color: var(--ink-2); padding: 7px 15px; font-size: 13px; cursor: pointer;
  letter-spacing: .02em; border-radius: var(--r-s); transition: color .18s, border-color .18s, background .18s;
}
.chip:hover { color: var(--ink); border-color: var(--ac); }
.chip.on { background: var(--ac); border-color: var(--ac); color: var(--bg-deep); font-weight: 600; }

/* ---- feed: clean uniform grid ---- */
.feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gut); padding-bottom: 24px; }
.feed[data-cols="1"] { grid-template-columns: 1fr; }
.feed[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.feed[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.feed[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--bg-2); overflow: hidden; display: block; width: 100%;
  border: .5px solid var(--bd); border-radius: var(--r);
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover { border-color: var(--ac); transform: translateY(-3px); }
.card:active { transform: scale(0.985); }
.card .ph { aspect-ratio: 3 / 4; position: relative; display: grid; place-items: center;
  background: linear-gradient(150deg, #2a2723, #3a342c); }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .94; }

/* view toggle (1/2/3/4 columns) — one connected segmented control */
.viewbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 2px 0 12px; }
.viewbar .lbl { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.18em; }
.cols { display: inline-flex; background: var(--bg-2); border: .5px solid var(--bd); overflow: hidden; border-radius: var(--r-m); }
.colbtn { appearance: none; -webkit-appearance: none; background: transparent; border: none;
  border-left: .5px solid var(--bd); color: var(--ink-2); width: 38px; height: 32px;
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: background 0.16s ease, color 0.16s ease; }
.colbtn:first-child { border-left: none; }
.colbtn svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.colbtn:hover { color: var(--ink); }
.colbtn[aria-pressed="true"] { background: var(--ac); color: var(--bg-deep); }

.card .ph .tag {
  position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(20,19,17,.6); backdrop-filter: blur(4px); color: var(--ac);
  padding: 4px 9px; border: .5px solid var(--bd); border-radius: var(--r-s);
}
.card .ph .like { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 0; border: .5px solid var(--bd); cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center; background: rgba(20, 19, 17, 0.55); backdrop-filter: blur(4px);
  border-radius: var(--r-s); }
.card .ph .like svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.card .ph .like[aria-pressed="true"] svg { fill: var(--ac); stroke: var(--ac); }

/* social stats row (views / likes / shares) */
.stats { display: flex; gap: 13px; margin-top: 8px; }
.stats .stat { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12px; }
.stats .stat svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.stats .stat b { font-weight: 600; color: var(--ink-2); }
.iconbtn { background: var(--bg-2); border: .5px solid var(--bd); color: var(--ink); width: 42px; height: 42px;
  display: grid; place-items: center; cursor: pointer; padding: 0; border-radius: var(--r-s); }
.iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* nav icons as premium SVG */
.nav a .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; display: block; }
.nav .sell svg { width: 26px; height: 26px; fill: none; stroke: var(--bg-deep); stroke-width: 2; }
.card .meta { padding: 11px 12px 13px; }
.card .ttl { font-size: 14px; font-weight: 600; line-height: 1.25; }
.card .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.card .price { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.lvl { font-size: 11px; color: var(--ac); display: inline-flex; align-items: center; gap: 3px; letter-spacing: .04em; }

/* ---- Entdecken: category tiles — DENSE social grid (Instagram explore look:
   3 cols, ~no gap, square tiles, name+count OVERLAID on the image scrim). ---- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-bottom: 24px; }
.cat-tile { display: block; position: relative; background: var(--bg-2); overflow: hidden;
  transition: transform .18s ease; }
.cat-tile:active { transform: scale(0.99); }
.cat-ph { aspect-ratio: 1 / 1; position: relative; display: block;
  background: linear-gradient(150deg, #2a2723, #3a342c); }
.cat-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* gradient scrim + overlaid label, like a social tile */
.cat-ph::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,19,17,.82) 0%, rgba(20,19,17,.18) 46%, transparent 74%); }
.cat-ov { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; }
.cat-name { font-family: var(--display); font-weight: 600; letter-spacing: .01em; text-transform: uppercase;
  font-size: 13px; color: var(--ink); line-height: 1.05; }
.cat-cnt { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ac); }

/* ---- avatars: PERFECT CIRCLES (TikTok/IG, per reference) ---- */
.av { display: grid; place-items: center; font-weight: 700; color: var(--bg-deep);
  background: linear-gradient(140deg, var(--ac-h), var(--ac)); border-radius: 50%;
  font-family: var(--display); overflow: hidden; aspect-ratio: 1; flex: 0 0 auto; }
.av img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   NAV-RAIL (Instagram/Meta desktop app-shell, ZZ warm-dark CI)
   Mobile (<1024px) = fixed bottom bar (EXACTLY 5 round icons).
   Desktop (>=1024px) = fixed WIDE LEFT rail (~248px) with a small
   logo top-left and a vertical list of rows, EACH ROW = line-style
   SVG icon on the LEFT + its TEXT LABEL on the RIGHT, labels ALWAYS
   VISIBLE (NO hover-to-reveal). A grouped/boxed lower block
   ("Auch von ZABAZINGO") mirrors the reference's "Also from Meta"
   box. Active row = accent + bold. Premium inline SVG, no emoji,
   5px radius, no shadows. Auth-aware: body.auth-in / body.auth-out.
   Faithful to design-reference/weitere/nav-also-from-meta.png + nav-mid.png.
   ============================================================ */

/* ---- mobile: bottom bar (pm-3201 [nav.mobile.bottom]) ----
   EXACTLY 5 ROUND icons, fixed to the device bottom with safe-area-inset
   padding, NO text labels (icons speak for themselves). Which 5 show depends
   on auth state (mob-in / mob-out classes); everything else is hidden. */
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: rgba(20, 19, 17, 0.94); backdrop-filter: blur(12px); border-top: .5px solid var(--bd);
  padding-bottom: env(safe-area-inset-bottom); }
.nav .wrap { display: flex; justify-content: space-around; align-items: center;
  height: 62px; padding: 0 6px; }
/* round icon buttons, no label text on mobile */
.nav a { color: var(--ink-3); display: grid; place-items: center; gap: 0;
  width: 46px; height: 46px; border-radius: 50%; }
.nav a .ic { font-size: 20px; display: grid; place-items: center; }
.nav a .lbl { display: none; }            /* no text labels on mobile */
.nav a.on { color: var(--ink); }
.nav a.on .ic { background: rgba(243,238,228,.08); width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center; }
.nav .sell {
  background: var(--ac); color: var(--bg-deep); width: 50px; height: 50px; display: grid; place-items: center;
  margin-top: -12px; box-shadow: none; border-radius: 50%; }
.nav .sell .ic { background: none !important; width: auto; height: auto; }

/* brand sits in the rail head on desktop only — hidden in the mobile bar */
.nav .rail-brand { display: none; }
/* rail footer + spacer are desktop-rail only — never in the mobile bottom bar */
.nav .rail-foot, .nav .rail-spacer { display: none; }
@media (min-width: 1024px) { .nav .rail-spacer { display: block; } }
/* grouped lower block ("Auch von ZABAZINGO") + its label = desktop rail only */
.nav .rail-group, .nav .rail-group-label { display: none; }

/* auth-aware MOBILE bottom bar: only the mob-in / mob-out members of the active
   auth state are shown (exactly 5). Everything else stays hidden. !important so
   it beats the .nav a.cta { display:flex } CTA rule regardless of order. */
.nav a { display: none !important; }
body.auth-in  .nav a.mob-in  { display: grid !important; }
body.auth-out .nav a.mob-out { display: grid !important; }
/* the prominent logged-out CTA ("Anmelden / Verkaufen") */
.nav a.cta {
  color: var(--bg-deep); background: var(--ac); }
.nav a.cta .ic svg { stroke: var(--bg-deep); }

/* ---- "kommt bald" placeholder page (ZZ CI, sharp) ---- */
.soon { padding: 8vh 0 12vh; max-width: 560px; }
.soon .eyebrow {
  font-family: var(--sans); font-size: 10px; letter-spacing: .3em; color: var(--ac);
  text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.soon .eyebrow::before { display: none; }
.soon-h {
  font-family: var(--display); font-weight: 200; font-size: clamp(2.6rem, 9vw, 4.4rem);
  line-height: .96; letter-spacing: -.025em; margin: .4rem 0 1rem; text-transform: none; }
.soon-h em { font-style: italic; color: var(--ac); font-weight: 400; }
.soon-p { font-size: 15px; max-width: 42ch; margin: 0 0 26px; }
.soon-cta { display: flex; gap: 10px; max-width: 360px; }
.soon-cta .btn { flex: 1; }

/* ---- generic (kept for shared components / detail page out-of-scope) ---- */
.h-display { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; text-transform: uppercase; }

/* Canonical ZZ wordmark — ALWAYS the ZABAZINGO logo serif (NotoSerifDisplay), weight
   700, -.2em ("-200") letter-spacing + padding-right .2em. TRUE GLOBAL (top-level, NOT
   inside any @media) so it holds on mobile too (operator OPIN-011/013). ONE source of
   truth — do NOT redefine .zz per page. */
.zz { font-family: var(--logo); font-weight: 700; letter-spacing: -.2em; padding-right: .2em; }
.btn {
  display: block; width: 100%; text-align: center; background: var(--ac); color: var(--bg-deep);
  border: none; padding: 15px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.08em; border-radius: var(--r-s);
}
.btn.ghost { background: var(--bg-2); border: .5px solid var(--bd); color: var(--ink); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .04em;
  background: var(--bg-3); border: .5px solid var(--bd); padding: 6px 12px; border-radius: var(--r-s); }
.badge.eco { color: var(--eco); border-color: rgba(157,179,137,0.4); }
.badge.verified { color: var(--ink); }
.muted { color: var(--ink-2); }
.back { color: var(--ink-2); font-size: 13px; padding: 14px 0; display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; }
.tile { background: linear-gradient(150deg, #2a2723, #3a342c); border-radius: var(--r); }

/* Detail page used a .cut-tr helper; keep a safe sharp definition so it never
   falls back to an angular clip-path. With --r=0 this is a clean rectangle. */
.cut-tr { border-radius: var(--r); }

/* ============================================================
   RESPONSIVE — feed scales up, mobile bottom-bar -> desktop rail.
   ============================================================ */
.page-feed .wrap { padding: 0 var(--gut); }

@media (min-width: 1024px) {
  /* WIDE persistent rail — NO hover-reveal. Fixed width, labels always shown. */
  :root { --rail-w: 248px; }

  body { padding-bottom: 0; padding-left: var(--rail-w); }

  .page-feed .wrap { max-width: 1240px; }
  .page-form .wrap,
  .page-profile .wrap { max-width: 660px; }
  /* PDP goes WIDE on desktop so the IG two-column (media | comments) fits. */
  .page-detail .wrap { max-width: 1100px; }

  /* ---- the vertical rail — persistent dark surface, fixed width, right-edge
     hairline like the Meta reference. Main content is shifted right by
     --rail-w via body padding-left, so no overlap / no floating icons. ---- */
  .nav {
    top: 0; bottom: 0; left: 0; right: auto; width: var(--rail-w);
    border-top: none; border-right: .5px solid var(--line);
    /* SEAMLESS rail (IG/Meta): rail shares the PAGE background so NO darker/
       lighter rectangle sits behind the nav. Only the right-edge --line
       hairline divides the rail from the feed content. */
    background: var(--bg); backdrop-filter: none; box-shadow: none;
    overflow-y: auto; overflow-x: hidden; transition: none;
  }
  /* no hover expansion — the rail width never changes */
  .nav:hover { width: var(--rail-w); box-shadow: none; }

  .nav .wrap {
    max-width: none; margin: 0; padding: 18px 12px 18px 14px; height: 100%; width: var(--rail-w);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
  }

  /* logo top-left in the rail head (Meta logo slot). !important beats the global
     `.nav a { display:none !important }` mobile rule — .rail-brand is an <a>. */
  .nav .rail-brand {
    display: flex !important; align-items: center; gap: 11px; height: 44px; padding: 0 12px;
    margin: 2px 0 18px; color: var(--ink); white-space: nowrap; overflow: hidden;
  }
  .nav .rail-brand .mark {
    flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
    background: var(--ac); color: var(--bg-deep); font-family: var(--logo);
    font-weight: 700; font-size: 16px; letter-spacing: -.06em; line-height: 1;
    border-radius: var(--r-m); padding-left: 1px;
  }
  /* rail wordmark: ZZ monogram ONLY (NotoSerifDisplay, tight -.2em per CI), no
     "PROWNED" subtitle — matches collection.zabazingo.eu. ALWAYS visible. */
  /* ZZ sits in an icon-width, centered slot at the SAME left offset as the nav
     icons below it, so the wordmark lines up with the icon column. */
  .nav .rail-brand .wordmark {
    width: 26px; display: inline-flex; align-items: baseline; justify-content: center;
    line-height: 1; opacity: 1; transform: none;
  }
  .nav .rail-brand .wordmark .zz {
    font-family: var(--logo); font-weight: 700; font-size: 24px; letter-spacing: -.2em; color: var(--ink); }

  /* nav items: full-width rows, line icon LEFT + persistent label RIGHT.
     Comfortable ~50px row height, generous icon->label gap, like the reference. */
  .nav a {
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px;
    text-align: left;
    font-size: 15px; height: 50px; padding: 0 12px; text-transform: none; letter-spacing: 0;
    border-radius: var(--r-m); color: var(--ink); white-space: nowrap; overflow: hidden;
    transition: background 0.16s ease, color 0.16s ease;
  }
  /* auth items stay as full-width flex ROWS on desktop. The mobile bottom-bar
     reveal rules `body.auth-* .nav a.mob-* { display:grid !important }` have
     specificity (0,3,1) and would otherwise force grid (icon-over-label, clipped)
     on the wide rail. These selectors match that specificity AND set flex, with
     row-layout reasserted, so every shown item is a proper icon-left/label-right
     row regardless of its mob-in/mob-out membership. */
  body.auth-in  .nav a[data-auth="in"],
  body.auth-out .nav a[data-auth="out"],
  body.auth-in  .nav a.mob-in,
  body.auth-out .nav a.mob-out,
  .nav a[data-auth="any"] {
    display: flex !important; flex-direction: row !important;
    justify-content: flex-start; align-items: center; gap: 16px;
  }
  .nav a .ic {
    flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
    font-size: 0; position: relative;
  }
  .nav a .ic svg { width: 24px; height: 24px; }
  /* notification dot on the rail (e.g. Aktivität) — terracotta cue like the IG red dot */
  .nav a .ic .dot-badge {
    position: absolute; top: 0; right: 0; width: 8px; height: 8px;
    border-radius: 50%; background: var(--terra); }
  /* persistent label — ALWAYS visible, no opacity/transform reveal */
  .nav a .lbl {
    display: block; flex: 1 1 auto; text-align: left;
    font-size: 15px; font-weight: 400; letter-spacing: 0;
    opacity: 1; transform: none; color: inherit;
  }
  /* reset the round mobile-icon styling to the row layout */
  .nav a { width: auto; border-radius: var(--r-m); align-items: center; }
  .nav a.on .ic { background: none; width: 26px; height: 26px; }
  /* hover: subtle warm surface */
  .nav a:hover { background: rgba(243,238,228,.06); color: var(--ink); }
  /* active: bold white label + slightly thicker icon (reference matches IG) */
  .nav a.on { color: var(--ink); font-weight: 700; background: transparent; }
  .nav a.on .ic svg { stroke-width: 2.4; }
  .nav a.on .lbl { color: var(--ink); font-weight: 700; }

  /* "Verkaufen" (logged-in) / "Anmelden" (logged-out) — accent ring behind the
     icon marks the primary action, but the row reads like every other row
     (persistent label, full width). */
  .nav .sell, .nav a.cta {
    margin: 2px 0; height: 50px; width: auto; box-shadow: none;
    background: transparent; color: var(--ink);
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px;
    border-radius: var(--r-m); padding: 0 12px;
  }
  .nav .sell .ic, .nav a.cta .ic { width: 26px; }
  .nav .sell .ic svg, .nav a.cta .ic svg { stroke: var(--bg-deep); }
  .nav .sell .ic, .nav a.cta .ic { position: relative; }
  .nav .sell .ic::before, .nav a.cta .ic::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 32px; height: 32px; border-radius: var(--r-m);
    background: var(--ac); z-index: 0;
  }
  .nav .sell .ic svg, .nav a.cta .ic svg { position: relative; z-index: 1; }
  .nav .sell:hover .ic::before, .nav a.cta:hover .ic::before { background: var(--ac-h); }
  .nav .sell .lbl, .nav a.cta .lbl { color: var(--ink); font-weight: 600; }

  /* ---- GROUPED lower block ("Also from Meta" analog -> "Auch von ZABAZINGO").
     SEAMLESS (IG/Meta): NO filled box, NO rounded surface — it sits on the same
     page background as the rest of the rail. The group is set apart only by
     vertical spacing + a single faint top hairline divider, then the ecosystem
     links and the caption label below them. ---- */
  .nav .rail-group {
    display: flex; flex-direction: column; gap: 0;
    margin: 14px 0 8px; padding: 10px 6px 6px;
    background: transparent; border-radius: 0;
    border-top: .5px solid var(--line);
  }
  .nav .rail-group .rail-group-item { margin: 0; height: 46px; }
  /* the caption row UNDER the grouped items (like "Also from Meta"): icon + label,
     muted, non-interactive. ALWAYS visible. */
  .nav .rail-group-label {
    display: flex; flex-direction: row; align-items: center; gap: 16px;
    padding: 10px 12px 4px; margin-top: 2px; color: var(--ink-2);
    font-size: 14px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden;
  }
  .nav .rail-group-label .ic { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; }
  .nav .rail-group-label .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .nav .rail-group-label .lbl {
    display: block; flex: 1 1 auto; text-align: left;
    opacity: 1; transform: none;
  }

  /* a thin spacer pushes "Mehr/Profil" toward the bottom like the reference */
  .nav .rail-spacer { flex: 1 1 auto; min-height: 8px; }

  /* rail footer (Über / Charity / Bedingungen) — persistent, muted, at the foot */
  .nav .rail-foot {
    padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 6px;
    opacity: 1; pointer-events: auto;
  }
  .nav .rail-foot a { display: block; height: auto; padding: 0; font-size: 12px;
    text-align: left; color: var(--ink-3); white-space: nowrap; }
  .nav .rail-foot a:hover { background: none; color: var(--ink-2); }
  .nav .rail-foot .cc { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
}

/* ============================================================
   SOCIAL TEMPLATE (v5) — For-You vertical feed, IG/TikTok profile,
   story highlights, tabs, empty states, auth, messages, activity,
   signup modal. ROUNDED + BORDERLESS, premium SVG, no native UI.
   ============================================================ */

/* ---- auth-aware visibility for NON-nav elements (topbar actions etc.) ---- */
[data-auth="in"]:not(.nav a):not(nav .nav a),
[data-auth="out"]:not(.nav a):not(nav .nav a) { display: none; }
body.auth-in  [data-auth="in"]:not(.nav a)  { display: inline-flex; }
body.auth-out [data-auth="out"]:not(.nav a) { display: inline-flex; }

/* ---- round icon-buttons (used by the PDP "Mehr" 3-dots, formerly topbar too) ---- */
.tb-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-2); color: var(--ink); cursor: pointer; border: none; position: relative; }
.tb-icon:hover { background: var(--bg-3); }
.tb-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tb-icon .dot-badge { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px;
  background: var(--ac); border-radius: 50%; border: 2px solid var(--bg-deep); }
.tb-av { width: 38px; height: 38px; font-size: 14px; }

/* ====================== FOR-YOU vertical feed ====================== */
/* A single-column stream of post cards (TikTok For-You / IG feed). Each post:
   header (avatar + handle + meta), media, then a right-side action column on
   desktop / inline action row on mobile. Distinct from the .feed grid. */
.foryou { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; padding: 6px 0 40px; }
.fy-tabs { display: flex; gap: 22px; justify-content: center; padding: 4px 0 14px; }
.fy-tabs .fy-tab { background: none; border: none; color: var(--ink-3); font: inherit;
  font-size: 16px; font-weight: 600; cursor: pointer; padding: 4px 2px; position: relative; }
.fy-tabs .fy-tab.on { color: var(--ink); }
.fy-tabs .fy-tab.on::after { content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 20px; height: 2px; background: var(--ink); border-radius: 5px; transform: translateX(-50%); }

/* feed control row: tabs (left) + view controls (right). Borderless, rounded.
   pm-3204 [feed.header.tabs-space]: MORE vertical room + tab breathing room.
   The cramped row got taller (min-height) with generous top/bottom padding and
   wider tab gaps; the underline sits lower so labels never touch the controls. */
.feed-ctl { max-width: 540px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 18px 0 16px; min-height: 60px; }
.feed-ctl .fy-tabs { justify-content: flex-start; padding: 0; gap: 30px; }
.feed-ctl .fy-tabs .fy-tab { font-size: 17px; padding: 6px 2px; }
.feed-ctl .fy-tabs .fy-tab.on::after { bottom: -8px; }
/* view-ctl = custom CI segmented control (item 4 grid toggle + item 5 products-only) */
.view-ctl { display: inline-flex; background: var(--bg-2); border-radius: var(--r-s);
  padding: 3px; gap: 2px; flex: 0 0 auto; }
.view-ctl .vc-opt { display: inline-grid; place-items: center; width: 34px; height: 30px;
  background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 0;
  border-radius: var(--r-s); transition: background .15s ease, color .15s ease; }
.view-ctl .vc-opt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.view-ctl .vc-opt .vc-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.view-ctl .vc-opt:hover { color: var(--ink); }
.view-ctl .vc-opt.on { background: var(--bg-deep); color: var(--ac); }

/* view modes on the For-You section -------------------------------------- */
/* feed (default): single-column social posts (rules above). */
/* grid: 2-column listing grid — posts shrink, action column drops out.
   pm-3205 [feed.grid.2up-desc]: the description line UNDER the image is now
   RENDERED here too (same as 1-col), no longer hidden. */
/* grid = 2 columns, but the PORTRAIT card form of the old 3-up (operator: the
   2er must have the shape of the 3er). Action column + social head hidden, the
   media is a tall 3/4.6 portrait. */
.foryou[data-view="grid"] { max-width: 760px; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 18px; }
.foryou[data-view="grid"] .post { gap: 0; }
.foryou[data-view="grid"] .post-body { grid-template-columns: 1fr; }
.foryou[data-view="grid"] .act-col,
.foryou[data-view="grid"] .post-head { display: none; }
.foryou[data-view="grid"] .post-media { aspect-ratio: 3 / 4.6; border-radius: var(--r); }
.foryou[data-view="grid"] .post-cap { padding-top: 8px; font-size: 13px; }
.foryou[data-view="grid"] .post-cap .cap-desc { display: block; font-size: 12px; }

/* tall: 3-column PORTRAIT cards (pm-3206 [feed.grid.3up-height]) — tall product
   cards in the spirit of the Zara preowned grid. Action column hidden; the
   media is a tall 3/4.6 portrait so the tiles read clearly taller. */
.foryou[data-view="tall"] { max-width: 980px; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 760px) { .foryou[data-view="tall"] { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.foryou[data-view="tall"] .post { gap: 0; }
.foryou[data-view="tall"] .post-body { grid-template-columns: 1fr; }
.foryou[data-view="tall"] .act-col,
.foryou[data-view="tall"] .post-head { display: none; }
.foryou[data-view="tall"] .post-media { aspect-ratio: 3 / 4.6; border-radius: var(--r); }
.foryou[data-view="tall"] .post-cap { padding-top: 8px; font-size: 13px; }
.foryou[data-view="tall"] .post-cap .cap-desc { display: block; font-size: 12px; }

/* over (overview): POINTED tiles, NO gap (edge-to-edge), responsive 6 -> 4 -> 2
   columns by viewport. All social chrome hidden — just the product image grid.
   Tiles are radius 0 (pointed), the one place that deviates from the 5px rule.
   pm-3207 [feed.grid.6up-cta]: a CTA tile is injected into the MIDDLE. */
.foryou[data-view="over"] { max-width: none; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 760px)  { .foryou[data-view="over"] { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1300px) { .foryou[data-view="over"] { grid-template-columns: repeat(6, 1fr); } }
.foryou[data-view="over"] .post { gap: 0; }
.foryou[data-view="over"] .post-body { grid-template-columns: 1fr; }
.foryou[data-view="over"] .act-col,
.foryou[data-view="over"] .post-head,
.foryou[data-view="over"] .post-cap { display: none; }
.foryou[data-view="over"] .post-media { aspect-ratio: 1; border-radius: 0; }

/* CTA tile (item 5) — only visible inside the overview grid; sits in the middle.
   ZABA CI: warm-dark surface, terracotta accents, two stacked actions. */
.fy-cta { display: none; }
.foryou[data-view="over"] .fy-cta { display: block; }
.fy-cta-in { display: grid; grid-template-rows: 1fr 1fr; height: 100%; aspect-ratio: 1;
  background: var(--bg-2); }
.fy-cta-act { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; padding: 8px; color: var(--ink); }
.fy-cta-act.sell { background: var(--ac); color: var(--bg-deep); }
.fy-cta-act.sell:hover { background: var(--ac-h); }
.fy-cta-act.show { background: var(--terra); color: #fff; }
.fy-cta-act.show:hover { background: var(--terra-h); }
.fy-cta-ic { width: 26px; height: 26px; }
.fy-cta-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fy-cta-t { font-family: var(--sans); font-weight: 700; font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .02em; line-height: 1.1; }

/* ===== BATTLE arena (operator) — style versus + creator-economy gifting.
   Two looks compete (2 cols at every width); one-tap vote; support a guru with
   coin/token gifts; the arena comes ALIVE on scroll-into-view. ================= */
.foryou[data-view="battle"] { max-width: 760px; gap: 26px; }
body.view-battle [data-ff-btn] { display: none; }   /* listing filters don't apply to a battle */
.battle { display: block; }
.battle-q { font-family: var(--serif, var(--sans)); font-size: clamp(16px, 2.4vw, 21px);
  font-weight: 600; color: var(--ink); margin: 0 0 12px; padding: 0 2px; display: flex; align-items: center; gap: 10px; }
.battle-live { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #fff; background: #d8443b;
  border-radius: 999px; padding: 3px 9px; opacity: 0; }
.battle.live .battle-live { opacity: 1; animation: btlive 1.6s ease-in-out infinite; }
@keyframes btlive { 0%,100% { box-shadow: 0 0 0 0 rgba(216,68,59,.5); } 50% { box-shadow: 0 0 0 6px rgba(216,68,59,0); } }
.battle-arena { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; align-items: stretch; }
.bt-side { position: relative; display: flex; flex-direction: column; }
.bt-vote { position: relative; display: block; width: 100%; padding: 0; background: none; border: none;
  cursor: pointer; text-align: left; overflow: hidden; border-radius: var(--r); }
.battle-arena .bt-side:first-of-type .bt-vote { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.battle-arena .bt-side:last-of-type .bt-vote { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bt-media { position: relative; display: block; width: 100%; aspect-ratio: 3/4.4; object-fit: cover; background: #2a2723; }
.bt-cre { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 18px; background: linear-gradient(180deg, rgba(12,11,10,.72), transparent); }
.bt-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--ac); color: var(--bg-deep); font-weight: 700; font-size: 12px; }
.bt-name { font-size: 12.5px; font-weight: 600; line-height: 1.15; color: #fff; }
.bt-loc { display: block; font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.8); }
.bt-foot { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; gap: 6px; padding: 0 10px; }
.bt-ttl { font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.bt-pct { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.bt-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px; background: rgba(255,255,255,.18); }
.bt-fill { display: block; height: 100%; width: 0; background: var(--ac); transition: width .6s cubic-bezier(.4,0,.2,1); }
.bt-side.won .bt-fill { background: #6fcf97; }
.bt-side.won .bt-vote::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 2px solid #6fcf97; border-radius: inherit; pointer-events: none; }
.bt-support { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px;
  background: var(--bg-2); border: .5px solid var(--bd); color: var(--ink); cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: var(--r-s);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease, background .14s ease; }
.battle.live .bt-support { opacity: 1; transform: none; }
.bt-support:hover { background: var(--bg-3); }
.bt-support svg { width: 16px; height: 16px; fill: var(--ac); stroke: var(--ac); }
.bt-sup-n { color: var(--ink-3); font-weight: 700; }
.battle-vs { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 4;
  font-family: var(--serif, var(--sans)); font-weight: 800; font-size: 17px; letter-spacing: .04em;
  color: var(--bg-deep); background: var(--ink); width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.bt-fly { position: absolute; left: 50%; bottom: 16%; z-index: 5; width: 30px; height: 30px; margin-left: -15px;
  color: var(--ac); pointer-events: none; animation: btfly 1.4s ease-out forwards; }
.bt-fly svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
@keyframes btfly { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-130px) scale(1.2); opacity: 0; } }
.gift-sheet { position: fixed; inset: 0; z-index: 80; background: rgba(8,7,6,.5); display: flex;
  align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.gift-sheet.open { opacity: 1; }
.gs-panel { width: 100%; max-width: 520px; background: var(--bg-2); border-top-left-radius: 18px; border-top-right-radius: 18px;
  padding: 16px 16px 24px; transform: translateY(18px); transition: transform .25s ease; }
.gift-sheet.open .gs-panel { transform: none; }
.gs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gs-title { font-weight: 700; font-size: 16px; }
.gs-x { background: none; border: none; color: var(--ink-2); cursor: pointer; width: 30px; height: 30px; }
.gs-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.gs-bal { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.gs-bal b { color: var(--ink); }
.gs-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.gs-bal.low b { color: #e2655f; }
.gs-topup { margin-left: auto; background: var(--ac); color: var(--bg-deep); border: none; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; }
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 420px) { .gs-grid { grid-template-columns: repeat(2, 1fr); } }
.gs-gift { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-3);
  border: .5px solid transparent; border-radius: var(--r-s); padding: 12px 8px; cursor: pointer; color: var(--ink); }
.gs-gift:hover { border-color: var(--ac); }
.gs-ic { width: 30px; height: 30px; color: var(--ac); }
.gs-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.gs-l { font-size: 12px; font-weight: 600; }
.gs-c { font-size: 11px; font-weight: 700; }
.gs-c.coins { color: #d9b25a; }
.gs-c.tokens { color: var(--ac); }
.gs-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin: 12px 2px 0; }

/* ===== Explore modes (operator: Explore surfaces Sell / Show / Battle) ======== */
.explore-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 26px; }
@media (max-width: 560px) { .explore-modes { grid-template-columns: 1fr; } }
.xmode { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px;
  border-radius: var(--r); overflow: hidden; color: #fff; min-height: 116px; justify-content: flex-end;
  background: var(--xg, var(--bg-2)); transition: transform .14s ease; }
.xmode::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 40%, rgba(0,0,0,.35)); }
.xmode:hover { transform: translateY(-2px); }
.xmode > * { position: relative; z-index: 1; }
.xmode-ic { width: 26px; height: 26px; margin-bottom: auto; }
.xmode-ic svg { width: 100%; height: 100%; }
.xmode-t { font-family: var(--serif, var(--sans)); font-weight: 700; font-size: 17px; }
.xmode-s { font-size: 12px; color: rgba(255,255,255,.85); }

.post { display: grid; grid-template-columns: 1fr; gap: 0; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; }
.post-head .av { width: 40px; height: 40px; font-size: 15px; }
.post-head .who { line-height: 1.25; display: block; }
.post-head .who .h { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 5px; }
.post-head .who .m { display: block; color: var(--ink-3); font-size: 12px; }
/* operator: IG-style "Paid partnership with <x>" line under the username. */
.post-head .who .paidpart { display: block; color: var(--ink-2); font-size: 11.5px; font-weight: 500; }
.post-head .who .paidpart b { color: var(--ink); font-weight: 600; }
.post-head .veric { width: 14px; height: 14px; color: var(--ac); }
.post-head .veric svg { width: 100%; height: 100%; fill: var(--ac); stroke: none; }
.post-head .more { margin-left: auto; }

/* media + right action column */
.post-body { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.post-media { position: relative; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(150deg,#2a2723,#3a342c); aspect-ratio: 4/5; display: block; }
.post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-media .price-chip { position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: rgba(20,19,17,.66); backdrop-filter: blur(6px); color: var(--ink);
  font-weight: 700; font-size: 15px; padding: 7px 14px; border-radius: var(--r-s); }
.post-media .tag { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 10px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ac);
  background: rgba(20,19,17,.6); backdrop-filter: blur(4px); padding: 5px 11px; border-radius: var(--r-s); }

/* the vertical social-action column (like / comment / save / share / repost) */
.act-col { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 4px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none;
  cursor: pointer; color: var(--ink); padding: 0; }
.act .ring { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-2);
  display: grid; place-items: center; transition: background .16s ease, transform .12s ease; }
.act:hover .ring { background: var(--bg-3); }
.act:active .ring { transform: scale(.9); }
.act .ring svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.7; }
.act .cnt { font-size: 12px; font-weight: 600; color: var(--ink-2); min-height: 14px; }
.act[aria-pressed="true"] .ring svg { fill: var(--ac); stroke: var(--ac); }
.act.like[aria-pressed="true"] .ring svg { fill: #e25563; stroke: #e25563; }
.act[aria-pressed="true"] .cnt { color: var(--ink); }

.post-cap { padding: 12px 2px 0; font-size: 14px; line-height: 1.45; }
.post-cap .h { font-weight: 600; }
.post-cap .ttl { color: var(--ink); }
.post-cap .sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }

/* mobile: action column becomes an inline row under the media */
@media (max-width: 640px) {
  .post-body { grid-template-columns: 1fr; }
  .act-col { flex-direction: row; justify-content: flex-start; gap: 22px; padding: 12px 2px 0; }
  .act { flex-direction: row; gap: 7px; }
  .act .ring { width: 26px; height: 26px; background: none; }
  .act .ring svg { width: 24px; height: 24px; }
}

/* ====================== PROFILE (item 7: CENTERED, premium ZABA) ====================== */
/* Centered profile column: circular avatar on top, name/stats/bio centered. */
.prof { max-width: 640px; margin: 0 auto; }
.prof-head { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 20px 0 8px; }
.prof-av { width: clamp(96px, 22vw, 132px); height: clamp(96px, 22vw, 132px); font-size: clamp(34px, 8vw, 48px); }
.prof-main { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.prof-name { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.prof-name h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -.01em; margin: 0; line-height: 1; }
.prof-name .veric { width: 18px; height: 18px; color: var(--ac); }
.prof-name .veric svg { width: 100%; height: 100%; fill: var(--ac); }
.prof-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 4px; }
.prof-actions .btn { width: auto; padding: 9px 22px; font-size: 14px; }
/* follow button = ZABA terracotta accent (NOT the IG blue — that violated CI) */
.btn.follow { background: var(--terra); color: #fff; }
.btn.follow:hover { background: var(--terra-h); }
.btn.follow.on { background: var(--bg-3); color: var(--ink); }
.icon-pill { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); color: var(--ink);
  display: grid; place-items: center; border: none; cursor: pointer; }
.icon-pill:hover { background: var(--bg-3); }
.icon-pill svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.prof-stats { display: flex; justify-content: center; gap: clamp(26px, 6vw, 48px); margin: 18px 0 14px; }
.prof-stats .st { font-size: 15px; color: var(--ink-2); display: flex; flex-direction: column;
  align-items: center; gap: 2px; }
.prof-stats .st b { color: var(--ink); font-weight: 700; margin-right: 0; font-size: 17px; }
.prof-bio { font-size: 14px; line-height: 1.5; max-width: 46ch; margin: 0 auto; text-align: center; }
.prof-bio .pn { font-weight: 700; }
.prof-bio .muted { color: var(--ink-3); }

/* story highlights row (circular) */
.highlights { display: flex; justify-content: flex-start; gap: 22px; overflow-x: auto; padding: 22px 2px 18px; scrollbar-width: none; }
.highlights::-webkit-scrollbar { display: none; }
.hl { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; }
.hl .ring { width: 74px; height: 74px; border-radius: 50%; padding: 3px; background: var(--bg-3);
  display: grid; place-items: center; }
.hl .ring .av { width: 100%; height: 100%; font-size: 12px; font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; background: linear-gradient(140deg,#3a3630,#54473b); color: var(--ink); }
.hl .lbl { font-size: 12px; color: var(--ink-2); max-width: 76px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl.add .ring .av { background: var(--bg-2); }
.hl.add .ring .av svg { width: 26px; height: 26px; stroke: var(--ink-2); fill: none; stroke-width: 1.6; }

/* profile tabs (Artikel / Favoriten / Gefällt mir) */
.prof-tabs { display: flex; justify-content: center; gap: clamp(24px, 8vw, 60px); margin-top: 8px;
  border-top: 1px solid var(--line); }
.prof-tab { background: none; border: none; color: var(--ink-3); font: inherit; font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  padding: 16px 2px; display: inline-flex; align-items: center; gap: 7px; position: relative; margin-top: -1px; }
.prof-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.prof-tab.on { color: var(--ink); }
.prof-tab.on::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--ink); }

/* profile item grid (item 7): clean GAP + ZABA ROUNDED corners (not pointed) */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 0 40px; }
@media (min-width: 720px) { .grid3 { gap: 14px; } }
.g3 { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r);
  background: linear-gradient(150deg,#2a2723,#3a342c); }
.g3 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g3 .ov { position: absolute; inset: 0; background: rgba(20,19,17,.42); opacity: 0; transition: opacity .16s ease;
  display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; font-weight: 700; }
.g3:hover .ov { opacity: 1; }
.g3 .ov span { display: inline-flex; align-items: center; gap: 6px; }
.g3 .ov svg { width: 18px; height: 18px; fill: #fff; stroke: none; }
.g3 .g3price { position: absolute; left: 7px; bottom: 7px; z-index: 2; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(20,19,17,.6); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: var(--r-s); }

/* empty state (TikTok "Upload your first ...") */
.empty { text-align: center; padding: 64px 16px 80px; color: var(--ink-2); }
.empty .ico { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2); margin: 0 auto 18px;
  display: grid; place-items: center; }
.empty .ico svg { width: 30px; height: 30px; stroke: var(--ink-2); fill: none; stroke-width: 1.6; }
.empty h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 6px; color: var(--ink); }
.empty p { font-size: 14px; margin: 0 0 18px; }
.empty .btn { width: auto; display: inline-block; padding: 10px 24px; }

/* ====================== AUTH pages ====================== */
.auth-wrap { max-width: 400px; margin: 6vh auto 0; padding: 0 20px 60px; }
.auth-card { background: var(--bg-2); border-radius: var(--r); padding: 30px 26px 28px; }
.auth-card .logo { font-family: var(--logo); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.01em; font-size: 26px; text-align: center; margin-bottom: 4px; }
.auth-card .logo small { display: block; font-family: var(--sans); font-weight: 600; font-size: 9px;
  letter-spacing: .26em; color: var(--ac); margin-top: 4px; }
.auth-card h1 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; text-align: center; margin: 18px 0 4px; }
.auth-card .sub { text-align: center; color: var(--ink-3); font-size: 13px; margin: 0 0 22px; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  background: var(--bg-3); color: var(--ink); border: none; padding: 13px; font: inherit; font-size: 15px;
  font-weight: 600; border-radius: var(--r-s); cursor: pointer; margin-bottom: 10px; text-align: center; }
.auth-btn:hover { background: #34322e; }
.auth-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.auth-btn.primary { background: var(--ac); color: var(--bg-deep); }
.auth-btn.primary:hover { background: var(--ac-h); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; margin: 16px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-field { margin-bottom: 12px; }
.auth-field label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .02em; }
.auth-input { width: 100%; background: var(--bg-3); border: .5px solid var(--bd); color: var(--ink);
  padding: 13px 16px; font: inherit; font-size: 15px; border-radius: var(--r-m); }
.auth-input:focus { outline: none; border-color: var(--ac); }
.auth-input::placeholder { color: var(--ink-3); }
.auth-foot { text-align: center; font-size: 13px; color: var(--ink-2); margin-top: 18px; }
.auth-foot a { color: var(--ac); font-weight: 600; }

/* ---- custom Month/Day/Year pickers (signup birthday — NO native select) ---- */
.dob { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.picker { position: relative; }
.picker-btn { width: 100%; background: var(--bg-3); border: .5px solid var(--bd); color: var(--ink);
  padding: 13px 14px; font: inherit; font-size: 14px; border-radius: var(--r-m); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; }
.picker-btn.placeholder { color: var(--ink-3); }
.picker-btn svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: var(--ink-3); fill: none; stroke-width: 2; }
.picker-btn:focus, .picker.open .picker-btn { outline: none; border-color: var(--ac); }
.picker-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--bg-3); border-radius: var(--r-m); max-height: 220px; overflow-y: auto;
  box-shadow: none; padding: 6px; display: none; }
.picker.open .picker-menu { display: block; }
.picker-opt { padding: 10px 12px; border-radius: var(--r); font-size: 14px; cursor: pointer; color: var(--ink-2); }
.picker-opt:hover, .picker-opt[aria-selected="true"] { background: var(--bg-2); color: var(--ink); }
.dob-note { color: var(--ink-3); font-size: 12px; margin: 8px 0 0; }

/* ====================== MESSAGES ====================== */
.msg-wrap { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 760px) { .msg-wrap { grid-template-columns: 320px 1fr; min-height: 60vh; } }
.msg-list { padding: 8px 0; }
.msg-list h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; padding: 6px 6px 12px; margin: 0; }
.thread { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-m); cursor: pointer; }
.thread:hover, .thread.on { background: var(--bg-2); }
.thread .av { width: 48px; height: 48px; font-size: 17px; }
.thread .tx { flex: 1; min-width: 0; }
.thread .tx .h { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.thread .tx .h .t { color: var(--ink-3); font-size: 11px; font-weight: 400; }
.thread .tx .p { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread.unread .tx .p { color: var(--ink); font-weight: 600; }
.thread .unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
.msg-pane { display: none; }
@media (min-width: 760px) { .msg-pane { display: flex; flex-direction: column; background: var(--bg-2);
  border-radius: var(--r); margin: 8px 0; overflow: hidden; } }
.msg-pane-head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.msg-pane-head .av { width: 40px; height: 40px; font-size: 15px; }
.msg-bubbles { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.bubble { max-width: 72%; padding: 10px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.4; }
.bubble.them { align-self: flex-start; background: var(--bg-3); color: var(--ink); border-bottom-left-radius: 5px; }
.bubble.me { align-self: flex-end; background: var(--ac); color: var(--bg-deep); border-bottom-right-radius: 5px; }
.msg-compose { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.msg-compose input { flex: 1; background: var(--bg-3); border: .5px solid var(--bd); color: var(--ink);
  padding: 12px 16px; font: inherit; font-size: 14px; border-radius: var(--r-s); }
.msg-compose input:focus { outline: none; border-color: var(--ac); }
.msg-compose .send { width: 44px; height: 44px; border-radius: 50%; background: var(--ac); border: none;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.msg-compose .send svg { width: 19px; height: 19px; stroke: var(--bg-deep); fill: none; stroke-width: 1.8; }

/* ====================== ACTIVITY ====================== */
.act-feed { max-width: 600px; margin: 0 auto; padding: 4px 0 40px; }
.act-feed h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; padding: 6px 4px 4px; margin: 0; }
.act-day { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  padding: 18px 4px 8px; font-weight: 600; }
.act-item { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-radius: var(--r-m); }
.act-item:hover { background: var(--bg-2); }
.act-item .ic-wrap { position: relative; flex: 0 0 auto; }
.act-item .av { width: 46px; height: 46px; font-size: 16px; }
.act-item .badge-ic { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--bg); }
.act-item .badge-ic svg { width: 12px; height: 12px; }
.act-item .badge-ic.like { background: #e25563; }
.act-item .badge-ic.like svg { fill: #fff; stroke: none; }
.act-item .badge-ic.follow { background: var(--terra); }
.act-item .badge-ic.follow svg { stroke: #fff; fill: none; stroke-width: 2.2; }
.act-item .badge-ic.sale { background: var(--eco); }
.act-item .badge-ic.sale svg { stroke: var(--bg-deep); fill: none; stroke-width: 2.4; }
.act-item .tx { flex: 1; font-size: 14px; line-height: 1.35; }
.act-item .tx b { font-weight: 600; }
.act-item .tx .t { color: var(--ink-3); font-size: 12px; }
.act-item .thumb { width: 46px; height: 46px; border-radius: var(--r); object-fit: cover; flex: 0 0 auto;
  background: linear-gradient(150deg,#2a2723,#3a342c); }
.act-item .followbtn { font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: var(--r-s);
  background: var(--terra); color: #fff; border: none; cursor: pointer; flex: 0 0 auto; }

/* stub-data honesty banner (used wherever UI is real but data is stubbed) */
.stub-note { display: flex; align-items: center; gap: 8px; max-width: 600px; margin: 0 auto 4px;
  padding: 9px 14px; background: rgba(201,191,168,.08); border-radius: var(--r-m);
  color: var(--ink-3); font-size: 12px; }
.stub-note span.d { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }

/* ============================================================
   R2 — COMMENTS, MESSAGES DOCK, 3-DOTS MENU, TOAST,
   PROFILE EXT-STATS, "…mehr" EXPANDER, REELS, SETTINGS.
   ROUNDED + BORDERLESS, premium SVG, ZABA CI, no native UI.
   ============================================================ */

/* ---- "…mehr" expander (feed caption + PDP description) ---- */
.more-btn { background: none; border: none; color: var(--ink-3); font: inherit; font-size: inherit;
  cursor: pointer; padding: 0; font-weight: 600; }
.more-btn:hover { color: var(--ink-2); }
.cap-desc { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.post-cap .cap-ttl { color: var(--ink); }
.post-cap .sub { color: var(--ink-3); font-size: 13px; }

/* ====================== COMMENTS ====================== */
.comments { margin: 28px 0 8px; }
.cmt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.cmt-head h2 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 0; }
.cmt-count { color: var(--ink-3); font-size: 14px; font-weight: 600; }
.cmt-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.cmt-empty { font-size: 14px; padding: 6px 0; }
.cmt { display: flex; gap: 11px; align-items: flex-start; }
.cmt-av { width: 38px; height: 38px; font-size: 14px; flex: 0 0 auto; }
.cmt-b { flex: 1; min-width: 0; }
.cmt-h { display: flex; align-items: baseline; gap: 9px; }
.cmt-who { font-weight: 600; font-size: 14px; color: var(--ink); }
.cmt-who:hover { color: var(--ac); }
.cmt-t { color: var(--ink-3); font-size: 12px; }
.cmt-x { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; word-break: break-word; }

.cmt-compose { margin-top: 6px; }
.cmt-vis { display: inline-flex; gap: 6px; margin-bottom: 10px; }
.cmt-vis .opt { background: var(--bg-2); color: var(--ink-2); border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 8px 15px; border-radius: var(--r-s); }
.cmt-vis .opt.on { background: var(--ac); color: var(--bg-deep); font-weight: 600; }
.cmt-row { display: flex; gap: 8px; align-items: center; }
.cmt-input { flex: 1; background: var(--bg-2); border: none; color: var(--ink);
  padding: 13px 16px; font: inherit; font-size: 14px; border-radius: var(--r-s); }
.cmt-input:focus { outline: 1px solid var(--ac); }
.cmt-input::placeholder { color: var(--ink-3); }
.cmt-send { width: 44px; height: 44px; border-radius: 50%; background: var(--ac); border: none;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.cmt-send svg { width: 19px; height: 19px; stroke: var(--bg-deep); fill: none; stroke-width: 1.8; }
.cmt-status { font-size: 13px; margin: 10px 2px 0; }
/* sticky composer "Posten" button (PDP) — pill, terracotta on hover */
.cmt-post { flex: 0 0 auto; background: none; border: none; color: var(--ac); cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; padding: 10px 6px; border-radius: var(--r-s); }
.cmt-post:hover { color: var(--ac-h); }

/* ====================== PRODUCT DETAIL (IG post-detail, two-column) ====================== */
/* mobile-first: single column (media on top, then the right-column content stacks). */
.pdp { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 6px 0 40px;
  background: transparent; }
/* LEFT — large product media (rounded 5px; the wrap rounds its corners) */
.pdp-media-wrap { background: var(--bg-2); border-radius: var(--r); overflow: hidden; }
.pdp-media { position: relative; aspect-ratio: 4/5; background: linear-gradient(150deg,#2a2723,#3a342c); overflow: hidden; }
.pdp-track { position: absolute; inset: 0; }
.pdp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .28s ease; display: grid; place-items: center; }
.pdp-slide.on { opacity: 1; }
.pdp-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-slide.noimg::after { content: "PreOwned"; color: var(--ink-3); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.pdp-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border-radius: 50%; background: rgba(20,19,17,.55); backdrop-filter: blur(4px); border: none; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; z-index: 3; }
.pdp-nav:hover { background: rgba(20,19,17,.8); }
.pdp-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.pdp-nav.prev { left: 12px; } .pdp-nav.next { right: 12px; }
.pdp-price-chip { position: absolute; left: 14px; bottom: 14px; z-index: 3; font-weight: 700; font-size: 14px;
  color: var(--ink); background: rgba(20,19,17,.6); backdrop-filter: blur(4px); padding: 7px 13px; border-radius: var(--r-s); }
.pdp-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 7px; }
.pdp-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(243,238,228,.45); border: none; padding: 0; cursor: pointer; }
.pdp-dot.on { background: var(--ink); }
/* media wrapper (hero + optional 2-row thumbnail strip) */
.pdp-media-wrap { min-width: 0; display: flex; flex-direction: column; }
.pdp-media-wrap[data-rows="2"] { padding-bottom: 0; }
/* video slide + honest stub */
.pdp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pdp-vstub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 24px; color: var(--ink-2); }
.pdp-vstub-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(243,238,228,.08); }
.pdp-vstub-ic svg { width: 26px; height: 26px; fill: var(--ac); stroke: none; }
.pdp-vstub-t { font-weight: 700; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.pdp-vstub-s { font-size: 12.5px; max-width: 30ch; line-height: 1.5; color: var(--ink-3); }
/* 1-Reihe / 2-Reihen toggle pinned in the media corner */
.pdp-rows-ctl { position: absolute; right: 12px; top: 12px; z-index: 4; display: inline-flex; gap: 2px;
  background: rgba(20,19,17,.6); backdrop-filter: blur(4px); padding: 3px; border-radius: var(--r); }
.pdp-rows-opt { width: 30px; height: 26px; display: grid; place-items: center; background: none; border: none;
  cursor: pointer; color: var(--ink-3); padding: 0; border-radius: var(--r); }
.pdp-rows-opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pdp-rows-opt.on { background: var(--ac); color: var(--bg-deep); }
/* thumbnail strip: hidden by default (1 Reihe), 2-row grid when data-rows="2" */
.pdp-thumbs { display: none; }
.pdp-media-wrap[data-rows="2"] .pdp-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  grid-auto-rows: 64px; gap: 6px; padding: 8px; }
.pdp-thumb { position: relative; overflow: hidden; border-radius: var(--r); border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center; }
.pdp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.on { outline: 2px solid var(--ac); outline-offset: -2px; }
.pdp-thumb-vid svg { width: 22px; height: 22px; fill: var(--ink); stroke: none; }

/* RIGHT — Vinted-style info column (own surface, rounded 5px) */
.pdp-right { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg-2); border-radius: var(--r); overflow: hidden; }
.pdp-rbody { flex: 1 1 auto; min-height: 0; padding: 16px 18px 8px; }
/* title + price + 0% */
.pdp-titleblock { padding-bottom: 4px; }
.pdp-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem,3.6vw,1.7rem);
  line-height: 1.15; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.pdp-price-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-price { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--ink); }
.pdp-free { font-size: 13px; font-weight: 600; color: var(--eco); letter-spacing: .01em; }
/* attribute chips: Größe | Farbe | Zustand, divider-separated */
.pdp-attrs { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; margin: 12px 0 4px; }
.pdp-attr { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; }
.pdp-attr .ak { color: var(--ink-3); }
.pdp-attr .av-v { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.pdp-attr-div { width: 1px; height: 12px; background: var(--line); display: inline-block; }
/* CTA buttons */
.pdp-cta { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.pdp-cta .btn { width: 100%; }
.pdp-buy-status { font-size: 12.5px; line-height: 1.5; margin: 2px 0 0; }
.pdp-buy-status:empty { display: none; }
/* no-fees note */
.pdp-nofees { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 16px; padding: 12px 14px;
  background: var(--bg-3); border-radius: var(--r); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pdp-nofees b { color: var(--ink); }
.pdp-nofees-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--eco); }
.pdp-nofees-ic svg { width: 100%; height: 100%; }
/* description */
.pdp-desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 16px; }
/* generic info block (Produktinformation) */
.pdp-block { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-block-h { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.pdp-orig-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.pdp-translate { background: none; border: none; color: var(--ac); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 8px 0 0; }
.pdp-translate:hover { color: var(--ac-h); }
.pdp-translated { margin: 8px 0 0; }
.pdp-info-list { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pdp-info-list > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.pdp-info-list dt { color: var(--ink-3); margin: 0; }
.pdp-info-list dd { color: var(--ink); font-weight: 600; margin: 0; text-align: right; }
/* seller block */
.pdp-sellerblock { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 14px;
  background: var(--bg-3); border-radius: var(--r); }
.pdp-sb-av { width: 46px; height: 46px; font-size: 17px; flex: 0 0 auto; }
.pdp-sb-main { flex: 1; min-width: 0; }
.pdp-sb-name { font-weight: 700; font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.pdp-sb-name:hover { color: var(--ac); }
.pdp-sb-name .veric { width: 15px; height: 15px; color: var(--ac); }
.pdp-sb-name .veric svg { width: 100%; height: 100%; fill: var(--ac); stroke: none; }
.pdp-sb-rating { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.pdp-rating-none { color: var(--ink-3); }
.pdp-sb-online { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pdp-sellerblock .pdp-follow { flex: 0 0 auto; margin-left: auto; padding: 9px 16px; font-size: 13px; width: auto; }
/* collapsible accordions */
.pdp-acc { border-top: 1px solid var(--line); }
.pdp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
  list-style: none; padding: 15px 2px; font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); }
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc-chev { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .18s ease; color: var(--ink-3); }
.pdp-acc-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pdp-acc[open] .pdp-acc-chev { transform: rotate(180deg); }
.pdp-acc-body { padding: 0 2px 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.pdp-acc-body a { color: var(--ac); }
.pdp-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.pdp-steps b { color: var(--ink); }
/* report / legal */
.pdp-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 16px 2px 8px; border-top: 1px solid var(--line); }
.pdp-legal a, .pdp-report { font-size: 12px; color: var(--ink-3); background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12px; padding: 0; }
.pdp-legal a:hover, .pdp-report:hover { color: var(--ink-2); }
.pdp-report { color: var(--terra); }
.pdp-report:hover { color: var(--terra-h); }
/* social action row */
.pdp-actions { display: flex; align-items: center; gap: 18px; padding: 16px 0 4px; margin-top: 8px; border-top: 1px solid var(--line); }
.pdp-actions .act { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; color: var(--ink); padding: 0; }
.pdp-actions .act .ring { display: grid; place-items: center; }
.pdp-actions .act svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pdp-actions .act .cnt { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pdp-actions .act[aria-pressed="true"].like svg { fill: var(--terra); stroke: var(--terra); }
.pdp-actions .act[aria-pressed="true"].save svg { fill: var(--ink); }
.pdp-actions .act-spacer, .pdp-act-spacer { flex: 1 1 auto; }
.pdp-likes { font-weight: 600; font-size: 14px; padding: 8px 0 6px; color: var(--ink); }
.pdp-comments { margin: 10px 0 4px; }
.pdp-comments .cmt-head h2 { font-size: 1.15rem; }
/* sticky composer at the bottom of the right column */
.pdp-compose { flex: 0 0 auto; padding: 14px 18px 16px; background: var(--bg-2); }
.pdp-compose .cmt-input { background: var(--bg-3); }

/* DESKTOP two-column: only at >=1000px. Media sticks; right column flows in the
   page (no internal max-height/scroll => no overlap, no overflow at any width).
   Below 1000px the right column drops BELOW the media (operator: "rechts -> unten"). */
@media (min-width: 1000px) {
  .pdp { grid-template-columns: minmax(0,1.1fr) minmax(360px,430px); align-items: start; }
  .pdp-media-wrap { position: sticky; top: 16px; }
}

/* ====================== PDP RELATED STRIP (pm-3208 [pdp.related-strip]) ====
   Scrollable strip of more items at the bottom. 1-row / 2-row toggle. When two
   items sit side by side they TOUCH (0px gap). */
.pdp-related { margin: 26px 0 8px; }
.pdp-rel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pdp-rel-h { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 0; }
.pdp-rel-rows { display: inline-flex; background: var(--bg-2); border-radius: var(--r-s); padding: 3px; gap: 2px; }
.prr-opt { display: inline-grid; place-items: center; width: 34px; height: 30px; background: none;
  border: none; cursor: pointer; color: var(--ink-3); padding: 0; border-radius: var(--r-s); }
.prr-opt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.prr-opt.on { background: var(--bg-deep); color: var(--ac); }
.pdp-rel-note { font-size: 12px; margin: 0 0 10px; }

/* 1 row: single horizontal scroller. Cards have a fixed width; NO gap → touch. */
.pdp-rel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 168px;
  gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
/* 2 rows: two stacked rows, still horizontally scrollable. 0px gap both axes. */
.pdp-related[data-rows="2"] .pdp-rel-track { grid-auto-flow: column; grid-template-rows: 1fr 1fr;
  grid-auto-columns: 168px; gap: 0; }
.prl-card { display: block; scroll-snap-align: start; color: var(--ink); }
.prl-ph { position: relative; display: block; width: 168px; aspect-ratio: 3 / 4;
  background: linear-gradient(150deg,#2a2723,#3a342c); overflow: hidden; }
.prl-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prl-price { position: absolute; left: 8px; bottom: 8px; z-index: 2; background: rgba(20,19,17,.66);
  backdrop-filter: blur(6px); color: var(--ink); font-weight: 700; font-size: 12px; padding: 4px 9px; border-radius: var(--r-s); }
.prl-ttl { display: block; padding: 6px 8px 12px; font-size: 12px; line-height: 1.3; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ====================== MESSAGES DOCK (IG bottom-right) ====================== */
.msg-dock { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: none; }
@media (min-width: 900px) { .msg-dock { display: block; } }
/* COLLAPSED = small round pill: icon + label, NO inline avatars (kept tiny).
   The avatar stack only shows once the dock is open (.open). */
.md-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-2);
  color: var(--ink); border: none; cursor: pointer; padding: 10px 18px; border-radius: var(--r-s);
  box-shadow: none; position: relative; font: inherit; }
.md-pill:hover { background: var(--bg-3); }
.md-pill svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.md-label { font-size: 14px; font-weight: 600; }
/* avatar stack hidden when collapsed; shown only when the dock is open */
.md-avs { display: none; }
.msg-dock.open .md-avs { display: inline-flex; margin-left: 2px; }
.md-avs .av { width: 24px; height: 24px; font-size: 11px; margin-left: -8px; box-shadow: 0 0 0 2px var(--bg-2); }
.md-avs .av:first-child { margin-left: 0; }
.md-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r); background: var(--terra); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; }
/* expanded panel: contained, rounded, ZABA dark, scrolls internally, never
   taller than the viewport (item 6: must NOT overflow when opened / "Alle"). */
.md-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: 340px;
  max-width: calc(100vw - 44px); max-height: min(460px, calc(100vh - 120px));
  background: var(--bg-2); border-radius: var(--r); overflow: hidden;
  box-shadow: none; display: flex; flex-direction: column; }
/* COLLAPSED by default: the class rule above sets display:flex, which would beat
   the UA [hidden] rule — so re-assert none when hidden (this WAS the "always
   expanded" bug). Dock only opens on click (JS toggles [hidden]). */
.md-panel[hidden] { display: none !important; }
.md-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px;
  font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.md-head .md-all { font-family: var(--sans); font-size: 13px; color: var(--ac); font-weight: 600; }
.md-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; }
.md-head { flex: 0 0 auto; }
.md-thread { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: var(--r-m); }
.md-thread:hover { background: var(--bg-3); }
.md-thread .av { width: 44px; height: 44px; font-size: 16px; }
.md-tx { flex: 1; min-width: 0; }
.md-h { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14px; }
.md-h .md-t { color: var(--ink-3); font-size: 11px; font-weight: 400; }
.md-p { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
/* dock header: title + count badge, expand + close icons */
.md-head { align-items: center; }
.md-title { display: inline-flex; align-items: center; gap: 9px; }
.md-head-badge { font-family: var(--sans); font-size: 11px; font-weight: 700; color: #fff;
  background: var(--terra); border-radius: var(--r); min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; }
.md-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.md-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: none; border: none; cursor: pointer; color: var(--ink-2); padding: 0; }
.md-icon:hover { background: var(--bg-3); color: var(--ink); }
.md-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.md-name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.md-vb { width: 13px; height: 13px; flex: 0 0 auto; }
.md-vb svg { width: 100%; height: 100%; fill: var(--ac); stroke: none; }
.md-h { align-items: center; }
/* compose pencil — floating button bottom-right of the open panel */
.md-compose { position: absolute; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ac); border: none; cursor: pointer; display: grid; place-items: center;
  box-shadow: none; }
.md-compose:hover { background: var(--ac-h); }
.md-compose svg { width: 21px; height: 21px; fill: none; stroke: var(--bg-deep); stroke-width: 1.8; }
.md-list { padding-bottom: 74px; }

/* ====================== FULL MESSAGES PAGE ====================== */
.page-messages { padding-bottom: 0; }
/* Messages is a clean full-page Instagram-style view: NO dimming backdrop over
   the nav/content, nav stays fully visible and usable. Closing = the explicit X
   (mp-close) in the header. (Removed the pm-3199 msg-backdrop + nav-fade, which
   read as a "block element in the background" hiding the message list.) */
.msg-page { display: grid; grid-template-columns: 1fr; min-height: 100vh; position: relative; }
@media (min-width: 900px) {
  .msg-page { grid-template-columns: 360px 1fr; height: 100vh; }
}
.mp-side { display: flex; flex-direction: column; min-height: 0; background: var(--bg);
  border-right: none; }
.mp-side-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; flex: 0 0 auto; }
.mp-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.mp-close { color: var(--ink-2); }
.mp-close:hover { color: var(--ink); }
.mp-brand { font-size: 22px; }
/* account switcher (IG-style) in the messages header */
.mp-acct { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 2px 4px; color: var(--ink); font: inherit; }
.mp-acct-av { width: 30px; height: 30px; font-size: 13px; flex: 0 0 auto; }
.mp-acct-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.mp-acct-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--ink-2); }
.mp-acct:hover .mp-acct-chev { color: var(--ink); }
.acct-menu-ov { position: fixed; inset: 0; z-index: 120; }
.acct-menu { position: fixed; min-width: 282px; max-width: 322px; background: var(--bg-2); box-shadow: 0 18px 50px -16px rgba(0,0,0,.7); padding: 8px; }
.acct-h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding: 6px 10px 4px; margin: 0; }
.acct-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 10px; font: inherit; color: var(--ink); }
.acct-row:hover { background: var(--bg-3); }
.acct-av { width: 38px; height: 38px; font-size: 15px; flex: 0 0 auto; }
.acct-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.acct-n { font-weight: 600; font-size: 15px; }
.acct-sub { font-size: 12px; color: var(--ink-2); }
.acct-check { width: 20px; height: 20px; fill: none; stroke: var(--ac); stroke-width: 2.2; flex: 0 0 auto; }
.acct-sep { height: .5px; background: var(--line); margin: 6px 4px; }
.acct-act { display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
.acct-act:hover { background: var(--bg-3); }
.acct-act-ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-3); color: var(--ink); font-size: 18px; flex: 0 0 auto; }
/* "Problem melden" support intake modal */
.rep-ov { position: fixed; inset: 0; z-index: 130; background: rgba(10,9,8,.6); display: grid; place-items: center; padding: 16px; }
.rep-card { width: 100%; max-width: 440px; max-height: 88vh; overflow: hidden auto; background: var(--bg-2); box-shadow: 0 30px 80px -24px rgba(0,0,0,.8); display: flex; flex-direction: column; }
.rep-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; position: sticky; top: 0; background: var(--bg-2); z-index: 1; }
.rep-head svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.rep-back, .rep-x { background: none; border: none; cursor: pointer; color: var(--ink-2); display: grid; place-items: center; width: 32px; height: 32px; }
.rep-back:hover, .rep-x:hover { color: var(--ink); }
.rep-bk-sp { width: 32px; }
.rep-title { flex: 1; text-align: center; font-weight: 700; font-size: 16px; color: var(--ink); }
.rep-body { padding: 4px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.rep-lede { font-size: 13px; color: var(--ink-2); margin: 4px 0 2px; }
.rep-tile { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--bg-3); border: none; cursor: pointer; padding: 15px 14px; color: var(--ink); }
.rep-tile:hover { background: var(--bg); outline: 1px solid var(--ac); }
.rep-tile-ic { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ac); color: var(--bg-deep); }
.rep-tile-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rep-tile-tx { display: flex; flex-direction: column; gap: 2px; }
.rep-tile-tx b { font-size: 15px; font-weight: 700; }
.rep-tile-tx span { font-size: 12px; color: var(--ink-2); }
.rep-cats, .rep-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.rep-cat, .rep-opt { background: var(--bg-3); color: var(--ink); border: none; cursor: pointer; font: inherit; font-size: 13px; padding: 9px 13px; }
.rep-cat:hover, .rep-opt:hover { outline: 1px solid var(--ac); }
.rep-opt.on { background: var(--ac); color: var(--bg-deep); font-weight: 600; }
.rep-cat { display: block; width: 100%; text-align: left; }
.rep-ai-intro { display: flex; gap: 11px; align-items: flex-start; }
.rep-ai-av { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ac); color: var(--bg-deep); }
.rep-ai-av svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rep-ai-intro p { font-size: 13px; color: var(--ink); margin: 0; line-height: 1.5; }
.rep-ta { width: 100%; background: rgba(0,0,0,.28); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px; padding: 11px 12px; resize: vertical; min-height: 90px; }
.rep-ta:focus { outline: none; border-color: var(--ac); }
.rep-ta-err { border-color: var(--terra); }
.rep-attach { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-2); font-size: 13px; padding: 4px 0; }
.rep-attach-ic { width: 30px; height: 30px; display: grid; place-items: center; background: var(--bg-3); color: var(--ink); font-size: 18px; flex: 0 0 auto; }
.rep-attach:hover { color: var(--ink); }
.rep-send { background: var(--ac); color: var(--bg-deep); border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; padding: 13px; margin-top: 4px; }
.rep-send:hover { background: var(--ac-h); }
.rep-note { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; line-height: 1.45; }
.rep-done { align-items: center; text-align: center; padding-top: 24px; }
.rep-done-ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--ac); color: var(--bg-deep); border-radius: 50%; }
.rep-done-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.rep-done p { font-size: 15px; color: var(--ink); max-width: 320px; }
.verify-shop { color: var(--ac); text-decoration: none; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; }
.verify-shop:hover { text-decoration: underline; }
/* settings slide-in drawer (profile gear) */
.settings-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 94vw); background: var(--bg); box-shadow: -24px 0 70px -22px rgba(0,0,0,.65); transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 110; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.settings-open .settings-drawer { transform: translateX(0); }
.settings-scrim { position: fixed; inset: 0; background: rgba(10,9,8,0); z-index: 104; pointer-events: none; transition: background .3s ease; }
body.settings-open .settings-scrim { background: rgba(10,9,8,.42); pointer-events: auto; }
body.settings-open .wrap { transform: translateX(-130px); transition: transform .3s cubic-bezier(.4,0,.2,1); }
@media (max-width: 899px) { body.settings-open .wrap { transform: translateX(-40px); } }
.sd-close { position: sticky; top: 0; float: right; margin: 12px 12px 0; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; background: var(--bg-2); border: none; cursor: pointer; color: var(--ink); }
.sd-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.sd-close:hover { background: var(--bg-3); }
/* the injected einstellungen content: stack nav over pane, fit the narrow drawer */
.settings-drawer .settings { display: block !important; max-width: none; margin: 0; padding: 8px 18px 24px; }
.settings-drawer .set-nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.settings-drawer .set-nav h2 { width: 100%; }
.settings-drawer .set-pane { margin-top: 14px; }

.mp-new { width: 38px; height: 38px; border-radius: 50%; background: none; border: none; cursor: pointer;
  color: var(--ink); display: grid; place-items: center; }
.mp-new:hover { background: var(--bg-2); }
.mp-new svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* minimal tabs (operator: "as minimal as we can") — NO container/box, just a
   text row with spacing and an underline under the active tab. */
.mp-tabs { display: flex; gap: 24px; padding: 2px 18px 6px; flex: 0 0 auto;
  border-bottom: .5px solid var(--line); }
.mp-tab { background: none; color: var(--ink-2); border: none; cursor: pointer; font: inherit;
  font-size: 14px; padding: 7px 0; position: relative; margin-bottom: -1px; }
.mp-tab.on { color: var(--ink); font-weight: 600; }
.mp-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.mp-tab-c { font-size: 13px; opacity: .8; }
.mp-search { display: flex; align-items: center; gap: 8px; margin: 14px 14px 10px; background: var(--bg-2);
  border-radius: var(--r-s); padding: 0 14px; flex: 0 0 auto; }
.mp-search-ic { color: var(--ink-3); display: grid; place-items: center; }
.mp-search-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mp-search-in { flex: 1; background: none; border: none; color: var(--ink); font: inherit; font-size: 14px; padding: 11px 0; }
.mp-search-in:focus { outline: none; }
.mp-search-in::placeholder { color: var(--ink-3); }
.mp-note { display: flex; align-items: center; gap: 12px; padding: 8px 18px 12px; flex: 0 0 auto; }
.mp-note-av { width: 44px; height: 44px; font-size: 22px; font-weight: 400; background: var(--bg-3); color: var(--ink-2); }
.mp-note-tx { font-size: 13px; color: var(--ink-2); }
.mp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
.mp-thread { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none;
  border: none; cursor: pointer; font: inherit; padding: 9px 10px; border-radius: var(--r-m); }
.mp-thread:hover { background: var(--bg-2); }
.mp-thread.on { background: var(--bg-3); }
.mp-thread .av { width: 50px; height: 50px; font-size: 18px; flex: 0 0 auto; }
.mp-tx { flex: 1; min-width: 0; }
.mp-h { display: flex; align-items: center; }
.mp-name { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink); min-width: 0; }
.mp-name .md-vb { width: 14px; height: 14px; }
.mp-p { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mp-thread.unread .mp-prev { color: var(--ink); font-weight: 600; }
.mp-thread .unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
.mp-stub { margin: 0; padding: 10px 18px 16px; flex: 0 0 auto; }
/* right pane */
.mp-pane { display: flex; flex-direction: column; min-height: 0; background: var(--bg-deep); }
.mp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 40px; }
.mp-empty-ic { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); margin-bottom: 4px; }
.mp-empty-ic svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1; }
.mp-empty h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0; }
.mp-empty p { color: var(--ink-3); font-size: 14px; margin: 0 0 8px; }
.mp-empty .btn { width: auto; padding: 11px 22px; }
.mp-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; flex: 0 0 auto;
  background: var(--bg); }
.mp-chat-head .av { width: 42px; height: 42px; font-size: 16px; }
.mp-chat-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.mp-bubbles { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.mp-compose { display: flex; gap: 10px; padding: 14px 18px 18px; flex: 0 0 auto; }
.mp-compose input { flex: 1; background: var(--bg-2); border: none; color: var(--ink); font: inherit; font-size: 14px;
  padding: 13px 18px; border-radius: var(--r-s); }
.mp-compose input:focus { outline: 1px solid var(--ac); }
.mp-compose input::placeholder { color: var(--ink-3); }
.mp-compose .send { width: 46px; height: 46px; border-radius: 50%; background: var(--ac); border: none;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.mp-compose .send svg { width: 20px; height: 20px; stroke: var(--bg-deep); fill: none; stroke-width: 1.8; }

/* ====================== NEW MESSAGE MODAL ====================== */
.nm-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(10,9,8,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: cm-in .14s ease; }
.nm-modal { width: 100%; max-width: 440px; max-height: 86vh; background: var(--bg-2); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: none; }
.nm-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 14px 14px; flex: 0 0 auto; }
.nm-title { font-family: var(--display); font-weight: 600; font-size: 1.15rem; text-align: center; }
.nm-x { width: 40px; height: 40px; border-radius: 50%; background: none; border: none; cursor: pointer;
  color: var(--ink); display: grid; place-items: center; padding: 0; }
.nm-x:hover { background: var(--bg-3); }
.nm-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.nm-back { justify-self: start; }
.nm-close { justify-self: end; }
.nm-to { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex: 0 0 auto; }
.nm-to-lbl { font-weight: 700; font-size: 15px; color: var(--ink); }
.nm-search { flex: 1; background: none; border: none; color: var(--ink); font: inherit; font-size: 15px; padding: 4px 0; }
.nm-search:focus { outline: none; }
.nm-search::placeholder { color: var(--ink-3); }
.nm-sug-lbl { font-weight: 700; font-size: 14px; color: var(--ink); padding: 6px 18px 4px; flex: 0 0 auto; }
.nm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px; }
.nm-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none;
  border: none; cursor: pointer; font: inherit; padding: 9px 10px; border-radius: var(--r-m); }
.nm-row:hover { background: var(--bg-3); }
.nm-av { width: 44px; height: 44px; font-size: 16px; flex: 0 0 auto; }
.nm-tx { flex: 1; min-width: 0; }
.nm-name { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink); }
.nm-name .md-vb { width: 14px; height: 14px; }
.nm-sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.nm-radio { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; position: relative;
  box-shadow: inset 0 0 0 2px var(--ink-3); transition: box-shadow .14s ease; }
.nm-row.on .nm-radio { box-shadow: inset 0 0 0 2px var(--ac); background: var(--ac); }
.nm-row.on .nm-radio::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-deep); }
.nm-foot { padding: 14px 18px 18px; flex: 0 0 auto; }
.nm-chat { width: 100%; }
.nm-chat:disabled { opacity: .45; cursor: not-allowed; }
.nm-note { font-size: 11.5px; text-align: center; margin: 10px 0 0; color: var(--ink-3); }

/* ====================== "MEHR" FLYOUT ====================== */
.mf-flyout { position: fixed; inset: 0; z-index: 92; background: rgba(10,9,8,.35);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: cm-in .12s ease; }
.mf-sheet { width: 100%; max-width: 268px; background: var(--bg-3); border-radius: var(--r);
  overflow: hidden; box-shadow: none; padding: 8px; }
/* anchored to the rail (desktop): position absolutely, no centring */
.mf-flyout.anchored { background: transparent; backdrop-filter: none; display: block; }
.mf-flyout.anchored .mf-sheet { position: fixed; width: 268px; }
.mf-grp { padding: 4px 0; }
.mf-eco-h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding: 6px 14px 4px; margin: 0; }
.mf-grp + .mf-grp { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.mf-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none;
  border: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); padding: 12px 12px; border-radius: var(--r-m); }
.mf-item:hover { background: var(--bg-2); }
.mf-ic { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); }
.mf-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mf-lbl { flex: 1; }

/* ====================== MOBILE NAV SHEET (pm-3202 [nav.mobile.more-sheet]) ====
   "Mehr" + "Entdecken" slide in BOTTOM-TO-TOP on mobile. Scrim click closes. */
.nav-sheet-ovl { position: fixed; inset: 0; z-index: 96; background: rgba(10,9,8,0);
  display: flex; align-items: flex-end; transition: background .24s ease; }
.nav-sheet-ovl.in { background: rgba(10,9,8,.55); }
.nav-sheet-panel { width: 100%; max-height: 82vh; overflow-y: auto; background: var(--bg-3);
  border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1); }
.nav-sheet-ovl.in .nav-sheet-panel { transform: translateY(0); }
.ns-grab { width: 38px; height: 4px; border-radius: 5px; background: var(--bd);
  margin: 6px auto 12px; }
.ns-h { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 12px; padding: 0 4px; }
.ns-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.ns-cat { display: flex; align-items: center; justify-content: center; padding: 16px 10px;
  background: var(--bg-2); border-radius: var(--r); color: var(--ink); font-weight: 600; font-size: 14px; }
.ns-cat:hover { background: var(--bg-deep); }
.ns-all { width: 100%; }
.ns-mf .mf-grp { padding: 2px 0; }
.ns-mf .mf-grp + .mf-grp { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }

/* ====================== 3-DOTS CONTEXT MENU ====================== */
.ctx-menu { position: fixed; inset: 0; z-index: 90; background: rgba(10,9,8,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(2px); animation: cm-in .14s ease; }
@keyframes cm-in { from { opacity: 0; } to { opacity: 1; } }
.cm-sheet { width: 100%; max-width: 380px; background: var(--bg-2); border-radius: var(--r);
  overflow: hidden; box-shadow: none; }
.cm-item { display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--ink); font: inherit; font-size: 15px; padding: 16px; cursor: pointer;
  border-bottom: 1px solid var(--line); }
.cm-item:last-child { border-bottom: none; }
.cm-item:hover { background: var(--bg-3); }
.cm-item.danger { color: var(--terra); font-weight: 600; }
.cm-item.cancel { font-weight: 600; }

/* ====================== TOAST ====================== */
.pw-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 16px);
  background: var(--ink); color: var(--bg-deep); font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: var(--r-s); z-index: 95; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; box-shadow: none; max-width: 88vw; }
.pw-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .pw-toast { bottom: 26px; left: auto; right: 26px; transform: translateY(16px); } .pw-toast.on { transform: translateY(0); } }

/* ====================== PROFILE EXT-STATS (req 6) ====================== */
.prof-extstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 6px; }
@media (max-width: 560px) { .prof-extstats { grid-template-columns: repeat(2, 1fr); } }
.prof-extstats .ps { background: var(--bg-2); border-radius: var(--r-m); padding: 14px 12px; text-align: center; }
.prof-extstats .ps b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.prof-extstats .ps span { display: block; color: var(--ink-3); font-size: 12px; margin-top: 5px; }
.prof-extstats .ps span i { font-style: normal; color: var(--ink-3); opacity: .75; }
.prof-extstats .ps.rating .star { width: 16px; height: 16px; fill: var(--ac); stroke: none; display: inline-block; vertical-align: -2px; margin-bottom: 2px; }
.prof-reviews { margin: 10px 0 6px; }
.prof-reviews .rev-head { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.prof-reviews .rev-empty { font-size: 13px; padding: 8px 0; }

/* ====================== REELS (req 9, vertical video feed) ====================== */
.reels { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column;
  gap: 16px; padding: 8px 0 40px; scroll-snap-type: y mandatory; }
.reel { position: relative; aspect-ratio: 9/16; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(150deg,#2a2723,#3a342c); scroll-snap-align: start; display: flex;
  align-items: flex-end; }
.reel video, .reel .reel-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .reel-ph { display: grid; place-items: center; color: var(--ink-3); }
.reel .reel-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,.7), transparent 45%); }
.reel .reel-meta { position: relative; z-index: 2; padding: 16px; color: #fff; }
.reel .reel-meta .r-who { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.reel .reel-meta .r-who .av { width: 34px; height: 34px; font-size: 13px; }
.reel .reel-meta .r-cap { font-size: 14px; margin-top: 8px; line-height: 1.4; max-width: 80%; }
.reel .reel-act { position: absolute; right: 12px; bottom: 18px; z-index: 3; display: flex;
  flex-direction: column; align-items: center; gap: 16px; }
.reel .reel-act .act .ring { background: rgba(20,19,17,.5); backdrop-filter: blur(4px); }
.reel .reel-act .act .ring svg, .reel .reel-act .act .cnt { stroke: #fff; color: #fff; }

/* ====================== SETTINGS (req 9, 2-pane) ====================== */
.settings { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 0; padding: 6px 0 40px; }
@media (min-width: 760px) { .settings { grid-template-columns: 260px 1fr; gap: 24px; } }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.set-nav h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; padding: 4px 10px 12px; margin: 0; }
.set-nav .set-tab { display: flex; align-items: center; gap: 12px; background: none; border: none;
  color: var(--ink-2); font: inherit; font-size: 15px; padding: 12px 14px; border-radius: var(--r-m);
  cursor: pointer; text-align: left; }
.set-nav .set-tab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: 0 0 auto; }
.set-nav .set-tab:hover { background: var(--bg-2); color: var(--ink); }
.set-nav .set-tab.on { background: var(--bg-2); color: var(--ink); font-weight: 600; }
.set-nav .set-tab.on { color: var(--terra); }
.set-pane { padding: 6px 2px; }
.set-pane .set-sec { display: none; }
.set-pane .set-sec.on { display: block; }
.set-pane h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px; }
.set-pane .set-sub { color: var(--ink-3); font-size: 13px; margin: 0 0 20px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line); }
.set-row .set-rl { font-size: 15px; }
.set-row .set-rl small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 3px; max-width: 46ch; }
/* custom toggle (NO native checkbox) */
.tgl { width: 46px; height: 27px; border-radius: 999px; background: var(--bg-3); border: none;
  position: relative; cursor: pointer; flex: 0 0 auto; transition: background .16s ease; padding: 0; }
.tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--ink); transition: transform .16s ease; }
.tgl[aria-pressed="true"] { background: var(--terra); }
.tgl[aria-pressed="true"]::after { transform: translateX(19px); background: #fff; }
/* custom "wer darf" segmented picker reuse */
.set-seg { display: inline-flex; gap: 6px; }
.set-seg .opt { background: var(--bg-2); color: var(--ink-2); border: none; cursor: pointer;
  font: inherit; font-size: 13px; padding: 9px 15px; border-radius: var(--r-s); }
.set-seg .opt.on { background: var(--ac); color: var(--bg-deep); font-weight: 600; }

/* ================================================================== *
 * VOICE — operator flagship (pm-3147). Record + custom in-CI player.  *
 * NO native <audio> controls. 5px radius, NO shadows, ZABA warm-dark. *
 * Slugs: item.voice (pm-3210) · profile.voice (pm-3211) ·             *
 *        feed.rank.voice-boost (pm-3209)                              *
 * ================================================================== */

/* --- the voice block on the PDP + profile (record OR player) --------- */
.voice {
  background: var(--bg-2); border-radius: var(--r); padding: 16px;
  margin: 4px 0 18px; display: flex; flex-direction: column; gap: 12px;
}
.voice-head { display: flex; align-items: center; gap: 10px; }
.voice-head .vic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--terra); }
.voice-head .vic svg { width: 100%; height: 100%; display: block; }
.voice-head .vh-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.voice-head .vh-s { font-size: 12.5px; color: var(--ink-3); }
.voice-head .vh-tx { display: flex; flex-direction: column; gap: 1px; }

/* HIGHLIGHT badge — shown wherever an item/profile HAS voice ---------- */
.voice-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--terra); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-s); line-height: 1;
}
.voice-badge svg { width: 13px; height: 13px; }
.voice .voice-badge { align-self: flex-start; }

/* --- custom player (NO native controls) ------------------------------ */
.vplayer { display: flex; align-items: center; gap: 12px; }
.vplayer .vp-btn {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  background: var(--terra); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center; padding: 0; transition: background .15s ease;
}
.vplayer .vp-btn:hover { background: var(--terra-h); }
.vplayer .vp-btn svg { width: 20px; height: 20px; }
.vplayer .vp-btn .ic-pause { display: none; }
.vplayer.playing .vp-btn .ic-play { display: none; }
.vplayer.playing .vp-btn .ic-pause { display: block; }
/* waveform-ish bars driven by progress (CI accent fill) */
.vp-wave { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 34px; min-width: 0; }
.vp-wave .bar { flex: 1 1 0; min-width: 2px; background: var(--bg-3); border-radius: var(--r-s);
  transition: background .12s ease; }
.vp-wave .bar.on { background: var(--ac); }
.vplayer.playing .vp-wave .bar.on { background: var(--terra); }
.vp-time { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  flex: 0 0 auto; min-width: 38px; text-align: right; }

/* --- recorder (owner only) ------------------------------------------- */
.vrec { display: flex; flex-direction: column; gap: 10px; }
.vrec-row { display: flex; align-items: center; gap: 12px; }
.vrec .vr-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--terra); color: #fff; border: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 12px 18px; border-radius: var(--r-s); transition: background .15s ease;
}
.vrec .vr-btn:hover { background: var(--terra-h); }
.vrec .vr-btn svg { width: 17px; height: 17px; }
.vrec .vr-btn[disabled] { opacity: .5; cursor: default; }
.vrec.recording .vr-btn { background: var(--bg-3); color: var(--ink); }
.vrec .vr-btn .ic-stop { display: none; }
.vrec.recording .vr-btn .ic-mic { display: none; }
.vrec.recording .vr-btn .ic-stop { display: inline-flex; }
.vrec .vr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--terra);
  display: none; flex: 0 0 auto; }
.vrec.recording .vr-dot { display: block; animation: vrecpulse 1s ease-in-out infinite; }
@keyframes vrecpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.vrec .vr-elapsed { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; display: none; }
.vrec.recording .vr-elapsed { display: inline; }
.vrec .vr-actions { display: flex; gap: 9px; align-items: center; }
.vrec .vr-actions .lk { background: none; border: none; color: var(--ink-3); cursor: pointer;
  font: inherit; font-size: 13px; padding: 6px 4px; text-decoration: underline; }
.vrec .vr-actions .lk:hover { color: var(--ink); }
.vrec .vr-status { font-size: 13px; color: var(--ink-2); min-height: 1em; }
.vrec .vr-status.err { color: var(--terra); }
.vrec .vr-status.ok { color: var(--eco); }
.vrec .vr-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* --- feed card voice indicator + inline play ------------------------- */
.post.has-voice .post-media { box-shadow: inset 0 0 0 2px var(--terra); }
.post-voice {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: rgba(165,58,42,.16); color: var(--ink); border: none;
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: var(--r-s); margin-top: 8px;
  transition: background .15s ease;
}
.post-voice:hover { background: rgba(165,58,42,.28); }
.post-voice .pv-ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--terra); }
.post-voice .pv-ic svg { width: 100%; height: 100%; }
.post-voice.playing .pv-ic { color: var(--terra-h); }
.post-voice .pv-lbl { line-height: 1; }

/* tiny corner marker on the media of a voice item (feed/grid) */
.post-media .voice-pin {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; background: var(--terra);
  display: grid; place-items: center; color: #fff;
}
.post-media .voice-pin svg { width: 14px; height: 14px; }

/* explainer card (agent-setup / sell flow) — pm-3209 */
.voice-explain {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(165,58,42,.10); border-radius: var(--r);
  padding: 14px 15px; margin: 6px 0 4px;
}
.voice-explain .vx-ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--terra); margin-top: 1px; }
.voice-explain .vx-ic svg { width: 100%; height: 100%; }
.voice-explain .vx-tx { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.voice-explain .vx-tx b { color: var(--ink); }

/* ===== category bar: 5 top categories (operator) — horizontally scrollable ===== */
.cat-bar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar .fy-tab { white-space: nowrap; flex: 0 0 auto; }

/* ===== messages: user folders + functional note (operator) ===================== */
.mp-thread-wrap { position: relative; }
.mp-foldbtn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  display: grid; place-items: center; border: none; background: var(--bg-2); color: var(--ink-3); border-radius: 50%;
  cursor: pointer; opacity: 0; transition: opacity .14s ease, color .14s ease, background .14s ease; }
.mp-thread-wrap:hover .mp-foldbtn, .mp-foldbtn:focus-visible { opacity: 1; }
.mp-foldbtn:hover { color: var(--ink); background: var(--bg-3); }
.mp-foldbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mp-fold-badge { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ac);
  border: .5px solid var(--ac); border-radius: 999px; padding: 2px 8px; }
.mp-tab-add { color: var(--ac); font-weight: 600; }
.mp-tab-add::after, .mp-tab-folder.on::after { background: var(--ac); }
.mp-folder-input { background: var(--bg-2); border: .5px solid var(--ac); color: var(--ink); font: inherit;
  font-size: 13px; border-radius: var(--r-s); padding: 5px 10px; width: 130px; flex: 0 0 auto; }
.mp-folder-input:focus { outline: none; }
.mp-note { cursor: pointer; }
.mp-note-input { flex: 1; background: var(--bg-2); border: .5px solid var(--ac); color: var(--ink);
  font: inherit; font-size: 13px; border-radius: var(--r-s); padding: 9px 12px; }
.mp-note-input:focus { outline: none; }
.mp-fold-menu { position: fixed; inset: 0; z-index: 70; }
.mp-fold-pop { position: fixed; min-width: 200px; max-width: 230px; background: var(--bg-2); border: .5px solid var(--line);
  border-radius: var(--r-m); padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.mp-fold-h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding: 4px 8px; }
.mp-fold-opt { text-align: left; background: none; border: none; color: var(--ink); font: inherit; font-size: 14px;
  padding: 9px 10px; border-radius: var(--r-s); cursor: pointer; }
.mp-fold-opt:hover { background: var(--bg-3); }
.mp-fold-opt.on { color: var(--ac); font-weight: 600; }
.mp-fold-opt.danger { color: #e2655f; }
.mp-fold-empty { font-size: 13px; color: var(--ink-3); padding: 8px; }

/* ===== AI hub page (operator 5th category) ===================================== */
.ai-hero { max-width: 760px; margin: 0 auto; padding: 8px 0 18px; }
.ai-hero h1 { font-family: var(--serif, var(--sans)); font-size: clamp(28px, 5vw, 44px); line-height: 1.04; margin: 6px 0 12px; }
.ai-hero h1 em { font-style: italic; color: var(--ac); }
.ai-lead { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 620px; }
.ai-block { max-width: 760px; margin: 0 auto 28px; }
.ai-h2 { font-family: var(--serif, var(--sans)); font-size: 20px; margin: 0 0 14px; }
.ai-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 18px 0 10px; }
.ai-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 0 0 14px; }
.ai-note .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }
.ai-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .ai-connect { grid-template-columns: 1fr; } }
.ai-conn { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid transparent; cursor: pointer; color: var(--ink); transition: border-color .14s ease, background .14s ease; }
.ai-conn:hover { background: var(--bg-3); }
.ai-conn.on { border-color: var(--ac); background: var(--bg-3); }
.ai-conn-t { font-weight: 700; font-size: 16px; }
.ai-conn-s { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ai-conn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ai-chip { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-deep);
  border: .5px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.ai-chip.ac { color: var(--bg-deep); background: var(--ac); border-color: var(--ac); }
.ai-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .ai-caps { grid-template-columns: 1fr; } }
.ai-cap { background: var(--bg-2); border-radius: var(--r); padding: 18px; }
.ai-cap-ic { width: 30px; height: 30px; color: var(--ac); margin-bottom: 10px; display: block; }
.ai-cap-ic svg { width: 100%; height: 100%; }
.ai-cap h3 { font-size: 16px; margin: 0 0 6px; }
.ai-cap p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.ai-models { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .ai-models { grid-template-columns: 1fr; } }
.ai-model { position: relative; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  border-radius: var(--r); background: var(--bg-2); border: 1px solid transparent; cursor: pointer; color: var(--ink);
  transition: border-color .14s ease, background .14s ease; }
.ai-model:hover { background: var(--bg-3); }
.ai-model.on { border-color: var(--ac); background: var(--bg-3); }
.ai-model-n { font-weight: 700; font-size: 15px; }
.ai-model-tag { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--bg-deep); background: var(--ac); border-radius: 999px; padding: 3px 9px; }
.ai-model-s { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; padding-right: 70px; }
.ai-cta-row { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 44px; }
.ai-cta-note { font-size: 13px; color: var(--ink-2); }

/* [hidden] must win over component display rules (e.g. .foryou{display:flex}) so the
   Show/Sell/Battle in-place panels actually toggle. */
[hidden] { display: none !important; }

/* ===== operator: hide ALL visible scrollbars (SOTA) — scroll still works ====== */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===== messages dock = right-edge SLIDER (operator) ============================ */
.md-panel { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 384px; max-width: 92vw;
  max-height: 100vh; border-radius: 0; box-shadow: -16px 0 50px rgba(0,0,0,.45); z-index: 62;
  animation: mdslide .28s cubic-bezier(.4,0,.2,1); }
@keyframes mdslide { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ===== messages: folders strip (operator: not in the menu bar, scrollable) ===== */
.mp-folders { display: flex; align-items: center; gap: 8px; padding: 10px 14px 2px; flex: 0 0 auto;
  overflow-x: auto; }
.mp-folder { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; background: var(--bg-2);
  border-radius: 999px; padding: 0 4px 0 2px; }
.mp-folder.on { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--ac); }
.mp-folder-sel { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 6px 7px 10px; }
.mp-folder.on .mp-folder-sel { color: var(--ink); }
.mp-folder-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mp-folder-del { display: grid; place-items: center; width: 22px; height: 22px; border: none; background: none;
  color: var(--ink-3); cursor: pointer; border-radius: 50%; }
.mp-folder-del:hover { color: #e2655f; background: var(--bg-2); }
.mp-folder-del svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mp-folder-add { flex: 0 0 auto; background: none; border: 1px dashed var(--bd); color: var(--ac); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.mp-folder-add:hover { background: var(--bg-2); }

/* ===== AI Image Glow-up demo ================================================== */
.glow { display: block; }
.glow-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; border: 1px dashed var(--bd); border-radius: var(--r); background: var(--bg-2);
  cursor: pointer; color: var(--ink-2); transition: border-color .14s ease, background .14s ease; text-align: center; }
.glow-drop:hover { border-color: var(--ac); background: var(--bg-3); }
.glow-drop-ic { width: 30px; height: 30px; color: var(--ac); }
.glow-drop-ic svg { width: 100%; height: 100%; }
.glow-drop-t { font-weight: 700; font-size: 15px; color: var(--ink); }
.glow-drop-s { font-size: 12px; }
.glow-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .glow-out { grid-template-columns: 1fr 1fr; } }
.glow-card { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.glow-card.loading { aspect-ratio: 3/4; }
.glow-shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%);
  background-size: 200% 100%; animation: glowsh 1.1s linear infinite; }
@keyframes glowsh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.glow-img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.glow-img.gv1 { filter: brightness(1.08) contrast(1.05) saturate(.9); }
.glow-img.gv2 { filter: brightness(1.02) contrast(1.1) saturate(1.15); object-position: 50% 25%; }
.glow-img.gv3 { filter: contrast(1.18) saturate(1.05); transform: scale(1.25); }
.glow-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; font-size: 11px; font-weight: 600;
  color: #fff; padding: 14px 8px 7px; background: linear-gradient(0deg, rgba(10,9,8,.75), transparent); }
.glow-use { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

/* ===== Sell-your-style ad studio (operator: NOT a listing grid) =============== */
.sell-studio { max-width: 720px; margin: 0 auto; }
.ss-hero { padding: 6px 0 14px; }
.ss-hero h1 { font-family: var(--serif, var(--sans)); font-size: clamp(26px, 4.5vw, 40px); line-height: 1.05; margin: 6px 0 12px; }
.ss-hero h1 em { font-style: italic; color: var(--ac); }
.ss-lead { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.ss-lead b { color: var(--ink); }
.ss-steps { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-2); border-radius: var(--r-s); }
.ss-step + .ss-step { margin-top: 8px; }
.ss-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ac); color: var(--bg-deep); font-weight: 700; font-size: 13px; }
.ss-step b { display: block; font-size: 15px; }
.ss-step span { font-size: 13px; color: var(--ink-2); }
.ss-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 30px; }
.ss-cta-note { font-size: 12.5px; color: var(--ink-3); }