/* =========================================================
   LM UI — EQUIPMENT BLOCK (primary) + MODAL (Forge/QC)
   Ujednolicone tokeny, skala i formatowanie
   ========================================================= */

/* ------------------------------
   :ROOT — tokeny (rozmiary/kolory)
   ------------------------------ */
:root {
  /* Skale (niezależne) */
  --scale-modal1: 1;
  /* lista (Modal 1) */
  --scale-modal2: 1;
  /* kuźnia + Quick Change (Modal 2) */

  /* Primary API (zachowane) */
  --lm-eq-scale: 1;

  /* Siatka primary (rem; 1rem = 16px) */
  --lm-eq-c-big: calc(0.98214rem * var(--lm-eq-scale));
  /* ~27.5px  */
  --lm-eq-c-small: calc(0.49107rem * var(--lm-eq-scale));
  /* ~13.75px */
  --lm-eq-r-big: calc(0.98214rem * var(--lm-eq-scale));
  /* ~27.5px  */
  --lm-eq-r-mid: calc(0.35714rem * var(--lm-eq-scale));
  /* 10px     */
  --lm-eq-r-thin: calc(0.24554rem * var(--lm-eq-scale));
  /* ~6.875px */

  /* Przycisk „WYKUJ” (primary) */
  --lm-eq-btn-h: calc(1.725rem * var(--lm-eq-scale));
  /* ~34px  */
  --lm-eq-btn-r: calc(0.5rem * var(--lm-eq-scale));
  --lm-eq-btn-px: calc(0.8rem * var(--lm-eq-scale));
  --lm-eq-btn-py: calc(0.45rem * var(--lm-eq-scale));
  --lm-eq-btn-l: calc(2.625rem * var(--lm-eq-scale));
  /* 26px   */
  --lm-eq-btn-m: calc(6.25rem * var(--lm-eq-scale));
  /* 100px  */
  --lm-eq-btn-rw: calc(2.625rem * var(--lm-eq-scale));
  /* 26px   */

  --lm-eq-btn-1: #5db7f2;
  --lm-eq-btn-2: #2d92cf;
  --lm-eq-btn-3: #176fae;
  --lm-eq-btn-text: var(--lm-accent);
  --lm-eq-btn-shadow: rgba(0, 0, 0, 0.35);
  --lm-eq-btn-gloss: rgba(255, 255, 255, 0.4);
  --lm-eq-btn-gloss-top: rgba(255, 255, 255, 0.25);

  /* Slot 3D */
  --lm-eq-slot-r: 0.35rem;
  --lm-eq-slot-shadow: rgba(0, 0, 0, 0.34);
  --lm-eq-slot-inset: rgba(0, 0, 0, 0.28);
  --lm-eq-slot-gloss: rgba(255, 255, 255, 0.22);

  /* MODAL 1 (lista) — skala */
  --m1-grid-gap: calc(0.75rem * var(--scale-modal1));
  --m1-tile-size: calc(3.5rem * var(--scale-modal1));

  /* MODAL 2 (Forge) — skala siatki */
  --forge-scale: var(--scale-modal2);
  /* Kolumny */
  --fc-8: calc(8px * var(--forge-scale));
  --fc-11: calc(11px * var(--forge-scale));
  --fc-15: calc(15px * var(--forge-scale));
  --fc-16: calc(16px * var(--forge-scale));
  --fc-19: calc(19px * var(--forge-scale));
  --fc-25: calc(25px * var(--forge-scale));
  --fc-27: calc(27px * var(--forge-scale));
  --fc-30: calc(30px * var(--forge-scale));
  --fc-40: calc(40px * var(--forge-scale));
  --fc-60: calc(60px * var(--forge-scale));
  /* Wiersze */
  --fr-5: calc(5px * var(--forge-scale));
  --fr-10: calc(10px * var(--forge-scale));
  --fr-15: calc(15px * var(--forge-scale));
  --fr-20: calc(20px * var(--forge-scale));
  --fr-30: calc(30px * var(--forge-scale));
  --fr-50: calc(50px * var(--forge-scale));
  --fr-60: calc(60px * var(--forge-scale));
  --fr-80: calc(80px * var(--forge-scale));

  /* MODAL 2 — ramki: 75% w skali 1, rośnie z --scale-modal2 */
  --m2-frame-base: 0.75;
  --m2-frame-scale: calc(var(--m2-frame-base) * var(--scale-modal2));
  --m2-frame-size: calc(100% * var(--m2-frame-scale));

  /* Font + kolory nazw po grade */
  --lm-font: Roboto, "Segoe UI", Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;

  --grade-color-default: #c7c7c7;
  --grade-color-uncommon: #4bd462;
  --grade-color-rare: #74a5ff;
  --grade-color-epic: #c37df9;
  --grade-color-legendary: #f3d84e;
  --grade-color-mythic: #ff8328;

  /* Aliasy (nie zrywaj istniejących odwołań) */
  --grade-common: var(--grade-color-default);
  --grade-uncommon: var(--grade-color-uncommon);
  --grade-rare: var(--grade-color-rare);
  --grade-epic: var(--grade-color-epic);
  --grade-legendary: var(--grade-color-legendary);
  --grade-mythic: var(--grade-color-mythic);

  /* Cienie tekstu */
  --m2-text-shadow-weak: 0 1px 1px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.65);
  --m2-text-shadow-strong: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.6);

  /* Modal (overlay) */
  --lm-eq-modal-gap-top: 4.5rem;
  --lm-eq-modal-gap-right: 1rem;
  --lm-eq-modal-gap-bottom: 5.5rem;
  --lm-eq-modal-gap-left: 1rem;

  --lm-eq-modal-bg: #1f4a5d;
  --lm-eq-overlay-bg: rgba(0, 0, 0, 0.35);
  --lm-eq-border-grad-hi: rgba(255, 255, 255, 0.25);
  --lm-eq-border-grad-lo: rgba(0, 0, 0, 0.15);
  --lm-eq-border-inset-top: rgba(255, 255, 255, 0.25);
  --lm-eq-border-inset-bottom: rgba(0, 0, 0, 0.10);
  --lm-eq-border-inset-left: rgba(255, 255, 255, 0.10);
  --lm-eq-border-inset-right: rgba(0, 0, 0, 0.05);
  --lm-eq-modal-radius: 1rem;
  --lm-eq-modal-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.55);
  --lm-eq-border-width: 0.0125rem;
  --lm-eq-close-size: 2.5rem;
  --lm-eq-close-font: 1.375rem;

  /* Quick Change skala (REM 1rem = 16px) */
  --qc-scale: var(--scale-modal2);
  --qc-10: calc(0.625rem * var(--qc-scale));
  /* 10px  */
  --qc-15: calc(0.9375rem * var(--qc-scale));
  /* 15px  */
  --qc-16: calc(1rem * var(--qc-scale));
  /* 16px  */
  --qc-20: calc(1.25rem * var(--qc-scale));
  /* 20px  */
  --qc-25: calc(1.5625rem * var(--qc-scale));
  /* 25px  */
  --qc-30: calc(1.875rem * var(--qc-scale));
  /* 30px  */
  --qc-40: calc(2.55rem * var(--qc-scale));
  /* ~40px */
  --qc-60: calc(3.75rem * var(--qc-scale));
  /* 60px  */

  /* Kolory dodatkowe */
  --forge-button: #fae36e;
  --button-bg: #b07528;
  --bonus-info: #fae36e;

  /* Typografia Forge */
  --m2-name-fs: 16px;
  /* nazwa itemu */
  --m2-name-bg-fs: 18px;
  --m2-mat-fs: 14px;
  /* ilości materiałów */
  --m2-btn-fs: 14px;
  /* przycisk */
  --m2-btn-font: var(--lm-font);
  --m2-bonus-fs: 12px;

  /* Placeholder – nieużywane */
  --text-outline-w: 0px;

  /* --------------------------
   Ustawienia globalne Forge (LISTA)
   -------------------------- */

  /* !!! DODAJ TĘ LINIĘ: spina skalę listy z modalem 2 */
  --workshop-scale: var(--scale-modal2);
  /* jak Forge_Content */

  /* szer./wys. bazowe (REM) – PRZESKALOWANE */
  --forge-w: calc(37.1875rem * var(--workshop-scale));
  /* ~595px @1x */
  --slot-header-h: calc(3.125rem * var(--workshop-scale));
  /* ~50px @1x */

  /* odstępy – PRZESKALOWANE */
  --sp-xxs: calc(0.3125rem * var(--workshop-scale));
  /* 5px  */
  --sp-xs: calc(0.625rem * var(--workshop-scale));
  /* 10px */
  --sp-sm: calc(0.9375rem * var(--workshop-scale));
  /* 15px */
  --sp-md: calc(1.25rem * var(--workshop-scale));
  /* 20px */
  --sp-lg: calc(1.875rem * var(--workshop-scale));
  /* 30px */

  /* kolumny wewnętrzne – PRZESKALOWANE */
  --col-60: calc(3.75rem * var(--workshop-scale));
  /* 60px */
  --col-25: calc(1.5625rem * var(--workshop-scale));
  /* 25px */
  --col-40: calc(2.5rem * var(--workshop-scale));
  /* 40px */

  /* kafelki / ikonki – PRZESKALOWANE */
  --thumb-size: calc(4rem * var(--workshop-scale));
  /* ~64px */
  --thumb-inset: calc(0.1875rem * var(--workshop-scale));
  /* 3px   */
  --shadow-y: calc(0.25rem * var(--workshop-scale));
  /* 4px   */
  --shadow-blur: calc(0.75rem * var(--workshop-scale));
  /* 12px  */
  --hover-translate: calc(-0.125rem * var(--workshop-scale));
  /* -2px  */

  /* UI – PRZESKALOWANE */
  --qty-width: calc(5.625rem * var(--workshop-scale));
  /* 90px  */
  --btn-pad: calc(0.25rem * var(--workshop-scale));
  /* 4px   */
  --radius-sm: calc(0.25rem * var(--workshop-scale));
  /* 4px   */

}

