/* skbpa:order.form — embedded (#order-form) ordering block. Self-contained like docs.center/card-block.css: this renders inside the Aspro product template, not inside the .skbpa-docs shell, so it re-declares the palette locally instead of inheriting tokens that are not in scope here. Everything is namespaced under .skbpa-order so it cannot leak into the surrounding theme. */ .skbpa-order { --skbpa-order-accent: #e36d38; --skbpa-order-accent-dark: #b14819; --skbpa-order-ink: #211d19; --skbpa-order-ink-soft: #5c564d; --skbpa-order-ink-faint: #918a7d; --skbpa-order-line: #e7e2da; --skbpa-order-surface: #ffffff; --skbpa-order-surface-2: #f4f2ef; --skbpa-order-danger: #c0392b; /* Dialog geometry. The block used to sit in the page flow; as a compact ordering surface it is centred, capped in width, and scrolls internally so a long accessory list never pushes the submit button off-screen. */ margin: auto; padding: 0; border: 1px solid var(--skbpa-order-line); background: var(--skbpa-order-surface); color: var(--skbpa-order-ink); font-size: 15px; line-height: 1.5; width: min(680px, calc(100vw - 32px)); max-width: min(680px, calc(100vw - 32px)); max-height: min(88vh, 900px); /* svh = the SMALL viewport: the height with the mobile browser's URL bar SHOWN. With plain vh the box is sized against the tall viewport, so on a phone the bottom of the form sits under the browser chrome — the submit button among it. Older engines ignore this line and keep the vh value. */ max-height: min(88svh, 900px); /* The dialog itself no longer scrolls; .skbpa-order__form does. That is what keeps the title and the close button in place instead of letting them scroll away, and what makes "open at the top" a property of one small element rather than of the whole surface. */ overflow: hidden; position: relative; } /* display ONLY while open, and this is not a detail. * * A closed is hidden by `display: none` in the browser's own * stylesheet — which any author declaration outranks. Putting `display: flex` * on `.skbpa-order` therefore un-hid the form: it rendered inline in the page, * 792px tall, between «Топ материалов» and the tabs, on every product page and * at every width. Caught by looking at a screenshot; the contract test could * not see it, because that test opens the dialog before measuring anything. * * The header/body/footer layout belongs to the open state, so it is declared * there and the closed state is left to the browser. */ .skbpa-order[open] { display: flex; flex-direction: column; } /* Background lock. showModal() makes the page behind inert to clicks but does NOT stop it scrolling, so on a phone a swipe over the backdrop scrolled the product page under the open form. The class is applied by script.js and removed on close, with the scroll position restored explicitly. */ html.skbpa-order-locked, html.skbpa-order-locked body { overflow: hidden; } .skbpa-order::backdrop { background: rgba(24, 20, 16, 0.55); } .skbpa-order__close { position: absolute; top: 8px; right: 10px; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--skbpa-order-ink-faint); font-size: 26px; line-height: 1; cursor: pointer; } .skbpa-order__close:hover, .skbpa-order__close:focus-visible { background: var(--skbpa-order-surface-2); color: var(--skbpa-order-ink); } /* --- modification selector ------------------------------------------- The restored «выбор модификации». Radios rather than a