/* GranitGabbro constructor v10 minimalist */
body.constructor-page #content,
.constructor-page #content { width:100% !important; max-width:none !important; float:none !important; }
body.constructor-page #sidebar,
.constructor-page #sidebar { display:none !important; }
body.constructor-page #middle,
.constructor-page #middle { max-width:1360px !important; width:100% !important; padding-left:16px; padding-right:16px; }
.ggc10, .ggc10 * { box-sizing:border-box; }
.ggc10 { max-width:1360px; margin:0 auto; color:#141414; }
.ggc10-hero { margin:0 0 18px; padding:28px 30px; border:1px solid #ececec; border-radius:14px; background:linear-gradient(135deg,#1f1f1f,#0f0f0f); color:#fff; overflow:hidden; }
.ggc10-kicker { margin:0 0 8px; color:#d9b45f; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; }
.ggc10-hero h1 { margin:0 0 10px; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.05; }
.ggc10-hero p { margin:0; max-width:880px; color:#ececec; font-size:16px; line-height:1.55; }
.ggc10-builder { display:grid; grid-template-columns:260px minmax(0,1fr) 300px; gap:18px; align-items:start; }
.ggc10-panel, .ggc10-stage, .ggc10-request { background:#fff; border:1px solid #e9e9e9; border-radius:14px; }
.ggc10-panel { padding:14px; }
.ggc10-section + .ggc10-section { margin-top:18px; padding-top:18px; border-top:1px solid #f0f0f0; }
.ggc10-section h3 { margin:0 0 12px; font-size:15px; color:#111; }
.ggc10-media-grid { display:grid; gap:10px; }
.ggc10-media-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ggc10-media-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ggc10-image-btn, .ggc10-shape-btn { border:1px solid #ededed; background:#fff; border-radius:12px; padding:10px; cursor:pointer; min-height:98px; display:flex; align-items:center; justify-content:center; transition:.18s ease; }
.ggc10-image-btn:hover, .ggc10-shape-btn:hover { border-color:#d9b45f; transform:translateY(-1px); }
.ggc10-image-btn img { max-width:100%; max-height:76px; object-fit:contain; display:block; }
.ggc10-shape-btn .shape { display:block; width:56px; height:72px; border:3px solid #111; background:#f8f8f8; }
.ggc10-shape-btn .shape.oval { border-radius:40px; }
.ggc10-shape-btn .shape.rect { border-radius:7px; }
.ggc10-shape-btn .shape.arch { border-radius:40px 40px 7px 7px; }
.ggc10-field + .ggc10-field { margin-top:10px; }
.ggc10-field label { display:block; margin:0 0 5px; font-size:12px; font-weight:700; color:#555; }
.ggc10-field input, .ggc10-field textarea, .ggc10-field select { width:100%; min-height:38px; border:1px solid #dddddd; border-radius:10px; background:#fff; padding:9px 10px; font:inherit; color:#222; }
.ggc10-field textarea { resize:vertical; }
.ggc10-row { display:grid; grid-template-columns:1fr .86fr; gap:8px; margin-top:8px; }
.ggc10-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; border:0; border-radius:10px; padding:10px 16px; font:inherit; font-weight:800; cursor:pointer; text-decoration:none !important; }
.ggc10-btn--dark { background:#151515; color:#fff; }
.ggc10-btn--light { background:#f3f3f3; color:#111; }
.ggc10-btn--gold { background:#d9b45f; color:#111 !important; }
.ggc10-stage { padding:14px; min-width:0; }
.ggc10-stage-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ggc10-stage-kicker { margin:0 0 3px; color:#a67a40; text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:800; }
.ggc10-stage h2 { margin:0; font-size:20px; color:#111; }
.ggc10-canvas-wrap { background:#fff; border:1px solid #efefef; border-radius:12px; padding:12px; overflow:auto; text-align:center; }
#ggcCanvas { display:inline-block; max-width:100%; height:auto; background:#fff !important; }
.ggc10-stones { margin-top:12px; }
.ggc10-stones-track { display:flex; gap:14px; overflow-x:auto; padding:6px 2px 2px; }
.ggc10-stone-btn { flex:0 0 86px; border:0; background:transparent; padding:0; cursor:pointer; opacity:.58; transition:.18s ease; }
.ggc10-stone-btn:hover, .ggc10-stone-btn.is-active { opacity:1; transform:translateY(-1px); }
.ggc10-stone-btn img { display:block; width:100%; height:92px; object-fit:contain; }
.ggc10-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.ggc10-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ggc10-tabs button { min-height:34px; border:1px solid #ebebeb; background:#fff; border-radius:999px; padding:8px 12px; font:inherit; font-size:13px; cursor:pointer; }
.ggc10-tabs button.is-active { border-color:#111; background:#111; color:#fff; }
.ggc10-decor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ggc10-decor-card { border:1px solid #ededed; background:#fff; border-radius:12px; min-height:102px; padding:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.18s ease; }
.ggc10-decor-card:hover { border-color:#d9b45f; transform:translateY(-1px); }
.ggc10-decor-card--dark { background:#111; }
.ggc10-decor-card img { max-width:100%; max-height:92px; object-fit:contain; display:block; }
.ggc10-request { margin-top:18px; padding:18px; }
.ggc10-request h3 { margin:0 0 8px; font-size:18px; }
.ggc10-request p { margin:0 0 12px; color:#666; }
.ggc10-request-box { border:1px dashed #d2d2d2; border-radius:12px; background:#fafafa; padding:16px; color:#666; }
@media (max-width:1100px){
  body.constructor-page #middle,.constructor-page #middle { padding-left:10px; padding-right:10px; }
  .ggc10-builder { display:flex; flex-direction:column; }
  .ggc10-stage { order:1; }
  .ggc10-left { order:2; }
  .ggc10-right { order:3; }
  .ggc10-panel { width:100%; }
  .ggc10-media-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ggc10-media-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ggc10-decor-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #ggcCanvas { width:100% !important; min-width:320px; }
}
@media (max-width:700px){
  body.constructor-page #middle,.constructor-page #middle { padding-left:8px; padding-right:8px; }
  .ggc10-hero { padding:18px; border-radius:12px; }
  .ggc10-hero p { font-size:14px; }
  .ggc10-panel, .ggc10-stage, .ggc10-request { border-radius:12px; }
  .ggc10-media-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ggc10-row { grid-template-columns:1fr; }
  .ggc10-decor-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ggc10-actions > * { flex:1 1 100%; }
}
@media (max-width:480px){
  .ggc10-decor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ggc10-stone-btn { flex-basis:74px; }
  .ggc10-stone-btn img { height:82px; }
}

/* ===== v10.1 fixes: вкладки гравировок и превью памятников ===== */

/* 1. Исправляем невидимый текст в кнопках категорий гравировок */
.ggc10-tabs button {
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #dedede !important;
  font-weight: 800;
}

.ggc10-tabs button:hover {
  border-color: #111 !important;
}

.ggc10-tabs button.is-active {
  color: #fff !important;
  background: #111 !important;
  border-color: #111 !important;
}

/* 2. Делаем правый блок гравировок чуть шире */
.ggc10-builder {
  grid-template-columns: 260px minmax(0, 1fr) 340px;
}

/* 3. Делаем карточки гравировок чуть аккуратнее */
.ggc10-decor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ggc10-decor-card {
  min-height: 118px;
  border-radius: 10px;
}

.ggc10-decor-card img {
  max-height: 108px;
}

/* 4. Увеличиваем выбор памятников снизу */
.ggc10-stones {
  margin-top: 16px;
  padding-top: 4px;
}

.ggc10-stones-track {
  gap: 22px;
  padding: 8px 4px 4px;
  align-items: flex-end;
}

.ggc10-stone-btn {
  flex: 0 0 118px;
  width: 118px;
  opacity: .42;
}

.ggc10-stone-btn:hover,
.ggc10-stone-btn.is-active {
  opacity: 1;
}

.ggc10-stone-btn img {
  width: 118px;
  height: 132px;
  object-fit: contain;
}

/* 5. Выбранный памятник — без тяжёлой рамки, но заметно */
.ggc10-stone-btn.is-active img {
  filter: drop-shadow(0 0 0 #111) drop-shadow(0 8px 12px rgba(0,0,0,.18));
  transform: scale(1.05);
}

/* 6. Даём центральному блоку чуть больше воздуха */
.ggc10-canvas-wrap {
  padding: 16px;
}

.ggc10-stage {
  padding: 16px;
}

/* 7. Чтобы нижние кнопки не прилипали к выбору памятников */
.ggc10-actions {
  margin-top: 18px;
}

/* 8. На больших экранах делаем общий конструктор шире */
body.constructor-page #middle,
.constructor-page #middle {
  max-width: 1440px !important;
}

.ggc10 {
  max-width: 1440px;
}

/* 9. Мобильная адаптация после увеличения */
@media (max-width: 1100px) {
  .ggc10-builder {
    display: flex;
    flex-direction: column;
  }

  .ggc10-decor-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ggc10-stone-btn {
    flex-basis: 105px;
    width: 105px;
  }

  .ggc10-stone-btn img {
    width: 105px;
    height: 118px;
  }
}

@media (max-width: 700px) {
  .ggc10-decor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ggc10-decor-card {
    min-height: 104px;
  }

  .ggc10-decor-card img {
    max-height: 94px;
  }

  .ggc10-stone-btn {
    flex-basis: 92px;
    width: 92px;
  }

  .ggc10-stone-btn img {
    width: 92px;
    height: 106px;
  }
}

@media (max-width: 480px) {
  .ggc10-decor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== v10.2: исправление выбора памятников снизу ===== */

/* Убираем обрезание памятников сверху */
.ggc10-stones {
  margin-top: 18px !important;
  padding: 18px 0 6px !important;
  overflow: visible !important;
}

.ggc10-stones-track {
  min-height: 170px !important;
  height: 170px !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 8px 10px 14px !important;
}

/* Кнопки без лишней высоты, чтобы не резали картинку */
.ggc10-stone-btn {
  flex: 0 0 125px !important;
  width: 125px !important;
  height: 145px !important;
  min-height: 145px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  opacity: .45;
}

/* Сама картинка памятника целиком */
.ggc10-stone-btn img {
  display: block !important;
  width: 125px !important;
  height: 145px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Активный памятник — заметный, но без грубой рамки */
.ggc10-stone-btn.is-active {
  opacity: 1 !important;
}

.ggc10-stone-btn.is-active img {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.22)) !important;
}

/* Наведение */
.ggc10-stone-btn:hover {
  opacity: 1 !important;
}

.ggc10-stone-btn:hover img {
  transform: scale(1.05) !important;
}

/* На мобильных делаем чуть меньше */
@media (max-width: 700px) {
  .ggc10-stones-track {
    min-height: 135px !important;
    height: 135px !important;
    gap: 18px !important;
  }

  .ggc10-stone-btn {
    flex-basis: 96px !important;
    width: 96px !important;
    height: 115px !important;
    min-height: 115px !important;
  }

  .ggc10-stone-btn img {
    width: 96px !important;
    height: 115px !important;
  }
}