/* ════════════════════════════════════════════════════════════════════
   iter-06 δ-B iter-7 (2026-06-05): RESTORE design tokens из handoff.
   styles_modern.css определяет --c-bg=#F7FAFB (BUG — should be #FFFFFF),
   --c-text-3 undefined, --c-success undefined. Force-override на :root.
   Source: Design_System1/New_Revision/design_handoff_product/prototype/colors_and_type.css
   ════════════════════════════════════════════════════════════════════ */
:root {
  --c-blue:              #0E94C8;
  --c-blue-dark:         #0877A8;
  --c-blue-light:        #EBF7FA;
  --c-blue-tint:         rgba(14, 148, 200, 0.08);
  --c-blue-tint-strong:  rgba(14, 148, 200, 0.14);
  --c-orange:            #F36012;
  --c-orange-dk:         #D95208;
  --c-orange-tint:       rgba(243, 96, 18, 0.10);
  --c-kaspi:             #F14635;
  --c-text:              #1F2D3D;
  --c-text-2:            #5F6B7A;
  --c-text-3:            #8B95A1;
  --c-bg:                #FFFFFF;  /* override BUG из styles_modern.css */
  --c-bg-soft:           #F7FAFB;
  --c-surface:           #FFFFFF;
  --c-surface-dark:      #1F2D3D;
  --c-border:            #DDE5EA;
  --c-border-soft:       #EDF1F4;
  --c-success:           #2E8B57;
  --c-warning:           #C77700;
  --c-error:             #C0392B;
  --c-info:              #0E94C8;
  --z-modal:             1050;
}

/* ════════════════════════════════════════════════════════════════════
   iter-06 (2026-06-05) — Product page v2 port (PDP, module=product)
   Reference:
     Design_System1/New_Revision/design_handoff_product/prototype/components/components.css
     (секция «PRODUCT PAGE (PDP) module» от line 2483)
   Применяется к module=product через флаг $product_v2 (см. index.html ветка).

   Содержит:
     • .pp-layout / .pp-main         — каркас (sidebar 280 + main)
     • .pp-head / .pp-title / .pp-meta — H1 + строка доверия + actions
     • .pp-top / .pp-left            — gallery+specs | buybox grid
     • .hv2-gallery                  — shared (ProductGallery markup)
     • .pp-gallery-wrap / .pp-facts  — overlay GalleryFacts
     • .pp-specs / .pp-spectable     — характеристики (collapsible)
     • .pp-buy                       — sticky buybox + Kaspi + trust
     • .hv2-tabs                     — shared (Tabs markup)
     • .pp-layers / .pp-layer        — «Состав модели» + (δ-B clickable)
     • .pp-desc                      — SEO descr типография
     • .pp-cloud                     — LinkCloud (Похожие / Размеры)
     • .pp-reviews / .pp-deliv-tab   — review list + delivery tab
     • .pp-drawer / .pp-stickybar    — δ-B (рисуются скрытыми пока)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Breadcrumbs (iter-3 — Owner reject: пропали) ─── */
.v2-band--breadcrumbs { padding: var(--sp-3) 0 0; }
.hv2-breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  font: 400 13px/1 var(--ff-body);
  color: var(--c-text-2);
}
/* 5.1/5.2: крошки внутри .pp-main — плоские, без рамки, выровнены по контенту;
   отступ снизу как у каталога (.bread-crumbs).
   5.1 (#44): высота бокса = шапке левого меню (.hv2-cs__head, 47px) +
   вертикальное центрирование (база .hv2-breadcrumbs уже align-items:center),
   чтобы текст крошки лёг на одну линию с «КАТАЛОГ ТОВАРОВ». */
/* Правка Owner 2026-06-27: H1 товара выровнять по горизонтали с пунктом меню
   «Взрослые матрасы» (под шапкой «КАТАЛОГ ТОВАРОВ»). Крошки-бокс (min-height 50)
   уже совпадает с шапкой меню; но .pp-main flex gap (--sp-5=24) + margin-bottom
   (--sp-3=12) опускали H1 на 36px ниже. Гасим этот зазор отрицательным margin
   (−24 нейтрализует flex-gap, +0 старого margin) → H1 садится сразу под крошки,
   на линию с «Взрослые матрасы». min-height не трогаем (нужен для крошек). */
