/* Market item page (item-runtime.js).
 *
 * The markup reuses the live page's Tailwind classes, which the archived stylesheet
 * already defines, together with its scHeartPop / scToastIn keyframes; the quick view's
 * insp-* motion comes from market-page.css. Rules land here only for what neither has.
 */

/* The page renders client-side; keep the footer below the fold until it does. */
[data-skc-item-root]:empty { min-height: 100vh; }

/* ---- sticker block of the item page: ten styles (?stickerPreview=1) ---------------------- */
.sv-preview { display: flex; flex-direction: column; gap: 14px; padding: 12px 2px; }
.sv-preview-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed #26262c; border-radius: 12px; }
.sv-preview-label { color: #22d17e; font: 800 10px/1 var(--font-mono), "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.sv-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.sv-item { position: relative; cursor: default; }
.sv-item img { display: block; object-fit: contain; }
.sv-item .qv-stk-tip { z-index: 60; }

/* 1: roomy tile, % under the art */
.sv1-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sv1-frame { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #2c2c34; border-radius: 12px; background: #15151b; transition: border-color .15s, transform .15s; }
.sv1-item:hover .sv1-frame { border-color: #3a3a44; transform: translateY(-2px); }
.sv1-frame img { width: 56px; height: 56px; }
.sv1-pct { font: 800 11px/1 var(--font-mono), "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }

/* 2: art with a % badge in its corner */
.sv2-frame { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #26262c; border-radius: 10px; background: #111116; }
.sv2-frame img { width: 52px; height: 52px; }
.sv2-badge { position: absolute; right: -6px; bottom: -6px; padding: 2px 5px; border-radius: 6px; color: #08110c; font: 800 9.5px/1.2 var(--font-mono), "JetBrains Mono", monospace; box-shadow: 0 4px 10px -2px rgba(0,0,0,.6); }
.sv2-item:hover .sv2-frame { border-color: #3a3a44; }

/* 3: a ring that fills with the integrity */
.sv3-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sv3-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; padding: 3px; }
.sv3-inner { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #121217; }
.sv3-inner img { width: 44px; height: 44px; }
.sv3-pct { font: 800 11px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 4: horizontal chip: art, short name, a bar and % */
.sv4-item { display: flex; align-items: center; gap: 10px; width: 196px; padding: 7px 10px 7px 7px; border: 1px solid #26262c; border-radius: 12px; background: #101014; transition: border-color .15s; }
.sv4-item:hover { border-color: #3a3a44; }
.sv4-frame { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 9px; background: #17171d; }
.sv4-frame img { width: 40px; height: 40px; }
.sv4-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; }
.sv4-name { overflow: hidden; color: #ececf1; font-size: 11px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.sv4-bar { height: 4px; border-radius: 99px; background: #26262c; overflow: hidden; }
.sv4-bar span { display: block; height: 100%; border-radius: 99px; }
.sv4-pct { font: 800 10px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 5: card with an integrity bar under the art */
.sv5-item { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 76px; padding: 8px 8px 9px; border: 1px solid #26262c; border-radius: 12px; background: linear-gradient(180deg, #15151b, #0f0f13); }
.sv5-item:hover { border-color: #3a3a44; }
.sv5-frame img { width: 54px; height: 54px; }
.sv5-bar { width: 100%; height: 4px; border-radius: 99px; background: #26262c; overflow: hidden; }
.sv5-bar span { display: block; height: 100%; }
.sv5-pct { color: #c9c9d2; font: 800 10.5px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 6: glass tile with a glow of the integrity tone and a % pill */
.sv6-frame { position: relative; display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--sv-tone) 18%, transparent), transparent 70%), rgba(255,255,255,.02); backdrop-filter: blur(6px); transition: transform .15s, box-shadow .15s; }
.sv6-item:hover .sv6-frame { transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--sv-tone); }
.sv6-frame img { width: 56px; height: 56px; }
.sv6-pill { position: absolute; top: 5px; right: 5px; padding: 1px 5px; border: 1px solid; border-radius: 99px; background: rgba(0,0,0,.55); font: 800 8.5px/1.3 var(--font-mono), "JetBrains Mono", monospace; }

/* 7: minimal, no frame */
.sv7-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 4px; }
.sv7-item img { width: 60px; height: 60px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); transition: transform .15s; }
.sv7-item:hover img { transform: scale(1.08); }
.sv7-pct { font: 800 11px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 8: slot number, %, art and a wear word */
.sv8-item { display: flex; flex-direction: column; gap: 6px; width: 84px; padding: 7px 8px 8px; border: 1px solid #26262c; border-radius: 12px; background: #101014; }
.sv8-item:hover { border-color: #3a3a44; }
.sv8-head { display: flex; justify-content: space-between; color: #64646e; font: 700 9px/1 var(--font-mono), "JetBrains Mono", monospace; text-transform: uppercase; }
.sv8-head b { font-weight: 800; }
.sv8-frame { display: grid; place-items: center; height: 54px; border-radius: 8px; background: #17171d; }
.sv8-frame img { width: 48px; height: 48px; }
.sv8-word { font-size: 9.5px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .06em; }

/* 9: dark tile, bottom edge in the integrity tone */
.sv9-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; padding: 8px 6px 8px; border: 1px solid #1e1e24; border-bottom: 3px solid; border-radius: 10px; background: #0c0c10; }
.sv9-item:hover { background: #121217; }
.sv9-frame img { width: 54px; height: 54px; }
.sv9-pct { color: #ececf1; font: 800 11px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 10: a list: art, full name, % and price in a row */
.sv10-wrap { flex-direction: column; gap: 6px; width: 100%; max-width: 520px; }
.sv10-item { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; padding: 5px 12px 5px 5px; border: 1px solid #1e1e24; border-radius: 10px; background: #101014; }
.sv10-item:hover { border-color: #33333b; }
.sv10-frame { display: grid; place-items: center; width: 44px; height: 38px; border-radius: 7px; background: #17171d; }
.sv10-frame img { width: 36px; height: 36px; }
.sv10-name { overflow: hidden; color: #ececf1; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.sv10-pct { font: 800 11px/1 var(--font-mono), "JetBrains Mono", monospace; }
.sv10-price { color: #22d17e; font: 800 11px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* The sticker style switcher (?stickerPreview=1), bottom left. */
.sv-live { padding: 12px 2px; }
.sv-switcher {
  position: fixed; left: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px; border: 1px solid #2c2c34; border-radius: 14px; background: rgba(16, 16, 20, .96);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9); backdrop-filter: blur(10px);
}
.sv-switcher-title { color: #8f8f93; font: 800 9.5px/1 var(--font-mono), "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.sv-switcher-grid { display: grid; grid-template-columns: repeat(5, 34px); gap: 6px; }
.sv-switcher-grid button {
  height: 32px; border: 1px solid #2c2c34; border-radius: 9px; background: #15151b; color: #c9c9d2;
  font: 800 12px/1 var(--font-mono), "JetBrains Mono", monospace; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.sv-switcher-grid button:hover { border-color: #3a3a44; color: #fff; }
.sv-switcher-grid button.is-on { border-color: #22d17e; background: rgba(34, 209, 126, .14); color: #22d17e; }

/* ---- stickers in the listing rows: ten styles (?stickerPreview=1) ------------------------- */
.sv-switcher-gap { margin-top: 4px; }
.rv-holder { overflow: visible; }
.rv-wrap { display: flex; align-items: center; gap: 8px; }
.rv-item { position: relative; flex: none; }
.rv-item img { display: block; object-fit: contain; }
.rv-item img.rv-charm-art { transform: scale(1.5); }
.rv-item .qv-stk-tip { z-index: 60; }

/* 1: small rings filled to the integrity */
.rv1-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rv1-ring { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; padding: 2px; }
.rv1-inner { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #121217; overflow: hidden; }
.rv1-inner img { width: 30px; height: 30px; }
.rv1-pct { font: 800 10px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 2: square with a corner badge */
.rv2-frame { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #2c2c34; border-radius: 9px; background: #15151b; }
.rv-charm .rv2-frame { border-color: rgba(226, 178, 77, .45); background: #17140f; }
.rv2-frame img { width: 40px; height: 40px; }
.rv2-badge { position: absolute; right: -5px; bottom: -5px; padding: 1px 4px; border-radius: 5px; color: #08110c; font: 800 8.5px/1.25 var(--font-mono), "JetBrains Mono", monospace; box-shadow: 0 3px 8px -2px rgba(0,0,0,.7); }
.rv2-item:hover .rv2-frame { border-color: #3a3a44; }

/* 3: no frame, the art and the % */
.rv3-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rv3-item img { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); transition: transform .15s; }
.rv3-item:hover img { transform: scale(1.1); }
.rv3-pct { font: 800 10px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 4: capsules: small art and % side by side */
.rv4-item { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px 0 3px; border: 1px solid #26262c; border-radius: 99px; background: #0e0e12; }
.rv4-item:hover { border-color: #3a3a44; }
.rv-charm.rv4-item { border-color: rgba(226, 178, 77, .45); }
.rv4-item img { width: 26px; height: 26px; }
.rv4-pct { font: 800 10px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 5: square with an integrity bar under it */
.rv5-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rv5-frame { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #2c2c34; border-radius: 9px; background: #15151b; }
.rv-charm .rv5-frame { border-color: rgba(226, 178, 77, .45); background: #17140f; }
.rv5-frame img { width: 38px; height: 38px; }
.rv5-bar { width: 38px; height: 3px; border-radius: 99px; background: #26262c; overflow: hidden; }
.rv5-bar span { display: block; height: 100%; }
/* Shown on phones only, where the sticker tooltip cannot be reached. */
.rv5-pct { display: none; }

/* 6: glass tile with a glow and a % pill */
.rv6-frame { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rv-tone) 20%, transparent), transparent 70%), rgba(255,255,255,.02); transition: transform .15s, box-shadow .15s; }
.rv6-item:hover .rv6-frame { transform: translateY(-2px); box-shadow: 0 8px 18px -10px var(--rv-tone); }
.rv6-frame img { width: 40px; height: 40px; }
.rv6-pill { position: absolute; top: -6px; right: -6px; padding: 1px 4px; border: 1px solid; border-radius: 99px; background: #0c0c10; font: 800 8px/1.3 var(--font-mono), "JetBrains Mono", monospace; }

/* 7: dark tile, bottom edge in the integrity tone */
.rv7-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 50px; padding: 4px 3px 4px; border: 1px solid #1e1e24; border-bottom: 2px solid; border-radius: 8px; background: #0c0c10; }
.rv7-item:hover { background: #121217; }
.rv7-frame img { width: 36px; height: 36px; }
.rv7-pct { color: #ececf1; font: 800 9.5px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* 8: overlapping stack and a summary */
.rv8-wrap { gap: 10px; }
.rv8-stack { display: flex; align-items: center; }
.rv8-item { display: grid; place-items: center; width: 42px; height: 42px; margin-left: -12px; border: 2px solid var(--rv-tone); border-radius: 50%; background: #15151b; box-shadow: 0 4px 10px -4px rgba(0,0,0,.8); transition: transform .15s; }
.rv8-item:first-child { margin-left: 0; }
.rv8-item:hover { transform: translateY(-3px); z-index: 30 !important; }
.rv8-item img { width: 30px; height: 30px; }
.rv8-sum { display: flex; flex-direction: column; gap: 3px; color: #8f8f93; font: 700 9.5px/1 var(--font-mono), "JetBrains Mono", monospace; text-transform: uppercase; }
.rv8-sum b { color: #ececf1; }

/* 9: square with the % over its bottom */
.rv9-frame { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #2c2c34; border-radius: 9px; background: #15151b; overflow: hidden; }
.rv-charm .rv9-frame { border-color: rgba(226, 178, 77, .45); background: #17140f; }
.rv9-frame img { width: 42px; height: 42px; }
.rv9-pct { position: absolute; inset: auto 0 0 0; padding: 8px 0 2px; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); font: 800 9px/1 var(--font-mono), "JetBrains Mono", monospace; text-align: center; }

/* 10: art and % side by side, compact */
.rv10-item { display: flex; align-items: center; gap: 5px; padding: 3px 7px 3px 3px; border: 1px solid #1e1e24; border-radius: 9px; background: #0e0e12; }
.rv10-item:hover { border-color: #33333b; }
.rv-charm.rv10-item { border-color: rgba(226, 178, 77, .45); }
.rv10-frame { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; background: #17171d; }
.rv10-frame img { width: 32px; height: 32px; }
.rv10-pct { font: 800 10px/1 var(--font-mono), "JetBrains Mono", monospace; }

/* ---- phone layout ---------------------------------------------------------------
   No hover on a touch screen: the sticker cards never open, so they are dropped and
   every sticker shows its price instead. The price and its button move up under the
   picture, the way skin.place and aim.market order their item pages. */
.sv-touch-price { display: none; }

/* Tap card for a lot's sticker (phones only; opened by the runtime). */
.stk-pop {
  position: fixed; z-index: 130; display: flex; align-items: center; gap: 10px;
  width: 244px; max-width: calc(100vw - 16px); padding: 10px;
  border: 1px solid #2c2c34; border-radius: 13px; background: #17171d;
  box-shadow: 0 18px 44px -10px rgba(0, 0, 0, .75);
}
.stk-pop img {
  width: 62px; height: 62px; flex: none; padding: 4px; object-fit: contain;
  border: 1px solid #2c2c34; border-radius: 10px; background: #0e0e12;
}
.stk-pop-facts { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.stk-pop-name { color: #ececf1; font: 800 12.5px/1.3 var(--font-sans), sans-serif; }
.stk-pop-row { display: flex; align-items: baseline; gap: 8px; }
.stk-pop-price { color: #22d17e; font: 800 14px/1 var(--font-mono), "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.stk-pop-pct { font: 700 10.5px/1 var(--font-mono), "JetBrains Mono", monospace; }
.stk-pop-arrow {
  position: absolute; bottom: -6px; width: 11px; height: 11px; margin-left: -5.5px;
  border-right: 1px solid #2c2c34; border-bottom: 1px solid #2c2c34;
  background: #17171d; transform: rotate(45deg);
}
.stk-pop.stk-pop-below .stk-pop-arrow {
  top: -6px; bottom: auto;
  border: 0; border-left: 1px solid #2c2c34; border-top: 1px solid #2c2c34;
}

@media (max-width: 767px) {
  .sv-item .qv-stk-tip, .rv-item .qv-stk-tip { display: none; }

  /* All five stickers keep to one line: the row shares its width between them instead of
     wrapping the last one onto a line of its own. */
  .sv-wrap { flex-wrap: nowrap; gap: 6px; }
  .sv-item { flex: 1 1 0; min-width: 0; max-width: 64px; }
  .sv3-ring { width: 100%; height: auto; aspect-ratio: 1; }
  .sv3-inner img { width: 76%; height: 76%; }
  .sv-touch-price {
    display: block; margin-top: 2px;
    color: #9a9aa4; font: 700 9.5px/1.2 var(--font-mono), "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
  }
  /* The buy box at phone width: the price owns the first line, the two buttons split the
     second one instead of standing at ragged widths, and the guarantees read as two calm
     columns rather than three wrapped lines. */
  /* The breadcrumb is 10px type: its links need a finger-sized tap area, not a 15px line. */
  nav[aria-label="Breadcrumb"] { row-gap: 2px; }
  nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 28px; }

  [data-item-buy] { order: -1; margin-top: 0; gap: 10px; padding: 12px 12px 13px; }
  [data-item-buy] [data-buy-head] { gap: 10px; }
  [data-item-buy] [data-buy-head] > div.flex-1 { display: none; }
  [data-item-buy] [data-buy-price] { flex: 1 1 100%; }
  [data-item-buy] [data-buy-amount] { font-size: 27px; }
  [data-item-buy] [data-hero-cart],
  [data-item-buy] [data-hero-buy] { height: 44px; padding-left: 10px; padding-right: 10px; }
  [data-item-buy] [data-hero-cart] { flex: 1 1 0; font-size: 12px; }
  [data-item-buy] [data-hero-buy] { flex: 1.5 1 0; font-size: 13px; }
  /* The sum stays in the price above it. */
  [data-item-buy] [data-buy-sum] { display: none; }
  [data-item-buy] [data-buy-notes] { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
  [data-item-buy] [data-buy-sep],
  [data-item-buy] [data-buy-notes] > div.flex-1 { display: none; }
  /* Each note carries its desktop size inline, so the phone has to say it louder. */
  [data-item-buy] [data-buy-note],
  [data-item-buy] [data-buy-status] { font-size: 9.5px !important; letter-spacing: 0.04em; }

  /* A lot row cannot hold thumb, float, stickers, price and two buttons on one line at
     phone width. The spacer becomes the line break: above it the lot itself, below it
     the price on the left and the buttons on the right. */
  [data-row] { flex-wrap: wrap; row-gap: 8px; column-gap: 6px; }
  [data-row] > [data-row-break] { flex: 0 0 100%; height: 0; }
  [data-row] [data-buy-row] { margin-left: auto; }
  /* --row-thumb-bump is set by the runtime (see ROW_THUMB_BUMP / ?thumbPreview=1). */
  [data-row] > [data-row-thumb] { width: calc(44px + var(--row-thumb-bump, 0px)); height: calc(42px + var(--row-thumb-bump, 0px)); }
  [data-row] > [data-row-thumb] img { max-width: calc(38px + var(--row-thumb-bump, 0px)); max-height: calc(34px + var(--row-thumb-bump, 0px)); }
  [data-row] > [data-row-facts] { width: 104px; }
  /* 285px of content have to hold the lot, so the stickers and the price are trimmed
     to what still reads: the row keeps to two lines. */
  /* The charm carries no wear number, so the tiles line up by their tops instead of
     floating to the middle of the taller sticker cells. */
  [data-row] .rv-holder,
  [data-row] .rv-wrap { align-items: flex-start; }
  [data-row] .rv-holder { overflow: hidden; gap: 4px; }
  /* --row-sticker-bump is set by the runtime (see ROW_STICKER_BUMP / ?thumbPreview=1). */
  [data-row] .rv5-frame { width: calc(18px + var(--row-sticker-bump, 0px)); height: calc(18px + var(--row-sticker-bump, 0px)); border-radius: 5px; }
  [data-row] .rv5-frame img { width: calc(15px + var(--row-sticker-bump, 0px)); height: calc(15px + var(--row-sticker-bump, 0px)); }
  [data-row] .rv5-item { gap: 0; }
  [data-row] .rv5-bar { display: none; }
  [data-row] .rv5-pct {
    display: block; margin-top: 1px;
    font: 800 9.5px/1.1 var(--font-mono), "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
  }
  [data-row] [data-row-price] { font-size: 14px; }

  /* The lots header: the count keeps the first line and the two buttons share the second
     one as an even pair, instead of stepping down one after the other. */
  [data-l-lots-head] > [data-l-spacer] { flex: 0 0 100%; height: 0; }
  [data-l-lots-head] > [data-bulk-toggle],
  [data-l-lots-head] > [data-filters-open] { flex: 1 1 0; height: 34px; margin-left: 0; white-space: nowrap; }

  /* The filter bar lives behind the "Filters" button of the lots header. */
  [data-l-sticky] > [data-l-filters] { display: none; }
  [data-l-sticky]:not(:has([data-l-chips] > *)) { display: none; }
  [data-filters-sheet] [data-l-filters] > div { flex-direction: column; align-items: stretch; gap: 16px; }

  /* The wear scale reads as a row of cards you swipe, the way skin.place shows it. */
  [data-wear-ladder] { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  [data-wear-ladder]::-webkit-scrollbar { display: none; }
  [data-wear-ladder] > button { flex: 0 0 152px; align-items: flex-start; padding-left: 14px; padding-right: 14px; text-align: left; }
}

/* Шкала качества: фон плавно наливается при наведении, а не переключается рывком.
   Правила держим здесь, а не в утилитах Tailwind — у кнопок остаётся инлайновый
   style с цветом подчёркивания, и hover-утилита раньше до фона не доходила. */
[data-wear-ladder] > button {
  background-color: transparent;
  transition: background-color .28s ease, border-color .28s ease;
}
[data-wear-ladder] > button[disabled] { background-color: transparent; }
[data-wear-ladder] > button.is-current { background-color: #15151b; }
[data-wear-ladder] > button:not([disabled]):hover { background-color: rgba(255, 255, 255, .055); }