/* =========================================================
   PRIMARY
   ========================================================= */
.LM_BLOCK_PRIMARY_EQUIPMENT .LM_BLOCK_ITEMS_BODY {
  padding: calc(var(--lm-padY) + 0.25rem) calc(var(--lm-padX) + 0.25rem) !important;
  max-width: 100%;
  justify-content: center;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment {
  margin: 0.25rem auto 0.5rem auto !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment {
  margin-top: 0.85rem !important;
}

/* Siatka primary */
.LM_BLOCK_PRIMARY_EQUIPMENT .equipment {
  display: grid !important;
  grid-template-columns:
    repeat(6, var(--lm-eq-c-big)) repeat(4, var(--lm-eq-c-small)) repeat(6, var(--lm-eq-c-big)) !important;
  grid-template-rows:
    repeat(4, var(--lm-eq-r-big)) var(--lm-eq-r-mid) repeat(2, var(--lm-eq-r-big)) repeat(2, var(--lm-eq-r-thin)) calc(0.49107rem * var(--lm-eq-scale)) var(--lm-eq-r-big) calc(0.49107rem * var(--lm-eq-scale)) var(--lm-eq-r-big) calc(0.49107rem * var(--lm-eq-scale)) repeat(2, var(--lm-eq-r-thin)) repeat(2, var(--lm-eq-r-big)) var(--lm-eq-r-mid) repeat(4, var(--lm-eq-r-big)) !important;
  grid-column-gap: 0 !important;
  grid-row-gap: 0 !important;
  justify-content: center !important;
}

/* Sloty (z tłem) — primary */
.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_helmet {
  grid-area: 6/1/12/5 !important;
  background: center/cover no-repeat url("/images/equipment/equipment_helmet.webp");
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_armor {
  grid-area: 13/1/19/5 !important;
  background: center/cover no-repeat url("/images/equipment/equipment_armor.webp");
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_legs {
  grid-area: 20/3/24/7 !important;
  background: center/cover no-repeat url("/images/equipment/equipment_legs.webp");
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_main_hand {
  grid-area: 1/3/5/7 !important;
  background: center/cover no-repeat url("/images/equipment/equipment_main_hand.webp");
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_off_hand {
  grid-area: 1/11/5/15 !important;
  background: center/cover no-repeat url("/images/equipment/equipment_off_hand.webp");
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_accessory_01,
.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_accessory_02,
.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_accessory_03 {
  background: center/cover no-repeat url("/images/equipment/equipment_accessory.webp");
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_accessory_01 {
  grid-area: 6/13/12/17 !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_accessory_02 {
  grid-area: 13/13/19/17 !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_accessory_03 {
  grid-area: 20/11/24/15 !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment_quick_change {
  grid-area: 9/6/16/12 !important;
  background: center/cover no-repeat url("/images/equipment/equipment_quick_change.webp") !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Cień 3D — primary */
.LM_BLOCK_PRIMARY_EQUIPMENT .equipment>[class^="equipment_"],
.LM_BLOCK_PRIMARY_EQUIPMENT .equipment>[class*=" equipment_"] {
  position: relative !important;
  border-radius: var(--lm-eq-slot-r) !important;
  overflow: hidden !important;
  box-shadow:
    0 0.25rem 0.6rem var(--lm-eq-slot-shadow),
    inset 0 0.04rem 0 var(--lm-eq-slot-gloss),
    inset 0 -0.07rem 0.18rem var(--lm-eq-slot-inset) !important;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment>[class^="equipment_"]:hover {
  filter: brightness(1.03) saturate(1.02) !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .equipment>[class^="equipment_"]:active {
  transform: translateY(0.03rem) !important;
  box-shadow:
    0 0.18rem 0.45rem var(--lm-eq-slot-shadow),
    inset 0 0.04rem 0 rgba(255, 255, 255, 0.28),
    inset 0 -0.08rem 0.22rem rgba(0, 0, 0, 0.35) !important;
}

/* Przycisk „WYKUJ” — primary */
.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment {
  display: grid !important;
  grid-template-columns: var(--lm-eq-btn-l) var(--lm-eq-btn-m) var(--lm-eq-btn-rw) !important;
  grid-template-rows: var(--lm-eq-btn-h) !important;
  justify-content: center !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div1,
.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div3 {
  display: none !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div2 {
  grid-column: 1 / 4 !important;
  grid-row: 1 / 2 !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: var(--lm-eq-btn-h) !important;
  padding: var(--lm-eq-btn-py) var(--lm-eq-btn-px) !important;
  border: 0 !important;
  border-radius: var(--lm-eq-btn-r) !important;
  cursor: pointer !important;
  user-select: none !important;
  background: linear-gradient(180deg, var(--lm-eq-btn-1), var(--lm-eq-btn-2) 55%, var(--lm-eq-btn-3)) !important;
  box-shadow:
    0 0.45rem 0.9rem var(--lm-eq-btn-shadow),
    inset 0 0.04rem 0 var(--lm-eq-btn-gloss),
    inset 0 -0.08rem 0.18rem rgba(0, 0, 0, 0.30) !important;
  font-family: var(--lm-font) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05rem !important;
  color: var(--lm-eq-btn-text) !important;
  text-transform: uppercase !important;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div2::before {
  content: "";
  position: absolute;
  left: 0.22rem;
  right: 0.22rem;
  top: 0.12rem;
  height: 30%;
  border-radius: calc(var(--lm-eq-btn-r) * 0.8);
  background: linear-gradient(180deg, var(--lm-eq-btn-gloss-top), transparent);
  pointer-events: none;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div2:hover {
  filter: brightness(1.04) !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div2:active {
  transform: translateY(0.06rem) !important;
  box-shadow:
    0 0.30rem 0.6rem var(--lm-eq-btn-shadow),
    inset 0 0.06rem 0 rgba(255, 255, 255, 0.35),
    inset 0 -0.10rem 0.24rem rgba(0, 0, 0, 0.35) !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div2:focus-visible {
  outline: 0.125rem solid rgba(17, 14, 179, 0.55) !important;
  outline-offset: 0.125rem !important;
  box-shadow:
    0 0.45rem 0.9rem var(--lm-eq-btn-shadow),
    inset 0 0.04rem 0 var(--lm-eq-btn-gloss),
    inset 0 -0.08rem 0.18rem rgba(0, 0, 0, 0.30),
    0 0 0 0.25rem rgba(17, 14, 179, 0.25) !important;
}

.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div2[aria-disabled="true"],
.LM_BLOCK_PRIMARY_EQUIPMENT .confirm_equipment_div2.is-disabled {
  filter: grayscale(0.2) opacity(0.7) !important;
  cursor: not-allowed !important;
}

/* =========================================================
   LM UI — Equipment modal (overlay + ogólne)
   ========================================================= */
.lm-eq-overlay {
  position: fixed;
  inset: 0;
  background: var(--lm-eq-overlay-bg);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3000;
}

.lm-eq-overlay.is-open {
  opacity: 1;
}

.lm-eq-modal {
  position: fixed;
  inset: var(--lm-eq-modal-gap-top) var(--lm-eq-modal-gap-right) var(--lm-eq-modal-gap-bottom) var(--lm-eq-modal-gap-left);
  background:
    linear-gradient(var(--lm-eq-modal-bg), var(--lm-eq-modal-bg)) padding-box,
    linear-gradient(145deg, var(--lm-eq-border-grad-hi), var(--lm-eq-border-grad-lo)) border-box;
  border: var(--lm-eq-border-width) solid transparent;
  border-radius: var(--lm-eq-modal-radius);
  box-shadow: var(--lm-eq-modal-shadow),
    inset 0 0.0625rem 0 var(--lm-eq-border-inset-top),
    inset 0 -0.125rem 0.25rem var(--lm-eq-border-inset-bottom),
    inset 0.0625rem 0 0 var(--lm-eq-border-inset-left),
    inset -0.0625rem 0 0 var(--lm-eq-border-inset-right);
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lm-eq-modal::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.lm-eq-overlay.is-open .lm-eq-modal {
  opacity: 1;
  transform: translateZ(0);
}

.lm-eq-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: calc(var(--lm-eq-close-size) * var(--scale-modal1));
  height: calc(var(--lm-eq-close-size) * var(--scale-modal1));
  border-radius: 999rem;
  border: 0;
  background: var(--lm-eq-close-bg, rgba(0, 0, 0, 0.12));
  cursor: pointer;
  font-size: calc(var(--lm-eq-close-font) * var(--scale-modal1));
  line-height: 1;
  display: grid;
  place-items: center;
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-common);
}

.lm-eq-modal__close:hover {
  background: var(--lm-eq-close-bg-hover, rgba(0, 0, 0, 0.18));
}

.lm-eq-modal__content {
  padding: 1.25rem;
  max-width: 100%;
}

.lm-eq-modal__title {
  font-size: var(--m2-mat-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-common);
  margin: 0 3rem 0.75rem 0;
}

/* View switch: flow layout (fix nakładania) */
.lm-eq-viewport {
  position: static;
}

.lm-eq-view {
  position: static;
  inset: auto;
  opacity: 1;
  transition: none;
  justify-content: center;
}

.lm-eq-view.is-hidden {
  display: none !important;
}

/* =========================================================
   MODAL 1 (lista)
   ========================================================= */
.lm-eq-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--m1-grid-gap);
  margin-top: 2rem;
}

.lm-eq-tile {
  position: relative;
  width: var(--m1-tile-size);
  height: var(--m1-tile-size);
  overflow: hidden;
  display: grid;
  place-items: center;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  background-image: var(--lm-eq-frame, url("/images/equipment/EQ_Common.webp"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  box-shadow:
    0 0.35rem 0.9rem rgba(0, 0, 0, 0.12),
    inset 0 0.04rem 0 rgba(255, 255, 255, 0.22),
    inset 0 -0.08rem 0.24rem rgba(0, 0, 0, 0.25);
}

.lm-eq-tile:hover {
  filter: brightness(1.03) saturate(1.02);
  transform: translateY(-0.06rem) scale(1.02);
}

.lm-eq-tile:active {
  transform: translateY(0.02rem) scale(0.99);
}

.lm-eq-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
}

.lm-eq-tile:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.6),
    0 0 0 4px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

/* Ribbon (opcjonalny) */
.lm-eq-stagebar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.lm-eq-stage {
  --ring: url("/images/equipment/EQ_Common.webp");
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: center/contain no-repeat var(--ring);
  display: grid;
  place-items: center;
  border-radius: 0.25rem;
  position: relative;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.lm-eq-stage.is-active {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.lm-eq-stage:not(.is-active):hover {
  transform: translateY(-1px);
}

.lm-eq-stage[data-grade="Common"] {
  --ring: url("/images/equipment/EQ_Common.webp");
}

.lm-eq-stage[data-grade="Uncommon"] {
  --ring: url("/images/equipment/EQ_Uncommon.webp");
}

.lm-eq-stage[data-grade="Rare"] {
  --ring: url("/images/equipment/EQ_Rare.webp");
}

.lm-eq-stage[data-grade="Epic"] {
  --ring: url("/images/equipment/EQ_Epic.webp");
}

.lm-eq-stage[data-grade="Legendary"] {
  --ring: url("/images/equipment/EQ_Legendary.webp");
}

.lm-eq-stage[data-grade="Mythic"] {
  --ring: url("/images/equipment/EQ_Mythic.webp");
}

/* =========================================================
   MODAL 2 (Forge) — główny widok
   ========================================================= */
.Forge_Content {
  display: grid;
  grid-template-columns:
    var(--fc-8) var(--fc-30) var(--fc-11) var(--fc-30) var(--fc-19) var(--fc-16) var(--fc-15) var(--fc-30) var(--fc-15) var(--fc-16) var(--fc-8) var(--fc-25) var(--fc-27) var(--fc-16) var(--fc-27) var(--fc-25) var(--fc-8) var(--fc-16) var(--fc-15) var(--fc-30) var(--fc-15) var(--fc-16) var(--fc-19) var(--fc-30) var(--fc-11) var(--fc-30) var(--fc-8);
  grid-template-rows:
    var(--fr-15) var(--fr-60) repeat(3, var(--fr-20)) var(--fr-80) var(--fr-20) var(--fr-30) var(--fr-50) repeat(2, var(--fr-20)) var(--fr-30) var(--fr-30) var(--fr-20) var(--fr-15) repeat(8, var(--fr-20));
  grid-column-gap: 0;
  grid-row-gap: 0;
  width: max-content;
  margin-inline: auto;
  font-family: var(--lm-font);
  opacity: 1;
  position: relative;
  /* stacking context dla backgroundu */
}

/* Layering — tło pod spodem, treść nad nim */
.Forge_Content>* {
  position: relative;
  z-index: 1;
}

.Forge_Content>.Forge_Background {
  z-index: 0;
}

/* Teksty z cieniem */
.Forge_Content :where(.Item_Name,
  .Material_00_INFO,
  .Material_01_INFO,
  .Material_02_INFO,
  .Material_03_INFO,
  .Forged_Item_PREV_INFO,
  .Forge_Button,
  .lm-eq-modal__title) {
  text-shadow: var(--m2-text-shadow-strong);
}

/* Tło */
.Forge_Background {
  grid-area: 2 / 1 / 16 / 28;
  background: center/cover no-repeat url("/images/basic/Forge_Background.webp");
  pointer-events: none;
  opacity: 0.75;
}

/* Etapy (góra) */
.Item_Common {
  grid-area: 2 / 3 / 3 / 6;
}

.Arrow_001 {
  grid-area: 2 / 6 / 3 / 7;
}

.Item_Uncommon {
  grid-area: 2 / 7 / 3 / 10;
}

.Arrow_002 {
  grid-area: 2 / 10 / 3 / 11;
}

.Item_Rare {
  grid-area: 2 / 11 / 3 / 14;
}

.Arrow_003 {
  grid-area: 2 / 14 / 3 / 15;
}

.Item_Epic {
  grid-area: 2 / 15 / 3 / 18;
}

.Arrow_004 {
  grid-area: 2 / 18 / 3 / 19;
}

.Item_Legendary {
  grid-area: 2 / 19 / 3 / 22;
}

.Arrow_005 {
  grid-area: 2 / 22 / 3 / 23;
}

.Item_Mythic {
  grid-area: 2 / 23 / 3 / 26;
}

.Forge_Content .Item_Common,
.Forge_Content .Item_Uncommon,
.Forge_Content .Item_Rare,
.Forge_Content .Item_Epic,
.Forge_Content .Item_Legendary,
.Forge_Content .Item_Mythic {
  display: grid;
  place-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--m2-frame-size) var(--m2-frame-size) !important;
}

.Forge_Content .Stage_Item_Icon {
  width: var(--m2-frame-size) !important;
  height: var(--m2-frame-size) !important;
  object-fit: contain;
  pointer-events: none;
  image-rendering: auto;
  margin: auto;
  display: block;
}

/* Strzałki */
.Arrow_001,
.Arrow_002,
.Arrow_003,
.Arrow_004,
.Arrow_005 {
  background: center/contain no-repeat url("/images/equipment/EQ_Arrow.webp");
}

/* Główny item + nazwa */
.Forged_Item {
  grid-area: 5 / 12 / 8 / 17;
  display: grid;
  place-items: center;
  position: relative;
}

.Forge_Content .Forged_Item img {
  width: var(--m2-frame-size);
  height: var(--m2-frame-size);
  object-fit: contain;
  image-rendering: auto;
  margin: auto;
  position: relative;
  z-index: 1;
}

.Item_Name {
  grid-area: 4 / 7 / 5 / 22;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  line-height: 1.1;
  padding: 0 0.25rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--grade-color-default);
  opacity: 1 !important;
}

/* Kolor nazwy wg data-grade na .Forge_Content */
.Forge_Content[data-grade="Common"] .Item_Name {
  color: var(--grade-color-default);
}

.Forge_Content[data-grade="Uncommon"] .Item_Name {
  color: var(--grade-color-uncommon);
}

.Forge_Content[data-grade="Rare"] .Item_Name {
  color: var(--grade-color-rare);
}

.Forge_Content[data-grade="Epic"] .Item_Name {
  color: var(--grade-color-epic);
}

.Forge_Content[data-grade="Legendary"] .Item_Name {
  color: var(--grade-color-legendary);
}

.Forge_Content[data-grade="Mythic"] .Item_Name {
  color: var(--grade-color-mythic);
}

/* Materiały */
.Material_00 {
  grid-area: 6 / 4 / 7 / 8;
  position: relative;
  display: grid;
  place-items: center;
}

.Material_00_INFO {
  grid-area: 7 / 4 / 8 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
}

.Material_01 {
  grid-area: 6 / 21 / 7 / 25;
  position: relative;
  display: grid;
  place-items: center;
}

.Material_01_INFO {
  grid-area: 7 / 21 / 8 / 25;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
}

.Material_02 {
  grid-area: 8 / 5 / 10 / 9;
  position: relative;
  display: grid;
  place-items: center;
}

.Material_02_INFO {
  grid-area: 10 / 5 / 11 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
}

.Material_03 {
  grid-area: 8 / 20 / 10 / 24;
  position: relative;
  display: grid;
  place-items: center;
}

.Material_03_INFO {
  grid-area: 10 / 20 / 11 / 24;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
}

.Forge_Content .Material_00 img,
.Forge_Content .Material_01 img,
.Forge_Content .Material_02 img,
.Forge_Content .Material_03 img {
  width: var(--m2-frame-size);
  height: var(--m2-frame-size);
  object-fit: contain;
  display: block;
  margin: auto;
  position: relative;
  z-index: 1;
}

/* Poprzednia ranga */
.Forged_Item_PREV {
  grid-area: 9 / 13 / 11 / 16;
  display: grid;
  place-items: center;
  position: relative;
}

.Forge_Content .Forged_Item_PREV img {
  width: var(--m2-frame-size);
  height: var(--m2-frame-size);
  object-fit: contain;
  display: block;
  margin: auto;
  position: relative;
  z-index: 1;
}

.Forged_Item_PREV_INFO {
  grid-area: 11 / 13 / 12 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
}

/* Interakcje etapów (bez ramek) */
.Item_Stage {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.Item_Stage:hover {
  transform: translateY(-1px);
}

.Item_Stage.is-active {
  transform: scale(1.06);
  filter: brightness(1.05) saturate(1.02);
}

/* Ramki (global na aktualny grade) */
.Forged_Item::before,
.Material_00::before,
.Material_01::before,
.Material_02::before,
.Material_03::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center/contain no-repeat var(--lm-eq-frame);
  background-size: var(--m2-frame-size) var(--m2-frame-size) !important;
  pointer-events: none;
  z-index: 0;
}

/* Override per-slot */
.Material_00.has-frame-override::before,
.Material_01.has-frame-override::before,
.Material_02.has-frame-override::before,
.Material_03.has-frame-override::before {
  background: center/contain no-repeat var(--lm-eq-frame-override);
  background-size: var(--m2-frame-size) var(--m2-frame-size) !important;
}

/* Puste sloty bez ramki */
.Material_00.is-empty::before,
.Material_01.is-empty::before,
.Material_02.is-empty::before,
.Material_03.is-empty::before {
  background: none !important;
}

/* PREV — ramka poprzedniego grade */
.Forged_Item_PREV::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center/contain no-repeat var(--lm-eq-prev-frame);
  background-size: var(--m2-frame-size) var(--m2-frame-size) !important;
  pointer-events: none;
  z-index: 0;
}

.Forged_Item_PREV.is-empty::before {
  background: none !important;
}

/* Przycisk w gridzie */
.Forge_Button {
  grid-area: 13 / 9 / 14 / 20;
  font-family: var(--m2-btn-font);
  font-size: var(--m2-bonus-fs);
  color: var(--grade-common);
  background-color: var(--button-bg);
  border-radius: 0.5rem;
}

/* Typografia */
.Forge_Content {
  font-family: var(--lm-font);
}

.Forge_Content .Item_Name {
  font-size: var(--m2-name-fs);
  color: var(--m2-name-color, var(--grade-common));
}

.Forge_Content .Material_00_INFO,
.Forge_Content .Material_01_INFO,
.Forge_Content .Material_02_INFO,
.Forge_Content .Material_03_INFO,
.Forge_Content .Forged_Item_PREV_INFO {
  font-size: var(--m2-mat-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-common);
  top: -0.7rem;
}

/* Opis (dół) */
.Forge_HR {
  grid-area: 15 / 2 / 16 / 27;
}

.Forge_Item_Info_Name {
  grid-area: 17 / 7 / 18 / 22;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  line-height: 1.1;
  padding: 0 0.25rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--grade-color-default);
  opacity: 1 !important;
}

.Forge_Content[data-grade="Common"] .Forge_Item_Info_Name {
  color: var(--grade-color-default);
}

.Forge_Content[data-grade="Uncommon"] .Forge_Item_Info_Name {
  color: var(--grade-color-uncommon);
}

.Forge_Content[data-grade="Rare"] .Forge_Item_Info_Name {
  color: var(--grade-color-rare);
}

.Forge_Content[data-grade="Epic"] .Forge_Item_Info_Name {
  color: var(--grade-color-epic);
}

.Forge_Content[data-grade="Legendary"] .Forge_Item_Info_Name {
  color: var(--grade-color-legendary);
}

.Forge_Content[data-grade="Mythic"] .Forge_Item_Info_Name {
  color: var(--grade-color-mythic);
}

.Forge_Content .Forge_Item_Info_Name {
  font-size: var(--m2-name-fs);
  color: var(--m2-name-color, var(--grade-common));
}

.Forge_Item_Diamond {
  grid-area: 19 / 4 / 20 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Forge_Item_Diamond_IMG {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.Forge_Item_Level {
  grid-area: 19 / 5 / 20 / 27;
  font-size: var(--m2-mat-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-common);
}

.Forge_Item_Bonus_01 {
  grid-area: 20 / 5 / 21 / 19;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--bonus-info);
}

.Forge_Item_Bonus_01_INFO {
  grid-area: 20 / 20 / 21 / 27;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-uncommon);
}

.Forge_Item_Bonus_02 {
  grid-area: 21 / 5 / 22 / 19;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--bonus-info);
}

.Forge_Item_Bonus_02_INFO {
  grid-area: 21 / 20 / 22 / 27;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-uncommon);
}

.Forge_Item_Bonus_03 {
  grid-area: 22 / 5 / 23 / 19;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--bonus-info);
}

.Forge_Item_Bonus_03_INFO {
  grid-area: 22 / 20 / 23 / 27;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-uncommon);
}

.Forge_Item_Bonus_04 {
  grid-area: 23 / 5 / 24 / 19;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--bonus-info);
}

.Forge_Item_Bonus_04_INFO {
  grid-area: 23 / 20 / 24 / 27;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-uncommon);
}

.Forge_Item_Bonus_05 {
  grid-area: 24 / 5 / 25 / 19;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--bonus-info);
}

.Forge_Item_Bonus_05_INFO {
  grid-area: 24 / 20 / 25 / 27;
  font-size: var(--m2-bonus-fs);
  text-shadow: var(--m2-text-shadow-strong);
  color: var(--grade-uncommon);
}

/* =========================================================
   QUICK CHANGE — tokeny REM i siatka
   ========================================================= */
.Forge_Content--qc {
  display: grid;
  grid-template-columns:
    var(--qc-15) var(--qc-60) var(--qc-16) var(--qc-60) var(--qc-16) var(--qc-60) var(--qc-16) var(--qc-60) var(--qc-16) var(--qc-60) var(--qc-16) var(--qc-60) var(--qc-16) var(--qc-60) var(--qc-16) var(--qc-60) var(--qc-15);
  grid-template-rows:
    var(--qc-15) var(--qc-20) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) repeat(2, var(--qc-20)) var(--qc-60) var(--qc-30) var(--qc-15);
  grid-column-gap: 0;
  grid-row-gap: 0;
  width: max-content;
  margin-inline: auto;
  font-family: var(--lm-font);
}

/* Bez tła kuźni w QC */
.Forge_Content--qc .Forge_Background {
  display: none !important;
}

/* Mapowanie area (zachowane nazwy) */
.Forge_Content--qc .EQ_Resrerved_Name {
  grid-area: 2 / 2 / 3 / 9;
  display: none;
}

.Forge_Content--qc .EQ_Resrerved_Helmet {
  grid-area: 3 / 2 / 4 / 3;
}

.Forge_Content--qc .EQ_Resrerved_Armor {
  grid-area: 3 / 4 / 4 / 5;
}

.Forge_Content--qc .EQ_Resrerved_Legs {
  grid-area: 3 / 6 / 4 / 7;
}

.Forge_Content--qc .EQ_Resrerved_Main_Hand {
  grid-area: 3 / 8 / 4 / 9;
}

.Forge_Content--qc .EQ_Resrerved_Off_Hand {
  grid-area: 3 / 10 / 4 / 11;
}

.Forge_Content--qc .EQ_Resrerved_Accesory_01 {
  grid-area: 3 / 12 / 4 / 13;
}

.Forge_Content--qc .EQ_Resrerved_Accesory_02 {
  grid-area: 3 / 14 / 4 / 15;
}

.Forge_Content--qc .EQ_Resrerved_Accesory_03 {
  grid-area: 3 / 16 / 4 / 17;
}

.Forge_Content--qc .EQ_Resrerved_Forge {
  grid-area: 4 / 11 / 5 / 16;
}

.Forge_Content--qc .EQ_Build_Name {
  grid-area: 6 / 2 / 7 / 9;
}

.Forge_Content--qc .EQ_Build_Helmet {
  grid-area: 7 / 2 / 8 / 3;
}

.Forge_Content--qc .EQ_Build_Armor {
  grid-area: 7 / 4 / 8 / 5;
}

.Forge_Content--qc .EQ_Build_Legs {
  grid-area: 7 / 6 / 8 / 7;
}

.Forge_Content--qc .EQ_Build_Main_Hand {
  grid-area: 7 / 8 / 8 / 9;
}

.Forge_Content--qc .EQ_Build_Off_Hand {
  grid-area: 7 / 10 / 8 / 11;
}

.Forge_Content--qc .EQ_Build_Accesory_01 {
  grid-area: 7 / 12 / 8 / 13;
}

.Forge_Content--qc .EQ_Build_Accesory_02 {
  grid-area: 7 / 14 / 8 / 15;
}

.Forge_Content--qc .EQ_Build_Accesory_03 {
  grid-area: 7 / 16 / 8 / 17;
}

.Forge_Content--qc .EQ_Build_Forge {
  grid-area: 8 / 11 / 9 / 16;
}

.Forge_Content--qc .EQ_Rseearch_Name {
  grid-area: 10 / 2 / 11 / 9;
}

.Forge_Content--qc .EQ_Rseearch_Helmet {
  grid-area: 11 / 2 / 12 / 3;
}

.Forge_Content--qc .EQ_Rseearch_Armor {
  grid-area: 11 / 4 / 12 / 5;
}

.Forge_Content--qc .EQ_Rseearch_Legs {
  grid-area: 11 / 6 / 12 / 7;
}

.Forge_Content--qc .EQ_Rseearch_Main_Hand {
  grid-area: 11 / 8 / 12 / 9;
}

.Forge_Content--qc .EQ_Rseearch_Off_Hand {
  grid-area: 11 / 10 / 12 / 11;
}

.Forge_Content--qc .EQ_Rseearch_Accesory_01 {
  grid-area: 11 / 12 / 12 / 13;
}

.Forge_Content--qc .EQ_Rseearch_Accesory_02 {
  grid-area: 11 / 14 / 12 / 15;
}

.Forge_Content--qc .EQ_Rseearch_Accesory_03 {
  grid-area: 11 / 16 / 12 / 17;
}

.Forge_Content--qc .EQ_Rseearch_Forge {
  grid-area: 12 / 11 / 13 / 16;
}

.Forge_Content--qc .EQ_Hunt_Name {
  grid-area: 14 / 2 / 15 / 9;
}

.Forge_Content--qc .EQ_Hunt_Helmet {
  grid-area: 15 / 2 / 16 / 3;
}

.Forge_Content--qc .EQ_Hunt_Armor {
  grid-area: 15 / 4 / 16 / 5;
}

.Forge_Content--qc .EQ_Hunt_Legs {
  grid-area: 15 / 6 / 16 / 7;
}

.Forge_Content--qc .EQ_Hunt_Main_Hand {
  grid-area: 15 / 8 / 16 / 9;
}

.Forge_Content--qc .EQ_Hunt_Off_Hand {
  grid-area: 15 / 10 / 16 / 11;
}

.Forge_Content--qc .EQ_Hunt_Accesory_01 {
  grid-area: 15 / 12 / 16 / 13;
}

.Forge_Content--qc .EQ_Hunt_Accesory_02 {
  grid-area: 15 / 14 / 16 / 15;
}

.Forge_Content--qc .EQ_Hunt_Accesory_03 {
  grid-area: 15 / 16 / 16 / 17;
}

.Forge_Content--qc .EQ_Hunt_Forge {
  grid-area: 16 / 11 / 17 / 16;
}

.Forge_Content--qc .EQ_Travel_Name {
  grid-area: 18 / 2 / 19 / 9;
}

.Forge_Content--qc .EQ_Travel_Helmet {
  grid-area: 19 / 2 / 20 / 3;
}

.Forge_Content--qc .EQ_Travel_Armor {
  grid-area: 19 / 4 / 20 / 5;
}

.Forge_Content--qc .EQ_Travel_Legs {
  grid-area: 19 / 6 / 20 / 7;
}

.Forge_Content--qc .EQ_Travel_Main_Hand {
  grid-area: 19 / 8 / 20 / 9;
}

.Forge_Content--qc .EQ_Travel_Off_Hand {
  grid-area: 19 / 10 / 20 / 11;
}

.Forge_Content--qc .EQ_Travel_Accesory_01 {
  grid-area: 19 / 12 / 20 / 13;
}

.Forge_Content--qc .EQ_Travel_Accesory_02 {
  grid-area: 19 / 14 / 20 / 15;
}

.Forge_Content--qc .EQ_Travel_Accesory_03 {
  grid-area: 19 / 16 / 20 / 17;
}

.Forge_Content--qc .EQ_Travel_Forge {
  grid-area: 20 / 11 / 21 / 16;
}

.Forge_Content--qc .EQ_Gathering_Name {
  grid-area: 22 / 2 / 23 / 9;
}

.Forge_Content--qc .EQ_Gathering_Helmet {
  grid-area: 23 / 2 / 24 / 3;
}

.Forge_Content--qc .EQ_Gathering_Armor {
  grid-area: 23 / 4 / 24 / 5;
}

.Forge_Content--qc .EQ_Gathering_Legs {
  grid-area: 23 / 6 / 24 / 7;
}

.Forge_Content--qc .EQ_Gathering_Main_Hand {
  grid-area: 23 / 8 / 24 / 9;
}

.Forge_Content--qc .EQ_Gathering_Off_Hand {
  grid-area: 23 / 10 / 24 / 11;
}

.Forge_Content--qc .EQ_Gathering_Accesory_01 {
  grid-area: 23 / 12 / 24 / 13;
}

.Forge_Content--qc .EQ_Gathering_Accesory_02 {
  grid-area: 23 / 14 / 24 / 15;
}

.Forge_Content--qc .EQ_Gathering_Accesory_03 {
  grid-area: 23 / 16 / 24 / 17;
}

.Forge_Content--qc .EQ_Gathering_Forge {
  grid-area: 24 / 11 / 25 / 16;
}

.Forge_Content--qc .EQ_Training_Name {
  grid-area: 26 / 2 / 27 / 9;
}

.Forge_Content--qc .EQ_Training_Helmet {
  grid-area: 27 / 2 / 28 / 3;
}

.Forge_Content--qc .EQ_Training_Armor {
  grid-area: 27 / 4 / 28 / 5;
}

.Forge_Content--qc .EQ_Training_Legs {
  grid-area: 27 / 6 / 28 / 7;
}

.Forge_Content--qc .EQ_Training_Main_Hand {
  grid-area: 27 / 8 / 28 / 9;
}

.Forge_Content--qc .EQ_Training_Off_Hand {
  grid-area: 27 / 10 / 28 / 11;
}

.Forge_Content--qc .EQ_Training_Accesory_01 {
  grid-area: 27 / 12 / 28 / 13;
}

.Forge_Content--qc .EQ_Training_Accesory_02 {
  grid-area: 27 / 14 / 28 / 15;
}

.Forge_Content--qc .EQ_Training_Accesory_03 {
  grid-area: 27 / 16 / 28 / 17;
}

.Forge_Content--qc .EQ_Training_Forge {
  grid-area: 28 / 11 / 29 / 16;
}

.Forge_Content--qc .EQ_Familiars_Name {
  grid-area: 30 / 2 / 31 / 9;
}

.Forge_Content--qc .EQ_Familiars_Helmet {
  grid-area: 31 / 2 / 32 / 3;
}

.Forge_Content--qc .EQ_Familiars_Armor {
  grid-area: 31 / 4 / 32 / 5;
}

.Forge_Content--qc .EQ_Familiars_Legs {
  grid-area: 31 / 6 / 32 / 7;
}

.Forge_Content--qc .EQ_Familiars_Main_Hand {
  grid-area: 31 / 8 / 32 / 9;
}

.Forge_Content--qc .EQ_Familiars_Off_Hand {
  grid-area: 31 / 10 / 32 / 11;
}

.Forge_Content--qc .EQ_Familiars_Accesory_01 {
  grid-area: 31 / 12 / 32 / 13;
}

.Forge_Content--qc .EQ_Familiars_Accesory_02 {
  grid-area: 31 / 14 / 32 / 15;
}

.Forge_Content--qc .EQ_Familiars_Accesory_03 {
  grid-area: 31 / 16 / 32 / 17;
}

.Forge_Content--qc .EQ_Familiars_Forge {
  grid-area: 32 / 11 / 33 / 16;
}

.Forge_Content--qc .EQ_Crafting_Name {
  grid-area: 34 / 2 / 35 / 9;
}

.Forge_Content--qc .EQ_Crafting_Helmet {
  grid-area: 35 / 2 / 36 / 3;
}

.Forge_Content--qc .EQ_Crafting_Armor {
  grid-area: 35 / 4 / 36 / 5;
}

.Forge_Content--qc .EQ_Crafting_Legs {
  grid-area: 35 / 6 / 36 / 7;
}

.Forge_Content--qc .EQ_Crafting_Main_Hand {
  grid-area: 35 / 8 / 36 / 9;
}

.Forge_Content--qc .EQ_Crafting_Off_Hand {
  grid-area: 35 / 10 / 36 / 11;
}

.Forge_Content--qc .EQ_Crafting_Accesory_01 {
  grid-area: 35 / 12 / 36 / 13;
}

.Forge_Content--qc .EQ_Crafting_Accesory_02 {
  grid-area: 35 / 14 / 36 / 15;
}

.Forge_Content--qc .EQ_Crafting_Accesory_03 {
  grid-area: 35 / 16 / 36 / 17;
}

.Forge_Content--qc .EQ_Crafting_Forge {
  grid-area: 36 / 11 / 37 / 16;
}

.Forge_Content--qc .EQ_Food_Name {
  grid-area: 38 / 2 / 39 / 9;
}

.Forge_Content--qc .EQ_Food_Helmet {
  grid-area: 39 / 2 / 40 / 3;
}

.Forge_Content--qc .EQ_Food_Armor {
  grid-area: 39 / 4 / 40 / 5;
}

.Forge_Content--qc .EQ_Food_Legs {
  grid-area: 39 / 6 / 40 / 7;
}

.Forge_Content--qc .EQ_Food_Main_Hand {
  grid-area: 39 / 8 / 40 / 9;
}

.Forge_Content--qc .EQ_Food_Off_Hand {
  grid-area: 39 / 10 / 40 / 11;
}

.Forge_Content--qc .EQ_Food_Accesory_01 {
  grid-area: 39 / 12 / 40 / 13;
}

.Forge_Content--qc .EQ_Food_Accesory_02 {
  grid-area: 39 / 14 / 40 / 15;
}

.Forge_Content--qc .EQ_Food_Accesory_03 {
  grid-area: 39 / 16 / 40 / 17;
}

.Forge_Content--qc .EQ_Food_Forge {
  grid-area: 40 / 11 / 41 / 16;
}

.Forge_Content--qc .EQ_Wood_Name {
  grid-area: 42 / 2 / 43 / 9;
}

.Forge_Content--qc .EQ_Wood_Helmet {
  grid-area: 43 / 2 / 44 / 3;
}

.Forge_Content--qc .EQ_Wood_Armor {
  grid-area: 43 / 4 / 44 / 5;
}

.Forge_Content--qc .EQ_Wood_Legs {
  grid-area: 43 / 6 / 44 / 7;
}

.Forge_Content--qc .EQ_Wood_Main_Hand {
  grid-area: 43 / 8 / 44 / 9;
}

.Forge_Content--qc .EQ_Wood_Off_Hand {
  grid-area: 43 / 10 / 44 / 11;
}

.Forge_Content--qc .EQ_Wood_Accesory_01 {
  grid-area: 43 / 12 / 44 / 13;
}

.Forge_Content--qc .EQ_Wood_Accesory_02 {
  grid-area: 43 / 14 / 44 / 15;
}

.Forge_Content--qc .EQ_Wood_Accesory_03 {
  grid-area: 43 / 16 / 44 / 17;
}

.Forge_Content--qc .EQ_Wood_Forge {
  grid-area: 44 / 11 / 45 / 16;
}

.Forge_Content--qc .EQ_Stone_Name {
  grid-area: 46 / 2 / 47 / 9;
}

.Forge_Content--qc .EQ_Stone_Helmet {
  grid-area: 47 / 2 / 48 / 3;
}

.Forge_Content--qc .EQ_Stone_Armor {
  grid-area: 47 / 4 / 48 / 5;
}

.Forge_Content--qc .EQ_Stone_Legs {
  grid-area: 47 / 6 / 48 / 7;
}

.Forge_Content--qc .EQ_Stone_Main_Hand {
  grid-area: 47 / 8 / 48 / 9;
}

.Forge_Content--qc .EQ_Stone_Off_Hand {
  grid-area: 47 / 10 / 48 / 11;
}

.Forge_Content--qc .EQ_Stone_Accesory_01 {
  grid-area: 47 / 12 / 48 / 13;
}

.Forge_Content--qc .EQ_Stone_Accesory_02 {
  grid-area: 47 / 14 / 48 / 15;
}

.Forge_Content--qc .EQ_Stone_Accesory_03 {
  grid-area: 47 / 16 / 48 / 17;
}

.Forge_Content--qc .EQ_Stone_Forge {
  grid-area: 48 / 11 / 49 / 16;
}

.Forge_Content--qc .EQ_Ore_Name {
  grid-area: 50 / 2 / 51 / 9;
}

.Forge_Content--qc .EQ_Ore_Helmet {
  grid-area: 51 / 2 / 52 / 3;
}

.Forge_Content--qc .EQ_Ore_Armor {
  grid-area: 51 / 4 / 52 / 5;
}

.Forge_Content--qc .EQ_Ore_Legs {
  grid-area: 51 / 6 / 52 / 7;
}

.Forge_Content--qc .EQ_Ore_Main_Hand {
  grid-area: 51 / 8 / 52 / 9;
}

.Forge_Content--qc .EQ_Ore_Off_Hand {
  grid-area: 51 / 10 / 52 / 11;
}

.Forge_Content--qc .EQ_Ore_Accesory_01 {
  grid-area: 51 / 12 / 52 / 13;
}

.Forge_Content--qc .EQ_Ore_Accesory_02 {
  grid-area: 51 / 14 / 52 / 15;
}

.Forge_Content--qc .EQ_Ore_Accesory_03 {
  grid-area: 51 / 16 / 52 / 17;
}

.Forge_Content--qc .EQ_Ore_Forge {
  grid-area: 52 / 11 / 53 / 16;
}

.Forge_Content--qc .EQ_Gold_Name {
  grid-area: 54 / 2 / 55 / 9;
}

.Forge_Content--qc .EQ_Gold_Helmet {
  grid-area: 55 / 2 / 56 / 3;
}

.Forge_Content--qc .EQ_Gold_Armor {
  grid-area: 55 / 4 / 56 / 5;
}

.Forge_Content--qc .EQ_Gold_Legs {
  grid-area: 55 / 6 / 56 / 7;
}

.Forge_Content--qc .EQ_Gold_Main_Hand {
  grid-area: 55 / 8 / 56 / 9;
}

.Forge_Content--qc .EQ_Gold_Off_Hand {
  grid-area: 55 / 10 / 56 / 11;
}

.Forge_Content--qc .EQ_Gold_Accesory_01 {
  grid-area: 55 / 12 / 56 / 13;
}

.Forge_Content--qc .EQ_Gold_Accesory_02 {
  grid-area: 55 / 14 / 56 / 15;
}

.Forge_Content--qc .EQ_Gold_Accesory_03 {
  grid-area: 55 / 16 / 56 / 17;
}

.Forge_Content--qc .EQ_Gold_Forge {
  grid-area: 56 / 11 / 57 / 16;
}

/* QC — styl bazowy slotów: Legendary + img responsywne */
.Forge_Content--qc [class*="_Helmet"],
.Forge_Content--qc [class*="_Armor"],
.Forge_Content--qc [class*="_Legs"],
.Forge_Content--qc [class*="_Main_Hand"],
.Forge_Content--qc [class*="_Off_Hand"],
.Forge_Content--qc [class*="_Accesory_01"],
.Forge_Content--qc [class*="_Accesory_02"],
.Forge_Content--qc [class*="_Accesory_03"],
.Forge_Content--qc .qc-slot {
  --lm-eq-frame: url("/images/equipment/EQ_Legendary.webp");
  display: grid;
  place-items: center;
  background: center/contain no-repeat var(--lm-eq-frame);
  border-radius: var(--lm-eq-slot-r);
  overflow: hidden;
  box-shadow:
    0 0.25rem 0.6rem var(--lm-eq-slot-shadow),
    inset 0 0.04rem 0 var(--lm-eq-slot-gloss),
    inset 0 -0.07rem 0.18rem var(--lm-eq-slot-inset);
}

.Forge_Content--qc [class*="_Helmet"] img,
.Forge_Content--qc [class*="_Armor"] img,
.Forge_Content--qc [class*="_Legs"] img,
.Forge_Content--qc [class*="_Main_Hand"] img,
.Forge_Content--qc [class*="_Off_Hand"] img,
.Forge_Content--qc [class*="_Accesory_01"] img,
.Forge_Content--qc [class*="_Accesory_02"] img,
.Forge_Content--qc [class*="_Accesory_03"] img,
.Forge_Content--qc .qc-slot img {
  width: var(--m2-frame-size);
  height: var(--m2-frame-size);
  object-fit: contain;
  pointer-events: none;
}

/* QC — nazwy jak Legendary */
.Forge_Content--qc [class*="_Name"],
.Forge_Content--qc .qc-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 600;
  font-size: var(--m2-name-bg-fs);
  color: var(--grade-legendary);
  text-shadow: var(--m2-text-shadow-strong);
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}

/* QC — przyciski „Forge” */
.Forge_Content--qc [class*="_Forge"],
.Forge_Content--qc .qc-forge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--m2-btn-min-h, 1.875rem);
  font-family: var(--m2-btn-font);
  font-size: var(--m2-bonus-fs);
  letter-spacing: 0.03rem;
  color: var(--grade-common);
  background-color: var(--button-bg);
  border-radius: 0.5rem;
  box-shadow:
    0 0.45rem 0.9rem var(--lm-eq-btn-shadow),
    inset 0 0.04rem 0 var(--lm-eq-btn-gloss),
    inset 0 -0.08rem 0.18rem rgba(0, 0, 0, 0.30);
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

.Forge_Content--qc [class*="_Forge"]:hover,
.Forge_Content--qc .qc-forge:hover {
  filter: brightness(1.04);
}

.Forge_Content--qc [class*="_Forge"]:active,
.Forge_Content--qc .qc-forge:active {
  transform: translateY(0.06rem);
  box-shadow:
    0 0.30rem 0.6rem var(--lm-eq-btn-shadow),
    inset 0 0.06rem 0 rgba(255, 255, 255, 0.35),
    inset 0 -0.10rem 0.24rem rgba(0, 0, 0, 0.35);
}

/* QC — „Reserved” = reset */
.Forge_Content--qc .EQ_Resrerved_Helmet {
  background: center/cover no-repeat url("/images/equipment/equipment_helmet.webp");
}

.Forge_Content--qc .EQ_Resrerved_Armor {
  background: center/cover no-repeat url("/images/equipment/equipment_armor.webp");
}

.Forge_Content--qc .EQ_Resrerved_Legs {
  background: center/cover no-repeat url("/images/equipment/equipment_legs.webp");
}

.Forge_Content--qc .EQ_Resrerved_Main_Hand {
  background: center/cover no-repeat url("/images/equipment/equipment_main_hand.webp");
}

.Forge_Content--qc .EQ_Resrerved_Off_Hand {
  background: center/cover no-repeat url("/images/equipment/equipment_off_hand.webp");
}

.Forge_Content--qc .EQ_Resrerved_Accesory_01,
.Forge_Content--qc .EQ_Resrerved_Accesory_02,
.Forge_Content--qc .EQ_Resrerved_Accesory_03 {
  background: center/cover no-repeat url("/images/equipment/equipment_accessory.webp");
}

.Forge_Content--qc .EQ_Resrerved_Forge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--m2-btn-min-h, 1.875rem);
  font-family: var(--m2-btn-font);
  font-size: var(--m2-bonus-fs);
  color: var(--grade-common);
  background-color: var(--button-bg);
  border-radius: 0.5rem;
  box-shadow:
    0 0.45rem 0.9rem var(--lm-eq-btn-shadow),
    inset 0 0.04rem 0 var(--lm-eq-btn-gloss),
    inset 0 -0.08rem 0.18rem rgba(0, 0, 0, 0.30);
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
}

.Forge_Content--qc .EQ_Resrerved_Name {
  display: none !important;
}

/* QC — ramka sterowana przez --lm-eq-frame */
.Forge_Content--qc .QC_Slot,
.Forge_Content--qc .qc-slot {
  background-image: var(--lm-eq-frame, none) !important;
  background-color: transparent !important;
}

/* QC — puste sloty bez ramki */
.Forge_Content--qc .QC_Slot.is-empty,
.Forge_Content--qc .qc-slot.is-empty {
  --lm-eq-frame: none;
  background-image: none !important;
}

/* QC — kursory i focus dla statycznych kafli */
.Forge_Content--qc .QC_Slot {
  cursor: default;
}






















/* =========================================================
   WORKSHOP (Lista) — siatka 505 + widgety + pulsacja
   ========================================================= */

/* —— Tokeny tylko dla workshp-mount (nie ruszamy reszty) —— */
#workshop-mount {
  /* bazowe odległości i kafelki */
  --g-sp: var(--sp-sm, 15px);
  /* 15 */
  --g-60: var(--col-60, 60px);
  /* 60 */
  --g-20: calc(var(--g-60) / 3);
  --g-20: var(--g-sp);
  /* 20 */
  --g-r22: calc(var(--g-60) * .375);
  /* 22.5 */
  --g-r37: calc(var(--g-60) * .625);
  /* 37.5 */

  /* szerokość całego kafelka = 505 (z tokenów) */
  --forge-w: calc(2 * var(--g-sp) + var(--g-60) + var(--g-sp) + var(--g-60) + var(--g-sp) + var(--g-60) + var(--g-20) + var(--g-60) + var(--g-sp) + var(--g-60) + var(--g-20) + var(--g-60) + 2 * var(--g-sp));

  /* typografia kafelków */
  --ws-name-fs: var(--m2-name-fs, 16px);
}

/* ===== 1. POZIOM — kontener listy (6 sekcji slotów) ===== */
#workshop-mount .Forge_Items_Container {
  display: grid;
  grid-template-columns: var(--forge-w);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  width: max-content;
  margin-inline: auto;
}

/* ===== 2. POZIOM — sekcje slotów ===== */
#workshop-mount .Forge_Items_Container_Helmet,
#workshop-mount .Forge_Items_Container_Armor,
#workshop-mount .Forge_Items_Container_Legs,
#workshop-mount .Forge_Items_Container_Main_Hand,
#workshop-mount .Forge_Items_Container_Off_Hand,
#workshop-mount .Forge_Items_Container_Accessory {
  display: grid;
  grid-template-columns: var(--forge-w);
  grid-template-rows: 50px 1fr;
  border: 0.085rem dotted rgba(32, 17, 198, 0.685);
  margin-top: 0.055rem;
  margin-bottom: 0.055rem;
  border-radius: 0.255rem;
  padding: 0.255rem;
}

