/* =========================
   PCN CONSTRUCTOR — FINAL (DESKTOP STABLE + MOBILE FIXED)
   ========================= */

/* 0) Убираем горизонтальный скролл от ПК-сдвига */
html, body{
  overflow-x: hidden !important;
}

/* База */
#pcnConstructor,
#pcnConstructor *{
  box-sizing: border-box;
}

#pcnConstructor{
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Контейнер конструктора */
#pcnConstructor.pcn-constructor{
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;

  /* твой идеальный подъём на ПК */
  margin: -40px auto 0 !important;

  left: auto !important;
  right: auto !important;
  transform: none !important;

  /* не режем, потому что на ПК есть transform-сдвиг */
  overflow-x: visible !important;
}

/* ===== DESKTOP CORE ===== */
#pcnConstructor .pcn-inner{
  --pcnMax: 1920px; /* меняй только это, если нужно “как шапка” шире/уже */

  width: 100% !important;
  max-width: var(--pcnMax) !important;
  margin: 0 auto !important;

  padding-left: clamp(16px, 2.2vw, 44px);
  padding-right: clamp(16px, 2.2vw, 44px);

  /* ПК-сдвиг, который у тебя реально работает */
  transform: translateX(clamp(-220px, -12vw, -160px)) !important;
  will-change: transform;
}

/* Заголовок */
#pcnConstructor .pcn-main-title{
  font-family: "Lora", Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: #000 !important;

  margin: 6px auto 28px !important;
  text-align: center;

  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* Превью (ПК: 2 колонки) */
#pcnConstructor .pcn-previewGrid{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 26px);
  margin-bottom: clamp(18px, 2vw, 28px);
}

#pcnConstructor .pcn-previewItem{ min-width: 0; }

#pcnConstructor .pcn-previewItem img{
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Низ (ПК: 3 колонки) */
#pcnConstructor .pcn-controls{
  display: grid !important;
  grid-template-columns: 320px minmax(420px, 1fr) 420px;
  column-gap: 40px;
  align-items: start;
  padding-top: 10px;
}

#pcnConstructor .pcn-seriesBlock,
#pcnConstructor .pcn-colorsBlock,
#pcnConstructor .pcn-actionBlock{
  min-width: 0;
}

#pcnConstructor .pcn-seriesBlock{ grid-column: 1; }
#pcnConstructor .pcn-colorsBlock{ grid-column: 2; }
#pcnConstructor .pcn-actionBlock{
  grid-column: 3;
  justify-self: end;
  align-self: start;
}

/* Заголовки “Выбрать …” */
#pcnConstructor .pcn-h3{
  font-family: "Lora", Georgia, "Times New Roman", serif !important;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}

#pcnConstructor .pcn-h3--center{
  text-align: left !important;
}

/* Серии */
#pcnConstructor .pcn-seriesList{
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: center;
  margin-bottom: 12px;
}

#pcnConstructor .pcn-radio{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

#pcnConstructor .pcn-radio input{
  width: 18px;
  height: 18px;
}

/* Серии в столбик на ПК */
@media (min-width: 901px){
  #pcnConstructor .pcn-seriesList{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Дисклеймер */
#pcnConstructor .pcn-note{
  font-size: 14px;
  line-height: 1.35;
  color: #111;
  max-width: 420px;
}

/* Миниатюры (ПК: auto-fill, фикс размер, 4–6 в ряд) */
#pcnSwatches.pcn-swatches{
  --sw: 78px;

  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--sw), var(--sw)));
  column-gap: 12px;
  row-gap: 12px;

  justify-content: start;
  align-content: start;

  max-width: none !important;
}

#pcnSwatches .pcn-swatch{
  width: var(--sw);
  aspect-ratio: 1 / 1;
  overflow: hidden;

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;

  display: block;
  cursor: pointer;
  line-height: 0;
}

#pcnSwatches .pcn-swatch img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#pcnSwatches .pcn-swatch.is-active img{
  outline: 4px solid #d62828;
  outline-offset: -4px;
}

/* Кнопка (ПК) */
#pcnConstructor #pcnBuyBtn{
  position: static !important;
  float: none !important;
  transform: none !important;
}

#pcnBuyBtn.pcn-btn{
  width: 100%;
  max-width: 420px;
  height: 48px;

  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "Lora", Georgia, "Times New Roman", serif !important;
  font-size: 17px !important;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.02em;

  background: #b9954f;
  color: #fff !important;
  text-decoration: none !important;

  border-radius: 10px;
  border: 0 !important;
}

/* Виджеты темы (как у тебя) */
#pcnConstructor.pcn-constructor ~ .js-wa-theme-settings,
#pcnConstructor.pcn-constructor ~ .wa-theme-settings,
#pcnConstructor.pcn-constructor ~ .wa-floating,
#pcnConstructor.pcn-constructor ~ .callback,
#pcnConstructor.pcn-constructor ~ .callback-widget,
#pcnConstructor.pcn-constructor ~ .widget-callback{
  display: none !important;
}
/* =========================
   PCN MOBILE — CLEAN (no duplicates, no conflicts)
   ========================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse){

  /* подъём мягче */
  #pcnConstructor.pcn-constructor{
    margin-top: -20px !important;
    transform: none !important; /* страховка от старых экспериментов */
  }

  /* выключаем ПК-сдвиг и ставим единые поля */
  #pcnConstructor .pcn-inner{
    transform: none !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Заголовок: 1 строка + равные отступы */
  #pcnConstructor .pcn-main-title{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    margin: 16px 0 16px !important;
    font-size: clamp(18px, 4.2vw, 24px) !important;
    line-height: 1.1 !important;
  }

  /* Превью: A над B + маленький зазор (БЕЗ “в край”) */
  #pcnConstructor .pcn-previewGrid{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #pcnConstructor .pcn-previewItem{
    margin: 0 !important;
    padding: 0 !important;
  }

  #pcnConstructor .pcn-previewItem img{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Низ: 1 колонка через grid-areas */
  #pcnConstructor .pcn-controls{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "series"
      "colors"
      "action" !important;
    row-gap: 18px !important;
    column-gap: 0 !important;
  }

  #pcnConstructor .pcn-seriesBlock{ grid-area: series !important; }
  #pcnConstructor .pcn-colorsBlock{ grid-area: colors !important; }
  #pcnConstructor .pcn-actionBlock{
    grid-area: action !important;
    justify-self: stretch !important;
  }

  /* Кнопка: 100% */
  #pcnBuyBtn.pcn-btn{
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;

    padding: 0 18px !important;
    font-size: 16px !important;
    letter-spacing: 0.01em !important;

    margin: 0 !important;
  }

  /* Миниатюры: 3 в ряд */
  #pcnSwatches.pcn-swatches{
    --sw: 78px; /* если не влезает — 72px */
    grid-template-columns: repeat(3, var(--sw)) !important;
  }

  #pcnSwatches .pcn-swatch{
    width: var(--sw) !important;
  }

  /* Серии: вертикально */
  #pcnConstructor .pcn-seriesList{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Дисклеймер */
  #pcnConstructor .pcn-note{
    margin-top: 12px !important;
  }
}