/* File: src/styles/equipbar.css */
/* ─────────────────────────────────────────────────────────────────────────────
   equipbar.css
   Equipment bar — MINIMALIST FLOATING style.

   No filled panels. Each item is a thin full-frame cell with a TRANSPARENT
   interior (the world shows through the empty corners) + a soft icon-hugging
   dark scrim so the sprite never disappears (Option B). All labels, names,
   badges, ammo and the bag meter float directly on the world and carry a tight
   blurred dark halo for legibility.

   Class names + markup contract from EquipmentOverlay.js are preserved — this
   is a drop-in CSS swap, no JS change.
───────────────────────────────────────────────────────────────────────────── */

.equipbar-root { pointer-events: auto; }

/* ── Shared halo for every floating equip-bar text run ──────────────────── */
.eb-label,
.eb-weapon-name, .eb-ranged-name, .eb-special-name, .eb-bag-name,
.eb-gear-label, .eb-gear-slot-label, .eb-gear-name, .eb-gear-empty,
.eb-stat, .eb-special-label, .eb-special-hint,
.eb-empty-text, .eb-empty-sub, .eb-empty-text--large,
.eb-bag-count, .eb-ammo-label, .eb-ammo-value, .eb-ammo-none,
.eb-inv-hint {
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 1);
}

/* ── Shared keyframes ───────────────────────────────────────────────────── */
@keyframes ammo-flash { 0% { opacity: 1; } 100% { opacity: 0.5; } }

/* ── Weapons (melee + ranged) — two floating framed cells, bottom-left ──── */
.eb-weapons {
  position: absolute;
  width: 320px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  background: none;
  border: none;
}