/* ===== 3. POZIOM — belka typu (nagłówek) ===== */
#workshop-mount [class$="_Type"] {
  grid-area: 1 / 1 / 2 / 2;
  display: grid;
  grid-template-columns: var(--g-sp) calc(var(--forge-w) - 2*var(--g-sp)) var(--g-sp);
  grid-template-rows: var(--g-sp) 30px var(--g-sp);

}

#workshop-mount [class$="_Type_Name"] {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  align-items: baseline !important;
  justify-content: center;
  border: 0;
  --top: 0.25rem;
  --bottom: 0.15rem;
  --c: #000;

  /* reszta tła elementu, jeśli potrzebujesz */
  background-color: transparent;

  /* top: czarny → transparent w dół, bottom: czarny → transparent w górę */
  background:
    linear-gradient(to bottom, var(--c), transparent) top/100% var(--top) no-repeat,
    linear-gradient(to top, var(--c), transparent) bottom/100% var(--bottom) no-repeat;
  border-radius: 0.255rem;

}

/* ===== 3. POZIOM — lista itemów (nie zgniataj kafelków) ===== */
#workshop-mount [class$="_Type_Content"] {
  grid-area: 2 / 1 / 3 / 2;
  display: flex;
  flex-flow: row wrap;
  gap: 0;
  align-content: flex-start;
  align-items: stretch;
}