.pp-breadcrumbs { margin: 0 0 calc(-1 * var(--sp-5)); min-height: 50px; }
.hv2-breadcrumbs__item {
  color: var(--c-text-2);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.hv2-breadcrumbs__item:hover { color: var(--c-blue); }
.hv2-breadcrumbs__home {
  color: var(--c-text-3);
  display: inline-flex;
  align-items: center;
  padding: 2px 0;
}
.hv2-breadcrumbs__home:hover { color: var(--c-blue); }
.hv2-breadcrumbs__home svg {
  color: inherit;
  width: 16px; height: 16px;
}
/* Скрываем текст «Главная» рядом с иконкой — оставляем только icon. */
.hv2-breadcrumbs__home > span[itemprop="name"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}
.hv2-breadcrumbs__sep {
  color: var(--c-text-3);
  font-weight: 400;
  user-select: none;
}
.hv2-breadcrumbs__item--current {
  color: var(--c-text);
  font-weight: 500;
}
.hv2-breadcrumbs__item--current:hover { color: var(--c-text); }

/* ─── Layout: sidebar (catalog tree + brands) + main ─── */
.pp-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding-block: var(--sp-5) var(--sp-8);
}
.pp-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Sidebar wrapper — single grid item col 1 (тот же pattern что в catalog). */
.pp-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pp-sidebar > #hv2-sidebar-end { height: 0; }

/* 2026-07-27 (Owner, регресс min-width): убран responsive-брейкпоинт 990 —
   он конфликтовал с meta viewport width=1200 (страница фиксирована на 1200 +
   h-scroll ниже), создавая сломанный гибрид (1-колоночные правила поверх
   2-колоночного layout → галерея схлопывалась в 0, facts наезжали на buybox).
   Десктоп всегда 2-колоночный ≥1200; мобильные — отдельная тема mobile_v2 (по UA). */

/* ─── Head: H1 + ProductMeta + actions ─── */
.pp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  /* 2026-07-27 (Owner): отступ под строкой рейтинга/отзывов до фото. */
  margin-bottom: 20px;
}
.pp-head__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  color: var(--c-text);
  margin: 0;
}
.pp-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  font: 400 14px/1 var(--ff-body); color: var(--c-text-2);
}
.pp-meta__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text); }
.pp-meta__rating b { font-weight: 700; }
.pp-stars { display: inline-flex; gap: 1px; align-items: center; }
.pp-stars__s {
  color: var(--c-border);
  line-height: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-stars__s svg { width: 16px !important; height: 16px !important; }
.pp-stars__s.is-on { color: #F5A623; }
.pp-meta__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 14px/1 var(--ff-body); color: var(--c-blue);
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.pp-meta__link:hover { color: var(--c-blue-dark); }
.pp-meta__link--mute {
  color: var(--c-text-3);
  text-decoration: none;
  cursor: default;
}
.pp-meta__link--mute:hover { color: var(--c-text-3); }
.pp-meta__dot { color: var(--c-text-3); }
.pp-meta__sold {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-text-2); white-space: nowrap;
}
/* SVG корзинки → зелёный (success). currentColor наследуется stroke. */
.pp-meta__sold svg { color: var(--c-success) !important; stroke: var(--c-success) !important; }
.pp-meta__sku { color: var(--c-text-3); white-space: nowrap; }
.pp-meta__sku #sv-prod-sku { color: var(--c-text-2); }
.pp-head__actions {
  display: flex; gap: var(--sp-4); flex: none; padding-top: 6px;
}
.pp-iconlink {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font: 500 13px/1 var(--ff-body); color: var(--c-text-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.pp-iconlink:hover { color: var(--c-blue); }
.pp-iconlink.is-on { color: var(--c-orange); }
/* Override legacy styles.css:10437-10453 — .compare-icon/.favorite-icon
   forced 30×30 + light-gray text. Внутри .pp-iconlink уменьшаем до 16×16
   через свой контейнер .pp-iconlink__ico, и красим текст. */
.pp-iconlink .pp-iconlink__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--c-text-2);
}
/* fill: none — гасим легаси styles.css:10411 `.favorite-icon svg{fill:#d8d8d8}`
   (CSS-fill сильнее инлайнового fill="none" SVG → сердечко заливалось серым,
   Owner 2026-08-10). Активное состояние is-active (#F15E20 !important) живо. */
.pp-iconlink .pp-iconlink__ico svg { width: 16px; height: 16px; fill: none; }
.pp-iconlink span:not(.pp-iconlink__ico) {
  color: var(--c-text-2);
  font: 500 13px/1 var(--ff-body);
  vertical-align: baseline;
}
.pp-iconlink:hover span:not(.pp-iconlink__ico) { color: var(--c-blue); }
.pp-iconlink:hover .pp-iconlink__ico { color: var(--c-blue); }
.pp-iconlink.is-on span:not(.pp-iconlink__ico),
.pp-iconlink.is-on .pp-iconlink__ico { color: var(--c-orange); }

/* ─── Top grid: gallery+specs | buy box ─── */
.pp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 760px) { .pp-top { grid-template-columns: 1fr; } }
.pp-left { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-6); }

/* ─── ProductGallery (shared) ─── */
/* 2026-07-28 (Owner): 600px оказалось слишком узко — галерея заполняет свою
   grid-колонку (ширину задаёт .pp-layout .pp-top, правый край = линия пункта
   меню «Обмен и возврат»). ~775px на полном макете — меньше старых 910. */