.eb-weapon-section,
.eb-ranged-section {
  position: relative;
  width: 150px;
  height: 84px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* labels float at the top of each cell */
.eb-label {
  font-size: 7px;
  font-weight: bold;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 2;
}
.eb-label--weapon                            { color: #9aa67a; }
.eb-weapon-section--armed .eb-label--weapon  { color: var(--color-amber-500); }
.eb-label--ranged                            { color: #8aa0b8; }
.eb-ranged-section--armed .eb-label--ranged  { color: #80c0f0; }

/* empty state — bare floating text, no box */
.eb-empty-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.eb-empty-text                    { font-size: 9px; color: #c8b890; }
.eb-ranged-section .eb-empty-text { color: #a8c0d8; }
.eb-bag    .eb-empty-text         { color: #b8d898; }
.eb-empty-sub                 { font-size: 7px; color: #b0a078; margin-top: 3px; }
.eb-bag    .eb-empty-sub      { color: #9ac070; }
.eb-empty-text--large {
  font-size: 12px !important;
  font-weight: 900;
  color: #d8c890 !important;
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
}

/* body row: framed icon cell + floating info beside it */
.eb-weapon-body,
.eb-ranged-body,
.eb-bag-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  cursor: grab;
}
.eb-weapon-body:active,
.eb-ranged-body:active,
.eb-bag-body:active { cursor: grabbing; }

/* ── The framed cell: thin full frame, TRANSPARENT interior, icon scrim ─── */
.eb-swatch {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 3px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* icon-hugging scrim — soft dark halo behind the sprite, fades before the edge */
.eb-swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 72%);
}
/* faint inner edge accent so it reads as a slot, not a random rect */
.eb-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.eb-swatch--gear { width: 26px !important; height: 26px !important; border: 1px solid rgba(143, 206, 80, 0.5); }
.eb-swatch--bag  { width: 38px !important; height: 38px !important; border: 1px solid rgba(143, 206, 80, 0.5); }

.eb-swatch--weapon-icon { width: 60px !important; height: 60px !important; border: 1px solid rgba(212, 160, 32, 0.6); }
.eb-swatch--ranged-icon { width: 60px !important; height: 60px !important; border: 1px solid rgba(58, 128, 176, 0.6); }
.eb-swatch--special-icon { width: 42px !important; height: 42px !important; border: 1px solid rgba(143, 206, 80, 0.55); }

/* the actual sprite sits above the scrim */
.eb-swatch--icon { background-clip: padding-box; }
.item-icon-img {
  position: relative;
  z-index: 2;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

/* ── Info text beside the icon (floating, haloed) ───────────────────────── */
.eb-weapon-info,
.eb-ranged-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 100%;
}
.eb-weapon-name,
.eb-ranged-name {
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eb-weapon-name { color: var(--color-amber-500); }
.eb-ranged-name { color: #80c0f0; }
.eb-weapon-sub,
.eb-ranged-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: auto;
}
.eb-badge {
  font-size: 7px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 2px;
  width: fit-content;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.eb-badge--melee  { background: rgba(130, 65, 15, 0.85); color: #ffc070; }
.eb-badge--ranged { background: rgba(30, 70, 120, 0.85); color: #a0d8ff; }
.eb-stat { font-size: 8px; color: #c0d888; }

/* ── Ammo — floating chip with halo, faint frame ────────────────────────── */
.eb-ammo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(60, 120, 180, 0.4);
  border-radius: 2px;
  padding: 2px 6px;
  margin-top: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.eb-ammo-container--empty {
  border-color: rgba(var(--rgb-red-500), 0.5);
  background: rgba(var(--rgb-red-900), 0.5);
}
.eb-ammo-label { font-size: 8px; font-weight: bold; color: #80c0f0; letter-spacing: 0.08em; }
.eb-ammo-container--empty .eb-ammo-label { color: var(--color-red-500); }
.eb-ammo-value { font-size: 12px; font-weight: 900; text-shadow: 0 0 5px currentColor, 0 0 3px rgba(0,0,0,1), 0 1px 1px rgba(0,0,0,1); }
.eb-ammo-none {
  font-size: 9px;
  font-weight: 900;
  color: var(--color-red-500);
  animation: ammo-flash 1s infinite alternate;
}

/* ── Rarity pip ─────────────────────────────────────────────────────────── */
.eb-rarity-pip {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  z-index: 3;
  pointer-events: none;
}

/* ── Gear strip — floating framed cells, no panel ───────────────────────── */
.eb-gear {
  position: absolute;
  width: min(150px, 16vw);
  padding: 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eb-gear-label {
  font-size: 7px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #b8d898;
  padding: 0 0 2px;
}
/* HIERARCHY: gear is Tier-3 (meta) info, but the ICONS must stay readable so
   you can always see what's equipped — only the TEXT recedes (the GEAR header,
   slot labels, item names). The icon swatch, accent bar and rarity pip keep
   full opacity at all times. Text wakes per-slot when that slot's item changes
   (EquipmentOverlay._renderGear adds .is-active to the changed row after the
   innerHTML rebuild). No :hover wake: controller players can't move a cursor. */
.eb-gear-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0;
  transform: scale(1);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
/* On wake the whole row scales up a touch (from the left so it grows in place
   without shoving siblings) — the size change is the strongest eye-catch and
   pulls the eye straight to the just-changed slot. The swatch scales further
   on top of this for extra icon pop. */
.eb-gear-row.is-active {
  transform: scale(1.05);
}
.eb-gear-label,
.eb-gear-row .eb-gear-slot-label,
.eb-gear-row .eb-gear-name,
.eb-gear-row .eb-gear-empty {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.eb-gear-row.is-active .eb-gear-slot-label,
.eb-gear-row.is-active .eb-gear-name,
.eb-gear-row.is-active .eb-gear-empty {
  opacity: 1;
}
/* Icon swatch stays full-opacity always, but on a slot change it pops: the
   green border brightens and the cell scales up slightly, then settles back.
   transform (not width) is used so the scale doesn't reflow the row, and it
   animates cleanly alongside the border colour. */
.eb-gear-row .eb-swatch--gear {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.eb-gear-row.is-active .eb-swatch--gear {
  opacity: 1;
  transform: scale(1.18);
  border-color: rgba(176, 240, 110, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5),
              0 2px 6px rgba(0, 0, 0, 0.4),
              0 0 8px rgba(143, 206, 80, 0.55);
}

/* ── Wake "pop" for weapons / quick slot / bag ──────────────────────────────
   Same change-driven flash as the gear strip, applied per-section. These rows
   aren't dimmed at rest (only gear is Tier-3), so the wake is purely additive:
   the section scales up a touch and its icon swatch brightens its border +
   gains a coloured glow, then eases back. .is-active is set by
   EquipmentOverlay after the relevant render. Scale grows from the left so it
   doesn't shove neighbouring sections. */
.eb-weapon-section,
.eb-ranged-section,
.eb-special,
.eb-bag {
  transform: scale(1);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.eb-weapon-section.is-active,
.eb-ranged-section.is-active,
.eb-special.is-active,
.eb-bag.is-active {
  transform: scale(1.05);
}
/* Resting dim: the icons + accent bar are clearly visible but knocked back a
   touch so they don't dominate the eye at full brightness. They stay readable
   without hover, and any change-wake (.is-active) restores full opacity to pull
   the eye to the item that just changed. */
.eb-swatch--gear,
.eb-swatch--weapon-icon,
.eb-swatch--ranged-icon,
.eb-swatch--special-icon,
.eb-swatch--bag {
  opacity: 0.78;
}
/* Artifact (easter-egg) items keep full brightness — their rainbow pulse is
   meant to stand out. */
.eb-swatch.eb-easter-egg {
  opacity: 1 !important;
}

/* Icon swatch transitions + per-slot brighten on wake (colour matches each
   slot's resting border: amber weapon, blue ranged, green special/bag). */
.eb-swatch--weapon-icon,
.eb-swatch--ranged-icon,
.eb-swatch--special-icon,
.eb-swatch--bag {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.eb-weapon-section.is-active .eb-swatch--weapon-icon {
  opacity: 1;
  transform: scale(1.10);
  border-color: rgba(255, 206, 90, 0.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4), 0 0 9px rgba(212, 160, 32, 0.6);
}
.eb-ranged-section.is-active .eb-swatch--ranged-icon {
  opacity: 1;
  transform: scale(1.10);
  border-color: rgba(120, 195, 245, 0.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4), 0 0 9px rgba(58, 128, 176, 0.65);
}
.eb-special.is-active .eb-swatch--special-icon {
  opacity: 1;
  transform: scale(1.12);
  border-color: rgba(176, 240, 110, 0.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4), 0 0 9px rgba(143, 206, 80, 0.6);
}
.eb-bag.is-active .eb-swatch--bag {
  opacity: 1;
  transform: scale(1.12);
  border-color: rgba(176, 240, 110, 0.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4), 0 0 9px rgba(143, 206, 80, 0.6);
}

/* Bag MINI pop — contents changed (pick up / drop / stack), not the bag
   itself. Targets the CAPACITY ROW only: the meter (below the icon, left of
   the number) and the X/Y count. Lighter and quicker than the full pop — a
   brief blip that points the eye at the thing that actually changed. The
   class is removed after MINI_WAKE_MS (~1/3 of the full window). */
.eb-bag-meter {
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  transform-origin: left center;
}
.eb-bag-count {
  transition: transform 0.12s ease, color 0.12s ease, text-shadow 0.12s ease;
  transform-origin: right center;
}
.eb-bag-capacity.is-active-mini .eb-bag-meter {
  transform: scaleY(1.4);
  border-color: rgba(176, 240, 110, 0.7);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), 0 0 6px rgba(143, 206, 80, 0.5);
}
.eb-bag-capacity.is-active-mini .eb-bag-count {
  transform: scale(1.18);
  color: #e8ffb0;
  text-shadow: 0 0 6px rgba(143, 206, 80, 0.7), 0 0 3px rgba(0,0,0,1), 0 1px 1px rgba(0,0,0,1);
}
.eb-gear-accent {
  width: 3px;
  align-self: stretch;
  margin: 4px 0;
  border-radius: 2px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  box-shadow: 0 0 6px currentColor, 0 0 3px rgba(0, 0, 0, 0.8);
}
.eb-gear-row.is-active .eb-gear-accent {
  opacity: 1;
}
.eb-gear-slot-label {
  font-size: 7px;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #8ab068;
  width: 26px;
  flex-shrink: 0;
}
.eb-gear-row--equipped .eb-gear-slot-label { color: #c0ee80; }
.eb-gear-name {
  font-size: 10px;
  font-weight: bold;
  color: #c0ee80;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.eb-gear-empty { font-size: 8px; color: #6a8a48; margin-left: auto; }

/* ── Bag — floating framed icon + floating meter, no panel ──────────────── */
.eb-bag {
  position: absolute;
  width: 120px;
  min-height: 64px;
  padding: 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eb-bag .eb-label { color: #b8d898; }
.eb-bag-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: grab;
}
.eb-bag-body--empty { justify-content: center; cursor: default; }
.eb-bag-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.eb-bag-name {
  font-size: 11px;
  font-weight: bold;
  color: #b8e878;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eb-bag-capacity {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  width: 100%;
}
/* floating meter: thin dark inset track, no surrounding panel */
.eb-bag-meter {
  position: relative;
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5);
}
.eb-bag-fill {
  position: relative;
  height: 100%;
  transition: width 0.15s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.eb-bag-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}
.eb-bag-count {
  font-size: 10px;
  font-weight: bold;
  text-align: right;
  min-width: 30px;
  color: #b8e878;
}

/* ── Special / quick slot — floating framed cell ────────────────────────── */
.eb-special {
  position: absolute;
  width: 96px;
  height: 84px;
  padding: 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.eb-special-label {
  font-size: 7px;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: #8ab068;
}
.eb-special--active .eb-special-label { color: #b8e878; }
.eb-special-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.eb-special--active .eb-swatch--special-icon {
  border-color: rgba(143, 206, 80, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 8px rgba(143, 206, 80, 0.4);
}
.eb-special-qty {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  font-weight: bold;
  color: var(--color-amber-300);
  line-height: 1;
  background: rgba(0, 0, 0, 0.85);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(var(--rgb-green-700), 0.5);
  pointer-events: none;
  z-index: 3;
}
.eb-special-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.eb-special-name {
  font-size: 11px;
  font-weight: bold;
  color: #c0ee80;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eb-special-hint { font-size: 7px; color: #a0d870; }

/* ── Inventory hint — centred floating text ─────────────────────────────── */
.eb-inv-hint {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(9px * var(--txt-scale));
  color: #8ab058;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Inventory-overlay special-slot states (full overlay, keeps fills) ──── */
.equip-slot--special          { background: rgba(8, 16, 5, 0.65); border-color: var(--color-green-900); }
.equip-slot--special:hover    { background: rgba(18, 38, 10, 0.80); border-color: var(--color-ui-textDim); }
.equip-slot--special.is-selected { background: rgba(30, 60, 12, 0.95); border: 1.5px solid var(--color-ui-textMain); }
.equip-slot--special.can-accept  { background: rgba(24, 56, 10, 0.65); border: 1.5px solid var(--color-ui-textDim); }
.eslot-label--special { color: var(--color-green-900); }
.equip-slot--special.is-selected .eslot-label--special { color: var(--color-ui-textHighlight); }
.eslot-prompt--special { font-size: 9px; color: var(--color-ui-textDim); margin-left: auto; }

/* ── Easter Egg Effects ─────────────────────────────────────────────────── */
@keyframes ee-pulse {
  0%   { filter: hue-rotate(0deg)   drop-shadow(0 0 6px rgba(255,255,255,0.6)); border-color: rgba(255,255,255,0.9) !important; }
  50%  { filter: hue-rotate(180deg) drop-shadow(0 0 12px rgba(255,255,255,0.9)); border-color: rgba(255,255,255,1) !important; }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 6px rgba(255,255,255,0.6)); border-color: rgba(255,255,255,0.9) !important; }
}
.eb-easter-egg {
  animation: ee-pulse 3s linear infinite;
  z-index: 2;
}
@keyframes ee-text-pan { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.eb-ee-text {
  background: linear-gradient(90deg, #ff77ff, #77ffff, #ffff77, #ff77ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ee-text-pan 3s linear infinite;
  font-weight: 900 !important;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* ════════════════════════════════════════════════════════════
   HANDHELD / SMALL SCREEN OPTIMIZATIONS
════════════════════════════════════════════════════════════ */
.is-handheld .eb-gear { width: fit-content !important; }
.is-handheld .eb-gear-name,
.is-handheld .eb-gear-hint { display: none !important; }
.is-handheld .eb-gear-empty { margin-left: 0 !important; }

.is-handheld .eb-weapons {
  width: 104px !important;
  flex-direction: row !important;
  gap: 6px !important;
}
.is-handheld .eb-weapon-section,
.is-handheld .eb-ranged-section {
  width: 52px !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 0 !important;
  justify-content: center !important;
}
.is-handheld .eb-label--weapon,
.is-handheld .eb-label--ranged,
.is-handheld .eb-weapon-name,
.is-handheld .eb-ranged-name,
.is-handheld .eb-badge,
.is-handheld .eb-stat,
.is-handheld .eb-empty-sub { display: none !important; }

.is-handheld .eb-weapon-body,
.is-handheld .eb-ranged-body {
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}
.is-handheld .eb-weapon-info,
.is-handheld .eb-ranged-info {
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
}
.is-handheld .eb-swatch--weapon-icon,
.is-handheld .eb-swatch--ranged-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto;
}
.is-handheld .eb-empty-inner { justify-content: center !important; }
.is-handheld .eb-empty-text { font-size: 8px !important; text-align: center !important; }

.is-handheld .eb-ammo-container {
  justify-content: center;
  gap: 2px;
  padding: 0;
  width: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-top: 2px;
}
.is-handheld .eb-ammo-label { display: none !important; }
.is-handheld .eb-ammo-value { font-size: 12px; }
.is-handheld .eb-ammo-none { font-size: 9px; }

.is-handheld .eb-special {
  width: 104px !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.is-handheld .eb-special-label,
.is-handheld .eb-special-hint { display: none !important; }
.is-handheld .eb-special-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}
.is-handheld .eb-special-body {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100%;
}
.is-handheld .eb-swatch--special-icon {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  overflow: visible !important;
}
.is-handheld .eb-special-qty {
  top: -6px !important;
  right: -6px !important;
}
.is-handheld .eb-special .eb-empty-inner {
  flex-direction: row !important;
  justify-content: center !important;
  width: 100%;
}