/* ===== 4. POZIOM — pojedynczy item (GRID 505) ===== */
#workshop-mount [class^="Forge_Items_Container_"][class$="_Type_Content"]>[class$="_Type_Content_Item_Content"] {
  flex: 0 0 auto;
  /* nie pozwól flexowi zwężać */
  width: var(--forge-w);
  box-sizing: border-box;

  display: grid;
  grid-template-columns:
    repeat(2, var(--g-sp)) var(--g-60) var(--g-sp) var(--g-60) var(--g-sp) var(--g-60) var(--g-20) var(--g-60) var(--g-sp) var(--g-60) var(--g-20) var(--g-60) repeat(2, var(--g-sp));
  grid-template-rows:
    var(--g-sp) var(--g-20) var(--g-sp) var(--g-r37) var(--g-r22) var(--g-sp) var(--g-r22) var(--g-r37) var(--g-sp);
  grid-column-gap: 0;
  grid-row-gap: 0;
  border: 0.055rem dotted rgba(32, 17, 198, 0.434);
  margin-top: 0.055rem;
  margin-bottom: 0.055rem;
  border-radius: 0.255rem;
}

/* ===== 5. POZIOM — komórki w kafelku ===== */
#workshop-mount [class$="_Type_Content_Item_Content_Item_Name"] {
  grid-area: 2 / 2 / 3 / 15;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#workshop-mount [class$="_Type_Content_Item_Content_Common"] {
  grid-area: 4 / 3 / 6 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Uncommon"] {
  grid-area: 4 / 5 / 6 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Rare"] {
  grid-area: 4 / 7 / 6 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Epic"] {
  grid-area: 4 / 9 / 6 / 10;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Legendary"] {
  grid-area: 4 / 11 / 6 / 12;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Mythic"] {
  grid-area: 4 / 13 / 6 / 14;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Quantity_01"] {
  grid-area: 7 / 3 / 9 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Quantity_02"] {
  grid-area: 7 / 5 / 9 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount [class$="_Type_Content_Item_Content_Quantity_03"] {
  grid-area: 7 / 7 / 9 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
}



