.hv2-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
/* 2026-07-28 (Owner): квадрат 1/1 был опрометчив — рендеры товаров 1600×1173.
   Контейнер под пропорцию рендеров + contain: интерьерные 4:3 и маркетинговый
   баннер 3:2 показываются БЕЗ обрезки (небольшой леттербокс на белом). */
.hv2-gallery__main {
  position: relative;
  aspect-ratio: 1600/1173;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
}
.hv2-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Legacy MagicZoom wrapper #prod_img — фактический <a class="MagicZoom">.
   MagicZoom часто оборачивает <img> в свой dom (.MagicZoom-figure) ставя
   width/height inline. Заставляем растягиваться по контейнеру. */
.hv2-gallery__main a#prod_img,
.hv2-gallery__main .MagicZoom,
.hv2-gallery__main .mz-figure {
  display: block; width: 100% !important; height: 100% !important;
  cursor: zoom-in; /* 2026-07-22: клик открывает hv2-lightbox (MagicZoom отключён) */
}
.hv2-gallery__main a#prod_img img,
.hv2-gallery__main .MagicZoom img,
.hv2-gallery__main img#sv-prod-thumb {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; /* 2026-07-28: без обрезки (баннер/интерьер) */
  object-position: center !important;
  max-width: none !important; max-height: none !important;
}
.hv2-gallery__main--empty { color: var(--c-text-3); }
.hv2-gallery__zoom {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hv2-gallery__thumbs {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.hv2-gallery__thumb {
  width: 72px; height: 72px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-soft);
  cursor: pointer; padding: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.hv2-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv2-gallery__thumb:hover { border-color: var(--c-blue); }
.hv2-gallery__thumb.is-active {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 1px var(--c-blue) inset;
}

/* ─── Gallery fact chips overlay ─── */
.pp-gallery-wrap { position: relative; }
/* 2026-07-28: на не-первом слайде (баннер/интерьер) чипы прячем — перекрывали
   изображение; класс ставит hv2-product.js при листании тумб. */
.pp-gallery-wrap.pp-facts--off .pp-facts { display: none; }
.pp-facts {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  max-width: 56%;
}
.pp-fact {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: 7px 12px;
  box-shadow: var(--sh-sm);
}
.pp-fact__ico { color: var(--c-blue); margin-bottom: 2px; line-height: 0; }
.pp-fact__v {
  font: 700 15px/1.1 var(--ff-body);
  color: var(--c-text);
  white-space: nowrap;
}
.pp-fact__v--sm { font-size: 13px; font-weight: 600; }
.pp-fact__k {
  font: 400 11px/1.2 var(--ff-body);
  color: var(--c-text-2);
  text-transform: lowercase;
}
.pp-fact__k--top { margin-bottom: 4px; }
.pp-fact--firm { padding-top: 7px; }
.pp-firmdots {
  display: inline-flex; gap: 3px; align-items: center;
  margin: 1px 0 3px;
}
/* Override: legacy styles.css ставит <i> { font-style: italic } и может
   сжимать. Force fixed dot size. */
.pp-firmdots i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-border);
  font-style: normal;
  flex: none;
}
.pp-firmdots i.is-on { background: var(--c-orange); }
.pp-fact--firm2 .pp-firmrow { display: flex; align-items: center; gap: 7px; }
.pp-fact--firm2 .pp-firmrow + .pp-firmrow { margin-top: 4px; }
.pp-firmrow__side {
  font: 600 11px/1 var(--ff-body); color: var(--c-text-2);
  width: 28px; flex: none;
}
.pp-firmrow .pp-firmdots { margin: 0; }
.pp-firmrow__lbl { font: 600 12px/1.1 var(--ff-body); color: var(--c-text); }

/* ─── Spec table (collapsible) ─── */
.pp-specs h2 { font-size: 22px; margin: 0 0 var(--sp-3); }
.pp-spectable {
  width: 100%; border-collapse: collapse;
  font: 400 14px/1.45 var(--ff-body);
}
.pp-spectable tr { background: transparent; }
.pp-spectable tr:nth-child(odd) { background: var(--c-bg-soft); }
.pp-spectable th, .pp-spectable td {
  text-align: left; padding: 10px 14px; vertical-align: top;
}
.pp-spectable th { font-weight: 400; color: var(--c-text-2); width: 46%; }
.pp-spectable td { font-weight: 600; color: var(--c-text); }
.pp-spectable a { color: var(--c-blue); text-decoration: none; }
.pp-spectable a:hover { text-decoration: underline; }
.pp-spec-info {
  display: inline-flex; vertical-align: -2px; margin-left: 4px;
  color: var(--c-text-3); cursor: help;
}
/* Hidden rows when collapsed (default state) */
.pp-specs:not(.is-open) .pp-spectable tr.is-extra { display: none; }
.pp-specs__toggle {
  margin-top: var(--sp-3);
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: 600 14px/1 var(--ff-body); color: var(--c-orange);
}
.pp-specs__toggle:hover { color: var(--c-orange-dk); }
.pp-specs__toggle svg { transition: transform var(--dur-fast) var(--ease-out); }
.pp-specs.is-open .pp-specs__toggle svg { transform: rotate(180deg); }

