/* ===== Прозрачные карточки товаров + hover-эффект ===== */

[class*="Products-module__wrapper"] {
  gap: 18px !important;
  grid-auto-flow: dense;
}

[class*="Product-module__wrapper"] {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(127,15,241,0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease !important;
}

[class*="Product-module__wrapper"]:hover {
  transform: translateY(-8px) scale(1.07);
  z-index: 20;
  border-color: var(--accent-color-800, #7F0FF1) !important;
  box-shadow: 0 16px 34px rgba(102,0,204,0.45), 0 0 26px rgba(127,15,241,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}

[class*="Product-module__img"] {
  transition: transform .3s ease;
}
[class*="Product-module__wrapper"]:hover [class*="Product-module__img"] {
  transform: scale(1.06);
}

[class*="Product-module__name"] {
  background: rgba(10,8,16,0.55) !important;
  backdrop-filter: blur(6px);
  border-radius: 0 !important;
  transition: background .3s ease;
}
[class*="Product-module__wrapper"]:hover [class*="Product-module__name"] {
  background: var(--accent-color-900, #6600CC) !important;
}

[class*="Product-module__price"] {
  background: rgba(10,8,16,0.55) !important;
  backdrop-filter: blur(6px);
  border-radius: 0 0 10px 0 !important;
}

[class*="Product-module__discount"] {
  background: linear-gradient(135deg, var(--accent-color-800, #7F0FF1), var(--accent-color-900, #6600CC)) !important;
  border-radius: 0 0 0 10px !important;
}

/* ===== Большие карточки (только на вкладке "Все", проставляются скриптом) ===== */
[class*="Product-module__wrapper"].gs-big {
  grid-column: span 2;
  grid-row: span 2;
}
[class*="Product-module__wrapper"].gs-big.gs-big-right {
  grid-column: 3 / span 2;
}

/* На узких экранах отключаем большие карточки */
@media (max-width: 680px) {
  [class*="Product-module__wrapper"].gs-big {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ===== Убираем тёмную подложку под магазином, максимальная прозрачность ===== */
[class*="Shop-module__wrapper"] [class*="boxHeader"],
[class*="Shop-module__wrapper"] [class*="boxBody"] {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== Убираем баннер-лого сверху только на странице кланов ===== */
body.gs-hide-banner [class*="bannerContainer"] {
  display: none !important;
}

/* ===== Страница "Кланы" (/page/clans) ===== */
#gs-clans-root { padding: 24px 0; color: #fff; }
#gs-clans-root [hidden] { display: none !important; }
#gs-clans-root .gs-clans-hero h1 { margin: 0 0 6px; font-size: 28px; }
#gs-clans-root .gs-clans-hero p { margin: 0 0 20px; opacity: .65; }

/* --- Верхняя панель: "Мой клан"/"Создать клан" + поиск, в стиле рядов-плашек --- */
#gs-clans-root .gs-clans-actions {
  margin-bottom: 24px; display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
}

#gs-clans-root .gs-clans-btn,
#gs-clans-root .gs-clans-search-wrap {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: #fff; font-size: 14px; font-weight: 500;
  transition: all .2s ease;
}
#gs-clans-root .gs-clans-btn { cursor: pointer; text-decoration: none; white-space: nowrap; }
#gs-clans-root .gs-clans-btn:hover { border-color: var(--accent-color-800, #7F0FF1); background: rgba(127,15,241,.12); }
#gs-clans-root .gs-clans-btn-accent {
  background: linear-gradient(135deg, var(--accent-color-800, #7F0FF1), var(--accent-color-900, #6600CC));
  border-color: transparent;
}
#gs-clans-root .gs-clans-btn::after { content: '→'; opacity: .6; }
#gs-clans-root .gs-clans-btn-accent::after { content: '+'; opacity: .9; }

#gs-clans-root .gs-clans-guest { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; opacity: .85; font-size: 14px; }

#gs-clans-root .gs-clans-search-wrap { flex: 1; min-width: 220px; }
#gs-clans-root .gs-clans-search-wrap::before { content: '\1F50D'; opacity: .5; flex-shrink: 0; font-size: 14px; }
#gs-clans-root #gs-clans-search {
  flex: 1; background: none; border: none; outline: none; color: #fff; font-size: 14px; font-family: inherit;
}
#gs-clans-root #gs-clans-search::placeholder { color: rgba(255,255,255,.4); }

/* --- Форма создания клана: модальное окно --- */
#gs-clans-root .gs-clans-form-wrap {
  position: fixed; inset: 0; z-index: 1000; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
}
#gs-clans-root .gs-clans-form-wrap[hidden] { display: none; }
#gs-clans-root .gs-clans-form-inner {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  padding: 24px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(40,26,56,.97), rgba(18,14,24,.98));
  backdrop-filter: blur(20px); border: 1px solid rgba(127,15,241,.4);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  display: grid; gap: 14px;
}
#gs-clans-root .gs-clans-form-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
#gs-clans-root .gs-clans-form-header h2 { margin: 0; font-size: 20px; }
#gs-clans-root .gs-clans-form-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
#gs-clans-root .gs-clans-form-close:hover { border-color: var(--accent-color-800, #7F0FF1); background: rgba(127,15,241,.15); }
#gs-clans-root .gs-clans-form-inner label { display: grid; gap: 6px; font-size: 13px; opacity: .85; }
#gs-clans-root .gs-clans-form-inner input,
#gs-clans-root .gs-clans-form-inner textarea {
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  padding: 10px 12px; color: #fff; font-size: 14px; font-family: inherit;
}
#gs-clans-root .gs-clans-form-actions { display: flex; gap: 10px; }
#gs-clans-root .gs-clans-form-actions .gs-clans-btn { width: 100%; justify-content: center; }
#gs-clans-root .gs-clans-form-actions .gs-clans-btn::after { content: none; }
#gs-clans-root .gs-clans-form-msg { font-size: 13px; opacity: .8; min-height: 18px; }

/* --- Список кланов: строки, как в референсе --- */
#gs-clans-root .gs-clans-list {
  display: flex; flex-direction: column; gap: 12px;
}
#gs-clans-root .gs-clan-card {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(127,15,241,.25);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
#gs-clans-root .gs-clan-card:hover {
  transform: translateX(4px);
  border-color: var(--accent-color-800, #7F0FF1);
  box-shadow: 0 10px 26px rgba(102,0,204,.35), 0 0 20px rgba(127,15,241,.35);
}
#gs-clans-root .gs-clan-card.gs-clan-highlight {
  border-color: var(--accent-color-800, #7F0FF1);
  box-shadow: 0 0 0 2px rgba(127,15,241,.5);
}
#gs-clans-root .gs-clan-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
}
#gs-clans-root .gs-clan-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: rgba(255,255,255,.6);
}
#gs-clans-root .gs-clan-body { flex: 1; min-width: 0; }
#gs-clans-root .gs-clan-title {
  font-weight: 600; font-size: 15px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#gs-clans-root .gs-clan-tag { color: var(--accent-color-800, #7F0FF1); margin-right: 4px; }
#gs-clans-root .gs-clan-desc {
  font-size: 13px; opacity: .6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#gs-clans-root .gs-clan-leader {
  font-size: 12px; opacity: .55; flex-shrink: 0; text-align: right; padding-left: 12px;
}
#gs-clans-root .gs-clans-empty { opacity: .6; padding: 40px 0; text-align: center; }

@media (max-width: 680px) {
  #gs-clans-root .gs-clans-actions { flex-direction: column; align-items: stretch; }
  #gs-clans-root .gs-clan-leader { display: none; }
}