#workshop-mount [class$="_Type_Content_Item_Content_Trash"] {
  grid-area: 7 / 13 / 9 / 14;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--g-r37);
  opacity: 1 !important;
}

/* =========================================================
   Widgety (thumby, nazwy, kosz) — reset + dopasowanie
   ========================================================= */

/* nazwa */
#workshop-mount .ws-name.Item_Name {
  line-height: 1.2;
  font-size: var(--ws-name-fs);
  text-shadow: var(--m2-text-shadow-strong, 0 1px 2px rgba(0, 0, 0, .9));
}

/* THUMB = button — pełny reset UA + transparent + brak cieni */
#workshop-mount .ws-thumb {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  isolation: isolate;
  /* poprawne mieszanie ringu */
  transition: transform .12s ease;
  z-index: 0;
  /* wewnętrzny margines dla obrazka, jeśli potrzebujesz: */
  --ws-inner-pad: 8%;
}

#workshop-mount .ws-thumb.locked {
  cursor: not-allowed;
}

#workshop-mount .ws-thumb.selectable {
  cursor: pointer;
}

#workshop-mount .ws-thumb.selectable:hover {
  transform: translateY(calc(var(--hover-translate, -2px)));
}

/* całkowicie wyłączamy ::after (to był „czarny kwadrat”) */
#workshop-mount .ws-thumb::after {
  content: none !important;
}

