* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b0b0d; --surface: #17171b; --text: #f4f4f6; --muted: #8f8f97;
  --border: #26262c; --accent: #ff7a1a; --accentInk: #0b0b0d;
  --accentSoft: rgba(255,122,26,.22); --ph: #1e1e24; --navBg: rgba(15,15,18,.85);
  --danger: #ff6b6b; --dangerBorder: rgba(255,107,107,.4);
  --statusColor: #fff; --homeInd: rgba(255,255,255,.5);
}

html, body { height: 100%; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  background: #d7d7db;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .85; }
button, input, select, textarea { font-family: inherit; }

.mono { font-family: 'IBM Plex Mono', monospace; }
.scroll::-webkit-scrollbar { width: 0; height: 0; }
.scroll { scrollbar-width: none; }
.snap { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }

@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile-first: the app fills the viewport on a phone (the 90% case). On wider
   screens it grows into a centered full-height column and the content inside
   spreads out — grids gain columns, detail/form views stay a readable width. */
.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 760px) {
  body { background: var(--bg); }
  .app {
    max-width: 1120px;
    min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--border);
  }
}

/* screen container that scrolls between the top bar and bottom nav */
.screen { position: relative; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Content-width wrappers used per screen. On mobile both are full width;
   on desktop the wide ones host multi-column grids and the narrow ones keep
   a comfortable single reading column centered in the page. */
.view-wide { max-width: 1040px; margin-inline: auto; }
.view-narrow { max-width: 620px; margin-inline: auto; }

/* Public feed: a vertical scroll of tall cards on mobile; a responsive card
   grid on desktop so customers can scan many parts at once. */
.feed-grid { display: flex; flex-direction: column; gap: 24px; }
.feed-card { aspect-ratio: 4 / 6; }
.feed-empty { grid-column: 1 / -1; }

/* Admin search results grid: 2-up on phones, auto-fit on larger screens. */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.result-list { display: flex; flex-direction: column; gap: 9px; max-width: 680px; }

/* Article/product detail screens (admin part detail, public listing detail):
   photo stacked above the info on mobile — unchanged. On desktop this becomes
   a real two-column product page (photo left, info right) instead of just a
   narrow mobile card floating in a lot of empty space.
   .detail-shell centers the *whole* screen (including bits outside the grid,
   like the public detail's back button and sticky CTA bar); .detail-layout is
   the two-up grid itself (photo + info, in DOM order — no extra wrapper
   classes needed, grid auto-places the two direct children into the two
   columns); .detail-photo is only for desktop-specific photo-column styling. */
.detail-shell { max-width: 620px; margin-inline: auto; }
.detail-layout { max-width: 620px; margin-inline: auto; }

/* Public detail's WhatsApp CTA: full-width bar on mobile (thumb-friendly);
   right-aligned, content-sized on desktop, sitting under the info column
   instead of spanning the whole two-column layout. */
.detail-cta-btn { width: 100%; }

/* Carousel prev/next arrows: click-driven navigation for mouse/desktop users
   (touch swipe and scroll-snap already cover mobile, so these only show at
   the desktop breakpoint to avoid cluttering the immersive mobile photo). */
.carousel-arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px); color: #fff;
  font-size: 22px; line-height: 1; align-items: center; justify-content: center;
}
.carousel-arrow:disabled { opacity: .35; cursor: default; }
.carousel-arrow:not(:disabled):hover { background: rgba(0,0,0,.65); }

/* Lightbox stage: the photo uses object-fit:contain to show the whole image
   uncropped, so on a wide/short viewport it can be letterboxed — much
   narrower than the full screen. Without this, arrows pinned to the screen
   edges would float far away from the actual visible photo. Constraining the
   stage keeps the arrows (and the track they're absolutely positioned in)
   anchored close to the photo instead of the outer viewport. Full-bleed on
   mobile (unchanged); capped and centered on desktop. */
.lightbox-stage { position: relative; width: 100%; height: 100%; }

@media (min-width: 760px) {
  .feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
  .feed-card { aspect-ratio: 3 / 4; }
  .result-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
  .detail-shell, .detail-layout { max-width: 1000px; }
  .detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .detail-photo { position: sticky; top: 16px; border-radius: 16px; overflow: hidden; }
  .detail-cta { display: flex; justify-content: flex-end; }
  .detail-cta-btn { width: auto; min-width: 300px; }
  .carousel-arrow { display: flex; }
  .lightbox-stage { width: min(90vw, 1100px); height: min(86vh, 1100px); }
}

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 30;
}
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.brand-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

.seg { display: flex; background: color-mix(in srgb, var(--surface) 80%, var(--bg)); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; background: transparent; color: var(--muted); }
.seg button.active { background: var(--accent); color: var(--accentInk); }

/* primary nav — sits at the top, right under the topbar, so Search/Add/Containers
   are immediately reachable instead of requiring a reach to the bottom edge. */
.nav {
  flex: 0 0 auto;
  height: 62px;
  background: var(--navBg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  display: flex; align-items: stretch; padding: 0 8px;
  z-index: 40;
}
.nav button.tab { flex: 1; border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
.nav button.tab.active { color: var(--accent); }
@media (min-width: 760px) {
  .nav { justify-content: center; gap: 8px; }
  .nav button.tab { flex: 0 0 200px; }
}
.nav .fab {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 18px;
}
.nav .fab span {
  width: 46px; height: 46px; border-radius: 50%; background: var(--accent);
  color: var(--accentInk); display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 4px 14px var(--accentSoft);
}

/* generic bits */
.badge { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.pill { border: none; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.pill.active { background: var(--accent); border-color: var(--accent); color: var(--accentInk); }

input.field, select.field, textarea.field {
  width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 15px; padding: 11px 12px; border-radius: 11px; outline: none;
}
textarea.field { resize: none; line-height: 1.4; }
label.lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.toast {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  z-index: 200; background: #1c1c22; color: #fff; font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: toastIn .25s ease; white-space: nowrap; max-width: 90vw;
}

.hint {
  font-size: 11px; color: #7a7a80; text-align: center; line-height: 1.5;
  padding: 10px 16px 4px;
}