/* Cleanbot redesign — страница товара
   Источник: Redesign/product.css. Все селекторы ограничены областью .cleanbot-redesign (класс на <body>).
   @import шрифта убран: Onest подключает тема (functions.php). */

/* ============================================================
   CLEANBOT — страница товара
   Дополняет styles.css: только то, чего нет на других страницах
   ============================================================ */



/* ---------- Крошки ---------- */
.cleanbot-redesign .crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0; padding-block:30px 26px;
  font-size:14px; color:var(--text-3);
}
.cleanbot-redesign .crumbs a{ transition:color .2s var(--ease); }
.cleanbot-redesign .crumbs a:hover{ color:var(--acc); }
.cleanbot-redesign .crumbs span[aria-current]{ color:var(--text-2); }
.cleanbot-redesign .crumbs i{ font-style:normal; opacity:.5; }
/* ---------- Карточка товара ---------- */
.cleanbot-redesign .pdp{ padding-bottom:60px; }
.cleanbot-redesign .pdp__grid{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr) 420px;
  gap:24px;
  align-items:start;
}
.cleanbot-redesign .pdp__grid > *{ min-width:0; }
/* миниатюры */
.cleanbot-redesign .pdp__thumbs{ display:flex; flex-direction:column; gap:10px; }
.cleanbot-redesign .thumb{
  position:relative; flex:none;
  width:88px; aspect-ratio:1;
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
/* абсолютом, иначе картинка растягивает квадрат по своей высоте */
.cleanbot-redesign .thumb img{
  position:absolute; inset:8px;
  width:calc(100% - 16px); height:calc(100% - 16px);
  object-fit:contain;
}
.cleanbot-redesign .thumb:hover{ border-color:var(--text-3); }
.cleanbot-redesign .thumb.is-active{ border-color:var(--ink); background:#fff; }
/* большое фото */
.cleanbot-redesign .pdp__stage{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-xl);
  background:var(--surface);
  overflow:hidden;
}
/* абсолютом, иначе max-height в grid-ячейке зацикливается с aspect-ratio */
.cleanbot-redesign .pdp__stage img{
  position:absolute; inset:78px;
  width:calc(100% - 156px); height:calc(100% - 156px);
  object-fit:contain;
  transition:opacity .28s var(--ease);
}
.cleanbot-redesign .pdp__stage img.is-swapping{ opacity:0; }
/* клик по фото открывает полноэкранную галерею (redesign-product.js) */
.cleanbot-redesign .pdp__stage.is-zoomable{ cursor:zoom-in; }
.cleanbot-redesign .pdp__stage.is-zoomable:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:var(--r-xl); }
/* PhotoSwipe: фон в цвет шапки */
.cleanbot-redesign .pswp{ --pswp-bg:#101010; --pswp-placeholder-bg:#1B1C1E; }
/* правая колонка */
.cleanbot-redesign .pdp__info{ position:sticky; top:calc(var(--hdr-h) + 20px); }
.cleanbot-redesign .pdp__tags{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:16px; }
.cleanbot-redesign .pdp__title{ margin:0 0 12px; font-size:clamp(30px, 3vw, 40px); font-weight:600; line-height:1.1; letter-spacing:-.032em; }
.cleanbot-redesign .pdp__sub{ margin:0 0 30px; font-size:16px; line-height:1.6; color:var(--text-2); }
.cleanbot-redesign .pdp__field{ margin-bottom:26px; }
.cleanbot-redesign .pdp__label{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 12px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3);
}
.cleanbot-redesign .pdp__label b{ font-size:14px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--text); }
/* выбор цвета */
.cleanbot-redesign .swatches{ display:flex; flex-wrap:wrap; gap:4px; }
.cleanbot-redesign .swatch{
  position:relative;
  width:44px; height:44px; border-radius:50%;
  border:2px solid transparent;
  background:none; padding:3px; cursor:pointer;
  transition:border-color .2s var(--ease);
}
.cleanbot-redesign .swatch i{ display:block; width:100%; height:100%; border-radius:50%; border:1px solid rgba(16,16,16,.10); background:var(--swatch, #CDD3DA); }
.cleanbot-redesign .swatch.is-active{ border-color:var(--ink); }
.cleanbot-redesign .swatch:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* цена */
.cleanbot-redesign .pdp__price{
  padding:24px;
  border-radius:var(--r-lg);
  background:var(--surface);
  margin-bottom:20px;
}
.cleanbot-redesign .pdp__priceRow{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; }
.cleanbot-redesign .pdp__now{
  font-size:34px; font-weight:700; letter-spacing:-.035em; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.cleanbot-redesign .pdp__note{ margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--text-2); }
/* кнопки маркетплейсов */
.cleanbot-redesign .pdp__buy{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.cleanbot-redesign .mbtn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:58px; padding:0 24px;
  border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.cleanbot-redesign .mbtn img{ height:17px; width:auto; object-fit:contain; }
/* обводка — фирменным цветом площадки, цвета взяты из самих логотипов */
.cleanbot-redesign .mbtn--ozon, .cleanbot-redesign .mbtn--wb{ background:#fff; color:var(--text); border:1.5px solid; }
.cleanbot-redesign .mbtn--ozon{ border-color:#006CFC; }
.cleanbot-redesign .mbtn--ozon:hover{ background:#F2F7FF; }
.cleanbot-redesign .mbtn--wb{ border-color:#A818F0; }
.cleanbot-redesign .mbtn--wb:hover{ background:#FBF4FE; }
.cleanbot-redesign .mbtn:active{ transform:translateY(1px); }
/* памятки под кнопками */
.cleanbot-redesign .pdp__perks{ display:flex; flex-direction:column; gap:2px; }
.cleanbot-redesign .perk{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.5; color:var(--text-2);
}
.cleanbot-redesign .perk svg{ flex:none; margin-top:1px; color:var(--acc); }
.cleanbot-redesign .perk b{ display:block; color:var(--text); font-weight:600; margin-bottom:2px; }
/* ---------- Табы ---------- */
.cleanbot-redesign .tabs__nav{
  display:flex; gap:6px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
  overflow-x:auto; scrollbar-width:none;
}
.cleanbot-redesign .tabs__nav::-webkit-scrollbar{ display:none; }
.cleanbot-redesign .tab{
  display:inline-flex; align-items:center; height:46px; padding:0 22px;
  border-radius:999px;
  font-size:15px; font-weight:500; color:var(--text-2);
  white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.cleanbot-redesign .tab:hover{ background:var(--surface); color:var(--text); }
.cleanbot-redesign .tab.is-active{ background:var(--ink); color:#fff; font-weight:600; }
.cleanbot-redesign .tabs__panel{ display:none; }
.cleanbot-redesign .tabs__panel.is-active{ display:block; }
/* описание */
.cleanbot-redesign .prose{ max-width:820px; }
.cleanbot-redesign .prose p{ margin:0 0 18px; font-size:17px; line-height:1.65; color:var(--text-2); }
.cleanbot-redesign .prose p:last-child{ margin-bottom:0; }
.cleanbot-redesign .prose strong{ color:var(--text); font-weight:600; }
/* характеристики */
.cleanbot-redesign .specs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 48px; max-width:980px; }
.cleanbot-redesign .spec{
  display:flex; align-items:baseline; gap:12px;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:15.5px;
}
.cleanbot-redesign .spec__k{ flex:none; color:var(--text-2); }
.cleanbot-redesign .spec__dots{ flex:1 1 auto; border-bottom:1px dotted var(--line); transform:translateY(-4px); }
.cleanbot-redesign .spec__v{ flex:none; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
/* инструкция */
.cleanbot-redesign .manual{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,64px); align-items:start; }
.cleanbot-redesign .manual__card{
  padding:30px;
  border-radius:var(--r-lg);
  background:var(--ink); color:#fff;
}
.cleanbot-redesign .manual__card h3{ margin:0 0 10px; font-size:22px; font-weight:600; letter-spacing:-.022em; }
.cleanbot-redesign .manual__card p{ margin:0 0 22px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.62); }
/* ---------- Также смотрят ---------- */
.cleanbot-redesign .pgrid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
/* ---------- Адаптив ---------- */
@media (max-width:1180px){/* на планшете колонка с информацией ещё помещается рядом */
  .cleanbot-redesign .pdp__grid{ grid-template-columns:88px minmax(0,1fr) 340px; gap:20px; }
  .cleanbot-redesign .pgrid-4{ grid-template-columns:repeat(2, 1fr); }
  .cleanbot-redesign .manual{ grid-template-columns:1fr; }
  .cleanbot-redesign .pdp__title{ font-size:32px; }

}
@media (max-width:900px){  .cleanbot-redesign .pdp__grid{ grid-template-columns:88px minmax(0,1fr); }
  .cleanbot-redesign .pdp__info{ position:static; grid-column:1 / -1; max-width:560px; }
  .cleanbot-redesign .pdp__stage img{ inset:56px; width:calc(100% - 112px); height:calc(100% - 112px); }

}
@media (max-width:900px){  .cleanbot-redesign .specs{ grid-template-columns:1fr; gap:0; }

}
@media (max-width:620px){  .cleanbot-redesign .pdp{ padding-bottom:40px; }
  .cleanbot-redesign .pdp__grid{ display:flex; flex-direction:column; gap:16px; }
  .cleanbot-redesign .pdp__grid > *{ width:100%; }
  .cleanbot-redesign .pdp__thumbs{
    order:2;
    flex-direction:row; overflow-x:auto; scrollbar-width:none;
    max-width:100%; padding:0;
    scroll-snap-type:x proximity;
  }
  .cleanbot-redesign .pdp__thumbs[hidden]{ display:none; }
  /* The shared rail script inserts this after the thumbnails. Keep it
     below them instead of ahead of the product image in the flex order. */
  .cleanbot-redesign .pdp__grid > .railbar{ order:2; margin-top:0; }
  .cleanbot-redesign .pdp__thumbs::-webkit-scrollbar{ display:none; }
  .cleanbot-redesign .thumb{ flex:none; width:72px; scroll-snap-align:start; }
  .cleanbot-redesign .pdp__stage{ order:1; }
  .cleanbot-redesign .pdp__stage img{ inset:28px; width:calc(100% - 56px); height:calc(100% - 56px); }
  .cleanbot-redesign .pdp__info{ order:3; max-width:none; }
/* «Также смотрят» — сетка 2x2, карточки как на главной */
  .cleanbot-redesign .pgrid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .cleanbot-redesign .pgrid-4 .pcard__tags, .cleanbot-redesign .pgrid-4 .pcard__more{ display:none; }
  .cleanbot-redesign .pgrid-4 .pcard__tags ~ img{ top:12%; height:80%; }
  .cleanbot-redesign .pgrid-4 .pcard__price{ font-size:16px; }
  .cleanbot-redesign .pgrid-4 .pcard__go--noprice .pcard__more{ display:inline-flex; }
  .cleanbot-redesign .pgrid-4 .pcard__spec{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
  }
  .cleanbot-redesign .pcard{ padding:14px; border-radius:var(--r-md); }
/* прогресс-бар ленты — тоже ребёнок .manual, её row-gap прибавлялся
     к его margin-top: разносим отступы явно */
  .cleanbot-redesign .manual{ row-gap:0; }
  .cleanbot-redesign .manual .split__list{ margin-top:clamp(28px,4vw,64px); }
.cleanbot-redesign .swatch:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* цена */
  .cleanbot-redesign .pdp__now{ font-size:24px; }
/* текст описания */
  .cleanbot-redesign .prose p{ font-size:15px; }
/* внутренние отступы карточек */
  .cleanbot-redesign .manual__card{ padding:20px; }
/* три таба помещаются в экран без скролла; ширина — по тексту,
     свободное место распределяется между пилюлями, а не внутри них */
  .cleanbot-redesign .tabs__nav{ gap:4px; justify-content:space-between; }
  .cleanbot-redesign .tab{
    flex:0 1 auto;
    height:40px; padding:0 14px;
    font-size:13px; letter-spacing:-.02em;
  }
  .cleanbot-redesign .spec{ flex-wrap:wrap; }
  .cleanbot-redesign .spec__k, .cleanbot-redesign .spec__v{ flex-shrink:1; overflow-wrap:anywhere; }

  /* Mobile reference: a generous white form on the dark consultation block. */
  .cleanbot-redesign .cta::before{ display:none; }
  .cleanbot-redesign .cta .form{ padding:28px 20px 24px; border-radius:32px; }
  .cleanbot-redesign .cta .form__title{ margin-bottom:24px; font-size:20px; }
  .cleanbot-redesign .cta .cleanbot-contact__field{ margin-bottom:12px; }
  .cleanbot-redesign .cta .wpcf7-form input[type="text"],
  .cleanbot-redesign .cta .wpcf7-form input[type="tel"],
  .cleanbot-redesign .cta .wpcf7-form input[type="email"]{ height:58px; font-size:16px; }
  .cleanbot-redesign .cta .wpcf7-submit{ height:52px; margin-top:16px; }
  .cleanbot-redesign .cta .wpcf7-spinner:not(.is-active){ display:none; }
  .cleanbot-redesign .cta form.submitting .wpcf7-spinner{ display:block; }
  .cleanbot-redesign .cta .form__note{ margin-top:16px; }
/* на узких экранах текста больше, чем места под пилюли */
  @media (max-width:380px){    .cleanbot-redesign .tab{ padding:0 8px; font-size:12px; letter-spacing:-.03em; }
  }

}


/* ============================================================
   Адаптеры WordPress (нет в исходной верстке)
   ============================================================ */

/* краткое описание приходит из админки как HTML (абзацы) */
.cleanbot-redesign .pdp__sub p{ margin:0; }
.cleanbot-redesign .pdp__sub p + p{ margin-top:.8em; }
.cleanbot-redesign .pdp__sub{ margin:0 0 30px; font-size:16px; line-height:1.6; color:var(--text-2); }
/* без цены рамка содержит только подсказку про маркетплейсы */
.cleanbot-redesign .pdp__price--noprice{ padding:18px 22px; }
.cleanbot-redesign .pdp__price--noprice .pdp__note{ margin:0; }
/* товар без фото: заглушка WooCommerce занимает всю площадку */
.cleanbot-redesign .pdp__stage img[src*="placeholder"]{ opacity:.5; }

/* полное описание — содержимое редактора WordPress */
.cleanbot-redesign .prose h2, .cleanbot-redesign .prose h3, .cleanbot-redesign .prose h4{
  margin:32px 0 14px; font-weight:600; line-height:1.2; letter-spacing:-.025em; color:var(--text);
}
.cleanbot-redesign .prose h2{ font-size:28px; }
.cleanbot-redesign .prose h3{ font-size:22px; }
.cleanbot-redesign .prose h4{ font-size:18px; }
.cleanbot-redesign .prose > :first-child{ margin-top:0; }
.cleanbot-redesign .prose ul, .cleanbot-redesign .prose ol{ margin:0 0 18px; padding-left:22px; color:var(--text-2); font-size:17px; line-height:1.65; }
.cleanbot-redesign .prose li + li{ margin-top:6px; }
.cleanbot-redesign .prose a{ color:var(--acc); text-decoration:underline; text-underline-offset:2px; }
.cleanbot-redesign .prose img{ max-width:100%; height:auto; border-radius:var(--r-md); }

/* дополнительные фото «подробности» (поле product-second-gallery) */
.cleanbot-redesign .pdetails{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.cleanbot-redesign .pdetails__item{ margin:0; overflow:hidden; border-radius:var(--r-lg); background:var(--surface); }
.cleanbot-redesign .pdetails__item img{ display:block; width:100%; height:auto; }
@media (max-width:900px){ .cleanbot-redesign .pdetails{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } }
@media (max-width:620px){ .cleanbot-redesign .prose ul, .cleanbot-redesign .prose ol{ font-size:15px; } .cleanbot-redesign .prose h2{ font-size:23px; } }

/* ===== ТЗ окт. 2026, задача 8: блок покупки ===== */
.cleanbot-redesign .pdp__meta{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--text-2); }
.cleanbot-redesign .pdp__facts{ margin:0 0 20px; }
.cleanbot-redesign .pdp__features{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cleanbot-redesign .pdp__features li{ position:relative; padding-left:26px; font-size:15px; line-height:1.45; color:var(--text); }
.cleanbot-redesign .pdp__features li::before{
  content:""; position:absolute; left:2px; top:5px; width:12px; height:7px;
  border-left:2px solid var(--acc); border-bottom:2px solid var(--acc); transform:rotate(-45deg);
}
.cleanbot-redesign .pdp__size{ margin:12px 0 0; font-size:14px; line-height:1.5; color:var(--text-2); }
.cleanbot-redesign .pdp__stock{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px; font-weight:600; }
.cleanbot-redesign .pdp__stock::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; }
.cleanbot-redesign .pdp__stock.is-in{ color:#1E8E4E; }
.cleanbot-redesign .pdp__stock.is-out{ color:#B42318; }
.cleanbot-redesign .pdp__price--noprice .pdp__stock{ margin-bottom:6px; }
/* кнопки маркетплейсов — залитые, белый текст */
.cleanbot-redesign .mbtn{ min-height:48px; font-size:16px; }
.cleanbot-redesign .mbtn--ozon{ background:#006CFC; border-color:#006CFC; color:#fff; }
.cleanbot-redesign .mbtn--ozon:hover{ background:#0057CC; border-color:#0057CC; color:#fff; }
.cleanbot-redesign .mbtn--wb{ background:#A818F0; border-color:#A818F0; color:#fff; }
.cleanbot-redesign .mbtn--wb:hover{ background:#8A0FCB; border-color:#8A0FCB; color:#fff; }
.cleanbot-redesign .pdp__buy{ margin-bottom:12px; }
.cleanbot-redesign .pdp__delivery{ margin:0 0 18px; font-size:13.5px; line-height:1.5; color:var(--text-2); }
.cleanbot-redesign .pdp__delivery a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.cleanbot-redesign .pdp__delivery a:hover{ color:var(--acc); }
/* «Поделиться» — как в статьях блога */
.cleanbot-redesign .pdp__share{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.cleanbot-redesign .pdp__share .atool{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 16px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.cleanbot-redesign .pdp__share .atool svg{ flex:none; color:var(--text-2); }
.cleanbot-redesign .pdp__share .atool:hover{ border-color:var(--text); }
.cleanbot-redesign .pdp__share .atool.is-done{ border-color:var(--acc); background:var(--acc-tint); color:var(--acc-press); }
@media (max-width:620px){
  .cleanbot-redesign .pdp__sub{ margin-bottom:18px; font-size:15px; }
  .cleanbot-redesign .pdp__features li{ font-size:14px; }
  .cleanbot-redesign .pdp__price{ padding:16px 18px; }
}

/* ТЗ окт. 2026, задача 11: длинные значения характеристик переносятся на всех ширинах */
.cleanbot-redesign .spec{ flex-wrap:wrap; }
.cleanbot-redesign .spec__k,
.cleanbot-redesign .spec__v{ flex:0 1 auto; min-width:0; overflow-wrap:anywhere; }
.cleanbot-redesign .spec__v{ text-align:right; }

/* Task 15: размер PDF в кнопке «Скачать инструкцию» */
.cleanbot-redesign .manual__size{ font-weight:400; opacity:.75; }