/* Страница товара. Токены и базовые стили — в base.css */

/* ---------- ХЛЕБНЫЕ КРОШКИ ---------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--panel)}
.crumbs .wrap{display:flex;gap:9px;flex-wrap:wrap;height:46px;align-items:center;font-size:13.5px;color:var(--gray-2)}
.crumbs a:hover{color:var(--orange)}
.crumbs span{color:var(--muted)}

@media(max-width:640px){
  /*
   * height:46px рассчитан на одну строку. У товара крошка длинная
   * (категория/бренд/серия/название) и на мобильном переносится в
   * 2 строки — без auto-высоты и вертикального padding вторая строка
   * оказывается сжата у самого края блока. См. тот же приём в base.css.
   */
  .crumbs .wrap{height:auto;padding-top:10px;padding-bottom:10px;row-gap:4px}
}

/* ---------- ШАПКА ТОВАРА ---------- */
.head{padding:34px 0 26px}
.head-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.head h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;max-width:22ch}
.subtitle{font-size:17.5px;color:var(--gray);margin-top:12px;max-width:52ch}
.head-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--gray-2)}
.head-meta b{font-family:"IBM Plex Mono";font-weight:500;color:var(--ink)}
.reg{
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--r);
  padding:10px 15px;font-size:13.5px;font-weight:600;color:var(--ink);
  background:#EEF8F1;border:1px solid #BFE3CB;
}
.reg svg{color:var(--green);flex:none}

.stock-updated{margin-left:8px;font-weight:400;color:var(--gray-2)}

.promo{
  display:flex;align-items:flex-start;gap:10px;margin-top:14px;
  padding:12px 14px;border-radius:var(--r);
  background:var(--orange-soft);border:1px solid #EFCBB3;
  font-size:13.5px;font-weight:500;color:var(--orange-deep);
}
.promo svg{flex:none;margin-top:1px}

/* ---------- ГЛАВНЫЙ ЭКРАН ---------- */
.main{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start;padding-bottom:60px}

