/* Closo Wholesale Marketplace — public auctions directory + spectator window (Stream S3).
 * Tokens per design canon (Auctions.dc.html / Auction.dc.html):
 * Poppins (display) / Inter (body) / JetBrains Mono (numbers), accent #452B90, live #B02E68.
 * Shared page chrome tokens live in wholesale-market.css (parallel stream); this file
 * only carries the auctions-specific composition.
 */

.wsa-page {
  max-width: 1920px;
  margin: 0 auto;
  background: #fff;
  color: #1A202C;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
/* ⛔ :where() — ZERO SPECIFICITY, AND THAT IS THE WHOLE POINT. Written plainly,
 *    `.wsa-page a` is (0,1,1) and outranks `.wm-btn-solid` at (0,1,0), so every
 *    button inside this page inherits body ink instead of its own white and the
 *    text goes black. The shared sheet fixed the same rule the same way; this
 *    one was missed, and the operator caught it on the Sell on Closo button. */
:where(.wsa-page) a { color: inherit; text-decoration: none; }
.wsa-page a, .wsa-page button {
  transition: background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.wsa-page a:focus-visible, .wsa-page button:focus-visible {
  outline: 2px solid #452B90; outline-offset: 2px;
}
.wsa-mono { font-family: 'JetBrains Mono', monospace; }

/* ---- minimal fallback header (used only when the shared chrome partial is absent) ---- */
.wsa-fallback-header {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 48px; border-bottom: 1px solid #E4E2EE;
}
.wsa-logo {
  font-family: Poppins, Inter, sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: -0.01em; color: #1A202C;
}
.wsa-logo em { font-style: normal; color: #452B90; }
.wsa-header-spacer { flex: 1; }
.wsa-live-flag {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #B02E68;
}
.wsa-live-flag i {
  width: 8px; height: 8px; border-radius: 50%; background: #B02E68;
}
.wsa-auth { display: flex; align-items: center; gap: 10px; }
.wsa-login { font-size: 13.5px; font-weight: 600; padding: 10px 16px; color: #1A202C; }
.wsa-signup {
  font-size: 13.5px; font-weight: 600; padding: 10px 20px;
  background: #452B90; color: #fff !important; border-radius: 999px;
}
.wsa-signup:hover { background: #321F69; }
.wsa-login { border-radius: 999px; }
.wsa-login:hover { background: #F4F2FA; color: #1A202C; }

/* ---- section nav (directory) ---- */
.wsa-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 0 48px; border-bottom: 1px solid #E4E2EE;
}
.wsa-nav a { font-size: 14px; font-weight: 500; color: #556070; padding: 15px 14px; }
.wsa-nav a:hover { color: #1A202C; }
.wsa-nav a.is-active {
  font-weight: 600; color: #1A202C; border-bottom: 2px solid #452B90;
}
.wsa-nav-count {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: #556070;
}

/* ---- directory: Live now ---- */
.wsa-section-title { padding: 24px 48px 8px; }
.wsa-section-title b {
  font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 18px;
}
.wsa-live-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; padding: 14px 48px 10px;
}
.wsa-card {
  display: block; border: 1px solid #E4E2EE; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,32,44,0.06), 0 8px 24px rgba(26,32,44,0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wsa-card:hover, .wsa-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(26,32,44,0.06), 0 14px 32px rgba(26,32,44,0.12);
}
.wsa-card:hover .wsa-watch-btn { background: #321F69; }
.wsa-card-media {
  aspect-ratio: 16/7; background: linear-gradient(135deg, #E9E5DC, #D6D0C2);
  background-size: cover; background-position: center; position: relative;
}
.wsa-card-livebar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: rgba(176,46,104,0.94); color: #fff;
  font-size: 12.5px; font-weight: 700;
}
.wsa-card-livebar .wsa-mono { font-size: 14px; }
.wsa-card-watching {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-weight: 600; font-size: 12px;
}
.wsa-card-body { padding: 14px 18px; display: flex; align-items: center; gap: 14px; }
.wsa-card-info { flex: 1; min-width: 0; }
.wsa-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #556070;
}
.wsa-card-title {
  font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 16px;
  color: #1A202C; display: block;
}
.wsa-card-meta { font-size: 12.5px; color: #556070; margin-top: 2px; }
.wsa-card-meta .wsa-mono { font-weight: 700; color: #1A202C; font-size: 14px; }
.wsa-watch-btn {
  padding: 11px 22px; background: #452B90; color: #fff !important;
  border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background 0.15s ease;
}
.wsa-watch-btn:hover { background: #321F69; }

/* ---- directory: This week ---- */
.wsa-week {
  margin: 12px 48px 26px; border: 1px solid #E4E2EE;
  border-radius: 16px; overflow: hidden;
}
.wsa-week-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid #E4E2EE;
}
.wsa-week-row:last-child { border-bottom: 0; }
.wsa-when {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  color: #1D5FBF; background: #DCEAFB; border-radius: 8px; padding: 6px 10px;
  white-space: nowrap;
}
.wsa-week-thumb {
  width: 52px; height: 40px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, #E9DEDA, #D8C6BE);
  background-size: cover; background-position: center;
}
.wsa-week-info { flex: 1; min-width: 0; }
.wsa-week-title { font-size: 14px; font-weight: 700; color: #1A202C; }
.wsa-week-title:hover { color: #321F69; }
.wsa-week-sub { font-size: 12px; color: #556070; }
.wsa-week-watching {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #556070;
  white-space: nowrap;
}
.wsa-remind {
  padding: 9px 18px; border: 1.5px solid #1A202C; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: #1A202C; white-space: nowrap;
}
.wsa-remind:hover { background: #F4F2FA; color: #1A202C; }

/* ---- directory: footer note ---- */
.wsa-footnote {
  display: flex; gap: 16px; align-items: center; margin: 0 48px 28px;
  padding: 16px 22px; background: #FAFAFC; border: 1px solid #E4E2EE;
  border-radius: 14px; font-size: 13px; color: #556070;
}
.wsa-footnote b { color: #1A202C; font-weight: 600; }
.wsa-footnote-cta {
  margin-left: auto; font-size: 13px; font-weight: 600; color: #452B90 !important;
  white-space: nowrap;
}
.wsa-footnote-cta:hover { color: #321F69 !important; }
.wsa-empty { padding: 18px 48px 8px; font-size: 13.5px; color: #556070; }
/* Page-level line, so it takes the page gutter — 48px is the desktop one. */
@media (max-width: 640px) { .wsa-empty { padding-left: 16px; padding-right: 16px; } }

/* ---- spectator window ---- */
.wsa-window {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px;
  padding: 26px 48px 34px; align-items: start;
}
.wsa-lot { display: flex; flex-direction: column; gap: 16px; }
.wsa-lot-photo {
  aspect-ratio: 16/10; border-radius: 16px;
  background: linear-gradient(135deg, #E9E5DC, #D6D0C2);
  background-size: cover; background-position: center; position: relative;
}
.wsa-lot-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(176,46,104,0.95); color: #fff; border-radius: 999px; padding: 5px 12px;
}
.wsa-lot-badge.is-upcoming { background: rgba(29,95,191,0.95); }
.wsa-lot-photos-count {
  position: absolute; right: 12px; bottom: 12px; background: #fff;
  font-size: 11.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(26,32,44,0.15);
}
.wsa-lot-photos-count:hover { background: #F4F2FA; color: #452B90; }
.wsa-lot-title {
  font-family: Poppins, Inter, sans-serif; font-weight: 600; font-size: 22px;
  margin-top: 3px;
}
.wsa-lot-facts { font-size: 13px; color: #556070; margin-top: 5px; }
.wsa-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.wsa-tiles.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wsa-tiles.is-one { grid-template-columns: minmax(0, 1fr); }
.wsa-tile {
  background: #FAFAFC; border: 1px solid #E4E2EE; border-radius: 12px;
  padding: 12px 15px;
}
.wsa-tile-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: #556070;
}
.wsa-tile-beta {
  color: #8A5A00; background: #FDF3E0; border-radius: 4px; padding: 1px 5px;
  letter-spacing: 0.04em;
}
.wsa-tile-value {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px;
  margin-top: 4px;
}
.wsa-tile-value.is-green { color: #186A3B; }
.wsa-manifest-link { font-size: 13px; font-weight: 600; color: #452B90 !important; }
.wsa-manifest-link:hover { color: #321F69 !important; }

/* ---- auction column ---- */
.wsa-col {
  border: 1px solid #E4E2EE; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(26,32,44,0.06), 0 8px 24px rgba(26,32,44,0.07);
}
.wsa-col-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid #E4E2EE; background: #FAFAFC;
}
.wsa-col-stat-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: #556070;
}
.wsa-col-stat-value {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px;
  letter-spacing: -0.01em;
}
.wsa-col-divider { width: 1px; height: 34px; background: #E4E2EE; }
.wsa-col-people { margin-left: auto; text-align: right; }
.wsa-col-bidders { font-size: 12px; font-weight: 600; }
.wsa-col-watching { font-size: 12px; color: #556070; }
.wsa-extend-note {
  padding: 7px 20px; font-size: 11px; color: #556070;
  border-bottom: 1px solid #E4E2EE;
}
.wsa-feed {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 20px;
  min-height: 300px; max-height: 460px; overflow-y: auto;
}
.wsa-feed-row {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px;
}
.wsa-feed-name { font-weight: 600; }
.wsa-feed-amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.wsa-feed-time {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #556070;
}
.wsa-feed-row.is-host {
  align-items: normal; font-size: 12.5px; background: #EDE8F8;
  border-radius: 10px; padding: 8px 12px;
}
.wsa-feed-host-tag { font-weight: 700; color: #452B90; }
.wsa-feed-host-text { color: #1A202C; }
.wsa-feed-row.is-leading {
  background: #E8F5EC; border-radius: 10px; padding: 8px 12px; margin: 0 -12px;
}
.wsa-feed-row.is-leading .wsa-feed-name,
.wsa-feed-row.is-leading .wsa-feed-amount { color: #186A3B; }
.wsa-feed-lead-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #186A3B;
}
.wsa-feed-quiet { font-size: 12.5px; color: #556070; }

/* ---- spectator door (anonymous — never a working bid form) ---- */
.wsa-door {
  border-top: 1px solid #E4E2EE; padding: 18px 20px; background: #FAFAFC;
  display: flex; flex-direction: column; gap: 10px;
}
.wsa-door-title {
  font-size: 14px; font-family: Poppins, Inter, sans-serif; font-weight: 600;
}
.wsa-door-copy { font-size: 12.5px; color: #556070; line-height: 1.5; }
.wsa-door-cta {
  text-align: center; padding: 12px; background: #452B90; color: #fff !important;
  border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.wsa-door-cta:hover { background: #321F69; }
.wsa-door-keep {
  text-align: center; font-size: 12px; font-weight: 600; color: #556070 !important;
}
.wsa-door-keep:hover { color: #1A202C !important; }

@media (max-width: 900px) {
  /* Mobile gutter unified with the shared chrome: 16px. */
  .wsa-live-grid { grid-template-columns: minmax(0, 1fr); }
  .wsa-window { grid-template-columns: minmax(0, 1fr); }
  .wsa-fallback-header, .wsa-nav, .wsa-section-title { padding-left: 16px; padding-right: 16px; }
  .wsa-live-grid, .wsa-window { padding-left: 16px; padding-right: 16px; }
  .wsa-week, .wsa-footnote { margin-left: 16px; margin-right: 16px; }
  /* W1 mobile audit: the nav scrolls inside itself (3 tabs + counter do not
   * fit 360px), tap targets on the door buttons reach ≥44px. */
  .wsa-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wsa-nav::-webkit-scrollbar { display: none; }
  .wsa-nav a { white-space: nowrap; }
  .wsa-nav-count { white-space: nowrap; }
  .wsa-login { padding-top: 12px; padding-bottom: 12px; }
  .wsa-signup { padding-top: 12px; padding-bottom: 12px; }
}

/* ── W1 mobile audit (360-430px pass) ── */
@media (max-width: 640px) {
  /* This-week rows: drop the watcher count, let the action wrap under the
   * title instead of forcing a horizontal squeeze. */
  .wsa-week-row { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
  .wsa-week-watching { display: none; }
  .wsa-week-info { flex-basis: 55%; }
  .wsa-remind { padding: 12px 18px; }
  .wsa-watch-btn { padding: 12px 22px; }
  .wsa-card-body { flex-wrap: wrap; }
}

/* ── inline manifest (no Buy twin — never route off the marketplace) ── */
.wsa-manifest { margin-top: 4px; }
.wsa-manifest summary { cursor: pointer; list-style: none; }
.wsa-manifest summary::-webkit-details-marker { display: none; }
.wsa-manifest-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; background: #fff; border: 1px solid #E4E2EE; border-radius: 10px; overflow: hidden; }
.wsa-manifest-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #556070; text-align: left; padding: 8px 10px; border-bottom: 1px solid #E4E2EE; background: #FAFAFC; }
.wsa-manifest-table td { padding: 7px 10px; border-bottom: 1px solid #F0EEF6; }
.wsa-manifest-table tr:last-child td { border-bottom: none; }
.wsa-manifest-table td.is-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; }
.wsa-manifest-more { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #452B90; }
.wsa-manifest-more:hover { color: #321F69; }

/* ═══ The nothing-scheduled page (operator 2026-08-20) ═══════════════════════
 * ⛔ IT WEARS THE MARKETPLACE'S OWN LANGUAGE, NOT A SAAS EMPTY STATE. The first
 *    pass was grey bordered boxes and plain text — correct information, wrong
 *    register, and the operator read it immediately: "это же маркетплейс а не
 *    платформа". So it is built from what the HOME page is built from: a split
 *    hero with real photography and a floating figure card, then the promo
 *    band's own tinted panels with their watermark glyphs (they live in
 *    wholesale-market.css, which this page already loads).
 *
 * The 48px is the page gutter — this page has no wrapper and every block pads
 * itself; empty.gutter-matches-its-siblings pins it. */
/* ⛔ TWO WIDTHS, ONE PAGE (operator 2026-08-20). With nothing to auction this
 *    is a LANDING page and reads at the home page's width — 1200px centred,
 *    the same number wholesale-market-home.css gives every one of its
 *    sections. With something live it is a RESULTS page and reads at the
 *    catalogue's — full-bleed, the 48px gutter its own sections already use.
 *    The header carries .wsa-narrow in the empty case so it moves with them;
 *    a block that narrows while its heading does not is the misalignment this
 *    page was fixed for an hour ago. */
.wsa-narrow, .wsa-none { max-width: 1200px; margin-left: auto; margin-right: auto; }
.wsa-none { display: flex; flex-direction: column; gap: 26px; padding: 8px 48px 12px; }

.wsa-none-hero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px; align-items: center;
  border-radius: 20px; padding: 46px 44px;
  background:
    radial-gradient(760px 320px at 88% -30%, rgba(69, 43, 144, .10), transparent 62%),
    linear-gradient(135deg, #F6F3FC 0%, #FBFAFE 100%);
}
.wsa-none-copy { display: flex; flex-direction: column; gap: 16px; }
.wsa-none-copy h2 {
  margin: 0; font-family: "Poppins", "Inter", sans-serif;
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; color: #1A202C; text-wrap: balance;
}
.wsa-none-copy p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #556070; max-width: 46ch; }

.wsa-notify-form { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wsa-notify-input {
  font: inherit; font-size: 14.5px; padding: 12px 16px; min-width: 250px; flex: 1;
  border: 1px solid #E4E2EE; border-radius: 999px; background: #fff; color: #1A202C;
}
.wsa-notify-input:focus { outline: 0; border-color: #452B90; box-shadow: 0 0 0 3px rgba(69, 43, 144, .14); }
.wsa-notify-note { font-size: 13px; }
.wsa-notify-note[hidden] { display: none; }
.wsa-notify-fine { font-size: 12.5px; color: #7A8496; }

.wsa-none-visual { position: relative; height: 320px; }
.wsa-none-photo {
  position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(135deg, #E9E5DC, #D6D0C2);
  background-size: cover; background-position: center;
  box-shadow: 0 18px 44px -22px rgba(26, 32, 44, .45);
}
/* The floating figure — the home hero's own device, and the number is real. */
.wsa-none-card {
  position: absolute; left: -18px; bottom: -18px;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid #E4E2EE; border-radius: 14px;
  padding: 14px 18px; box-shadow: 0 10px 30px -14px rgba(26, 32, 44, .40);
}
.wsa-none-card-n { font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 700; color: #452B90; }
.wsa-none-card-l { font-size: 12.5px; color: #556070; }

/* The three mechanism panels ARE promo cards — same tints, same watermark, so
 * the page reads as one surface with the home band. Only the track sizing is
 * ours: a grid of three, not a scrolling rail. */
.wsa-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wsa-how .wsm-promo-card { flex: none; min-height: 150px; }
.wsa-how-body { position: relative; font-size: 13.5px; line-height: 1.55; opacity: .82; }

.wsa-none-cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px;
  border-radius: 18px; padding: 24px 26px; color: #fff;
  background: radial-gradient(620px 260px at 84% -24%, rgba(255,255,255,.16), transparent 60%),
              linear-gradient(135deg, #452B90 0%, #321F69 100%);
}
.wsa-none-cta div { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.wsa-none-cta b { font-family: "Poppins", "Inter", sans-serif; font-size: 19px; font-weight: 700; }
.wsa-none-cta span { font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.wsa-none-cta .wm-btn-solid { background: #fff; color: #452B90; }
.wsa-none-cta .wm-btn-solid:hover { background: #F1EEFA; color: #321F69; }

/* The supply-side banner. Deliberately QUIETER than the buyer band above it —
 * kraft rather than the brand purple — because it speaks to a different
 * visitor and must not compete with the buyer's own next step. */
.wsa-supply {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px; align-items: center;
  border: 1px solid #E4E2EE; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #FBFAF7 0%, #F3EFE6 100%);
}
.wsa-supply-copy { display: flex; flex-direction: column; gap: 10px; padding: 30px 0 30px 30px; }
.wsa-supply-copy b {
  font-family: "Poppins", "Inter", sans-serif; font-size: 21px; font-weight: 700;
  letter-spacing: -0.02em; color: #1A202C;
}
.wsa-supply-copy > span:not(.wsm-eyebrow) { font-size: 14px; line-height: 1.6; color: #556070; max-width: 46ch; }
.wsa-supply-copy .wm-btn-solid { align-self: flex-start; margin-top: 4px; }
.wsa-supply-photo {
  align-self: stretch; min-height: 190px;
  background: linear-gradient(135deg, #E9E5DC, #D6D0C2);
  background-size: cover; background-position: center;
}

@media (max-width: 1000px) {
  .wsa-none-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 26px; }
  .wsa-supply { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wsa-supply-copy { padding: 26px 24px; }
  .wsa-supply-photo { min-height: 170px; order: -1; }
  .wsa-none-visual { height: 240px; }
  .wsa-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wsa-none { padding: 8px 16px 12px; }
  .wsa-notify-input { min-width: 0; }
}

/* The three mechanism panels are now LINKS to /wholesale/bidding, so they need
 * the affordance a card gets everywhere else on this marketplace. */
.wsa-how .wsm-promo-card { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.wsa-how .wsm-promo-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(26, 32, 44, .30); }
.wsa-how-cta {
  position: relative; margin-top: auto; padding-top: 6px;
  font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}