/* ramka i obrazek */
#workshop-mount .ws-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

#workshop-mount .ws-img {
  position: absolute;
  inset: var(--ws-inner-pad);
  max-width: calc(100% - 2*var(--ws-inner-pad));
  max-height: calc(100% - 2*var(--ws-inner-pad));
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

/* stany */
#workshop-mount .ws-thumb.locked .ws-frame,
#workshop-mount .ws-thumb.locked .ws-img {
  filter: grayscale(1) contrast(.75) brightness(.9);
  opacity: .85;
}

#workshop-mount .ws-thumb.selectable .ws-frame {
  filter: none;
}

#workshop-mount .ws-thumb.selectable .ws-img {
  filter: grayscale(1) contrast(.9) brightness(.98);
}

#workshop-mount .ws-thumb.selected .ws-frame,
#workshop-mount .ws-thumb.selected .ws-img {
  filter: none;
}

/* ilości (ikony) */
#workshop-mount .ws-qtywrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#workshop-mount .ws-qtybtn {
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}

#workshop-mount .ws-qtybtn[aria-disabled="true"] {
  cursor: not-allowed;
}

#workshop-mount .ws-qtybtn:hover {
  transform: translateY(calc(var(--hover-translate, -2px)));
}

#workshop-mount .ws-qtyimg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#workshop-mount .ws-qtybtn[aria-disabled="true"] .ws-qtyimg {
  filter: grayscale(1) contrast(.75) brightness(.9);
  opacity: .85;
}