/* галерея */
.gal-big{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  aspect-ratio:4/3;position:relative;overflow:hidden;
}
.gal-slide{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.gal-slide.on{display:flex}
.gal-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

.gal-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.gal-thumb{
  width:84px;height:64px;padding:6px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.gal-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gal-thumb:hover{border-color:var(--gray-2)}
.gal-thumb.on{border-color:var(--orange)}
.gallery .gal-thumb{
  border:1px solid var(--line);
  box-shadow:none;
  outline:none;
}
.gallery .gal-thumb.on{
  border-color:var(--orange);
  box-shadow:inset 0 0 0 1px var(--orange);
}

/* ---------- Скриншоты и фото экрана ---------- */
/* Лента с горизонтальной прокруткой — сознательно не тот же компонент,
   что главная галерея товара: это иллюстрации внутри описания,
   не витринные фото, крупный просмотр не нужен, открывается по клику. */
.screens{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.screens__item{
  flex:none;height:180px;
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--panel);
  transition:border-color .15s;
}
.screens__item:hover{border-color:var(--gray-2)}
.screens__item img{height:100%;width:auto;display:block;object-fit:cover}

@media(max-width:640px){
  .screens__item{height:140px}
}

/* ---------- Лайтбокс ---------- */
body.lightbox-open{overflow:hidden}
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(15,16,17,.92);
  display:flex;align-items:center;justify-content:center;
  padding:56px;
}
/* [hidden] — уровень автора (display:flex выше) перебивает базовый
   UA-стиль браузера, иначе оверлей остаётся видимым несмотря на hidden. */
.lightbox[hidden]{display:none}
.lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
.lightbox__close,
.lightbox__nav{
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;margin:0;padding:0;
  position:absolute;border:0;background-color:rgba(20,21,22,.65);color:#fff;
  font-family:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background-color .15s;
}
.lightbox__close:hover,
.lightbox__nav:hover{background-color:rgba(20,21,22,.85)}
.lightbox__close{top:28px;right:28px;width:40px;height:40px;font-size:22px;line-height:1}
.lightbox__nav{top:50%;margin-top:-24px;width:48px;height:48px;font-size:30px;line-height:1}
.lightbox__nav--prev{left:28px}
.lightbox__nav--next{right:28px}

@media(max-width:640px){
  .lightbox{padding:20px}
  .lightbox__close{top:14px;right:14px}
  .lightbox__nav{width:40px;height:40px;font-size:24px}
  .lightbox__nav--prev{left:8px}
  .lightbox__nav--next{right:8px}
}

/* ключевые параметры под галереей */
.key{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:28px}
.key div{background:#fff;padding:18px 18px 16px}
.key dt{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.key dd{margin:0;font-family:"IBM Plex Mono";font-size:19px;font-weight:600;letter-spacing:-.02em}

/* панель покупки */
.buy{border:1px solid var(--line);border-radius:var(--r);position:sticky;top:20px;overflow:hidden}
.buy-price{padding:24px 24px 20px;border-bottom:1px solid var(--line-2)}
.price{font-family:"IBM Plex Mono";font-size:31px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.price-note{font-size:13px;color:var(--muted);margin-top:6px}
.stock{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--green);margin-top:16px}
.stock i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.buy-acts{padding:20px 24px 22px;display:grid;gap:10px}
.buy-list{border-top:1px solid var(--line-2);padding:20px 24px;display:grid;gap:13px;font-size:14px;color:var(--gray)}
.buy-list div{display:flex;gap:11px;align-items:flex-start}
.buy-list svg{color:var(--orange);flex:none;margin-top:4px}
.mgr{border-top:1px solid var(--line-2);background:var(--panel);padding:20px 24px;display:flex;gap:14px;align-items:center}
/*
 * Не через display:grid/place-items — тот же приём Astra ломает центровку
 * (см. «Грабли с Astra» в CLAUDE.md, там же .c-ico). Текст здесь без
 * обёртки, поэтому не абсолютным позиционированием, а простым
 * line-height = высоте круга + text-align:center — центрирование одной
 * строки текста, не зависящее от display вообще.
 */
.mgr-ava{width:46px;height:46px;border-radius:50%;background:var(--graphite);color:#fff;
  line-height:46px;text-align:center;font-weight:600;flex:none}
.mgr b{display:block;font-size:14.5px}
.mgr span{display:block;font-size:13px;color:var(--gray-2)}
.mgr a{display:block;font-size:14px;color:var(--orange);margin-top:3px}

/* ---------- СЕКЦИИ ---------- */
.sec{padding:52px 0;border-top:1px solid var(--line)}
.sec h2{font-size:25px;letter-spacing:-.025em;margin-bottom:24px}
.sec-lead{color:var(--gray);max-width:64ch;margin:-14px 0 26px}

/* таблица характеристик */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.spec-group{margin-bottom:30px;break-inside:avoid}
.spec-group h3{font-size:14px;font-weight:600;color:var(--orange);margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.spec-group dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0;font-size:14.5px}
.spec-group dt{padding:9px 0;color:var(--gray-2);border-bottom:1px dashed var(--line)}
.spec-group dd{padding:9px 0;margin:0;text-align:right;font-family:"IBM Plex Mono";font-size:14px;
  border-bottom:1px dashed var(--line)}

/* комплект */
.kit{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;list-style:none;padding:0;margin:0}
.kit li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.kit svg{color:var(--orange);flex:none;margin-top:5px}
.kit span{margin-left:auto;font-family:"IBM Plex Mono";font-size:13.5px;color:var(--muted)}

/* документы */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.doc{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;gap:14px;align-items:flex-start}
.doc:hover{border-color:var(--orange)}
.doc svg{color:var(--orange);flex:none}
.doc b{display:block;font-size:15px;font-weight:600}
.doc span{display:block;font-size:13px;color:var(--muted);margin-top:4px}

/* поверка */
.verify{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.verify div{background:#fff;padding:24px}
.verify h3{font-size:17px;margin-bottom:9px}
.verify p{font-size:14.5px;color:var(--gray)}

/* аналоги */
.alt{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.alt-c{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.alt-c:hover{border-color:var(--gray-2)}
.alt-c.this{border-color:var(--orange);background:var(--orange-soft)}
.alt-tag{font-size:12px;color:var(--muted);margin-bottom:9px}
.alt-c.this .alt-tag{color:var(--orange-deep)}
.alt-c h3,
.alt-c .alt-title{font-size:18px;font-weight:600;margin:0}
.alt-c dl{display:grid;grid-template-columns:1fr auto;margin:14px 0 0;font-size:13.5px}
.alt-c dt{padding:5px 0;color:var(--gray-2)}
.alt-c dd{padding:5px 0;margin:0;text-align:right;font-family:"IBM Plex Mono";font-size:13px}
.alt-p{margin-top:auto;padding-top:16px;font-family:"IBM Plex Mono";font-size:18px;font-weight:600}

/* описание */
.about{display:grid;grid-template-columns:1fr;gap:56px;align-items:start}
.about:has(.about-box){grid-template-columns:1fr 340px}
.about p{margin-bottom:15px;color:var(--gray);font-size:16px}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--ink);font-weight:600}
.about-box{border-left:2px solid var(--orange);padding-left:20px}
.about-box h3{font-size:16px;margin-bottom:10px}
.about-box p{font-size:14.5px;margin-bottom:10px}

/* развёрнутый текст */
.long{max-width:74ch}
.long h3{font-size:19px;margin:28px 0 12px}
.long h3:first-child{margin-top:0}
.long p{color:var(--gray);margin-bottom:14px}
.long ul{color:var(--gray);padding-left:20px;margin:0 0 14px}
.long li{margin-bottom:7px}

/* низ */
.foot-cta{background:var(--graphite);color:#fff;padding:48px 0}
.foot-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.foot-cta h2{font-size:26px;color:#fff;margin:0}
.foot-cta p{color:rgba(255,255,255,.7);margin-top:10px;max-width:52ch}

@media(max-width:1100px){
  .main,.about{grid-template-columns:1fr;gap:32px}
  .buy{position:static}
  .specs,.kit{grid-template-columns:1fr;gap:0}
  .docs,.verify,.alt{grid-template-columns:1fr}
  .key{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .key{grid-template-columns:1fr}
  .gal-big{height:280px}
  .sec{padding:40px 0}
}

/* ---------- Стилизация штатной формы WooCommerce ---------- */
.buy-acts form.cart{margin:0;display:grid;gap:10px}
.buy-acts form.cart .quantity{display:none} /* приборы берут поштучно */
.buy-acts button.single_add_to_cart_button{
  width:100%;height:50px;background:var(--orange);color:#fff;border:0;
  border-radius:var(--r);font-family:inherit;font-weight:500;font-size:15px;cursor:pointer;
}
.buy-acts button.single_add_to_cart_button:hover,
.buy-acts button.single_add_to_cart_button:focus,
.buy-acts button.single_add_to_cart_button:active{background:var(--orange-deep);color:#fff}

/* Та же причина, что и у single_add_to_cart_button выше: это <button>,
   не <a>, и глобальный hover WooCommerce для button побеждает базовый
   .btn-ghost:hover по специфичности — красим явно и специфичнее. */
.buy-acts button.btn-ghost.js-quote-open:hover,
.buy-acts button.btn-ghost.js-quote-open:focus,
.buy-acts button.btn-ghost.js-quote-open:active{
  background:#fff;color:var(--ink);border-color:var(--gray-2);
}
.stock--o{color:var(--gray-2)}
.woocommerce-notices-wrapper .woocommerce-message{
  border-top-color:var(--orange);
}
.key{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.buy-acts .ast-stock-detail{display:none}

/* ---------- Документация ---------- */
.docs-groups{display:grid;gap:32px}
.docs-group__title{
  font-size:14px;font-weight:600;color:var(--orange);
  margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.docs-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.docs-link{
  display:flex;align-items:center;gap:16px;
  padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:border-color .15s;
}
.docs-link:hover{border-color:var(--orange)}
.docs-icon{width:24px;height:24px;color:var(--orange);flex:none}
.docs-icon svg{width:100%;height:100%}
.docs-body{flex:1;min-width:0}
.docs-title{display:block;font-size:15.5px;font-weight:500}
.docs-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:13px;color:var(--muted)}
.docs-badge{
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:1px 7px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--gray-2);
}
.docs-action{width:20px;height:20px;color:var(--muted);flex:none}
.docs-action svg{width:100%;height:100%}
.docs-link:hover .docs-action{color:var(--orange)}
.docs-note{margin-top:22px;font-size:14.5px;color:var(--gray-2)}
.docs-note a{color:var(--orange);border-bottom:1px solid rgba(217,103,60,.3)}

/* ---------- Комплект поставки ---------- */
.pack{display:grid;gap:26px}
.pack__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.pack__title{font-size:14px;font-weight:600;color:var(--orange);margin:0}
.pack__group--request .pack__title,
.pack__group--verification .pack__title{color:var(--gray)}
.pack__note{font-size:13px;color:var(--muted)}
.pack__list{list-style:none;margin:0;padding:0;columns:2;column-gap:56px}
.pack__list li{padding:8px 0 8px 24px;position:relative;font-size:15px;break-inside:avoid}
.pack__list li::before{
  content:"";position:absolute;left:2px;top:16px;
  width:7px;height:7px;border-radius:50%;background:var(--orange);
}
.pack__group--request .pack__list li::before,
.pack__group--verification .pack__list li::before{background:var(--muted)}
.pack__footer{margin-top:8px;font-size:13.5px;color:var(--muted);max-width:70ch}

@media(max-width:800px){
  .pack__list{columns:1}
}

/* ---------- Пробники и аксессуары ---------- */
.acc__group{margin-bottom:28px}
.acc__group:last-child{margin-bottom:0}
.acc__title{font-size:14px;font-weight:600;color:var(--orange);margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.acc__list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.acc__card{
  display:flex;align-items:center;gap:14px;padding:12px;
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .15s;
}
.acc__card:hover{border-color:var(--gray-2)}
.acc__img{
  width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border-radius:calc(var(--r) - 1px);overflow:hidden;
}
.acc__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.acc__body{flex:1;min-width:0}
.acc__name{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.acc__sku{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);margin-top:3px}
.acc__price{flex:none;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}

@media(max-width:1100px){
  .acc__list{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .acc__list{grid-template-columns:1fr}
}