/* ============================================================
   Масла.сайт — Marketplace (modern industrial e-commerce)
   Built on brand tokens (assets/tokens.css). This file REPLACES
   the old "2000s" look: no underlined nav, no heavy drop shadows,
   confident radii, soft elevation, smooth micro-interactions.
   ============================================================ */

:root {
  /* Refined elevation — soft, modern, layered (not 2000s drop shadow) */
  --el-1: 0 1px 2px rgba(19,22,29,0.05);
  --el-2: 0 2px 4px rgba(19,22,29,0.04), 0 6px 16px rgba(19,22,29,0.06);
  --el-3: 0 8px 24px rgba(19,22,29,0.10), 0 2px 6px rgba(19,22,29,0.06);
  --el-pop: 0 12px 40px rgba(19,22,29,0.16), 0 4px 12px rgba(19,22,29,0.08);
  --hairline: 1px solid rgba(19,22,29,0.08);
  --hairline-strong: 1px solid rgba(19,22,29,0.13);
  --ring: 0 0 0 3px rgba(42,155,196,0.28);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --ink: #14181F;
  --cyan: #2A9BC4;
  --cyan-700: #1F7FA3;
  --cyan-900: #145C78;
  --cyan-50: #ECF7FB;
  --cyan-100: #D6EEF6;
  --bronze: #BE9F63;
  --bronze-700: #9E8348;

  --page: #FFFFFF;
  --soft: #F5F8FA;
  --soft-2: #EEF3F6;
}

* { box-sizing: border-box; }

.mk {
  font-family: var(--font-body);
  color: var(--masla-navy);
  background: var(--page);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mk h1, .mk h2, .mk h3, .mk h4, .mk h5, .mk p, .mk ul, .mk li, .mk figure { margin: 0; padding: 0; }
.mk ul { list-style: none; }
.mk a { color: inherit; text-decoration: none; cursor: pointer; }
.mk button { font-family: inherit; cursor: pointer; }
/* :where() = zero specificity → any variant class (.btn-primary etc.) wins,
   while quiet buttons that set no background stay transparent. */
:where(.mk) button { background: transparent; border: 0; }
.mk img { display: block; max-width: 100%; }
.mk ::selection { background: var(--cyan-100); color: var(--ink); }
.mk :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.wrap { max-width: 1480px; margin: 0 auto; padding: 0 40px; }

/* ============================================================
   DISPLAY TYPE
   ============================================================ */
.dsp { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.03; }
.h-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cyan-700);
}
.h-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--cyan); }

/* ============================================================
   BUTTONS — modern, no shadow noise
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: var(--r-sm);
  transition: background 150ms var(--ease-out), color 150ms, border-color 150ms, transform 120ms, box-shadow 150ms;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13px; gap: 6px; }

.btn-primary { background: var(--cyan); color: #fff; }
.btn-primary:hover { background: var(--cyan-700); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }

.btn-bronze { background: var(--bronze); color: #fff; }
.btn-bronze:hover { background: var(--bronze-700); }

.btn-soft { background: var(--soft-2); color: var(--masla-navy); }
.btn-soft:hover { background: #E2EAEF; }

.btn-outline { background: #fff; color: var(--masla-navy); border: var(--hairline-strong); }
.btn-outline:hover { border-color: var(--masla-navy); background: var(--soft); }

.btn-ghost-light { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--bronze); color: #fff; }

/* text link — colour + arrow nudge, never underline */
.tlink { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan-700); font-weight: 600; font-size: 15px; transition: gap 150ms, color 150ms; }
.tlink:hover { color: var(--cyan-900); gap: 9px; }
.tlink .ar { transition: transform 150ms; }
.tlink:hover .ar { transform: translateX(2px); }

/* ============================================================
   CHIPS / BADGES / PILLS
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: var(--hairline);
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--masla-navy);
  transition: border-color 150ms, background 150ms, color 150ms;
}
.chip:hover { border-color: var(--cyan); color: var(--cyan-700); }
.chip .ic { color: var(--cyan); flex-shrink: 0; }

.badge-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.badge-in { background: var(--success-bg); color: var(--success); }
.badge-order { background: var(--warning-bg); color: var(--warning); }
.badge-hit { background: var(--bronze); color: #fff; }
.badge-new { background: var(--cyan); color: #fff; }
.badge-sale { background: var(--danger); color: #fff; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.sec { padding: 64px 0 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.sec-head .t { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--masla-navy); }
.sec-head .s { color: var(--neutral-500); font-size: 15px; margin-top: 7px; max-width: 560px; }