/* Product catalogue: /catalog/festo, series, product card, request list.
   Loaded on top of style.css + site.css (series page also loads pneu.css for the hero and calculator). */

.vh{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-shop-product main, .page-shop-series main, .page-shop-request main, .page-shop-hub main, .page-shop-group main{ --line: rgba(10,10,12,.09); --card: #fff; }

/* ------------------------------------------------------------ product: top */
.sp-top{ background: var(--paper); padding: calc(76px + clamp(18px, 3.4vh, 34px)) 0 clamp(28px, 5vh, 52px); }
.sp-top .crumbs li{ color: var(--muted); }
.sp-top .crumbs a{ color: var(--muted); }
.sp-top .crumbs a:hover{ color: var(--ink); }
.sp-top .crumbs [aria-current]{ color: var(--ink); overflow-wrap: anywhere; }
.sp-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(22px, 3.4vw, 56px); align-items: start; }

.sp-stage{ position: relative; border-radius: 28px; background: var(--card); border: 1px solid var(--line); min-height: clamp(300px, 46vh, 470px);
  display: grid; overflow: hidden; }
.sp-tabs{ position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.sp-tabs button{ padding: 8px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 13.5px/1 var(--font-display); color: var(--muted-2); transition: background .25s, color .25s; }
.sp-tabs button[aria-selected="true"]{ background: var(--ink); color: #fff; }
.sp-tabs[hidden], .sp-tabs button[hidden]{ display: none; }
.sp-tabs button.is-out::after{ content: "↗"; margin-left: 5px; color: var(--accent); }
.sp-pane{ grid-area: 1 / 1; display: grid; place-items: center; padding: 68px 28px 30px; min-width: 0; }
.sp-pane[hidden]{ display: none; }
.sp-pane.is-on{ animation: sp-pane .5s var(--ease) backwards; }
@keyframes sp-pane{ from{ opacity: 0; transform: scale(.97); } }
.sp-pane-photo{ grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding-bottom: 18px; }
/* the picture fills a box of fixed height, so tall and wide photos both stay inside the stage */
.sp-shot{ position: relative; display: block; width: 100%; height: clamp(230px, 36vh, 380px); padding: 0; border: 0; background: none; cursor: zoom-in; }
.sp-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.sp-photo.is-swap{ opacity: 0; }
.sp-thumbs{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sp-thumbs button{ position: relative; display: block; width: 60px; height: 60px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color .2s, transform .3s var(--ease); }
.sp-thumbs img{ position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: contain; }
.sp-thumbs button[aria-current="true"]{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sp-x{ position: absolute; right: 16px; top: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.sp-x[hidden]{ display: none; }
.sp-nophoto{ color: var(--muted); font-size: 14px; }
.sp-pane-3d{ padding: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: stretch; }
.sp-pane-3d[hidden]{ display: none; }
.sp-3d-frame{ min-height: clamp(260px, 40vh, 420px); }
.sp-3d-frame{ position: relative; padding-top: 58px; background: #fff; }
/* «Загрузка 3D-модели…» (js/shop.js). Festo's viewer says nothing to our page about its progress, so the notice runs
   by time: first a white cover over the frame (Festo shows a white, then a blue screen for half a minute), then a small
   pill at the bottom that leaves when the visitor starts turning the model or the usual loading time is over. */
.sp-3d-wait{ position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 58px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; background: #fff; text-align: center; pointer-events: none; transition: top .5s var(--ease), left .5s var(--ease), right .5s var(--ease), bottom .5s var(--ease), background .5s, box-shadow .5s, border-radius .5s, opacity .4s; }
.sp-3d-wait b{ font: 600 clamp(16px, 1.4vw, 19px)/1.25 var(--font-display); color: var(--ink); }
.sp-3d-wait b i{ font-style: normal; animation: sp-dot 1.2s infinite both; }
.sp-3d-wait b i:nth-child(2){ animation-delay: .2s; }
.sp-3d-wait b i:nth-child(3){ animation-delay: .4s; }
.sp-3d-wait > span{ font-size: 13.5px; color: var(--muted); }
.sp-3d-wait em{ display: block; width: min(240px, 60vw); height: 4px; border-radius: 4px; background: rgba(10,10,12,.08); overflow: hidden; }
.sp-3d-wait em::before{ content: ""; display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; animation: sp-wait 50s cubic-bezier(.15,.6,.3,1) both; }
.sp-3d-wait.is-gone{ opacity: 0; }
@keyframes sp-dot{ 0%, 20%{ opacity: .15; } 50%{ opacity: 1; } 100%{ opacity: .15; } }
@keyframes sp-wait{ from{ transform: scaleX(0); } to{ transform: scaleX(.94); } }
@media (prefers-reduced-motion: reduce){ .sp-3d-wait b i{ animation: none; } .sp-3d-wait em::before{ animation: none; transform: scaleX(.5); } .sp-3d-wait{ transition: none; } }
/* the 3D pane while the model loads in the background before the tab is opened: laid out off screen, not hidden,
   so that the viewer inside starts with a real size */
.sp-pane-3d.is-pre[hidden]{ display: grid; position: fixed; left: -10000px; top: 0; width: 900px; height: 620px; pointer-events: none; }
.sp-3d-frame iframe{ position: relative; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.sp-3d-bar{ position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 16px; padding: 9px 12px 9px 18px; border-top: 1px solid var(--line); background: rgba(255,255,255,.86); font-size: 12.5px; color: var(--muted); }
.sp-3d-bar span{ flex: 1 1 120px; min-width: 0; }
.sp-3d-bar button, .sp-3d-bar a{ border: 0; background: none; padding: 0; cursor: pointer; font: 600 12.5px/1.2 var(--font-display); color: var(--ink); border-bottom: 1px solid rgba(10,10,12,.22); }
.sp-3d-bar [hidden]{ display: none; }
.sp-3d-bar .sp-3d-full{ flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; }
.sp-3d-full i{ width: 12px; height: 12px; background:
  linear-gradient(var(--ink), var(--ink)) 0 0 / 5px 1.6px, linear-gradient(var(--ink), var(--ink)) 0 0 / 1.6px 5px,
  linear-gradient(var(--ink), var(--ink)) 100% 100% / 5px 1.6px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1.6px 5px; background-repeat: no-repeat; }
.sp-stage.is-full{ position: fixed; inset: 0; z-index: 1000; border-radius: 0; border: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.sp-stage.is-full .sp-pane{ min-height: 0; }
.sp-stage.is-full .sp-shot{ height: 100%; max-width: 1100px; max-height: 1056px; margin: auto; cursor: zoom-out; }
.sp-stage.is-full .sp-pane-photo{ padding-top: 76px; }
.sp-stage.is-full .sp-3d-bar{ padding: 12px 18px; font-size: 14px; }
.sp-stage.is-full .sp-3d-full{ width: 40px; height: 40px; background: var(--ink); border-color: var(--ink); }
.sp-stage.is-full .sp-3d-full i{ filter: invert(1); transform: rotate(180deg); }
.sp-stage.is-full .sp-3d-frame{ min-height: 0; }
html.sp-lock{ overflow: hidden; }

.sp-kicker{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 13px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.sp-kicker b{ padding: 5px 10px; border-radius: 6px; background: var(--ink); color: #fff; letter-spacing: .14em; }
.sp-h1{ margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(27px, 3.3vw, 50px); line-height: 1.04; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.sp-ids{ margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13.5px; color: var(--muted-2); }
.sp-art{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font: 500 14px/1 var(--font-body); color: var(--ink); transition: border-color .2s; }
.sp-art b{ font: 600 13px/1 'Unbounded', var(--font-display); letter-spacing: .02em; }
.sp-art i{ width: 13px; height: 13px; border: 1.6px solid var(--muted); border-radius: 3px; box-shadow: 3px -3px 0 -1.4px var(--card), 3px -3px 0 0 var(--muted); margin: 3px 3px 0 0; transition: border-color .2s; }
.sp-art.is-done{ border-color: var(--accent); }
.sp-art.is-done i{ border-color: var(--accent); box-shadow: none; border-width: 0 2px 2px 0; border-radius: 0; width: 6px; height: 11px; transform: rotate(45deg); margin: 0 6px 3px 3px; }
/* a type Festo is discontinuing */
.sp-disc{ margin-top: 16px; display: grid; gap: 4px; padding: 12px 16px; border-radius: 14px; background: #fff4e2; border: 1px solid #f0c98a; font-size: 14.5px; line-height: 1.45; color: #5c3b06; }
.sp-disc b{ font: 600 15px/1.2 var(--font-display); color: #7a4a00; }
.sp-disc a{ font-weight: 600; color: var(--accent-ink); border-bottom: 1px solid currentColor; white-space: nowrap; }
.ss-disc{ display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #fff4e2; border: 1px solid #f0c98a; font: 600 11px/1.3 var(--font-body); font-style: normal; color: #7a4a00; white-space: nowrap; vertical-align: 1px; }
.ss-disc-note{ color: #7a4a00; }
.sp-orig{ display: inline-flex; align-items: center; gap: 7px; }
.sp-orig::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sp-lead{ margin-top: 18px; max-width: 62ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--muted-2); text-wrap: pretty; }
.sp-key{ margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.sp-key-few{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); max-width: 420px; }
.sp-key div{ display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--card); min-width: 0; }
/* an incomplete last row: the last tile stretches, so no empty grey cell is left */
.sp-key:not(.sp-key-few) div:last-child:nth-child(3n+2){ grid-column: span 2; }
.sp-key:not(.sp-key-few) div:last-child:nth-child(3n+1){ grid-column: span 3; }
.sp-key dt{ font-size: 12.5px; color: var(--muted); }
.sp-key dd{ margin: 0; font: 600 clamp(15px, 1.25vw, 18px)/1.15 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sp-buy{ margin-top: 20px; }
.sp-price{ margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; }
.sp-price b{ font: 700 clamp(24px, 2.4vw, 34px)/1 'Unbounded', var(--font-display); }
.sp-price span{ font-size: 13px; color: var(--muted); }
.sp-terms{ margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 56ch; }

/* add-to-request button */
.rq-buy{ display: inline-flex; align-items: center; gap: 10px; }
.rq-buy-big{ display: flex; flex-wrap: wrap; }
.rq-qty{ display: inline-flex; align-items: center; height: 54px; border-radius: 999px; border: 1px solid rgba(10,10,12,.16); background: var(--card); }
.rq-qty button{ width: 44px; height: 100%; border: 0; background: none; cursor: pointer; font: 500 20px/1 var(--font-display); color: var(--ink); border-radius: 999px; }
.rq-qty input{ width: 52px; border: 0; background: none; text-align: center; font: 600 16px/1 var(--font-display); color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.rq-qty input::-webkit-outer-spin-button, .rq-qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.rq-qty input:focus{ outline: none; }
.rq-qty:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,90,32,.18); }
.rq-add{ position: relative; display: inline-grid; place-items: center; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(10,10,12,.18); background: none; cursor: pointer;
  font: 600 13.5px/1 var(--font-display); color: var(--ink); white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease); }
.rq-add > span{ grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--ease); }
.rq-add-0::before{ content: "+"; margin-right: 7px; color: var(--accent); font-weight: 700; }
.rq-add-1{ opacity: 0; transform: translateY(8px); }
.rq-add-1::before{ content: ""; display: inline-block; width: 5px; height: 9px; margin: 0 9px 1px 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rq-add.is-in{ background: var(--ink); border-color: var(--ink); color: #fff; }
.rq-add.is-in .rq-add-0{ opacity: 0; transform: translateY(-8px); }
.rq-add.is-in .rq-add-1{ opacity: 1; transform: none; }
.rq-add:active{ transform: scale(.96); }
.rq-buy-big .rq-add{ height: 54px; padding: 0 30px; font-size: 15.5px; background: var(--accent); border-color: var(--accent); color: #fff; flex: 1 1 220px; max-width: 320px; }
.rq-buy-big .rq-add-0::before{ color: #fff; }
.rq-buy-big .rq-add.is-in{ background: var(--ink); border-color: var(--ink); }

/* floating link to the list + toast */
.rq-fab{ position: fixed; right: clamp(14px, 2.4vw, 30px); bottom: clamp(14px, 2.4vw, 30px); z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 14.5px/1 var(--font-display); box-shadow: 0 14px 34px -12px rgba(10,10,12,.55); animation: rq-fab .6s var(--ease) backwards; }
.rq-fab[hidden]{ display: none; }
.rq-fab b{ min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); font: 700 13px/1 'Unbounded', var(--font-display); }
.rq-fab.is-bump b{ animation: rq-bump .5s var(--ease); }
@keyframes rq-fab{ from{ opacity: 0; transform: translateY(24px); } }
@keyframes rq-bump{ 40%{ transform: scale(1.28); } }
.rq-toast{ position: fixed; left: 50%; bottom: clamp(18px, 3vw, 34px); z-index: 61; transform: translateX(-50%); max-width: min(92vw, 520px); padding: 13px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14.5px; line-height: 1.4;
  box-shadow: 0 14px 34px -12px rgba(10,10,12,.55); animation: rq-toast .45s var(--ease) backwards; }
.rq-toast[hidden]{ display: none; }
.rq-toast a{ color: var(--accent-2); border-bottom: 1px solid currentColor; margin-left: 8px; white-space: nowrap; }
@keyframes rq-toast{ from{ opacity: 0; transform: translate(-50%, 18px); } }

/* variants */
.sp-vars{ margin-top: clamp(22px, 3.4vh, 36px); padding: 8px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.sp-var{ display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 18px; align-items: start; padding: 13px 0; }
.sp-var + .sp-var{ border-top: 1px solid var(--line); }
.sp-var > p{ padding-top: 8px; font: 600 13.5px/1.3 var(--font-display); color: var(--muted-2); }
.sp-var ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-var a, .sp-var li > span{ display: block; min-width: 46px; padding: 8px 13px; border-radius: 10px; border: 1px solid rgba(10,10,12,.14); text-align: center; font: 600 14px/1.15 var(--font-display); transition: border-color .2s, background .2s, color .2s, transform .3s var(--ease); }
.sp-var .is-on{ background: var(--ink); border-color: var(--ink); color: #fff; }
.sp-var .is-off{ border-style: dashed; color: rgba(10,10,12,.3); }
.sp-fits{ margin-top: 20px; font-size: 15px; color: var(--muted-2); }
.sp-fits a{ color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); }

/* in-page nav */
.sp-nav{ position: sticky; top: 76px; z-index: 30; background: rgba(246,245,242,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-nav .wrap{ display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sp-nav .wrap::-webkit-scrollbar{ display: none; }
.sp-nav a{ flex: none; padding: 15px 14px; font: 600 14px/1 var(--font-display); color: var(--muted-2); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.sp-nav a:first-child{ padding-left: 0; }
.sp-nav a.is-on{ color: var(--ink); border-color: var(--accent); }

/* ------------------------------------------------------- product: sections */
.sp-sec{ padding: clamp(52px, 8vh, 96px) 0; scroll-margin-top: 120px; }
.sp-head{ max-width: 860px; margin-bottom: clamp(22px, 3.4vh, 36px); }
.sp-h2{ font-family: var(--font-display); font-weight: 700; font-size: clamp(25px, 2.8vw, 42px); line-height: 1.06; letter-spacing: -0.03em; overflow-wrap: anywhere; text-wrap: balance; }
.sp-sub{ margin-top: 12px; max-width: 64ch; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.55; color: var(--muted-2); }
.sp-text{ margin-top: 18px; max-width: 76ch; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.65; color: var(--muted-2); }
.sp-source{ margin-top: 22px; font-size: 12.5px; color: var(--muted); }
.sp-empty{ padding: 22px 24px; border-radius: 18px; background: var(--card); border: 1px dashed rgba(10,10,12,.2); color: var(--muted-2); max-width: 720px; }

/* type code */
.sp-code{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sp-code li{ position: relative; padding: 18px 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .25s; }
.sp-code li::after{ content: "–"; position: absolute; right: -9px; top: 22px; font: 700 18px/1 var(--font-display); color: rgba(10,10,12,.22); }
.sp-code li:last-child::after{ content: none; }
.sp-code b{ display: block; font: 700 clamp(19px, 1.9vw, 26px)/1 'Unbounded', var(--font-display); letter-spacing: -0.02em; color: var(--accent-ink); }
.sp-code span{ display: block; margin-top: 12px; font: 600 12px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sp-code p{ margin-top: 6px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
.rvg.is-visible + .sp-code li{ animation: rv-up .8s var(--ease) calc(var(--i) * .06s) backwards; }

/* specs */
.sp-specs{ columns: 2; column-gap: 16px; }
.sp-spec{ break-inside: avoid; margin-bottom: 16px; padding: 20px 24px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.sp-spec h3{ font: 700 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.sp-spec dl{ margin: 10px 0 0; }
.sp-spec dl div{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 18px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.sp-spec dt{ color: var(--muted-2); }
.sp-spec dd{ margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* dimensions + drawing */
.sp-dims{ max-width: 760px; }
.sp-dimtab, .ss-table{ width: 100%; border-collapse: collapse; background: var(--card); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); font-size: 14.5px; }
.sp-dimtab th, .sp-dimtab td{ padding: 10px 14px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.35; }
.sp-dimtab thead th{ border-top: 0; font: 600 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sp-dimtab tbody th{ font: 700 14px/1.35 var(--font-display); color: var(--accent-ink); white-space: nowrap; }
.sp-dimtab td:last-child{ font-weight: 600; white-space: nowrap; text-align: right; }
.sp-dimtab td:nth-child(2){ color: var(--muted-2); }

/* accessories */
.sp-acc-tabs{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sp-acc-tabs button{ padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(10,10,12,.14); background: none; cursor: pointer; font: 600 14px/1 var(--font-display); color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.sp-acc-tabs button i{ font-style: normal; margin-left: 5px; color: var(--muted); }
.sp-acc-tabs button[aria-selected="true"]{ background: var(--ink); border-color: var(--ink); color: #fff; }
.sp-acc-tabs button[aria-selected="true"] i{ color: rgba(255,255,255,.6); }
.sp-acc-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-acc-list[hidden]{ display: none; }
.sp-acc-list li{ display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img name btn" "img art btn"; column-gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  animation: rv-up .5s var(--ease) backwards; transition: border-color .25s, transform .4s var(--ease); }
.sp-acc-img{ grid-area: img; width: 64px; height: 64px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.sp-acc-img{ position: relative; }
.sp-acc-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sp-acc-name{ grid-area: name; align-self: end; min-width: 0; }
.sp-acc-name b{ display: block; font: 600 15px/1.2 var(--font-display); overflow-wrap: anywhere; }
.sp-acc-name span{ display: block; margin-top: 2px; font-size: 13px; color: var(--muted-2); }
.sp-acc-art{ grid-area: art; align-self: start; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.sp-acc-list .rq-buy{ grid-area: btn; }

/* documents */
.sp-docs{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-doc{ display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .4s var(--ease); }
.sp-doc b{ flex: none; min-width: 48px; height: 48px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; font: 800 11px/1 'Unbounded', var(--font-display); }
.sp-doc-series b{ background: var(--ink); }
.sp-doc span{ flex: 1; min-width: 0; font: 600 15px/1.25 var(--font-display); }
.sp-doc small{ display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--font-body); color: var(--muted); }
.sp-doc i{ font-style: normal; color: var(--accent); font-size: 18px; transition: transform .35s var(--ease); }

/* ----------------------------------------------------------------- series */
.ss-filter{ padding: 8px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.ss-f{ display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 18px; align-items: start; padding: 13px 0; }
.ss-f + .ss-f{ border-top: 1px solid var(--line); }
.ss-f > p{ padding-top: 8px; font: 600 13.5px/1.3 var(--font-display); color: var(--muted-2); }
.ss-f > div{ display: flex; flex-wrap: wrap; gap: 6px; }
.ss-filter label{ position: relative; cursor: pointer; }
.ss-filter input{ position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ss-filter label span{ display: block; min-width: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(10,10,12,.14); text-align: center; font: 600 14px/1.15 var(--font-display); transition: background .2s, color .2s, border-color .2s; }
.ss-filter input:checked + span{ background: var(--ink); border-color: var(--ink); color: #fff; }
.ss-filter input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-count{ margin: 20px 2px 12px; font-size: 15px; color: var(--muted-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ss-count b{ font: 700 20px/1 'Unbounded', var(--font-display); color: var(--ink); }
.ss-reset{ margin-left: 10px; border: 0; background: none; padding: 0; cursor: pointer; font: 600 14px var(--font-display); color: var(--accent-ink); border-bottom: 1px solid currentColor; }
.ss-reset[hidden]{ display: none; }
.ss-tablewrap{ position: relative; overflow-x: auto; border-radius: 20px; }
.ss-table th, .ss-table td{ padding: 11px 14px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; }
.ss-table td.ss-c{ white-space: normal; min-width: 7em; }
.ss-table thead th{ white-space: normal; }
.sp-h1-long{ font-size: clamp(24px, 2.7vw, 36px); overflow-wrap: anywhere; }
.ss-table thead th{ border-top: 0; font: 600 12px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--card); }
.ss-table td:first-child a{ font: 600 15px/1.2 var(--font-display); border-bottom: 1px solid rgba(10,10,12,.18); transition: color .2s, border-color .2s; }
.ss-table tr[hidden]{ display: none; }
.ss-table tbody tr{ transition: background .2s; }
.ss-act{ text-align: right; width: 1%; }
.ss-more{ margin-top: 16px; text-align: center; }
.ss-more [hidden]{ display: none; }
.ss-none{ margin-top: 14px; padding: 20px 22px; border-radius: 18px; background: var(--card); border: 1px dashed rgba(10,10,12,.2); color: var(--muted-2); }
.ss-none[hidden]{ display: none; }
.ss-none a{ color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); }
.ss-about{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.ss-feats{ margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ss-feats li{ position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; }
.ss-feats li::before{ content: ""; position: absolute; left: 0; top: .52em; width: 9px; height: 2px; background: var(--accent); }
.ss-docs{ grid-template-columns: 1fr; }
.ss-byd b{ font: 700 15px 'Unbounded', var(--font-display); }

/* -------------------------------------------------------------------- hub */
.sh-hero{ padding-bottom: clamp(40px, 7vh, 80px); overflow: visible; z-index: 2; }
.sh-hero .ph-bg{ overflow: hidden; }
.sh-hero-wrap{ position: relative; }
.sh-search{ position: relative; margin-top: 28px; display: flex; gap: 8px; max-width: 640px; padding: 7px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); transition: border-color .25s, box-shadow .25s; }
.sh-search:focus-within{ border-color: rgba(250,90,32,.7); box-shadow: 0 0 0 4px rgba(250,90,32,.18); }
.sh-search input{ flex: 1; min-width: 0; padding: 0 18px; border: 0; background: none; color: #fff; font: 500 16px var(--font-body); }
.sh-search input:focus{ outline: none; }
.sh-search input::placeholder{ color: rgba(255,255,255,.4); }
.sh-sug{ position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; list-style: none; margin: 0; padding: 6px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); max-height: 340px; overflow: auto; }
.sh-sug[hidden]{ display: none; }
.sh-sug a{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 14px; border-radius: 12px; }
.sh-sug a b{ font: 600 15px/1.2 var(--font-display); overflow-wrap: anywhere; }
.sh-sug a span{ grid-column: 1; font-size: 13px; color: var(--muted-2); }
.sh-sug a i{ grid-area: 1 / 2 / 3 / 3; align-self: center; font-style: normal; font-size: 13px; color: var(--muted); }
.sh-sug a.is-on, .sh-sug a:focus{ background: var(--paper); outline: none; }
.sh-sug li.sh-sug-none{ padding: 12px 14px; font-size: 14px; color: var(--muted-2); }
.sh-sug li.sh-sug-note{ padding: 8px 14px 6px; font-size: 12.5px; color: var(--muted); }
.sh-sug li.sh-sug-label{ padding: 10px 14px 4px; font: 600 11.5px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.sh-sug a.sh-sug-page i{ font-size: 16px; color: var(--accent-ink); }
.sh-search .btn svg{ display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* the hub: a low strip instead of a full-height hero — the name and one line on the left, the search on the right */
.sh-hero-slim{ padding: calc(76px + clamp(18px, 3vh, 30px)) 0 clamp(22px, 3.6vh, 36px); }
.sh-hero-slim .sh-hero-wrap{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 18px clamp(28px, 5vw, 80px); align-items: end; }
.sh-hero-slim .ph-h1{ margin-top: 12px; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
.sh-hero-slim .ph-h1 em{ display: inline; }
.sh-hero-slim .ph-lead{ margin-top: 10px; max-width: 50ch; font-size: 15px; line-height: 1.5; }
.sh-hero-slim .sh-search{ margin: 0 0 2px; max-width: none; animation: ph-rise .9s var(--ease) .16s backwards; }      /* no fade: often the largest thing on the first screen (LCP) */
.sh-hero-slim .sh-sug{ max-height: min(420px, 60vh); }
@media (max-width: 900px){
  .sh-hero-slim .sh-hero-wrap{ grid-template-columns: minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 760px){
  /* phones: the field and a round button with a magnifier in one row — the strip stays low */
  .sh-hero-slim{ padding: calc(76px + 14px) 0 22px; }
  .sh-hero-slim .ph-lead{ font-size: 14.5px; }
  .sh-hero-slim .sh-search{ flex-wrap: nowrap; border-radius: 999px; padding: 4px; gap: 6px; }
  /* the typed text stays 16px (a smaller one makes an iPhone zoom the page on focus); the hint inside the field is smaller */
  .sh-hero-slim .sh-search input{ flex: 1 1 auto; height: 38px; padding: 0 6px 0 14px; text-overflow: ellipsis; }
  .sh-search input::placeholder{ font-size: 14px; }
  .sh-hero-slim .sh-search .btn{ flex: none; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; }
  .sh-hero-slim .sh-search .btn span{ display: none; }
  .sh-hero-slim .sh-search .btn svg{ display: block; width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce){ .sh-hero-slim .sh-search{ animation: none; } }
.sh-hint{ margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.45); }
.sh-live{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sh-live a{ display: grid; gap: 4px; padding: 18px 20px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), border-color .25s; }
.sh-live-img{ height: 150px; display: grid; place-items: center; margin-bottom: 8px; }
.sh-live-img img{ max-height: 150px; width: auto; max-width: 100%; object-fit: contain; }
.sh-live a{ height: 100%; align-content: start; }      /* tiles of a row end on one line */
.sh-live b{ font: 700 24px/1 'Unbounded', var(--font-display); }
.sh-live span{ font-size: 14.5px; color: var(--muted-2); }
/* hub: sections that already have pages */
.sh-ready{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sh-ready a{ display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 8px 22px; align-items: center; height: 100%; padding: 22px 26px 22px 18px;
  border-radius: 26px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), border-color .25s; }
.sh-ready-img{ height: 170px; display: grid; place-items: center; }
.sh-ready-img img{ max-height: 170px; width: auto; max-width: 100%; object-fit: contain; }
.sh-ready-copy{ display: grid; gap: 8px; min-width: 0; }
.sh-ready b{ font: 600 clamp(20px, 2vw, 26px)/1.15 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sh-ready-copy > span{ font-size: 14.5px; line-height: 1.45; color: var(--muted-2); overflow-wrap: anywhere; }
.sh-ready i{ margin-top: 6px; font: 600 14px var(--font-display); font-style: normal; color: var(--accent-ink); }
/* section page */
.sg-facts{ display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 28px 0 0; }
.sg-facts div{ display: grid; gap: 4px; }
.sg-facts dt{ order: 2; font-size: 13px; color: rgba(255,255,255,.55); }
.sg-facts dd{ margin: 0; font: 700 clamp(24px, 3vw, 34px)/1 'Unbounded', var(--font-display); color: #fff; }
/* buttons of the subsections under the strip; pointing at one shows its picture */
.sg-body{ padding-top: clamp(22px, 3.4vh, 34px); }
.sg-jump{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 4vh, 40px); }
.sg-jump a{ position: relative; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: 600 14px/1.2 var(--font-display); color: var(--ink); transition: border-color .25s, color .25s; }
.sg-chip-pic{ display: none; position: absolute; left: 50%; top: calc(100% + 10px); z-index: 8; width: 190px; height: 150px; margin-left: 0; padding: 14px; border-radius: 20px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 22px 46px -18px rgba(10,10,12,.4); place-items: center; pointer-events: none; transform: translateX(-50%); }
.sg-chip-pic img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@keyframes sg-pic-in{ from{ opacity: 0; transform: translate(-50%, 8px); } }
.sg-hero .ph-h1{ overflow-wrap: anywhere; }
.sh-hero-slim.sg-hero .ph-h1{ font-size: clamp(26px, 2.5vw, 36px); line-height: 1.1; }      /* section names are long */
h2.sh-group{ scroll-margin-top: 96px; }
.sh-group{ margin: clamp(34px, 5vh, 56px) 0 16px; font: 600 clamp(20px, 2.3vw, 32px)/1.15 var(--font-display); letter-spacing: -.015em; color: var(--ink); overflow-wrap: anywhere; }
.sh-group:first-of-type{ margin-top: 0; }
.sh-live li[hidden]{ display: none; }
.sg-more{ margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  font: 600 14px/1 var(--font-display); color: var(--ink); cursor: pointer; transition: border-color .25s, color .25s; }
.sg-more span{ color: var(--accent-ink); }
/* dots on the right (the look comes from .side-dots in style.css); the labels must not run off a narrow window */
.sg-dots .sd-label{ max-width: min(320px, 60vw); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px){ .sg-dots{ display: none; } }

/* ---- the floating search button and its window */
.sh-find-fab{ position: fixed; right: clamp(14px, 2.4vw, 30px); bottom: clamp(14px, 2.4vw, 30px); z-index: 60; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 16px 34px -14px rgba(10,10,12,.6); transition: background-color .25s, transform .45s var(--ease), bottom .35s var(--ease); animation: rq-fab .5s var(--ease) backwards; }
.sh-find-fab{ border: 1px solid rgba(255,255,255,.24); }      /* stays visible over dark blocks */
.sh-find-fab[hidden]{ display: none; }
.sh-find-fab svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rq-fab:not([hidden]) ~ .sh-find-fab{ bottom: calc(clamp(14px, 2.4vw, 30px) + 66px); }      /* above the request list link */
.sh-find{ position: fixed; inset: 0; z-index: 120; display: grid; justify-items: center; align-items: start; padding: clamp(70px, 12vh, 130px) 14px 14px; background: rgba(10,10,12,.55); animation: sh-find-bg .25s ease backwards; }
.sh-find[hidden]{ display: none; }
.sh-find-box{ width: min(680px, 100%); padding: 18px; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); animation: sh-find-in .35s var(--ease) backwards; }
.sh-find-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 12px 8px; }
.sh-find-top p{ margin: 0; font: 600 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.sh-find-x{ width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: none; font-size: 22px; line-height: 1; color: var(--muted-2); cursor: pointer; }
.sh-find .sh-search{ margin: 0; max-width: none; background: var(--paper); border-color: var(--line); }
.sh-find .sh-search input{ color: var(--ink); }
.sh-find .sh-search input::placeholder{ color: var(--muted); }
.sh-find .sh-sug{ position: static; margin-top: 0; padding: 6px 0 0; box-shadow: none; border-radius: 0; max-height: min(56vh, 480px); flex-basis: 100%; }
.sh-find .sh-search{ flex-wrap: wrap; border-radius: 26px; }
.sh-find .sh-search:focus-within{ border-color: var(--line); box-shadow: none; }      /* the window itself shows where the typing goes */
.sh-find .sh-search input{ height: 46px; }
.sh-find-hint{ margin: 12px 8px 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
html.sh-find-on{ overflow: hidden; }
@keyframes sh-find-bg{ from{ opacity: 0; } }
@keyframes sh-find-in{ from{ opacity: 0; transform: translateY(-14px); } }
@media (max-width: 760px){
  .sh-find{ padding-top: 86px; }
  .sh-find-box{ padding: 14px; border-radius: 22px; }
  .sh-find .sh-search{ padding: 4px; gap: 6px; border-radius: 23px; }
  .sh-find .sh-search .btn{ flex: none; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; }
  .sh-find .sh-search .btn span{ display: none; }
  .sh-find .sh-search .btn svg{ display: block; width: 17px; height: 17px; }
  .sh-find .sh-search input{ flex: 1 1 0; height: 38px; padding: 0 6px 0 12px; }
  .sh-find-fab{ width: 50px; height: 50px; }
  .rq-fab:not([hidden]) ~ .sh-find-fab{ bottom: calc(clamp(14px, 2.4vw, 30px) + 58px); }
}
/* a series page: a low strip instead of a full-height hero */
.ss-slim{ padding: calc(76px + clamp(16px, 2.6vh, 26px)) 0 clamp(20px, 3.2vh, 32px); }
.ss-slim-wrap{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(210px, 20vw, 280px); grid-template-areas: "crumbs photo" "head photo" "lead photo" "facts photo";
  gap: 0 clamp(24px, 4vw, 64px); align-items: center; }
.ss-slim .crumbs{ grid-area: crumbs; }
.ss-slim-head{ grid-area: head; margin-top: 12px; min-width: 0; }
.ss-slim .pnh-kicker{ margin: 0 0 8px; }
.ss-slim .ph-h1{ font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ss-slim .ph-h1 em{ display: inline; }
.ss-slim-l .ph-h1{ font-size: clamp(25px, 2.5vw, 35px); }      /* long names of a series: smaller, so that the strip stays low */
.ss-slim-xl .ph-h1{ font-size: clamp(23px, 2.1vw, 30px); }
.ss-slim-lead{ grid-area: lead; margin: 10px 0 0; max-width: 84ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.68); text-wrap: pretty; }
.ss-slim-facts{ grid-area: facts; list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ss-slim-facts li{ padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-size: 13.5px; line-height: 1.2; color: rgba(255,255,255,.66); max-width: 100%; }
.ss-slim-facts b{ margin-right: 5px; font: 700 13.5px/1 'Unbounded', var(--font-display); letter-spacing: -0.01em; color: #fff; }
.ss-slim-facts .ss-slim-doc{ padding: 0; border-color: rgba(250,90,32,.55); }
.ss-slim-facts .ss-slim-doc a{ display: block; padding: 7px 12px; color: #fff; font-weight: 600; }
.ss-slim-facts .ss-slim-doc span{ color: var(--accent-2); }
.ss-slim-photo{ grid-area: photo; aspect-ratio: 3 / 2; padding: 14px; border-radius: 24px; background: #fff; display: grid; place-items: center; animation: ph-rise .9s var(--ease) .1s backwards; }
.ss-slim-photo img{ max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; }
@media (hover: hover) and (pointer: fine){ .ss-slim-facts .ss-slim-doc:hover{ background: var(--accent); border-color: var(--accent); } .ss-slim-facts .ss-slim-doc:hover span{ color: #fff; } }
@media (max-width: 760px){
  .ss-slim{ padding: calc(76px + 12px) 0 20px; }
  .ss-slim-wrap{ grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "crumbs crumbs" "head photo" "lead lead" "facts facts"; gap: 0 12px; }
  .ss-slim-photo{ aspect-ratio: 1; padding: 8px; border-radius: 16px; align-self: start; margin-top: 12px; }
  .ss-slim .ph-h1{ font-size: clamp(23px, 6.4vw, 28px); }
  .ss-slim-l .ph-h1{ font-size: clamp(19px, 5.4vw, 22px); line-height: 1.14; letter-spacing: -0.02em; }
  .ss-slim-xl .ph-h1{ font-size: clamp(17px, 4.7vw, 19px); line-height: 1.18; letter-spacing: -0.015em; }
  .ss-slim-lead{ display: none; }      /* phones: the name, the figures and the photo; the picker below says the rest */
  .ss-slim .pnh-kicker{ padding: 0; border: 0; background: none; white-space: normal; }
  .ss-slim-facts{ margin-top: 14px; gap: 6px; }
  .ss-slim-facts li{ padding: 6px 10px; font-size: 12px; }
  .ss-slim-facts b{ font-size: 12px; margin-right: 4px; }
  .ss-slim-facts .ss-slim-doc a{ padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce){ .ss-slim-photo{ animation: none; } }
.sh-secs{ list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.sh-secs li{ break-inside: avoid; display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.sh-secs b{ font: 600 14px 'Unbounded', var(--font-display); color: var(--muted-2); }

/* ----------------------------------------------------------- request page */
.rq-page{ min-height: 100svh; }
.rq-h1{ margin-top: 6px; }
.rq-lead{ margin-top: 14px; }
.rq-grid{ margin-top: clamp(22px, 3.6vh, 38px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); gap: clamp(18px, 2.6vw, 36px); align-items: start; }
.rq-empty{ padding: 26px; border-radius: 22px; background: var(--card); border: 1px dashed rgba(10,10,12,.2); display: grid; gap: 14px; justify-items: start; color: var(--muted-2); }
.rq-empty[hidden]{ display: none; }
.rq-empty b{ color: var(--ink); }
.rq-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rq-item{ display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); animation: rv-up .45s var(--ease) backwards; }
.rq-item.is-out{ transition: opacity .25s, transform .3s var(--ease); opacity: 0; transform: translateX(24px); }
.rq-item-img{ width: 60px; height: 60px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--paper); font: 700 11px 'Unbounded', var(--font-display); color: var(--muted); }
.rq-item-img img{ max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.rq-item-name{ min-width: 0; }
.rq-item-name a, .rq-item-name b{ font: 600 15px/1.25 var(--font-display); overflow-wrap: anywhere; }
.rq-item-name a{ border-bottom: 1px solid rgba(10,10,12,.18); }
.rq-item-name span{ display: block; margin-top: 3px; font-size: 13px; color: var(--muted-2); }
.rq-item-name .rq-free{ color: var(--accent-ink); }
.rq-item .rq-qty{ height: 42px; }
.rq-item .rq-qty button{ width: 36px; }
.rq-item .rq-qty input{ width: 44px; font-size: 15px; }
.rq-del{ width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; transition: background .2s, color .2s; }
.rq-tools{ margin: 14px 2px 0; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; font-size: 14.5px; color: var(--muted-2); }
.rq-tools[hidden]{ display: none; }
.rq-tools b{ font: 700 17px 'Unbounded', var(--font-display); color: var(--ink); }
.rq-tools span:first-child{ margin-right: auto; }
.rq-tools button{ border: 0; background: none; padding: 0; cursor: pointer; font: 600 14px var(--font-display); color: var(--ink); border-bottom: 1px solid rgba(10,10,12,.25); }
.rq-paste{ margin-top: 22px; padding: 18px 22px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.rq-paste summary{ cursor: pointer; font: 600 17px var(--font-display); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.rq-paste summary::-webkit-details-marker{ display: none; }
.rq-paste summary::after{ content: "+"; font-size: 22px; color: var(--accent); transition: transform .3s var(--ease); }
.rq-paste[open] summary::after{ transform: rotate(45deg); }
.rq-paste p{ margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.rq-paste textarea{ display: block; width: 100%; margin: 12px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(10,10,12,.16); background: var(--paper); font: 500 14.5px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--ink); resize: vertical; }
.rq-paste textarea:focus, .rq-form input:focus, .rq-form textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,90,32,.18); }
.rq-paste-res:empty{ display: none; }
.rq-form{ position: sticky; top: 100px; display: grid; gap: 12px; padding: 24px; border-radius: 24px; background: var(--ink); color: #fff; }
.rq-form-title{ font: 700 20px/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 4px; }
.rq-form label{ font-size: 13px; color: rgba(255,255,255,.7); }
.rq-form input[type="text"], .rq-form input[type="tel"], .rq-form input[type="email"], .rq-form textarea{ width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font: 500 15px var(--font-body); resize: none; }
.rq-form input::placeholder, .rq-form textarea::placeholder{ color: rgba(255,255,255,.32); }
.rq-form .field-check{ display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.rq-form .field-check input{ margin-top: 2px; accent-color: var(--accent); }
.rq-form .field-check a{ color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.rq-form .is-bad{ border-color: #ff6b5e !important; }
.rq-form-note{ font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.8); }
.rq-form-note:empty{ display: none; }
.rq-form-note a{ color: var(--accent-2); border-bottom: 1px solid currentColor; }
.rq-direct{ font-size: 13px; color: rgba(255,255,255,.55); }
.rq-form button[disabled]{ opacity: .6; cursor: progress; }
/* hidden field: people never see it, form-filling robots fill it in (the server then sets the request aside) */
.rq-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* after sending: the fields give way to the confirmation */
.rq-form.is-done > :not(.rq-done){ display: none; }
.rq-done{ display: grid; gap: 14px; justify-items: start; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.78); outline: none; animation: rq-done-in .5s var(--ease) backwards; }
.rq-done[hidden]{ display: none; }
.rq-done b{ color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.rq-done a:not(.btn){ color: #fff; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.35); }
.rq-done-mark{ width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); }
.rq-done-mark svg{ width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rq-done-title{ font: 700 24px/1.2 var(--font-display); letter-spacing: -0.01em; color: #fff; }
.rq-done-title b{ font-family: var(--font-display); font-weight: 700; }
.rq-done-back{ margin-top: 4px; color: #fff; border-color: rgba(255,255,255,.3); }
/* the positions that were sent, under the confirmation (2026-10-18) */
.rq-done-list{ width: 100%; }
.rq-done-list:empty{ display: none; }
.rq-done-k{ font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.55); }
.rq-done-list ol{ list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.rq-done-list li{ display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.rq-done-list li b{ font-family: var(--font-display); font-weight: 600; }
.rq-done-list li span{ font-size: 12.5px; color: rgba(255,255,255,.5); }
.rq-done-list li i{ margin-left: auto; font-style: normal; font-weight: 600; color: #fff; white-space: nowrap; }
.rq-done-more{ margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.55); }
@keyframes rq-done-in{ from{ opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce){ .rq-done{ animation: none; } }
.rq-direct a{ color: #fff; white-space: nowrap; }

/* ------------------------------------------------------------------ hover */
@media (hover: hover) and (pointer: fine){
  .sp-tabs button:not([aria-selected="true"]):hover{ color: var(--ink); }
  .sp-thumbs button:hover{ border-color: rgba(250,90,32,.6); transform: translateY(-2px); }
  .sp-3d-bar button:hover, .sp-3d-bar a:hover{ color: var(--accent-ink); border-color: var(--accent); }
  .sp-art:hover{ border-color: rgba(10,10,12,.3); }
  .rq-add:hover{ border-color: var(--accent); color: var(--accent-ink); }
  .rq-add.is-in:hover{ color: #fff; border-color: var(--ink); }
  .rq-buy-big .rq-add:hover{ background: var(--accent-2); border-color: var(--accent-2); color: #fff; transform: translateY(-2px); }
  .rq-buy-big .rq-add.is-in:hover{ background: var(--ink); border-color: var(--ink); }
  .rq-qty button:hover{ color: var(--accent); }
  .sp-var a:hover{ border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
  .sp-nav a:hover{ color: var(--ink); }
  .sp-code li:hover{ transform: translateY(-4px); border-color: rgba(250,90,32,.5); }
  .sp-acc-list li:hover, .sp-doc:hover, .sh-live a:hover, .sh-ready a:hover{ border-color: rgba(250,90,32,.5); transform: translateY(-2px); }
  .sg-jump a:hover, .sg-more:hover{ border-color: rgba(250,90,32,.7); color: var(--accent-ink); }
  .sg-jump a:hover .sg-chip-pic{ display: grid; animation: sg-pic-in .3s var(--ease) backwards; }
  .sh-find-fab:hover{ background: var(--accent); transform: translateY(-2px); }
  .sh-find-x:hover{ border-color: var(--accent); color: var(--accent-ink); }
  .sp-doc:hover i{ transform: translateX(3px); }
  .sp-acc-tabs button:not([aria-selected="true"]):hover, .ss-filter label:hover input:not(:checked) + span{ border-color: var(--accent); }
  .ss-table tbody tr:hover{ background: rgba(250,90,32,.05); }
  .ss-table td:first-child a:hover{ color: var(--accent-ink); border-color: var(--accent); }
  .rq-del:hover{ background: var(--paper); color: var(--ink); }
  .rq-tools button:hover, .rq-fab:hover{ color: var(--accent-2); }
  .rq-tools button:hover{ color: var(--accent-ink); }
  .sh-sug a:hover{ background: var(--paper); }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px){
  .sp-grid, .ss-about, .rq-grid{ grid-template-columns: minmax(0, 1fr); }
  .sp-specs{ columns: 1; }
  .sp-docs{ grid-template-columns: minmax(0, 1fr); }
  .sp-acc-list{ grid-template-columns: minmax(0, 1fr); }
  .rq-form{ position: static; }
  .sp-var{ grid-template-columns: minmax(0, 1fr); }
  .sp-var > p{ padding-top: 0; }
  .ss-f{ grid-template-columns: minmax(0, 1fr); }
  .ss-f > p{ padding-top: 0; }
}
@media (max-width: 700px){
  .sp-stage{ border-radius: 22px; min-height: 280px; }
  .sp-pane{ padding: 62px 16px 22px; }
  .sp-shot{ height: clamp(200px, 30vh, 280px); }
  .sp-thumbs{ gap: 6px; }
  .sp-thumbs button{ width: 44px; height: 44px; border-radius: 10px; }
  .sp-thumbs img{ inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .sp-key{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-key:not(.sp-key-few) div:last-child:nth-child(3n+2), .sp-key:not(.sp-key-few) div:last-child:nth-child(3n+1){ grid-column: auto; }
  .sp-key:not(.sp-key-few) div:last-child:nth-child(odd){ grid-column: span 2; }
  .sp-vars{ padding: 6px 16px; }
  .sp-var ul{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .sp-var ul::-webkit-scrollbar{ display: none; }
  .sp-var li{ flex: none; }
  .sp-code{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-code li::after{ content: none; }
  .sp-spec{ padding: 18px 18px 8px; }
  .sp-spec dl div{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sp-acc-list li{ grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; padding-right: 10px; }
  .sp-acc-img{ width: 52px; height: 52px; }
  .rq-buy-big .rq-add{ max-width: none; }
  .sh-secs{ columns: 1; }
  .sh-ready{ grid-template-columns: 1fr; }
  .sh-ready a{ grid-template-columns: 104px minmax(0, 1fr); padding: 16px 18px 16px 12px; gap: 6px 14px; border-radius: 22px; }
  .sh-ready-img, .sh-ready-img img{ height: 104px; max-height: 104px; }
  .sh-search{ border-radius: 22px; flex-wrap: wrap; }
  .sh-search input{ flex-basis: 100%; height: 46px; }
  .sh-search .btn{ flex: 1; }
  /* tables turn into cards */
  .ss-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ss-table, .ss-table tbody{ display: block; background: none; border: 0; }
  .ss-table tr{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 14px 16px; margin-bottom: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
  .ss-table tr[hidden]{ display: none; }
  .ss-table td{ display: block; padding: 0; border: 0; white-space: normal; font-size: 14px; }
  .ss-table td[data-label]::before{ content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); }
  .ss-table td:first-child{ grid-column: 1 / -1; }
  .ss-table td:first-child::before{ content: none; }
  .ss-table .ss-act{ grid-column: 1 / -1; width: auto; text-align: left; margin-top: 6px; }
  .rq-item{ grid-template-columns: 48px minmax(0, 1fr) auto; }
  .rq-item-img{ width: 48px; height: 48px; }
  .rq-item .rq-qty{ grid-column: 2; justify-self: start; }
  .rq-del{ grid-area: 1 / 3; }
  .rq-form{ padding: 20px 18px; }
  .rq-fab span{ display: none; }
  .rq-fab{ padding: 6px; }
}

@media (prefers-reduced-motion: reduce){
  .sh-find, .sh-find-box, .sh-find-fab, .sg-chip-pic{ animation: none !important; }
  .sp-photo, .sp-thumbs button, .sp-pane.is-on, .rq-fab, .rq-toast, .sp-acc-list li, .rq-item, .rvg.is-visible + .sp-code li, .rq-fab.is-bump b{ animation: none; }
  .rq-add, .rq-add > span, .sp-var a, .sp-code li, .sp-doc, .sp-doc i, .rq-item.is-out{ transition: none; }
}
/* series tiles on phones: two in a row */
@media (max-width: 700px){
  .sh-live{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sh-live a{ padding: 12px 12px 14px; border-radius: 16px; height: 100%; align-content: start; }
  .sh-live-img{ height: 96px; margin-bottom: 6px; }
  .sh-live-img img{ max-height: 96px; }
  .sh-live b{ font-size: 16px; overflow-wrap: anywhere; }
  .sh-live span{ font-size: 12.5px; line-height: 1.35; }
  .sh-live i{ margin-top: 6px; font-size: 12.5px; }
  .sg-jump{ flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding-right: 18px; scrollbar-width: none; }
  .sg-jump a{ white-space: nowrap; }
}

/* ---------------------------------------------------------- configurator of a configurable product (shop-config.html) */
.cf-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; }
.cf-form .ss-f > div{ align-items: center; }
.cf-f label span i{ margin-left: 6px; font: 700 11px/1 'Unbounded', var(--font-display); font-style: normal; letter-spacing: .02em; color: var(--accent-ink); }
.cf-f input:checked + span i{ color: rgba(255,255,255,.75); }
.cf-f label.is-off{ cursor: not-allowed; }
.cf-f label.is-off span{ opacity: .38; border-style: dashed; }
.cf-f label.is-swap span{ border-style: dashed; }
.cf-num{ display: inline-flex; align-items: center; gap: 8px; }
.cf-form .cf-num input{ position: static; opacity: 1; cursor: text; }      /* .ss-filter hides its radio inputs */
.cf-num input{ width: 112px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(10,10,12,.2); background: #fff; font: 600 16px/1 var(--font-display); color: var(--ink); }
.cf-num input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,90,32,.18); }
.cf-num i{ font-style: normal; font-size: 13.5px; color: var(--muted-2); }
.cf-chips{ display: flex; flex-wrap: wrap; gap: 5px; }
.cf-chip{ padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(10,10,12,.12); background: none; font: 600 12.5px/1 var(--font-display); color: var(--muted-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.cf-chip.is-on{ background: var(--ink); border-color: var(--ink); color: #fff; }
.cf-hint{ flex-basis: 100%; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cf-out{ position: sticky; top: 96px; display: grid; gap: 12px; padding: 22px 22px 20px; border-radius: 24px; background: var(--ink); color: #fff; box-shadow: 0 30px 60px -36px rgba(10,10,12,.7); }
.cf-out-k{ font: 600 11.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.cf-code{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.cf-code span{ font: 700 clamp(19px, 1.7vw, 24px)/1.2 'Unbounded', var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cf-out.is-bad .cf-code span{ color: #ff9b7a; text-decoration: line-through; text-decoration-thickness: 1px; }
.cf-copy{ padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: none; color: rgba(255,255,255,.8); font: 600 12px/1 var(--font-display); cursor: pointer; }
.cf-mod{ font-size: 13.5px; color: rgba(255,255,255,.65); }
.cf-mod b{ color: #fff; font-weight: 700; }
.cf-sum{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.cf-sum li{ display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; line-height: 1.35; }
.cf-sum span{ color: rgba(255,255,255,.55); }
.cf-sum b{ font-weight: 600; }
.cf-msg{ display: grid; gap: 6px; }
.cf-msg:empty{ display: none; }
.cf-msg p{ padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.cf-m-bad{ background: rgba(250,90,32,.18); color: #ffc2ad; }
.cf-m-done{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.cf-m-note{ background: rgba(255,208,26,.1); color: #ffe7a0; }
.cf-std{ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.75); }
.cf-std a{ color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.cf-out .rq-buy-big{ gap: 8px; }
.cf-out .rq-qty{ background: #fff; height: 50px; }
.cf-out .rq-buy-big .rq-add{ height: 50px; max-width: none; }
.cf-out .rq-add:disabled{ opacity: .35; cursor: not-allowed; }
.cf-src{ font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.5); }
.cf-bar{ position: fixed; left: 12px; right: 78px; bottom: 14px; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px;
  border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 16px 34px -14px rgba(10,10,12,.6); }
.cf-bar[hidden]{ display: none; }
.cf-bar span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.2 'Unbounded', var(--font-display); }
.cf-bar a{ flex: none; padding: 8px 12px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 13px/1 var(--font-display); }
.cf-parts th[scope="rowgroup"]{ width: 26%; vertical-align: top; text-align: left; font: 600 13.5px/1.3 var(--font-display); color: var(--muted-2); background: rgba(10,10,12,.02); }
.cf-parts td b{ font: 700 13px/1 'Unbounded', var(--font-display); white-space: nowrap; }
.cf-rules{ display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px clamp(28px, 5vw, 72px); align-items: start; }
.cf-rule-list{ list-style: none; margin: 0; padding: 0; counter-reset: cfr; }
.cf-rule-list li{ position: relative; padding: 10px 0 10px 34px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; counter-increment: cfr; }
.cf-rule-list li::before{ content: counter(cfr); position: absolute; left: 0; top: 11px; font: 700 12px/1.4 'Unbounded', var(--font-display); color: var(--accent-ink); }
.cf-notes li::before{ content: "!"; }
.cf-notes-t{ margin: 22px 0 6px; font: 600 13.5px/1.3 var(--font-display); color: var(--muted-2); }
@media (hover: hover) and (pointer: fine){
  .cf-chip:hover{ border-color: var(--ink); color: var(--ink); }
  .cf-chip.is-on:hover{ color: #fff; }
  .cf-copy:hover{ border-color: #fff; color: #fff; }
}
@media (max-width: 1000px){
  .cf-grid{ grid-template-columns: minmax(0, 1fr); }
  .cf-out{ position: static; }
  .cf-rules{ grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1001px){ .cf-bar{ display: none !important; } }
@media (max-width: 760px){
  .cf-num input{ width: 96px; }
  .cf-parts th[scope="rowgroup"]{ width: auto; }
}
.ss-config{ margin-top: 14px; }
.ss-config a{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(250,90,32,.45); background: rgba(250,90,32,.06);
  font: 600 14px/1.25 var(--font-display); color: var(--accent-ink); transition: background .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine){ .ss-config a:hover{ background: rgba(250,90,32,.12); border-color: var(--accent); } }

/* prices and stock: shown only when switched on in the owner's panel (js/shop.js asks /api/prices) */
.sp-price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.sp-price b{ font: 700 clamp(22px, 2vw, 28px)/1.1 'Unbounded', var(--font-display); letter-spacing: -.01em; }
.sp-price > span:not(.sp-stock){ font-size: 13.5px; color: var(--muted-2); }
.sp-stock{ display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font: 600 13px/1.2 var(--font-display); color: var(--muted-2); }
.sp-stock::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c9c7c1; }
.sp-stock.is-in{ color: #1d6b3a; border-color: rgba(29,107,58,.3); }
.sp-stock.is-in::before{ background: #2aa55a; }
.ss-price{ display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted-2); font-weight: 500; }

/* iPhone, Safari, Yandex Browser: the model opens in a window of its own, the pane explains and holds the button */
.sp-3d-out{ position: absolute; inset: 58px 0 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 20px 24px; text-align: center; }
.sp-3d-out b{ font: 600 clamp(16px, 1.4vw, 19px)/1.25 var(--font-display); color: var(--ink); }
.sp-3d-out span{ font-size: 14px; color: var(--muted-2); max-width: 380px; }
.sp-3d-open{ margin-top: 4px; padding: 13px 22px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 14.5px/1 var(--font-display); cursor: pointer; }
.sp-3d-out small{ max-width: 380px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* near the end of the page the floating buttons rise above the footer's «Наверх» row (js/shop.js sets --fab-lift) */
.rq-fab, .sh-find-fab{ translate: 0 var(--fab-lift, 0px); }

/* 3D, by the visitor's country (js/shop.js, /api/where; 2026-10-16) */
.sp-3d-wait.is-plain{ gap: 8px; }                      /* outside Russia: the notice without the progress bar */
.sp-3d-bar{ justify-content: space-between; }
.sp-3d-bar > :only-child{ margin-left: auto; }
/* Russia, computer: «3D-модель не загрузилась?» — pointing at it shows the offer to send the file */
.sp-3d-q{ position: relative; min-width: 0; }
.sp-3d-bar .sp-3d-q-btn{ padding: 6px 0; border: 0; background: none; cursor: pointer; font: 600 13.5px/1.2 var(--font-display); color: var(--muted-2); border-bottom: 1px dashed currentColor; }
.sp-3d-q-pop{ position: absolute; left: -8px; bottom: 100%; z-index: 3; width: min(340px, calc(100vw - 48px)); padding-bottom: 10px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.sp-3d-q-pop > div{ padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 14px 40px rgba(10,10,12,.16); }
.sp-3d-q-pop p{ margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.sp-3d-bar .sp-3d-q-go{ display: inline-block; padding: 11px 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 600 14px/1 var(--font-display); cursor: pointer; text-decoration: none; }
.sp-3d-q.is-open .sp-3d-q-pop, .sp-3d-q:focus-within .sp-3d-q-pop{ opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease), visibility 0s; }
@media (hover: hover) and (pointer: fine){
  .sp-3d-q:hover .sp-3d-q-pop{ opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease), visibility 0s; }
  .sp-3d-bar .sp-3d-q-btn:hover{ color: var(--ink); }
  .sp-3d-bar .sp-3d-q-go:hover{ background: var(--accent-ink); color: #fff; border-color: transparent; }
}
@media (prefers-reduced-motion: reduce){ .sp-3d-q-pop{ transition: none; } }

/* the floating search button's own label instead of the browser's plain tooltip: a dark pill to the left of it,
   shown when pointed at (mouse) or reached with Tab */
.sh-find-tip{ position: absolute; right: calc(100% + 14px); top: 50%; display: flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 14px/1 var(--font-display); letter-spacing: -.005em; white-space: nowrap; pointer-events: none;
  box-shadow: 0 14px 34px -12px rgba(10,10,12,.5); border: 1px solid rgba(255,255,255,.14);
  opacity: 0; transform: translate(8px, -50%); transition: opacity .2s ease, transform .3s var(--ease); }
.sh-find-tip em{ font-style: normal; font-weight: 500; color: rgba(255,255,255,.62); }
.sh-find-tip::after{ content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--ink);
  border-right: 1px solid rgba(255,255,255,.14); border-top: 1px solid rgba(255,255,255,.14); transform: rotate(45deg); border-radius: 0 2px 0 0; }
.sh-find-fab:focus-visible .sh-find-tip{ opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) and (pointer: fine){ .sh-find-fab:hover .sh-find-tip{ opacity: 1; transform: translate(0, -50%); } }
@media (hover: none), (pointer: coarse){ .sh-find-tip{ display: none; } }
@media (prefers-reduced-motion: reduce){ .sh-find-tip{ transition: none; } }

/* special versions of a configurable series: the switch above the configurator and the line on the series page */
.cf-variants{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 clamp(22px, 3vw, 34px); }
.cf-variants span{ font: 600 13px/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-right: 4px; }
.cf-variants a{ display: inline-flex; align-items: center; min-height: 38px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: 600 14px/1.2 var(--font-display); color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s, color .2s; }
.cf-variants a[aria-current="page"]{ background: var(--ink); border-color: var(--ink); color: #fff; }
.ss-config-more{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: 14px; line-height: 1.3; color: var(--muted-2); }
.ss-config-more span{ margin-right: 2px; }
.ss-config-more a{ display: inline-flex; align-items: center; min-height: 34px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(184,65,15,.28);
  color: var(--accent-ink); font: 600 13.5px/1.2 var(--font-display); text-decoration: none; transition: background .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine){ .ss-config-more a:hover{ background: rgba(250,90,32,.08); border-color: var(--accent); } }
@media (hover: hover) and (pointer: fine){ .cf-variants a:not([aria-current]):hover{ border-color: var(--ink); } }
@media (max-width: 760px){ .cf-variants a{ font-size: 13.5px; padding: 7px 13px; } .ss-config-more span{ flex-basis: 100%; } }

/* a fixed series of strokes: the strokes a size does not have */
.cf-chip.is-off{ opacity: .38; border-style: dashed; cursor: not-allowed; }

/* ---------------------------------------------------------- valve terminal builder (shop-island.html, js/island.js) */
.is-form label small{ display: block; margin-top: 3px; font: 400 12px/1.35 var(--font-body); color: var(--muted); }
.is-form input:checked + span small{ color: rgba(255,255,255,.7); }
.is-ifaces{ display: grid; gap: 10px; width: 100%; }
.is-ifg{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.is-ifg > small{ flex-basis: 100%; font: 600 11.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.is-posf > div{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; min-width: 0; }
.is-fill label{ gap: 6px; font-size: 13.5px; color: var(--muted-2); }
.is-form select{ max-width: 100%; height: 38px; padding: 0 30px 0 10px; border-radius: 10px; border: 1px solid rgba(10,10,12,.2); background: #fff; font: 500 13.5px/1 var(--font-body); color: var(--ink); }
.is-form select:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,90,32,.18); }
.is-pos{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.is-p{ display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.is-p select, .is-fill select{ width: 100%; min-width: 0; text-overflow: ellipsis; }
.is-pos, .is-fill, .is-fill label{ min-width: 0; }
.is-fill label{ display: grid; grid-template-columns: minmax(0, 1fr); }
.is-pn{ display: grid; place-items: center; height: 34px; border-radius: 9px; background: rgba(10,10,12,.06); font: 700 12px/1 'Unbounded', var(--font-display); color: var(--muted-2); }
.is-one .is-pn{ background: rgba(250,90,32,.1); color: var(--accent-ink); }
.is-tag{ font: 600 11px/1 var(--font-display); color: var(--accent-ink); white-space: nowrap; }
.is-more{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; min-width: 0; }
.is-more label.is-sel{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.is-more select{ width: 100%; min-width: 0; text-overflow: ellipsis; }
.is-more label{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; }
.is-more label[hidden]{ display: none; }
.is-more label b{ font: 700 11px/1 'Unbounded', var(--font-display); color: var(--accent-ink); }
.is-form .is-more input[type=checkbox]{ position: static; opacity: 1; width: 18px; height: 18px; accent-color: var(--accent); }
.is-form .is-more input[type=number]{ position: static; opacity: 1; width: 70px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(10,10,12,.2); font: 600 15px/1 var(--font-display); }
.is-title{ font: 700 clamp(17px, 1.5vw, 21px)/1.25 'Unbounded', var(--font-display); overflow-wrap: anywhere; }
.is-strip{ display: flex; flex-wrap: wrap; gap: 3px; }
.is-strip i{ display: grid; place-items: center; width: 24px; height: 34px; border-radius: 5px; font: 700 9px/1 'Unbounded', var(--font-display); font-style: normal; color: rgba(255,255,255,.85); }
.is-strip .is-v1{ background: #3b6fd8; }
.is-strip .is-v2{ background: var(--accent); }
.is-strip .is-c{ background: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
.is-strip .is-s{ background: #2f9e6b; }
.is-coils{ font-size: 13px; color: rgba(255,255,255,.65); }
.is-bom{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.is-bom li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; line-height: 1.35; }
.is-bom a, .is-bom b{ color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.is-bom a{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.is-bom small{ display: block; color: rgba(255,255,255,.5); font-size: 12px; }
.is-bom i{ font-style: normal; font: 700 12px/1 'Unbounded', var(--font-display); color: var(--accent-2); white-space: nowrap; }
.is-copy{ justify-self: start; }
/* MPA-S: sub-bases with their positions */
.is-blks{ display: grid; gap: 12px; min-width: 0; }
.is-blk{ display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid rgba(10,10,12,.12); background: #fff; min-width: 0; }
.is-blk-h{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.is-blk-h > b{ font: 700 12px/1 'Unbounded', var(--font-display); margin-right: 2px; }
.is-blk-h select{ flex: 0 1 auto; min-width: 0; }
.is-blk-h .is-chk{ display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted-2); }
.is-form .is-blk-h input[type=checkbox]{ position: static; opacity: 1; width: 18px; height: 18px; accent-color: var(--accent); }
.is-blk-x{ margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(10,10,12,.2); background: none; font: 400 20px/1 var(--font-body); color: var(--muted-2); cursor: pointer; }
.is-add-blk{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted-2); }
.is-add-blk .cf-chip:disabled{ opacity: .38; border-style: dashed; cursor: not-allowed; }
.is-strip .is-gap{ margin-left: 6px; }
.is-bom .is-in-base{ padding-left: 14px; border-left: 2px solid rgba(255,255,255,.12); }
.is-bom .is-in-base i{ color: rgba(255,255,255,.55); }
@media (hover: hover) and (pointer: fine){
  .is-blk-x:hover{ border-color: var(--accent); color: var(--accent-ink); }
}
@media (max-width: 700px){
  .is-p{ grid-template-columns: 30px minmax(0, 1fr); }
  .is-tag{ grid-column: 2; }
  .is-form select{ font-size: 16px; }      /* iPhone does not zoom in on 16px fields */
}

/* Accessory groups with «recommended / all» (products outside the cylinders, site/tools/shop/acc_catalog.py) */
.sp-acc2{ display: grid; gap: 10px; }
.sp-acc-mode{ display: inline-flex; justify-self: start; gap: 4px; padding: 4px; margin-bottom: 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.sp-acc-mode button{ padding: 10px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 14px/1 var(--font-display); color: var(--ink); transition: background .25s, color .25s; }
.sp-acc-mode button i{ font-style: normal; margin-left: 5px; color: var(--muted); }
.sp-acc-mode button[aria-pressed="true"]{ background: var(--ink); color: #fff; }
.sp-acc-mode button[aria-pressed="true"] i{ color: rgba(255,255,255,.6); }
.sp-accg{ border-radius: 20px; background: rgba(255,255,255,.5); border: 1px solid var(--line); }
.sp-accg > summary{ list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 20px; cursor: pointer; font: 600 17px/1.25 var(--font-display); color: var(--ink); }
.sp-accg > summary::-webkit-details-marker{ display: none; }
.sp-accg > summary::after{ content: ''; flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.sp-accg[open] > summary::after{ transform: translateY(2px) rotate(-135deg); }
.sp-accg-n{ font: 500 14px/1 var(--font-body); color: var(--muted); }
.sp-accg .sp-acc-list{ padding: 0 12px 12px; }
.sp-acc2.is-rec .sp-accg:not(.is-all) .sp-acc-list li:not([data-rec]){ display: none; }
.sp-acc2.is-rec .sp-accg[data-n-rec="0"]:not(.is-all) .sp-acc-list{ display: none; }
.sp-accg-none{ display: none; margin: 0; padding: 0 20px 16px; font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.sp-acc2.is-rec .sp-accg:not(.is-all) .sp-accg-none{ display: block; }
.sp-accg-more{ display: none; margin: 0 20px 16px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font: 600 14px/1.4 var(--font-body); color: var(--accent-ink); }
.sp-acc2.is-rec .sp-accg-more{ display: inline-block; }
.sp-accg-none button{ padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--accent-ink); }
@media (max-width: 760px){
  .sp-acc-mode{ display: flex; justify-self: stretch; }
  .sp-acc-mode button{ flex: 1; padding: 10px 8px; }
  .sp-accg > summary{ padding: 14px 16px; font-size: 16px; }
  .sp-accg .sp-acc-list{ padding: 0 8px 8px; }
  .sp-accg-none{ padding: 0 16px 14px; }
  .sp-accg-more{ margin: 0 16px 14px; }
}
@media (hover: hover) and (pointer: fine){
  .sp-accg > summary:hover{ color: var(--accent-ink); }
  .sp-acc-mode button[aria-pressed="false"]:hover{ background: rgba(10,10,12,.06); }
}

/* Files with a request for a quotation (2026-10-26): the form is dark, like the file field of the site's other forms */
.rq-files{ display: grid; gap: 8px; }
.rq-file-add{ position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed rgba(255,255,255,.24); border-radius: 12px; cursor: pointer; color: #fff; transition: border-color .2s; }
.rq-file-add input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.rq-file-icon{ flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; font: 600 17px/1 var(--font-display); transition: background .2s, transform .3s var(--ease); }
.rq-file-text{ display: grid; gap: 3px; font: 600 14.5px/1.25 var(--font-display); }
.rq-file-text small{ font: 400 12.5px/1.35 var(--font-body); color: rgba(255,255,255,.6); }
.rq-file-add:focus-within{ border-color: var(--accent); }
.rq-file-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rq-file-list[hidden]{ display: none; }
.rq-file-list li{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 7px 7px 12px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(250,90,32,.45); font-size: 13.5px; color: #fff; }
.rq-file-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-file-size{ color: rgba(255,255,255,.55); font-size: 12.5px; }
.rq-file-del{ width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); cursor: pointer; font-size: 17px; line-height: 1; color: #fff; }
@media (hover: hover) and (pointer: fine){
  .rq-file-add:hover{ border-color: var(--accent); }
  .rq-file-add:hover .rq-file-icon{ background: var(--accent); transform: rotate(90deg); }
  .rq-file-del:hover{ background: var(--accent); }
}