/* 25.10: catalog / product / calculator / lead form (Claude Design Catalog, Product, Calculator). Tokens from main.css. */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;padding-top:20px;font-size:14px;color:var(--ink2)}
.crumbs a{color:var(--ink2)}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;padding:12px 0 28px;flex-wrap:wrap}
.pagehead__lead{max-width:720px;text-wrap:pretty;margin-top:10px}
.h1{font-size:clamp(28px,1.4vw + 22px,40px);line-height:1.1;letter-spacing:-.01em;text-wrap:pretty}
.h3{font-size:20px;margin:24px 0 10px}
.sec__lead{max-width:720px;margin:8px 0 24px}
.linkbtn{border:0;background:none;color:var(--link);text-decoration:underline;cursor:pointer;font-size:14px;padding:4px}
.box{border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px}
.box--soft{background:var(--bg2);border:0}

/* catalog */
.subcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.subcat{height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.subcat:hover{border-color:var(--ink);text-decoration:none}
.subcat span{font-weight:400;color:var(--ink2)}
.catalog{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.filters{display:flex;flex-direction:column;gap:20px;position:sticky;top:16px}
.filters__head{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.filters__group{border:0;border-top:1px solid var(--line);margin:0;padding:16px 0 0;display:flex;flex-direction:column;gap:6px}
.filters__group legend{font-weight:600;font-size:15px;padding:16px 0 4px;float:left;width:100%}
.check{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;min-height:32px}
.check input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin:0}
.check span{flex:1}
.check small{font-size:13px;color:var(--ink2)}
.filters__help{background:var(--bg2);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.filters__help .muted{font-size:14px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:20px;font-size:15px}
.toolbar__sort{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid3 .pcard[hidden],.grid3 .banner[hidden]{display:none}
.pcard:hover{box-shadow:var(--shadow)}
.pcard__img{display:block;height:200px}
.pcard__badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.pcard__badges .pcard__badge{position:static}
.pcard__badge--dark{background:var(--btn-dark)!important;color:var(--btn-dark-ink)!important}
.pcard__price small{display:block;font-size:13px;font-weight:400;color:var(--ink2);margin-top:2px}
.pcard__latin{font-size:13px;font-style:italic;color:var(--ink2)}
.banner{grid-column:1/-1;background:var(--dark);color:var(--dark-ink);border-radius:16px;padding:28px 32px;display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap}
.banner>div{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.banner span{color:var(--dark-ink2);font-size:15px}
.banner__t{font-size:22px}
.empty{border:1px dashed var(--line);border-radius:16px;padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px}
.empty[hidden]{display:none}
.empty b{font-size:22px}
.empty__btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.catalog__h2{margin:56px 0 20px;scroll-margin-top:16px}
.seo--side,.seo--aside{display:grid;grid-template-columns:2fr 1fr;gap:64px}
.seo__side{display:flex;flex-direction:column;gap:12px}

/* product */
.product{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:56px;align-items:start;padding-top:20px}
.gallery-p{display:flex;flex-direction:column;gap:12px}
.gallery-p__main{height:520px;border-radius:16px;overflow:hidden;background:var(--ph1)}
.gallery-p__img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-p__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery-p__thumb{height:96px;border-radius:12px;border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;background:var(--ph1)}
.gallery-p__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-p__thumb.is-on{border-color:var(--ink)}
.product__info{display:flex;flex-direction:column;gap:16px}
.product__lead{text-wrap:pretty}
.tags--lg{font-size:13px;font-weight:600}
.tags--lg span{padding:4px 8px}
.tags .tag-dark{background:var(--btn-dark);color:var(--btn-dark-ink)}
.buy{background:var(--bg2);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px}
.buy__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buy__price b{font-size:28px;line-height:1.1}
.buy__price span{font-size:15px}
.buy__row{display:flex;gap:8px;flex-wrap:wrap}
.buy__main{flex:1;min-width:180px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--card);height:52px;flex:none}
.qty button{width:44px;height:100%;border:0;background:transparent;font-size:20px;color:var(--ink);cursor:pointer}
.qty input{width:56px;border:0;background:transparent;text-align:center;font:600 16px "Golos Text",system-ui,sans-serif;color:var(--ink);outline:none}
.qty span{font-size:14px;color:var(--ink2);margin-right:4px}
.buy__meta{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:14px}
.buy__meta a{text-decoration:underline}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.facts li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.facts b{font-size:17px;line-height:1.2}
.facts span{font-size:13px}
.facts__note{font-size:13px}
.duo--plain{align-items:start}
.cbar--lg{height:28px;border-radius:8px;margin:16px 0}
.comp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.comp li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:16px}
.comp a{font-weight:600;color:var(--ink);text-decoration:underline}
.comp__sw{width:14px;height:14px;border-radius:4px;flex:none;display:inline-block}
.comp__role{font-size:14px}
.comp__pct{margin-left:auto}
.calc--inline{gap:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{height:48px;padding:0 18px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink2);font-weight:600;font-size:16px;cursor:pointer;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{border-bottom-color:var(--ink);color:var(--ink)}
.tabpanel[hidden]{display:none}
.tabpanel{max-width:720px;padding-top:24px;display:flex;flex-direction:column;gap:12px;line-height:1.65}
.posts--row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.post--row{flex-direction:row;align-items:center;gap:16px}
.post--row .post__ph{width:120px;height:90px;flex:none;border-radius:12px}
.post--row>span:last-child{display:flex;flex-direction:column;gap:4px}

/* calculator page */
.calcpage{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:16px;align-items:stretch}
.calcpage__steps{background:var(--bg2);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:24px}
.step{display:flex;flex-direction:column;gap:10px}
.step__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.step__t{font-weight:600;font-size:18px}
.step__err{font-size:14px;color:#B3261E}
[data-theme="night"] .step__err{color:#FF8A80}
.step__note{font-size:14px}
.seg-pill{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:3px}
.seg-pill button{height:36px;padding:0 12px;border-radius:6px;border:0;background:transparent;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.seg-pill button.is-on{background:var(--btn-dark);color:var(--btn-dark-ink)}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink2)}
.field input,.field textarea{height:48px;border:1px solid var(--line);border-radius:8px;padding:0 14px;font:inherit;font-size:16px;background:var(--bg);color:var(--ink);width:100%}
.field textarea{height:auto;padding:10px 14px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:transparent}
.field--big input{height:56px;font-size:22px;font-weight:600;background:var(--card)}
.field input.is-err{border-color:#B3261E}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sides[hidden],[data-bc-one][hidden]{display:none}
.typegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.typegrid--3{grid-template-columns:repeat(3,1fr)}
.typebtn{min-height:60px;padding:10px 12px;border-radius:8px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px}
.typebtn:hover{border-color:var(--ink2)}
.typebtn.is-on{border-color:var(--ink);background:var(--card)}
.typebtn b{font-size:15px}
.typebtn small{font-size:12px;color:var(--ink2)}
.result{background:var(--dark);color:var(--dark-ink);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.result [hidden]{display:none}
.result>div{display:flex;flex-direction:column;gap:16px;flex:1}
.result__kg{font-size:56px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.result__kg--empty{opacity:.4;font-size:40px}
.result__formula{font-size:15px;color:var(--dark-ink2)}
.result__rows{border-top:1px solid var(--dark-line);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.result__rows div{display:flex;justify-content:space-between;gap:12px;font-size:16px}
.result__rows b{font-size:20px;font-variant-numeric:tabular-nums}
.result__btns{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.result__btns .btn--accent{flex:1}
.result__hint,.result__empty p{font-size:13px;color:var(--dark-ink2)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;position:relative}   /* relative: absolute .sr inside must not widen the page */
.norms{border-collapse:collapse;width:100%;font-size:16px;min-width:640px}
.norms th,.norms td{padding:12px 20px;text-align:left;border-top:1px solid var(--line);font-weight:400}
.norms thead th{font-size:13px;color:var(--ink2);background:var(--bg2);border-top:0}
.norms tbody th a{font-weight:600;color:var(--ink)}
.norms td{font-variant-numeric:tabular-nums}

/* lead form + modal + toast */
.lead{display:flex;flex-direction:column;gap:14px}
.lead__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lead__sum{background:var(--bg2);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;font-size:15px}
.lead__sum[hidden]{display:none}
.lead .check{font-size:13px;color:var(--ink2);align-items:flex-start}
.lead .check a{text-decoration:underline}
.lead__note{font-size:13px;color:var(--ink2);text-align:center}
.modal{border:0;border-radius:16px;padding:28px;width:460px;max-width:calc(100% - 32px);background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.modal::backdrop{background:rgba(14,25,18,.55)}
.modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:22px}
.modal__x{width:40px;height:40px;border:0;background:var(--bg2);border-radius:8px;font-size:18px;cursor:pointer;color:var(--ink)}
.toast{position:fixed;top:16px;right:16px;z-index:60;max-width:calc(100% - 32px);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);font-size:15px}
.toast[hidden]{display:none}
.toast--ok{background:var(--btn-dark);color:var(--btn-dark-ink)}
.toast--err{background:#B3261E;color:#fff}
.toast button{border:0;background:transparent;color:inherit;font-size:16px;cursor:pointer;width:32px;height:32px}
.zayavka{padding-top:12px}
.zayavka .h1{margin-bottom:10px}
.zayavka .lead{margin-top:20px;max-width:520px}

/* tablet */
@media (max-width:1100px){
  .catalog{grid-template-columns:1fr;gap:24px}
  .filters{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px}
  .filters__head,.filters__help{grid-column:1/-1}
  .filters__help{flex-direction:row;align-items:center;flex-wrap:wrap}
  .product{grid-template-columns:1fr;gap:32px}
  .gallery-p__main{height:420px}
  .calcpage{grid-template-columns:1fr}
  .seo--side,.seo--aside{grid-template-columns:1fr;gap:24px}
}
@media (max-width:860px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .typegrid{grid-template-columns:repeat(2,1fr)}
  .posts--row{grid-template-columns:1fr}
}
/* phone */
@media (max-width:640px){
  .filters{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .subcats{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none}
  .subcats::-webkit-scrollbar{display:none}
  .banner{padding:24px}
  .banner .btn{width:100%}
  .gallery-p__main{height:280px}
  .gallery-p__thumb{height:64px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .buy__row .qty{width:100%;justify-content:space-between}
  .buy__row .btn{width:100%}
  .calcpage__steps,.result{padding:20px}
  .result__kg{font-size:44px}
  .typegrid--3{grid-template-columns:1fr 1fr 1fr}
  .typegrid--3 .typebtn{padding:8px}
  .sides{grid-template-columns:1fr 1fr}
  .modal{padding:20px}
}