/* ===== Site search: header button, instant panel, /search/ page ===== */

/* header button — same shape as the call button, visible at every width */
.header-search{
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--h-fg) 24%, transparent);
  background: transparent; color: var(--h-fg); cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.header-search svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.header-search:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  .header-search:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
}
@media (max-width: 480px){
  .header-search{ width: 38px; height: 38px; }
}
/* phones narrower than 400px: logo + search + call + CTA + menu only fit with the short CTA label */
.header-cta .cta-short{ display: none; }
@media (max-width: 399px){
  .header-actions{ gap: 6px; }
  .header-cta .cta-long{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-cta .cta-short{ display: inline; }
  .header-actions .header-cta{ padding: 10px 12px; }
}
@media (max-width: 345px){
  .header-actions .header-cta{ display: none; }
}
/* narrow desktops: keep the phone number from pushing the menu */
@media (min-width: 1181px) and (max-width: 1320px){
  .header-actions{ gap: 10px; }
  .header-phone{ font-size: 13.5px; }
}

/* ---- request list («Список для КП»): shown by rfq.js only while the list is not empty ---- */
.header-rfq{
  position: relative; display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--h-fg) 24%, transparent);
  color: var(--h-fg); transition: background-color .25s, border-color .25s, color .25s;
}
.header-rfq[hidden], .nav-extra-rfq[hidden]{ display: none; }
.header-rfq svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.header-rfq b{
  position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  font: 700 11px/1 var(--font-body); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--h-bg, transparent);
}
.header-rfq:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.header-rfq.is-bump b, .nav-extra-rfq.is-bump b{ animation: rfq-bump .5s var(--ease); }
@keyframes rfq-bump{ 40%{ transform: scale(1.35); } }
@media (hover: hover) and (pointer: fine){
  .header-rfq:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
  .header-rfq:hover b{ background: var(--ink); }
}
/* phones: the header has no room for one more button — the link sits in the menu instead */
.nav-extra-rfq{ display: none; }
@media (max-width: 1180px){
  .nav-extra-rfq{
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 14px 18px;
    border-radius: 16px; border: 1px solid rgba(255,255,255,.18); color: #fff; font: 600 16px/1.2 var(--font-display);
  }
  .nav-extra-rfq b{ min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); font: 700 13px/1 var(--font-body); }
}
@media (max-width: 599px){
  .header-rfq{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .header-rfq.is-bump b, .nav-extra-rfq.is-bump b{ animation: none; }
}

/* ---- panel ---- */
body.ss-open{ overflow: hidden; }
.ss{ position: fixed; inset: 0; z-index: 300; }
.ss-backdrop{
  position: absolute; inset: 0; background: rgba(10,10,12,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.ss-panel{
  position: relative; margin: clamp(12px, 9vh, 96px) auto 0; width: min(760px, calc(100% - 32px));
  max-height: calc(100svh - clamp(12px, 9vh, 96px) - 24px); display: flex; flex-direction: column;
  background: #fff; color: var(--ink); border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.12);
  opacity: 0; transform: translateY(-10px) scale(.985);
  transition: opacity .22s ease, transform .35s var(--ease);
}
.ss.is-open .ss-backdrop{ opacity: 1; }
.ss.is-open .ss-panel{ opacity: 1; transform: none; }

.ss-form{ display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 22px; border-bottom: 1px solid rgba(10,10,12,.08); flex: none; }
.ss-ico{ flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.ss-input{
  flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--ink);
  font: 500 clamp(17px, 2.2vw, 21px)/1.2 var(--font-body); letter-spacing: -.01em;
}
.ss-input::placeholder{ color: #9a9ba0; }
.ss-input:focus{ outline: none; }
.ss-input::-webkit-search-cancel-button{ display: none; }
.ss-close{
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 0; border-radius: 10px; background: rgba(10,10,12,.05); color: var(--muted-2); cursor: pointer;
  font: 600 12px/1 var(--font-body);
}
.ss-close svg{ display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ss-close:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.ss-body{ flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 14px; }
.ss-label{
  display: flex; align-items: center; gap: 8px; margin: 14px 12px 6px;
  font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink);
}
.ss-label span{ padding: 3px 7px; border-radius: 999px; background: rgba(250,90,32,.1); letter-spacing: 0; }
.ss-note{ margin: 10px 12px 0; font-size: 13.5px; color: var(--muted); }

.ss-item{
  display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 14px; color: var(--ink);
  transition: background-color .15s;
}
.ss-item.is-active{ background: rgba(250,90,32,.08); box-shadow: inset 3px 0 0 var(--accent); }
@media (hover: hover) and (pointer: fine){ .ss-item:hover{ background: rgba(10,10,12,.04); } }
.ss-item:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.ss-thumb{
  flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #efeeea;
  display: grid; place-items: center;
}
.ss-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ss-thumb.is-product{ background: #fff; border: 1px solid rgba(10,10,12,.08); }
.ss-thumb.is-product img{ object-fit: contain; padding: 4px; }
.ss-thumb.is-empty{ background: var(--ink); color: var(--accent-2); font: 700 13px/1 'Unbounded', var(--font-display); }
.ss-text{ min-width: 0; display: grid; gap: 3px; }
.ss-title{ font: 600 15px/1.3 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-desc{ font-size: 13px; line-height: 1.4; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss mark, .srp mark{ background: none; color: var(--accent-ink); font-weight: 700; }

.ss-more{ display: block; margin: 4px 12px 0; padding: 8px 0; font: 600 13.5px/1.3 var(--font-display); color: var(--accent-ink); }
.ss-none{ padding: 18px 12px 8px; font-size: 14.5px; line-height: 1.55; color: var(--muted-2); }
.ss-none p{ margin: 0 0 8px; }
.ss-none b{ color: var(--ink); }
.ss-none a, .ss-note a{ color: var(--accent-ink); font-weight: 600; }

.ss-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 4px; }
.ss-chip{
  height: 36px; padding: 0 14px; border: 1px solid rgba(10,10,12,.12); border-radius: 999px; background: #fff;
  font: 600 13.5px/1 var(--font-body); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
}
.ss-chip:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){ .ss-chip:hover{ border-color: var(--accent); color: var(--accent-ink); background: rgba(250,90,32,.05); } }
.ss-sections{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; padding: 0 2px; }
.ss-sec{
  display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 12px;
  font: 600 14.5px/1.2 var(--font-display); color: var(--ink);
}
.ss-sec span{ color: var(--accent); transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine){ .ss-sec:hover{ background: rgba(10,10,12,.04); } .ss-sec:hover span{ transform: translateX(3px); } }

.ss-foot{
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px; border-top: 1px solid rgba(10,10,12,.08); background: #faf9f7; font-size: 12.5px; color: var(--muted);
}
.ss-hints b{ display: inline-block; min-width: 22px; margin: 0 2px; padding: 3px 5px; border-radius: 6px; background: #fff; border: 1px solid rgba(10,10,12,.12); font: 600 11px/1 var(--font-body); text-align: center; color: var(--muted-2); }
.ss-all{ margin-left: auto; font: 600 14px/1 var(--font-display); color: var(--accent-ink); white-space: nowrap; }
.ss-all[hidden]{ display: none; }

/* phones: the panel takes the whole screen, input on top */
@media (max-width: 760px){
  .ss-panel{ margin: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .ss-form{ padding: 10px 10px 10px 18px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .ss-input{ font-size: 17px; }
  .ss-close{ width: 44px; height: 44px; padding: 0; justify-content: center; background: transparent; }
  .ss-close .ss-kbd{ display: none; }
  .ss-close svg{ display: block; width: 22px; height: 22px; }
  .ss-hints{ display: none; }
  .ss-foot:has(.ss-all[hidden]){ display: none; }
  .ss-foot{ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ss-sections{ grid-template-columns: minmax(0, 1fr); }
  .ss-title, .ss-desc{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ss-item{ align-items: flex-start; }
}

/* ---- /search/ page ---- */
.srp-form{ margin-top: clamp(24px, 4vh, 40px); }
.srp-count{ margin: 0 0 8px; font-size: 15px; color: var(--muted-2); }
.srp-group{ margin-top: clamp(28px, 4vh, 44px); }
.srp-h{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 clamp(20px, 2vw, 24px)/1.2 var(--font-display); color: var(--ink); }
.srp-h span{ padding: 4px 9px; border-radius: 999px; background: rgba(250,90,32,.1); color: var(--accent-ink); font: 700 12px/1 var(--font-body); }
.srp-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.srp-item{
  display: flex; gap: 18px; align-items: flex-start; padding: 14px; border-radius: 18px; background: #fff; color: var(--ink);
  border: 1px solid rgba(10,10,12,.06); transition: border-color .2s, box-shadow .3s;
}
.srp-item:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){ .srp-item:hover{ border-color: rgba(250,90,32,.4); box-shadow: 0 18px 40px -26px rgba(0,0,0,.35); } }
.srp-thumb{ flex: none; width: 112px; height: 84px; border-radius: 12px; overflow: hidden; background: #efeeea; display: grid; place-items: center; }
.srp-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.srp-thumb.is-empty{ background: var(--ink); color: var(--accent-2); font: 700 18px/1 'Unbounded', var(--font-display); }
.srp-text{ min-width: 0; display: grid; gap: 5px; }
.srp-title{ font: 600 17px/1.3 var(--font-display); }
.srp-desc{ font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.srp-url{ font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.srp-smc-all{ margin-top: 16px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; height: auto; }
@media (max-width: 560px){
  .srp-item{ gap: 12px; padding: 12px; }
  .srp-thumb{ width: 72px; height: 60px; }
  .srp-title{ font-size: 15.5px; }
  .srp-desc{ font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce){
  .ss-backdrop, .ss-panel{ transition: none; }
  .ss-panel{ transform: none; }
}

.bk.srp{ padding-top: clamp(24px, 4vh, 40px); min-height: 60vh; }

/* Cookie consent (js/consent.js, 2026-10-23): a small dark card bottom-left, away from the catalogue's floating buttons on the right */
.ck{ position: fixed; z-index: 250; left: clamp(14px, 2.4vw, 30px); bottom: calc(clamp(14px, 2.4vw, 30px) + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100vw - 28px));
  display: grid; gap: 14px; padding: 18px 18px 18px 20px; border-radius: 20px; background: #131316; color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  font: 400 14px/1.5 var(--font-body); opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.ck.is-on{ opacity: 1; transform: none; }
.ck-text{ margin: 0; }
.ck-text a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.ck-acts{ display: flex; flex-wrap: wrap; gap: 10px; }
.ck-acts button{ height: 42px; padding: 0 20px; border-radius: 999px; font: 600 14px/1 var(--font-display); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ck-yes{ border: 0; background: var(--accent); color: #fff; }
.ck-no{ border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; }
.ck-acts button:focus-visible, .ck-text a:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  .ck-yes:hover{ background: var(--accent-2); }
  .ck-no:hover{ border-color: rgba(255,255,255,.55); }
  .ck-text a:hover{ text-decoration-color: #fff; }
}
@media (max-width: 560px){
  .ck{ left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 16px; gap: 12px; font-size: 13.5px; border-radius: 18px; }
  .ck-acts button{ flex: 1; height: 44px; }
}
@media (prefers-reduced-motion: reduce){ .ck{ transition: none; transform: none; } }

/* the privacy policy page: current cookie choice and a button to change it */
.ck-set{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 28px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid rgba(10,10,12,.08); font-size: 15px; }
.ck-set b{ font-weight: 700; }
.ck-set button{ height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(10,10,12,.2); background: transparent; font: 600 13.5px/1 var(--font-display); cursor: pointer; color: var(--ink); }
.ck-set button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){ .ck-set button:hover{ border-color: var(--ink); } }