#workshop-mount .ws-qtybtn.is-selected .ws-qtyimg {
  filter: none;
  box-shadow: 0 0 0 .075rem rgba(255, 255, 255, .7);
  border-radius: .25rem;
}

/* kosz */
#workshop-mount .ws-del {
  border-radius: var(--radius-sm, 4px);
  position: relative;
  padding: var(--btn-pad, 4px);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: var(--g-r22);
  transition: transform .12s ease, opacity .12s ease;
}

#workshop-mount .ws-del:hover {
  transform: translateY(calc(var(--hover-translate, -2px)));
}

#workshop-mount .ws-del[disabled] {
  opacity: .5;
  cursor: not-allowed !important;
  transform: none;
}

#workshop-mount .ws-del i {
  font-size: 1.5rem;
  line-height: 1;
  display: inline-block;
}

/* =========================================================
   Pulsacja (kolor rzadkości) — tylko na ::before
   ========================================================= */

/* domyślne zmienne (fallback) */
#workshop-mount .ws-thumb.selected {
  --ws-sel-ring-w: .12rem;
  --ws-sel-color: #ffd76a;
  --ws-sel-gl1: rgba(255, 215, 106, .70);
  --ws-sel-gl2: rgba(255, 215, 106, .45);
}

/* mapowanie kolorów wg data-grade="0..5" */
#workshop-mount .ws-thumb.selected[data-grade="0"] {
  --ws-sel-color: #c7c7c7;
  --ws-sel-gl1: rgba(199, 199, 199, .70);
  --ws-sel-gl2: rgba(199, 199, 199, .45);
}