/* ─── Buy box (sticky) ─── */
.pp-buy {
  position: sticky; top: 92px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--c-bg);
  box-shadow: var(--sh-sm);
}
.pp-buy__label { font: 400 13px/1 var(--ff-body); color: var(--c-text-2); }
.pp-buy__size { display: flex; flex-direction: column; gap: 6px; }
.pp-buy__row { display: flex; align-items: center; gap: 8px; }
.pp-buy__unit { font: 400 13px/1 var(--ff-body); color: var(--c-text-2); flex: none; }
/* Контейнер для legacy .sv-product-options wrap — flex:1 чтобы select мог
   растянуться. iter-3 fix Owner reject «160х2 обрезается»:
   - flex 1 1 auto + min-width: 0 (для overflow с label)
   - inner select width: 100% — растягивается до родителя
   - hidden у legacy .sv-product-options убираем (раньше hidden убивал размеры) */
.pp-buy__selectwrap {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  width: 100%;
}
.pp-buy__selectwrap .sv-size-selecter {
  width: 100% !important;
  min-width: 0;
  max-width: none;
  flex: none !important;
}
/* Legacy `.sv-product-options.hidden` — был visibility:hidden, перебиваем */
.pp-buy .sv-product-options { visibility: visible !important; opacity: 1 !important; height: auto !important; }
.pp-buy__stock--out { color: var(--c-text-3); }
.pp-buy__stock--out .pp-buy__stock-dot {
  background: var(--c-text-3);
  box-shadow: 0 0 0 3px rgba(139,149,161,.18);
}
/* Цена: выгода отделить в свой span — `Старая цена  Выгода N ₸` flex-row. */
.pp-buy__oldline {
  font: 400 13px/1.3 var(--ff-body); color: var(--c-text-3);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pp-buy__old { text-decoration: line-through; }
.pp-buy__save { color: var(--c-success); text-decoration: none; }
.pp-buy__save b { font-weight: 700; }

/* Legacy native <select.sv-size-selecter> styled v2-look — keep its commercial
   ProductOptionChanged onchange. Owner-approved divergence (DESIGN-SYSTEM-INVENTORY).
   chevron — через background-image (нативный select), не custom dropdown. */
.pp-buy__row .sv-size-selecter,
.pp-buy__size select.sv-size-selecter {
  flex: 1;
  height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font: 500 14px/1 var(--ff-body);
  color: var(--c-text);
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.pp-buy__row .sv-size-selecter:hover { border-color: var(--c-text-3); }
.pp-buy__row .sv-size-selecter:focus {
  outline: 0;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue-light);
}
.pp-buy__othersize {
  font: 500 13px/1 var(--ff-body);
  color: var(--c-blue);
  text-decoration: underline; text-underline-offset: 3px;
  align-self: flex-start;
}
.pp-buy__divider { height: 1px; background: var(--c-border-soft); margin: var(--sp-1) 0; }
.pp-buy__priceblock { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-buy__price {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--c-text);
}
.pp-buy__disc {
  background: var(--c-kaspi); color: #fff;
  font: 700 12px/1 var(--ff-body);
  padding: 4px 8px;
  border-radius: var(--r-card);   /* 2026-06-26: чип скидки — единое скругление 12px */
}
/* Buybox: availability + Kaspi + trust list */
.pp-buy__stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font: 600 13px/1 var(--ff-body) !important;
  color: var(--c-success) !important;
}
.pp-buy__stock-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--c-success) !important;
  background-color: var(--c-success) !important;
  box-shadow: 0 0 0 3px rgba(46, 139, 87, .18) !important;
  flex: none !important;
  display: inline-block !important;
}
.pp-buy__kaspi {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg-soft);
}
/* Kaspi logo — transparent kaspi-gold.png (red squircle), без белого фона. */
.pp-buy__kaspi-logo {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 8px;
  object-fit: contain; /* contain — full image visible */
  display: block;
}
.pp-buy__kaspi-txt {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.pp-buy__kaspi-txt b { font: 700 15px/1.15 var(--ff-body); color: var(--c-text); }
.pp-buy__kaspi-txt span { font: 400 12px/1.35 var(--ff-body); color: var(--c-text-2); }

/* CTA buttons — strong override против legacy .button.buy / .button.additional
   (styles.css:1891-1925 + price-block:6054-6109 ставят border-radius:3px). */
.pp-buy__cta,
.pp-buy .pp-buy__cta,
button.pp-buy__cta {
  height: 50px !important;
  width: 100% !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: var(--r-card) !important;   /* 2026-06-26: 12px, единая система скруглений */
  font: 600 16px/1 var(--ff-body) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  line-height: 1 !important;
  transition: background var(--dur-fast) var(--ease-out) !important;
}
.pp-buy__cta--primary,
button.pp-buy__cta--primary { background: var(--c-orange) !important; color: #fff !important; }
.pp-buy__cta--primary:hover { background: var(--c-orange-dk) !important; }
.pp-buy__cta--secondary,
button.pp-buy__cta--secondary { background: var(--c-blue) !important; color: #fff !important; }
.pp-buy__cta--secondary:hover { background: var(--c-blue-dark) !important; }
.pp-buy__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-buy__trust li {
  display: flex; align-items: flex-start; gap: 9px;
  font: 400 13px/1.4 var(--ff-body); color: var(--c-text-2);
}
.pp-buy__trust svg { color: var(--c-blue); flex: none; margin-top: 1px; }

/* ─── Tabs (shared .hv2-tabs) ─── */
/* margin-top — отделяем вкладки от кнопки «Все характеристики» (была склейка 0px). */
.hv2-tabs { display: flex; flex-direction: column; margin-top: var(--sp-6); }
.hv2-tabs__bar {
  display: flex; gap: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
/* Вкладки 1:1 с заголовком «Характеристики» (Bitter 700 22px) — крупно и жирно. */
.hv2-tabs__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 2px 14px;
  border: 0; background: none; cursor: pointer;
  font: 700 22px/1.1 var(--ff-display);
  color: var(--c-text-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.hv2-tabs__tab:hover { color: var(--c-text); }
.hv2-tabs__tab.is-active { color: var(--c-text); }
.hv2-tabs__tab.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--c-blue); border-radius: 3px;
}
.hv2-tabs__count {
  font: 600 13px/1 var(--ff-body);
  color: var(--c-text-3);
  background: var(--c-bg-soft);
  border-radius: 999px; padding: 3px 8px;
  align-self: center;
}
.hv2-tabs__tab.is-active .hv2-tabs__count {
  color: var(--c-blue); background: var(--c-blue-light);
}
.hv2-tabs__panel { min-height: 100px; }
.hv2-tabs__panel.is-hidden { display: none; }

/* ─── Состав модели (LayerRow list) ─── */
.pp-compose-head { margin: 0 0 var(--sp-4); }
.pp-compose-head h3 { font-size: 20px; margin: 0 0 4px; }
.pp-compose-lead { font: 400 14px/1.5 var(--ff-body); color: var(--c-text-2); margin: 0; }
.pp-layers {
  margin: 0 0 var(--sp-5); padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 620px;
}
.pp-layer {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.pp-layer:hover {
  border-color: var(--c-blue);
  background: var(--c-blue-light);
  box-shadow: var(--sh-sm);
}
.pp-layer__num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-blue-light); color: var(--c-blue-dark);
  font: 700 13px/26px var(--ff-body); text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pp-layer:hover .pp-layer__num { background: var(--c-blue); color: #fff; }
.pp-layer__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pp-layer__title { font: 600 15px/1.35 var(--ff-body); color: var(--c-text); }
.pp-layer__tag { font: 400 12px/1 var(--ff-body); color: var(--c-text-3); }
.pp-layer__more {
  flex: none;
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 13px/1 var(--ff-body); color: var(--c-blue);
  white-space: nowrap;
}
.pp-layer:hover .pp-layer__more { color: var(--c-blue-dark); }
.pp-layer__more svg { transition: transform var(--dur-fast) var(--ease-out); }
.pp-layer:hover .pp-layer__more svg { transform: translateX(2px); }

/* δ-B: «Состав модели» — все pp-layer кликабельны (открывают LayerDrawer).
   Hover/transitions уже определены в основном .pp-layer rule выше. */

/* SEO description typography */
.pp-desc { font: 400 15px/1.7 var(--ff-body); color: var(--c-text); }
.pp-desc p { margin: 0 0 var(--sp-3); }
.pp-desc a { color: var(--c-blue); text-decoration: none; }
.pp-desc a:hover { text-decoration: underline; }

/* ─── Link clouds (Похожие категории / Размеры) ─── */
/* 2026-07-24 (Owner): SEO-облако «Похожие категории / Размеры» — современные
   чип-таблетки вместо строки со ссылками через запятую. */
.pp-cloud {
  border: 1px solid var(--c-border-soft, #EDF1F4);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  background: #fff;
}
.pp-cloud h3 {
  font: 700 16px/1.2 var(--ff-display, inherit);
  margin: 0 0 var(--sp-4); color: var(--c-text);
}
.pp-cloud__links { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-cloud__chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill, 999px);
  background: var(--c-bg-soft, #F7FAFB);
  border: 1px solid var(--c-border-soft, #EDF1F4);
  color: var(--c-text, #1F2D3D);
  font: 500 13px/1 var(--ff-body);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.pp-cloud__chip:hover {
  background: var(--c-blue-light, #EBF7FA);
  border-color: var(--c-blue, #0E94C8);
  color: var(--c-blue, #0E94C8);
}
.pp-cloud__more {
  display: inline-block; margin-top: var(--sp-3);
  font: 600 13px/1 var(--ff-body); color: var(--c-orange);
  cursor: pointer; white-space: nowrap;
}
.pp-cloud__more:hover { color: var(--c-orange-dk); }
.pp-cloud__lead { font-weight: 700; }

/* Stack of LinkClouds сразу после tabs */
.pp-cloud-stack {
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ─── Reviews list (tab) + Delivery tab typography ─── */
.pp-reviews { display: flex; flex-direction: column; gap: var(--sp-3); }
.pp-deliv-tab { font: 400 15px/1.7 var(--ff-body); color: var(--c-text); }
.pp-deliv-tab p { margin: 0 0 var(--sp-3); }
.pp-deliv-tab a { color: var(--c-blue); text-decoration: none; }
.pp-deliv-tab a:hover { text-decoration: underline; }

/* ─── δ-B: LayerDrawer (slide-in from right) ───
   Markup рендерится в δ-B (pp_layerdrawer_v2.html). CSS включён в δ-A,
   чтобы шторка визуально готова, когда δ-B активирует hv2-product.js drawer logic. */
.pp-drawer {
  position: fixed; inset: 0;
  z-index: 1050;
  overflow: hidden;
  pointer-events: none;
}
.pp-drawer.is-open { pointer-events: auto; }
.pp-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(16, 24, 40, .42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.pp-drawer.is-open .pp-drawer__scrim { opacity: 1; pointer-events: auto; }
.pp-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100vh;
  width: 440px; max-width: 92vw;
  background: var(--c-bg);
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  overflow: hidden; /* iter-7: контейнер не пускает контент за пределы */
}
.pp-drawer.is-open .pp-drawer__panel { transform: translateX(0); }
/* panel-content: занимает всё доступное место (флекс-чайлд panel'a),
   footer (sibling) фиксирован внизу через flex: none. */
.pp-drawer__panel-content {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
.pp-drawer__panel-content[hidden] { display: none !important; }
.pp-drawer__foot { flex: none !important; }
.pp-drawer__body { flex: 1 1 auto !important; min-height: 0; }
.pp-drawer__head {
  position: relative;
  padding: var(--sp-5) 56px var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border-soft);
  flex: none; /* iter-7: head не растягивается, оставляя место body+foot */
  overflow: hidden; /* title не вылазит вправо */
  background: var(--c-bg);
  z-index: 2;
  /* iter-7 fix: head не должен expanding > panel width. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.pp-drawer__eyebrow {
  display: block;
  font: 600 12px/1 var(--ff-body);
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 8px;
}
.pp-drawer__title {
  font-family: var(--ff-display);
  font-weight: 700; font-size: 22px; line-height: 1.25;
  color: var(--c-text);
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pp-drawer__close {
  position: absolute; top: 18px; right: 16px;
  width: 36px; height: 36px;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--c-border) !important;
  border-radius: 50%;
  background: var(--c-bg-soft); color: var(--c-text-2);
  cursor: pointer;
  z-index: 3;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pp-drawer__close:hover { background: var(--c-border); color: var(--c-text); }
.pp-drawer__close svg { width: 20px; height: 20px; }
.pp-drawer__body {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-5);
}
.pp-drawer__media {
  position: relative;
  height: 220px;
  border-radius: var(--r-card);
  margin-bottom: var(--sp-4);
  overflow: hidden;
  background-color: var(--c-bg-soft);
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(14, 148, 200, .06) 16px 32px);
  border: 1px solid var(--c-border-soft);
  display: flex; align-items: flex-end;
}
.pp-drawer__media.has-gif { background-image: none; align-items: stretch; }
.pp-drawer__media img, .pp-drawer__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-drawer__media-cap {
  margin: 12px;
  font: 500 12px/1 var(--ff-body);
  color: var(--c-text-3);
  background: rgba(255, 255, 255, .85);
  padding: 5px 9px;
  border-radius: var(--r-sm);
}

/* ─── 2.3: фуллскрин-листалка галереи ─── */
.hv2-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 56px 88px;
  background: rgba(31, 45, 61, .92);
  animation: szOverlayIn var(--dur-fast) var(--ease-out);
}
.hv2-lightbox.is-open { display: flex; }
.hv2-lightbox__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: #fff; border-radius: var(--r-md, 8px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
}
.hv2-lightbox__close {
  position: absolute; top: 22px; right: 30px;
  border: 0; background: none; color: var(--c-orange); cursor: pointer;
  padding: 6px; line-height: 0; border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.hv2-lightbox__close:hover { color: #fff; }
.hv2-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.hv2-lightbox__nav:hover { background: rgba(255, 255, 255, .32); }
.hv2-lightbox__nav--prev { left: 24px; }
.hv2-lightbox__nav--next { right: 24px; }
.hv2-lightbox--single .hv2-lightbox__nav { display: none; }
.hv2-lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; color: rgba(255, 255, 255, .85);
  font: 400 14px/1.3 var(--ff-body); padding: 0 24px;
}

.pp-drawer__desc {
  font: 400 15px/1.65 var(--ff-body);
  color: var(--c-text);
  margin: 0 0 var(--sp-5);
}
.pp-drawer__sub { font-size: 15px; font-weight: 700; color: var(--c-text); margin: 0 0 12px; }
.pp-drawer__pros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pp-drawer__pros li {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 14px/1.5 var(--ff-body); color: var(--c-text);
}
.pp-drawer__pros svg { flex: none; margin-top: 2px; color: var(--c-success); }
.pp-drawer__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg);
}
.pp-drawer__nav {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font: 600 13px/1 var(--ff-body); color: var(--c-blue);
}
.pp-drawer__nav:hover:not(:disabled) { color: var(--c-blue-dark); }
.pp-drawer__nav:disabled { color: var(--c-text-3); cursor: default; }
.pp-drawer__count { font: 500 12px/1 var(--ff-body); color: var(--c-text-3); }

/* ─── δ-B: Sticky bottom purchase bar ─── */
.pp-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, .10);
  transform: translateY(110%); opacity: 0;
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
  pointer-events: none;
}
.pp-stickybar.is-show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.pp-stickybar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding-block: 10px;
}
.pp-stickybar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-stickybar__name {
  font: 600 16px/1.2 var(--ff-body); color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-stickybar__size { font: 400 13px/1 var(--ff-body); color: var(--c-text-2); }
.pp-stickybar__buy { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.pp-stickybar__prices {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; line-height: 1;
}
.pp-stickybar__price {
  font-family: var(--ff-display); font-weight: 700; font-size: 24px;
  line-height: 1; color: var(--c-text);
  /* iter-6 fix I: цифры цены не должны переноситься на отдельные строки. */
  white-space: nowrap;
  display: inline-block;
}
.pp-stickybar__old {
  font: 400 13px/1 var(--ff-body); color: var(--c-text-3);
  text-decoration: line-through;
}
/* iter-7 Owner fix: Купить в stickybar — больше, как в основной BuyBox. */
.pp-stickybar__cta {
  height: 56px !important;
  min-width: 180px !important;
  padding-inline: 32px !important;
  font: 600 17px/1 var(--ff-body) !important;
}
.pp-stickybar__cta svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .pp-stickybar__size { display: none; }
  .pp-stickybar__prices { align-items: flex-start; }
  .pp-stickybar__cta { padding-inline: 18px; }
}

/* ─── Hide legacy product page chrome когда product_v2 активен ───
   Legacy product.html НЕ рендерится напрямую (index.html ветка $product_v2
   рендерит наш product_v2.html вместо). Но на всякий случай прячем:
   - .container1 wrapper (legacy non-homepage layout)
   - legacy left_menu, breadcrumb-row, и т.д.
   Не нужно — index.html полностью бранч'уется. */

/* ════════════════════════════════════════════════════════════════════
   product-page iter-01 (2026-06-11) — PDP desktop redesign
   ────────────────────────────────────────────────────────────────────
   Codex baseline FAIL → grid 280/24/832 на homepage-системе 260/24/852,
   breadcrumbs transparent strip, secondary CTA = same blue pill,
   characteristics 10 rows вместо 5, layer rows c повторяющимся
   «Подробнее», sticky bar перекрывает footer на 71px.

   Все правила scoped через `.pdp-body`/`.pp-*` чтобы не утечь
   на homepage/catalog. Sticky hide пишется в body class.
   ──────────────────────────────────────────────────────────────────── */

/* (1) Grid 260 + 24 + content fluid (override 280 строки 102-105) */
.pp-layout {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: var(--sp-5) !important;
}

/* (2) Breadcrumbs — system block (override transparent strip 56-99) */
.v2-band--breadcrumbs { padding: var(--sp-5) 0 0; }
.v2-band--breadcrumbs .v2-container { padding-inline: var(--layout-gutter); }
.v2-band--breadcrumbs .hv2-breadcrumbs {
  min-height: 56px;
  padding: 0 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  margin-bottom: 0;
  box-sizing: border-box;
  gap: 8px;
  font: 400 13px/1.4 var(--ff-body);
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-band--breadcrumbs .hv2-breadcrumbs__item,
.v2-band--breadcrumbs .hv2-breadcrumbs__item--current {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (3) Buybox CTA hierarchy: secondary outline, primary unchanged.
   Base rule `.pp-buy .pp-buy__cta { height: 50 !important }` имеет
   specificity (0,2,0). Используем `.pp-buy .pp-buy__cta--secondary`
   = (0,2,0) + последний source — выигрывает по cascade order. */
.pp-buy .pp-buy__cta--secondary,
.pp-buy button.pp-buy__cta--secondary {
  height: 40px !important;
  background: transparent !important;
  color: var(--c-blue) !important;
  border: 1px solid var(--c-border) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  /* 2026-07-24 (Owner): убран margin-top:8px — делал зазор над «Купить в 1 клик»
     (20px) больше, чем над «Купить» (12px, flex-gap). Теперь одинаковые. */
}
.pp-buy .pp-buy__cta--secondary:hover,
.pp-buy button.pp-buy__cta--secondary:hover {
  background: var(--c-blue-light) !important;
  border-color: var(--c-blue) !important;
  color: var(--c-blue-dark) !important;
}

/* (4) Layer rows: hide repeated visible «Подробнее», keep chevron + SR text */
.pp-layer__more {
  font-size: 0;       /* убирает «Подробнее» text node, не задевая SVG */
  line-height: 0;
  gap: 0;
}
.pp-layer__more svg {
  width: 16px; height: 16px;
  color: var(--c-blue);
  flex: none;
}
/* SR-only accessible label (для пользователей screen-reader). Текст
   рендерится Smarty'ем как aria-label, но дополним visually-hidden
   span на случай если в HTML добавят span. */
.pp-layer__more .pp-sr-only,
.pp-layer__more > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* (5) Sticky guard — body class toggled от JS (initStickybarFooterGuard) */
body.pdp-sticky-hidden .pp-stickybar {
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.pp-stickybar {
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out) !important;
}

/* (6) Specs visual softening — keep collapsed compact */
.pp-spectable th,
.pp-spectable td {
  padding: 10px 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   product-page iter-01.1 (2026-06-11) — .pp-top buy column 340→276
   ────────────────────────────────────────────────────────────────────
   Codex re-audit: iter-01 принят почти весь, кроме одного — base rule
   на строке 220 оставляет `.pp-top { grid-template-columns: minmax(0,1fr) 340px }`.
   На .pp-main 852 это даёт gallery 480 + gap 32 + buy 340. Owner-target:
   buy ≈ 276 (acceptable 270-292), сетка-системная gap 24.

   Спец .pp-layout .pp-top даёт specificity (0,2,0) > base (0,1,0). Не
   нужен !important. Внутреннего сжатия buybox не требуется — все
   controls (size select, price, Kaspi, primary/secondary CTA, trust)
   умещаются в 276 без clipping.
   ──────────────────────────────────────────────────────────────────── */
/* 2026-07-28 (Owner): галерею шире (600 слишком узко), buybox влево до линии
   пункта меню «Обмен и возврат» (437px от правого края контейнера). На полном
   макете 1560 (main 1212): галерея 775 + gap 24 + buybox 413 — правый край
   галереи ровно под левым краем «Обмен и возврат». На узких ширинах пропорция
   775:413 сохраняется, buybox не уже 276. */
.pp-layout .pp-top {
  grid-template-columns: minmax(0, 775fr) minmax(276px, 413fr);
  gap: var(--sp-5);
}

/* iter-20 δ-B (2026-06-11) — блоки iter-01.2/01.3/01.4 удалены.
   Старая Bootstrap fast-order модалка (`.pp-top > [id^="fast-order-"]`)
   заменена на новую `.qo-*` модалку (qo-modal.js + qo-modal-integration.js).
   Backdrop, центрирование, видимость body — всё теперь в cart_v2.css. */

/* Сертификаты производителя — блок на PDP (pp_certificates_v2.html) */
.pp-certs { margin: 24px 0; padding: 20px 24px; background: var(--c-surface, #f6f9fb); border: 1px solid var(--c-border-soft, #e6edf2); border-radius: 12px; }
.pp-certs__title { font: 600 20px/1.3 var(--ff-body); color: var(--c-text-1, #1a1a1a); margin: 0 0 12px; }
.pp-certs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-certs__item { display: flex; align-items: center; gap: 10px; }
.pp-certs__item--extra { display: none; }
.pp-certs__item--extra.is-shown { display: flex; }
.pp-certs__ico { flex: 0 0 auto; color: var(--c-text-3, #8a9aa6); }
.pp-certs__link { color: var(--c-blue-dark, #0877A8); text-decoration: none; }
.pp-certs__link:hover { color: var(--c-orange, #ff6600); text-decoration: underline; }
.pp-certs__more { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--c-blue-dark, #0877A8); font: 500 14px/1 var(--ff-body); cursor: pointer; }
.pp-certs__more:hover { text-decoration: underline; }