#workshop-mount .ws-thumb.selected[data-grade="1"] {
  --ws-sel-color: #4bd462;
  --ws-sel-gl1: rgba(75, 212, 98, .70);
  --ws-sel-gl2: rgba(75, 212, 98, .45);
}

#workshop-mount .ws-thumb.selected[data-grade="2"] {
  --ws-sel-color: #74a5ff;
  --ws-sel-gl1: rgba(116, 165, 255, .70);
  --ws-sel-gl2: rgba(116, 165, 255, .45);
}

#workshop-mount .ws-thumb.selected[data-grade="3"] {
  --ws-sel-color: #c37df9;
  --ws-sel-gl1: rgba(195, 125, 249, .70);
  --ws-sel-gl2: rgba(195, 125, 249, .45);
}

#workshop-mount .ws-thumb.selected[data-grade="4"] {
  --ws-sel-color: #f3d84e;
  --ws-sel-gl1: rgba(243, 216, 78, .70);
  --ws-sel-gl2: rgba(243, 216, 78, .45);
}

#workshop-mount .ws-thumb.selected[data-grade="5"] {
  --ws-sel-color: #ff8328;
  --ws-sel-gl1: rgba(255, 131, 40, .70);
  --ws-sel-gl2: rgba(255, 131, 40, .45);
}

/* animowany ring/glow (bez blurów i bez ::after) */
#workshop-mount .ws-thumb.selected::before {
  content: "";
  position: absolute;
  inset: calc(var(--ws-sel-ring-outset, .12rem) * -1);
  pointer-events: none;
  z-index: 3;
  box-shadow:
    0 0 0 var(--ws-sel-ring-w) var(--ws-sel-color) inset,
    0 0 .5rem .04rem var(--ws-sel-gl1),
    0 0 1rem .10rem var(--ws-sel-gl2);
  animation: wsPulseVar 1.6s ease-in-out infinite;
  transform: translateZ(0);
}

@keyframes wsPulseVar {

  0%,
  100% {
    box-shadow:
      0 0 0 var(--ws-sel-ring-w) var(--ws-sel-color) inset,
      0 0 .5rem .04rem var(--ws-sel-gl1),
      0 0 1rem .10rem var(--ws-sel-gl2);
    transform: scale(1);
  }

  50% {
    box-shadow:
      0 0 0 var(--ws-sel-ring-w) var(--ws-sel-color) inset,
      0 0 1.1rem .12rem var(--ws-sel-gl1),
      0 0 1.8rem .22rem var(--ws-sel-gl2);
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  #workshop-mount .ws-thumb.selected::before {
    animation: none;
  }
}


/* ===========================
   QUANTITY (1/2/3) — promienie full, numerek mniejszy
   =========================== */

/* wrapper komórki (na wszelki) */
#workshop-mount .ws-qtywrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

/* PRZYCISK = pełna komórka; promienie liczą się od 100% */
#workshop-mount .ws-qtybtn {
  position: relative;
  /* dla ::before */
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  box-sizing: border-box;

  /* tylko skala numerka (0.65–0.90) */
  --qty-img-scale: .78;
}

/* NUMEREK: nadal 100%, ale pomniejszony wizualnie skalą */
#workshop-mount .ws-qtybtn .ws-qtyimg {
  position: relative;
  z-index: 2;
  /* nad promieniami */
  width: 65%;
  height: 65%;
  display: block;
  margin: auto;
  transform: scale(var(--qty-img-scale));
  transform-origin: center center;
  will-change: transform;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* PROMIENIE — pełny rozmiar komórki, pod obrazkiem */
#workshop-mount .ws-qtybtn.is-selected::before {
  content: "";
  position: absolute;
  inset: 6%;
  z-index: 1;
  /* pod numerkiem */
  pointer-events: none;

  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  /* Twój jednoliniowy SVG z promieniami (bez zmian) */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3CradialGradient id='c' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23fffbe6' stop-opacity='1'/%3E%3Cstop offset='35%25' stop-color='%23ffe89a' stop-opacity='.95'/%3E%3Cstop offset='70%25' stop-color='%23ffd76a' stop-opacity='.35'/%3E%3Cstop offset='100%25' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='-48' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23fff7c6' stop-opacity='1'/%3E%3Cstop offset='70%25' stop-color='%23ffd76a' stop-opacity='.85'/%3E%3Cstop offset='100%25' stop-color='%23ffd76a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-200%25' y='-200%25' width='400%25' height='400%25'%3E%3CfeGaussianBlur stdDeviation='0.2'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='0' cy='0' r='50' fill='url(%23c)'/%3E%3Cg stroke='url(%23r)' stroke-linecap='round' filter='url(%23s)' opacity='.9'%3E%3Cg stroke-width='3'%3E%3Cpath d='M0 0 L0 -48' transform='rotate(0)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(27)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(55)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(85)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(115)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(145)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(175)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(205)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(235)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(265)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(295)'/%3E%3Cpath d='M0 0 L0 -48' transform='rotate(325)'/%3E%3C/g%3E%3Cg stroke-width='1.6' opacity='.85'%3E%3Cpath d='M0 0 L0 -40' transform='rotate(12)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(40)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(70)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(100)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(130)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(160)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(190)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(220)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(250)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(280)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(310)'/%3E%3Cpath d='M0 0 L0 -40' transform='rotate(340)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");



  animation: wsQtyRaysSpin var(--qty-rays-speed, 12s) linear infinite;
  transform-origin: center center;
  filter: drop-shadow(0 0 .05rem rgba(255, 200, 64, .45));
}

/* Rotacja promieni */
@keyframes wsQtyRaysSpin {
  0% {
    transform: rotate(0deg);
    opacity: 0.8;
  }

  15% {
    opacity: 0.6;
  }

  30% {
    opacity: 0.4;
  }

  40% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.4;
  }

  60% {
    opacity: 0.2;
  }

  75% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.6;
  }

  100% {
    transform: rotate(360deg);
    opacity: 0.8;
  }
}


/* ===== WORKSHOP TOOLTIP ===== */
.ws-tip {
  position: fixed;
  z-index: 4000;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  gap: .35rem;
  padding: .5rem .6rem;
  border-radius: .5rem;
  background:
    linear-gradient(var(--lm-eq-modal-bg, #1f4a5d), var(--lm-eq-modal-bg, #1f4a5d)) padding-box,
    linear-gradient(145deg, var(--lm-eq-border-grad-hi, rgba(255, 255, 255, .25)),
      var(--lm-eq-border-grad-lo, rgba(0, 0, 0, .15))) border-box;
  border: var(--lm-eq-border-width, 0.0125rem) solid transparent;
  box-shadow: var(--lm-eq-modal-shadow, 0 1.5rem 5rem rgba(0, 0, 0, .55));
  color: #fff;
  pointer-events: none;
}

.ws-tip--hide {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
}

.ws-tip--show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .12s ease, transform .12s ease;
}

.ws-tip__row {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .5rem;
}

.ws-tip__ring {
  width: 3.25rem;
  height: 3.25rem;
  background: center/contain no-repeat var(--ws-tip-ring, none);
  display: grid;
  place-items: center;
}

.ws-tip__img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}

.ws-tip__name {
  font-family: var(--lm-font, sans-serif);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.1;
  text-shadow: var(--m2-text-shadow-strong, 0 1px 2px rgba(0, 0, 0, .9));
  white-space: nowrap;
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-tip__meta {
  font-family: var(--lm-font, sans-serif);
  font-size: .8rem;
  opacity: .9;
}