/*
  Juvu CSS — Architectural Premium prototype
  Current CSS version: v2.97 — mobile catalog overflow fix

  v2.97 — mobile catalog overflow fix.
  - Fixed mobile horizontal overflow on the catalog page caused by the category filter panel and horizontal category scroller expanding beyond the viewport on iPhone Safari.
  - Added safe min-width constraints to the catalog grid, filter panel, filter scroller and catalog cards so only the category row can scroll internally, while the page itself stays within the viewport.
  - Preserved the approved mobile horizontal swipe pattern for category buttons and did not change the catalog HTML, cart, checkout, order success, MiniShop3 logic, header, footer or JavaScript.
  - CSS-only update from v2.96; HTML chunks and JavaScript are unchanged.
  - Rollback point: use v2.96 if the catalog overflow correction needs to be removed.
  Date: 2026-06-22

  v2.96 — checkout form polish.
  - Added a scoped checkout-card layout for the MiniShop3 order form on the cart page without changing form markup, radio names, hidden action fields or submit logic.
  - Narrowed and centered the checkout flow, rebuilt input grids into calmer two-column desktop sections and single-column mobile sections.
  - Added clean premium card surfaces, section dividers, refined label/input rhythm, delivery/payment option cards, totals summary and consent/submit spacing.
  - Kept cart item controls, order success page v2.95, header, footer, catalog, product pages and JavaScript unchanged.
  - CSS-only update from v2.95; HTML chunks and JavaScript are unchanged.
  - Rollback point: use v2.95 if the checkout form polish needs to be removed.
  Date: 2026-06-22


  v2.95 — order success page polish.
  - Added a scoped clean premium success-card layout for the “Заказ принят” page.
  - Made the success headline larger and green using the approved success accent #327758.
  - Added more breathing room between order number and actions, and rebuilt the mobile action buttons as a calm full-width stack.
  - Kept the MiniShop3 order logic, header, footer, cart, catalog, product and form styles unchanged.
  - CSS-only update from v2.94; HTML and JavaScript are unchanged.
  - Rollback point: use v2.94 if the order success page polish needs to be removed.
  Date: 2026-06-22


  v2.94 — MiniShop3 cart controls.
  - Reworked the Cart pages CSS section for the live MiniShop3 cart: plus/minus quantity control, remove/clean actions and calmer order-summary state.
  - Kept the existing Juvu cart card geometry while replacing prototype-only cart controls with MiniShop3-driven control classes.
  - Added loading/disabled visual states for cart controls handled by juvu.js v1.16.
  - Preserved header badges from v2.93 and did not change product, catalog, contacts or service page layouts.
  - Rollback point: use v2.93 if the cart controls integration needs to be removed.
  Date: 2026-06-19

  v2.93 — MiniShop3 cart badges.
  - Added shared cart badge styles for desktop header cart, product mobile header cart and mobile bottom navigation cart.
  - Removed the old prototype cart-toast styles because add-to-cart feedback now belongs to MiniShop3.
  - Added stock out dot color support for the MiniShop3-driven stock classes.
  - CSS-only update from v2.92; requires juvu.js v1.15 and updated header/bottom-nav chunks.
  - Rollback point: use v2.92 if MiniShop3 cart badge integration needs to be removed.
  Date: 2026-06-19

  v2.92 — about philosophy path block.
  - Reworked the lower “Философия” section on about.html from a two-image gallery into a calm final-CTA-like path block.
  - Removed the product/installation image pair from this block to avoid repeating warm renders and technical installation visuals.
  - Added a centered explanatory message and three compact steps: choice, installation preparation and support after purchase.
  - HTML/CSS update from v2.91 about card images and v2.87 CSS baseline; JavaScript is unchanged.
  - Rollback point: use v2.91 if you need the previous image-gallery philosophy block.
  Date: 2026-06-18

  v2.87 — contacts stone form surface.
  - Tested a cooler porcelain/stone-gray contacts form surface instead of the previous milk-white neutral card.
  - Kept the contacts form separated through a clean mineral-gray layer, thin border and the existing light depth shadow without returning to warm tea/beige gradients.
  - Kept the restored bronze physical/legal-person selector, topic select polish, contacts typography cleanup and contacts.html from v2.85 unchanged.
  - CSS-only update from v2.86; HTML and JavaScript are unchanged.
  - Rollback point: use v2.86 if you need the previous whiter contacts form card surface.
  Date: 2026-06-18

  v2.86 — contacts neutral form surface.
  - Removed the warm tea/beige gradient from the contacts form card surface.
  - Replaced it with a clean neutral white layered surface and a very light depth shadow so the form remains separated from the page without yellow/brown wash.
  - Kept the restored bronze physical/legal-person selector, the topic select polish, contacts typography cleanup and contacts.html from v2.85 unchanged.
  - CSS-only update from v2.85; HTML and JavaScript are unchanged.
  - Rollback point: use v2.85 if you need the previous warmer contacts form card background.
  Date: 2026-06-18

  v2.85 — contacts page cleanup and typography rhythm.
  - Cleaned contacts.html: removed the redundant “Поддержка / Не знаете, какую тему выбрать?” aside card and removed the visible demo-requisites note.
  - Kept the contacts physical/legal-person selector in the restored v2.84/v2.80 bronze active-pill state.
  - Kept the topic select placeholder/font polish from v2.84.
  - Refined the contacts right column and requisites typography rhythm: fewer competing text sizes, unified sidebar body copy and calmer requisites labels/values.
  - Updated only contacts.html and the existing Contacts page CSS section; juvu.js is unchanged.
  - Rollback point: use v2.84 if you need the previous support note card and earlier contacts typography.
  Date: 2026-06-18

  v2.84 — contacts audience rollback and topic select polish.
  - Rolled the contacts physical/legal-person selector back to the original v2.80 bronze active-pill geometry after visual QA.
  - Removed the v2.82/v2.83 light/satin selector experiments, including the extra underline, glass shell and newer selector typography.
  - Kept the successful v2.82 topic select typography/placeholder alignment so “Выберите тему” matches the form inputs.
  - CSS-only update from v2.83; contacts.html and juvu.js are unchanged.
  - Rollback point: use v2.83 if you need the satin selector experiment, or v2.80 if you need the exact pre-select-polish state.
  Date: 2026-06-18

  v2.83 — contacts audience satin switch.
  - Reworked only the contacts physical/legal-person selector after visual QA: restored the bronze active state, removed the inner underline and reduced the framed-control feeling.
  - Changed the selector to a satin/glass-lite segmented control: quiet translucent shell, darker bronze active thumb, soft highlight and cleaner typography.
  - Kept the v2.82 topic select placeholder/font alignment unchanged.
  - CSS-only update from v2.82; contacts.html and juvu.js are unchanged.
  - Rollback point: use v2.82 if you need the previous light selector direction, or v2.80 if you need the earlier heavy bronze pill.
  Date: 2026-06-18

  v2.82 — contacts controls polish.
  - Refined the contacts physical/legal-person selector into a calmer architectural control: light surface, soft active panel, bronze accent line and less noisy typography.
  - Added select to the shared form font inheritance so native dropdowns use the same type rhythm as inputs and textareas.
  - Matched the contacts topic select placeholder state to the input/textarea placeholder style through the required/invalid state.
  - CSS-only update from v2.80; contacts.html and juvu.js are unchanged.
  - Rollback point: use v2.80 if you need the previous heavier bronze segmented control.
  Date: 2026-06-18

  v2.74 — home model cards catalog alignment.
  - Reworked home "Популярные модели" cards to follow the calmer catalog-card product rhythm.
  - Desktop model cards now use a product-first vertical composition: image area, title/description/price and bottom-right arrow.
  - Mobile model cards keep the home horizontal swipe, but each card now uses the same vertical product-card logic as the catalog.
  - Fixed price wrapping by giving the price its own block and reserving room for the arrow action.
  - CSS-only update from v2.73; HTML and JavaScript are unchanged.
  - Rollback point: use v2.73 if you need the previous horizontal home model cards.
  Date: 2026-06-15

  v2.73 — mobile home final CTA spacing.
  - Reduced the mobile-only vertical gap between the home FAQ block and the final CTA card.
  - Kept enough breathing room before the final CTA, but removed the excessive empty area after the "Показать ещё вопросы" button.
  - CSS-only update from v2.72; HTML and JavaScript are unchanged.
  - Rollback point: use v2.72 if you need the previous home mobile spacing.
  Date: 2026-06-15

  v2.72 — company overview spacing.
  - Added more vertical breathing room between the company directory cards and the following company overview block.
  - CSS-only update from v2.71; no HTML or JavaScript changes.
  - Rollback point: use v2.71 if you need the previous company page spacing.
  Date: 2026-06-15

  v2.71 — clean nav alignment and chevron refactor.
  - Refactored desktop main navigation controls so direct links and the "О компании" dropdown trigger share one vertical rhythm.
  - Rebuilt the "О компании" chevron from two centered strokes instead of offset border tricks; removed top/translate wobble.
  - Made the mobile drawer support card fully neutral white without warm/tea background wash.
  - CSS-only update from v2.70; HTML and JavaScript are unchanged.
  - Rollback point: use v2.70 if you need the previous chevron/support version.
  Date: 2026-06-12

  v2.70 — header chevron and mobile support neutral polish.
  - Refined the desktop "О компании" chevron: lower closed optical position, stable center alignment and smoother lid-like rotation without vertical wobble.
  - Removed the warm/tea gradient from the mobile drawer support card and replaced it with a cleaner one-tone premium surface.
  - CSS-only update from v2.69; HTML and JavaScript are unchanged.
  - Rollback point: use v2.69 if you need the previous header/menu polish state.
  Date: 2026-06-12

  v2.69 — header dropdown and mobile submenu polish.
  - Simplified the desktop "О компании" dropdown: removed intro copy, group labels, small descriptions and divider lines.
  - Re-centered the desktop dropdown chevron and removed vertical jump on hover/focus.
  - Restyled mobile second-level links as a calmer soft panel instead of separate squared buttons.
  - Fixed mobile drawer scrolling when the expanded submenu/support card does not fit on the phone screen.
  - Updated all HTML headers/drawers, assets/css/juvu.css and assets/js/juvu.js only.
  - Rollback point: use v2.68 if you need the first unified header version.
  Date: 2026-06-12

  v2.68 — unified header company dropdown.
  - Rebuilt desktop header navigation as unified page links: catalog.html, service.html, company.html dropdown and contacts.html.
  - Added an architectural premium desktop dropdown for “О компании” with “Основное” and “Документы” groups, without duplicating a second-level “О компании” item.
  - Reworked the mobile drawer into a full-screen navigation system with a smooth second-level “О компании” submenu and a bottom contact card.
  - Removed header/menu anchor navigation from index.html, product.html and product.alt.html in favor of consistent site pages.
  - Preserved contacts v2.67 controls, legal pages, product content, consultation modal, cart logic and existing page layouts.
  - Rollback point: use v2.67 if you need the previous flat header navigation.
  Date: 2026-06-12

  v2.67 — contacts architectural controls polish.
  - Refined contacts page segmented switch from a soft pill into a calmer architectural rounded-rectangle control.
  - Reworked messenger links from oversized pill buttons into premium contact rows with contained icon tiles and softer surfaces.
  - Kept contacts.html and juvu.js unchanged; this update is CSS-only and affects only the contacts page controls/social links.
  - Rollback point: use v2.66 if you need the first contacts hub form layout.
  Date: 2026-06-12

  v2.66 — contacts hub form redesign.
  - Rebuilt contacts.html as a contact hub: main request form, compact quick-contact card, messenger links using footer SVG icons, and a calmer requisites block.
  - Added a polished physical/legal-person segmented switch with a bronze sliding thumb and JS-controlled label/placeholder changes.
  - Added contact form success handling through data-contact-form while preserving legal pages v2.65, footer/header, home/product pages, cart logic and consultation modal.
  - Updated only contacts.html, assets/css/juvu.css and assets/js/juvu.js.
  - Rollback point: use v2.65 if you need the previous contacts card grid.
  Date: 2026-06-12

  v2.65 — remove cross-border sections from legal pages.
  - Removed the separate cross-border personal data transfer sections and TOC items from privacy.html and personal-data.html.
  - Checked cookies.html, privacy.html and personal-data.html so there are no cross-border/foreign-state transfer mentions.
  - Kept the practical third-party processing blocks only for real local working scenarios such as delivery, service, technical support and Яндекс.Метрика.
  - Preserved the compact legal TOC layout, synced footer/header, home page, product pages, cart logic and JavaScript.
  - Rollback point: use v2.64 if you need the previous legal pages with cross-border sections.
  Date: 2026-06-12

  v2.64 — privacy and personal-data legal pages.
  - Updated privacy.html: clarified that Juvu does not perform cross-border personal data transfer.
  - Added personal-data.html with a compact legal document and the same restored compact table-of-contents pattern as cookies/privacy.
  - Personal-data consent covers consultation, order/cart, delivery via СДЭК, installation, product registration, warranty and service requests.
  - Reused v2.62/v2.63 legal TOC styles without changing home page, product pages, cookies.html, cart logic or JavaScript.
  - Rollback point: use v2.63 if you need only the privacy policy page before the consent update.
  Date: 2026-06-12

  v2.63 — privacy policy with compact TOC.
  - Added a full privacy.html document layout with restored compact table of contents on the left and readable legal content on the right.
  - Privacy policy now covers consultation, cart/order, delivery via СДЭК, installation, product registration, warranty/service requests and Яндекс.Метрика analytics.
  - Reused the v2.62 legal TOC system without changing home page, product pages, cookies.html, JavaScript or cart logic.
  - Rollback point: use v2.62 if you need only the cookie policy update.
  Date: 2026-06-12

  v2.62 — cookie policy with compact TOC.
  - Added a full cookies.html document layout with restored compact table of contents on the left and readable legal content on the right.
  - Added .text-layout--legal and .text-nav--compact rules so legal pages can use a sticky TOC without huge vertical gaps.
  - Updated cookie policy content to mention only Яндекс.Метрика as the connected third-party analytics service.
  - Preserved the synced footer/header from v2.61 and did not change product pages, home page, cart logic or JavaScript.
  - Rollback point: use v2.61 if you need the previous simplified legal-page layout.
  Date: 2026-06-12

  v2.60 — company page, refined inner pages and legal content.
  - Added company.html as the central informational page with links to brand, delivery, installation and legal documents.
  - Refined about.html with image-led sections and richer brand presentation using existing generated product/service visuals.
  - Simplified catalog header by removing the redundant eyebrow.
  - Reworked contacts page layout: narrower desktop shell, messenger icons, e-mail block moved next to requisites, and mobile manager strip fixed to single-column.
  - Rebalanced cart.html proportions with a narrower shell and more comfortable order-summary width; aligned cart-empty.html to the same calmer reading geometry.
  - Rebuilt legal and text pages into single-column reading layouts with meaningful content for privacy, cookies and personal-data pages.
  - Updated service page supporting copy and replaced the generic side visual with a more relevant registration-oriented image block.
  - Delivery page wording updated to the Russian spelling “СДЭК”.
  - Rollback point: use v2.59 if you need the earlier simpler practical-inner-pages package.
  Date: 2026-06-12

  v2.59 — practical inner pages and cart.
  - Removed oversized decorative inner-hero blocks from catalog, service, contacts and text pages; replaced them with compact page-head sections and immediate useful content.
  - Rebuilt inner-page CSS into organized sections: Inner pages core, Catalog, Service, Contacts, About/Text, Legal/Text typography and Cart.
  - Split delivery.html and installation.html into separate text pages; delivery now references SDEK correctly.
  - Added legal/document pages: privacy.html, personal-data.html, cookies.html, plus text.html typography demo.
  - Added cart.html and cart-empty.html prototypes with clean cart layout and mobile-friendly structure.
  - Preserved home page, product pages, v2.57 hero, v2.56 comparison block, existing header/footer, consultation modal and product sticky CTA behavior.
  - Rollback point: use v2.58 if you need the earlier image-led inner hero prototypes.
  Date: 2026-06-12

  v2.58 — inner pages scaffold.
  - Added a clean inner-page system for catalog.html, service.html, contacts.html, about.html and delivery.html without changing the existing home/product page structure.
  - Added desktop/mobile styles for shared inner hero, breadcrumbs, catalog filters/grid, service request form, contact cards, about/value blocks and text-page layout.
  - Kept bottom-nav as the shared mobile navigation for non-product pages; product pages keep their existing product mobile sticky CTA only.
  - Preserved v2.57 home hero, v2.56 comparison block, v2.54 mobile card CTA polish, product pages, header/footer components and consultation modal.
  - Rollback point: use v2.57 CSS if you need only the home/product prototype without inner pages.
  Date: 2026-06-11

  v2.57 — controlled home hero stage.
  - Reworked the home hero image geometry with CSS only: the desktop hero image now lives inside the same controlled page stage instead of stretching endlessly to the right on wide screens.
  - Moved the desktop white/image transition onto the hero media layer and added a subtle right-edge fade so large monitors get a clear, calm hero boundary.
  - Rebuilt the mobile hero composition closer to the approved generated reference: the image sits behind the copy as one scene, with a side fade from text to product instead of the previous top-image / vertical-down fade.
  - Preserved the existing hero HTML, text, buttons, feature cards, header, product pages, comparison block v2.56, accessories/guarantee row, JavaScript and modals.
  - Rollback point: use v2.56 if you need the previous full-bleed desktop hero image and vertical mobile fade.
  Date: 2026-06-11

  v2.56 — concrete system comparison.
  - Reworked the home compare block again after visual/content review: kept “Всё собрано в одну систему”, but restored concrete comparison details.
  - Expanded the compare block to 1120px and changed the layout to an intro plus two premium comparison cards: “Обычный комплект” and “Juvu”.
  - Returned practical comparison points: separate installation, smart-functions, montage/service, and price context, without going back to the old full-width table.
  - Simplified the visual language: muted ordinary-card, warm Juvu-card, calm row dividers and small check/dot markers generated in CSS.
  - Updated the mobile layout so the two comparison cards stack cleanly and read as concrete value proof instead of abstract marketing text.
  - Updated only index.html and the existing Compare CSS section; product pages, JavaScript, header, footer component styles, accessories/guarantee row, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.55 if you need the more abstract system-feature card.
  Date: 2026-06-11

  v2.55 — system advantage compare block.
  - Rebuilt the home compare block from a wide two-column price/table layout into a compact premium “Преимущество Juvu” system card.
  - Replaced the negative heading “Juvu — не набор отдельных позиций” with the clearer value message “Всё собрано в одну систему”.
  - Added a calmer “Обычно” muted note and a Juvu feature grid with four bronze inline SVG icons: product, smart functions, installation, and service.
  - Narrowed the block with its own max-width so it no longer stretches across the full site container.
  - Added a dedicated mobile layout that reads as a short value story instead of a stacked comparison table.
  - Updated only index.html and the existing Compare CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast, consultation modal and the v2.54 mobile CTA polish are preserved.
  - Rollback point: use v2.54 if you need the previous two-column compare table.
  Date: 2026-06-11

  v2.54 — mobile card CTA width.
  - Polished mobile CTAs in the Accessories / Guarantee row: both card buttons now use the same wider, centered mobile width.
  - Increased the guarantee CTA mobile width so “Зарегистрировать устройство” fits more naturally on one line on wider phones, without forcing overflow on smaller screens.
  - Corrected the media-query boundary before the mobile section so the responsive rules remain structurally clean.
  - Adjusted only the existing mobile rules for .accessories-card .btn and .service-mini-card .btn; desktop layout, HTML, product pages, JavaScript, FAQ, footer, cart toast and consultation modal are preserved.
  - Rollback point: use v2.53 if you need the previous narrower mobile guarantee CTA.
  Date: 2026-06-11

  v2.53 — accessories and guarantee row.
  - Removed the separate home service strip and replaced the weaker “Подберём идеальную модель” card with a “Гарантия Juvu” card in the existing Accessories / selector row.
  - Kept the new guarantee card in the same wide-card visual language as the Accessories card: calm white card, compact eyebrow, large title, short copy and one primary CTA.
  - Moved the three service facts into the guarantee card with thin bronze inline SVG icons; no installation image and no QR overlay on the home page.
  - Kept the service anchor on the new guarantee card so the header “Сервис” navigation still points to the relevant block.
  - Updated only index.html and the existing Accessories / selector CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.52 if you need the separate compact service strip below the accessories row.
  Date: 2026-06-11

  v2.52 — service strip breathing room.
  - Widened the home service strip from 980px to 1024px so it keeps the calmer page rhythm without becoming full-width again.
  - Moved the registration CTA under the service description instead of placing it in a separate right column inside the copy area.
  - Added a little more vertical breathing room around the heading, CTA and service facts while preserving the compact strip direction.
  - Kept the mobile CTA centered and the mobile service image rounded, with slightly calmer spacing inherited from the new structure.
  - Updated only index.html and the existing Home service / registration CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.51 if you need the narrower strip with the desktop CTA aligned to the right of the heading copy.
  Date: 2026-06-11

  v2.51 — service strip polish.
  - Narrowed the home service strip on desktop with a dedicated max-width so the service message no longer stretches across the full site container.
  - Added thin bronze inline SVG icons for the three service facts instead of small decorative dots.
  - Centered the service registration CTA on mobile and kept it compact rather than visually drifting to the side.
  - Gave the mobile service image rounded top corners and added a little more breathing room above it after the last service fact.
  - Updated only index.html and the existing Home service / registration CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.50 if you need the wider service strip with dot markers.
  Date: 2026-06-11

  v2.50 — compact service strip.
  - Rebuilt the home service area from two large equal cards into one compact service strip so the section no longer behaves like a second hero block.
  - Removed the desktop QR overlay from the home service image; registration is now handled by the main “Зарегистрировать устройство” CTA, while QR details belong on the service page.
  - Changed the desktop composition to a wider content side and a narrower supporting installation image, reducing the overall visual height and weight.
  - Moved the registration CTA into the copy header row on desktop and kept the three service facts as a light supporting row.
  - Kept mobile simple: content, CTA, facts, then a compact full-width image inside the same service panel; no QR and no extra overlay layers.
  - Updated only index.html and the existing Home service / registration CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.49 if you need the split two-card service layout with a desktop QR note.
  Date: 2026-06-11

  v2.49 — compact service card height.
  - Tightened the split home service cards after desktop review: removed the service-card eyebrow, reduced copy spacing and lowered the overall desktop visual weight.
  - Moved the desktop QR note to the top-left of the service image so it covers the empty wall area instead of adding weight at the bottom-right.
  - Removed the secondary explanatory sentence from the QR note; it now stays as a compact desktop helper, while mobile keeps the QR note hidden.
  - Reduced service card/image heights and adjusted the image crop so the installation scene feels less like a large banner.
  - Updated only index.html and the existing Home service / registration CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.48 if you need the taller split service cards with the service eyebrow.
  Date: 2026-06-11

  v2.48 — split home service cards.
  - Rebuilt the home service area from one large 50/50 monolithic panel into two separate balanced cards, matching the lighter rhythm of the accessories/selector section above.
  - Kept the left card focused on warranty, registration CTA and three service facts; the right card is now a visual service/registration card with the installer image and a compact desktop-only QR note.
  - Reduced the perceived weight of the installer image by giving it its own rounded card, gap and controlled height instead of a full-width merged banner surface.
  - On mobile the service block stacks as two clean cards, hides the QR note, and lets the image use the full card width without an extra inner framed-card feel.
  - Updated only index.html and the existing Home service / registration CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.47 if you need the previous single 50/50 service panel.
  Date: 2026-06-11

  v2.47 — compact service geometry correction.
  - Tightened the home service panel after visual review: removed the secondary consultation button from the service block and made registration the only CTA.
  - Changed the home service grid to a balanced 50/50 desktop layout, reduced panel/image height, and softened the desktop QR note so the section no longer dominates the page.
  - Restored the service eyebrow to the normal compact left-aligned capsule behavior instead of stretching across the copy column.
  - Simplified the mobile service block: no consultation button, no QR, compact vertical rhythm, and a wider service image without an extra inner framed-card feeling.
  - Updated only index.html and the existing Home service / registration CSS section; product pages, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.46 if you need the previous taller service panel with two CTA buttons.
  Date: 2026-06-11

  v2.46 — compact home service panel.
  - Reworked the home service section as a compact two-part service panel: left side contains the warranty/register/support message and CTAs, right side uses the installation-service image with a small desktop-only QR note overlay.
  - Removed the separate middle registration column on the home page, reduced the desktop block height, and avoided extra framed layers in the mobile flow.
  - On mobile the QR is hidden completely, the registration action is part of the main copy, and the service image is shown as a rounded standalone visual inside the section.
  - Updated only index.html and the existing Home service / registration CSS section; product.html, product.alt.html, JavaScript, header, footer component styles, FAQ, cart toast and consultation modal are preserved.
  - Rollback point: use v2.45 if you need the previous three-zone service/register/image layout.
  Date: 2026-06-11

  v2.44 — home service registration refactor.
  - Rebuilt the home service block into a clearer service-proof + registration + lifestyle-image composition while preserving the Architectural Premium visual language.
  - Changed the registration flow on the home page so the primary action is a clear “Зарегистрировать устройство” button; the QR code remains as a secondary desktop-only helper.
  - Removed the mobile QR from the home service block and replaced the old three-column service/QR/image layout with a responsive stacked structure for mobile and tablet.
  - Updated the existing Service / QR CSS section in place; no tail patches were added, product service blocks, header, footer structure, consultation modal, cart toast, FAQ, final CTA image width v2.43 and JavaScript are preserved.
  - Footer version labels in HTML are updated to “juvu.ru · v2.44”.
  - Rollback point: use v2.43 if you need the previous home service three-column layout with QR-card.
  Date: 2026-06-11

  v2.43 — home final CTA image width.
  - Increased the desktop final CTA product image area in .cta-card img from 46% to 51% so the image sits closer to the intended layout without changing HTML or JS.
  - Changed only the existing .cta-card img rule in the CTA section; mobile keeps the existing hidden image behavior.
  - Header, footer, product pages, consultation modal, cart toast, FAQ and JavaScript are preserved.
  - Rollback point: use v2.42 if you need the previous 46% image width.
  Date: 2026-06-11

  v2.42 — home FAQ more-button alignment.
  - Centered the “Показать ещё вопросы” button on desktop by making the FAQ-more control a self-sized flex element with auto side margins.
  - Reduced the mobile FAQ-more control width so it stays calm and compact instead of stretching to the screen edges.
  - Changed only the existing FAQ-more button rules in the shared FAQ/mobile sections; FAQ accordion logic, final CTA, header, footer, product pages and JS are preserved.
  - Footer version labels are not changed in this CSS-only update; HTML still shows the last packaged version until the next ZIP update.
  - Rollback point: use v2.41 if you need the previous full-width mobile FAQ-more button.
  Date: 2026-06-10

  v2.41 — home FAQ and final CTA separation.
  - Rebuilt the bottom part of index.html so the FAQ and final CTA are separate sections instead of two competing cards in one row.
  - Reused the product FAQ visual system for the home FAQ and added a calm “Показать ещё вопросы” reveal for three additional questions.
  - Kept the final CTA product image, but moved the CTA below the FAQ with a clearer “Остались вопросы?” consultation message.
  - Added small shared styles for FAQ-more reveal and home final CTA only; product FAQ, header, footer, gallery, cart toast and consultation modal behavior are preserved.
  - Updated footer version labels on index.html, product.html and product.alt.html to “juvu.ru · v2.41”.
  - Rollback point: use v2.40 if you need the previous side-by-side home FAQ/CTA row.
  Date: 2026-06-10

  v2.40 — mobile cart toast adaptive position.
  - Adjusted the mobile direct-cart feedback toast so it sits lower on the first product screen when Mobile Sticky Action is still hidden.
  - When Mobile Sticky Action becomes visible after scrolling, the toast automatically lifts above it and keeps the previous comfortable spacing.
  - Implemented in the existing mobile cart-toast CSS only; no HTML or JS changes, no footer version change.
  - Kept product direct cart action, consultation overlay close, header, gallery, footer structure and Mobile Sticky Action behavior unchanged.
  - Rollback point: use v2.39 if you need the previous fixed mobile toast position above the sticky action at all times.
  Date: 2026-06-10



  v2.39 — product direct cart action and consult backdrop close.
  - Removed the temporary product.html configuration bottom sheet from the active product cart flow because the first stage has no selectable kits/install options.
  - Added a lightweight direct cart feedback state for product.html and product.alt.html buttons using data-cart-action, ready to be replaced by the future real cart/minishop flow.
  - Kept consultation modal/mobile sheet, but supported backdrop click on the full modal layer through JS v1.8 so desktop and mobile close consistently outside the form.
  - Reduced mobile product-page bottom padding before the footer on product.html and product.alt.html from the overly large first-stage value to a tighter spacing while keeping safe room for the fixed Mobile Sticky Action.
  - Updated footer version labels on index.html, product.html and product.alt.html to “juvu.ru · v2.39”.
  - Rollback point: use v2.38 if you need the previous product configuration bottom sheet connected to cart buttons.
  Date: 2026-06-10


  v2.38 — consultation close icon optical centering.
  - Rebuilt the consultation modal close icon with centered pseudo-element strokes instead of relying on the raw “×” glyph, which could sit optically off-center inside the circle.
  - Applied the same centered close icon geometry to desktop modal and mobile bottom sheet states.
  - Changed only consultation close-button CSS; header, footer, gallery, sticky actions, form behavior, JS and product content are unchanged.
  - Rollback point: use v2.37 if you need the previous text-glyph close icon.
  Date: 2026-06-10


  v2.37 — consultation modal inner scroll and desktop header cleanup.
  - Moved consultation modal scrolling from the outer rounded panel into an inner .consult-modal__scroll layer so the scrollbar stays visually inside the card and no longer cuts through the rounded corners.
  - Hid the “Консультация Juvu” eyebrow only on desktop to make the popup shorter and cleaner; mobile keeps the badge for bottom-sheet context.
  - Updated footer version labels on index.html, product.html and product.alt.html to “juvu.ru · v2.37”.
  - Kept consultation success auto-close, overlay close, required fields, header, footer structure, gallery, Mobile Sticky Action and product content unchanged.
  - Rollback point: use v2.36 if you need the previous outer-panel scrollbar and desktop eyebrow.
  Date: 2026-06-10

  v2.36 — consultation success auto close and modal scrollbar polish.
  - Added calm auto-close for the consultation modal/mobile sheet after successful form submit.
  - Styled the desktop consultation panel scrollbar so it feels integrated with the premium modal instead of a raw browser control.
  - Removed the word “прототип” from the footer version label; footer now shows “juvu.ru · v2.36”.
  - Kept required name/phone/consent validation, footer structure, header, gallery, mobile sticky actions and product content unchanged.
  - Rollback point: use v2.35 if you need the previous consultation success state without auto-close or the earlier footer version label.
  Date: 2026-06-10


  v2.35 — consultation form required name and footer version meta.
  - Made the consultation form name field required on index.html, product.html and product.alt.html.
  - Replaced the temporary footer INN text with a neutral 10-digit placeholder.
  - Added juvu.ru and prototype version metadata to the footer copyright line.
  - Added small footer-copy/footer-version styling in the existing Footer section.
  - Kept consultation modal/sheet behavior, header, gallery, Mobile Sticky Action and product content unchanged.
  - Rollback point: use v2.34 if footer version metadata or required name validation needs to be removed.
  Date: 2026-06-10

  v2.34 — consultation modal and mobile sheet.
  - Added a shared consultation component for index.html, product.html and product.alt.html.
  - Desktop opens a centered premium modal; mobile uses the same component as a bottom sheet with a soft overlay and body scroll-lock through JS v1.6.
  - All “Получить консультацию” actions now use data-open-consult, including product summary buttons, Mobile Sticky Action consultation buttons and the home CTA.
  - The form uses one universal text: “Оставьте контакты — специалист Juvu поможет с выбором, установкой и совместимостью.”
  - Added name, phone, message, required personal-data consent, Telegram/WhatsApp/MAX secondary contact options and a calm phone link.
  - Kept product cart bottom sheet, Mobile Sticky Action reveal, footer, header, gallery, hamburger/drawer, product and accessory content unchanged except for wiring consultation buttons.
  - Rollback point: use v2.33 if the consultation layer needs to be removed while keeping the mobile hero cart CTA.
  Date: 2026-06-10


  v2.33 — mobile hero primary cart CTA.
  - Added a real mobile-first purchase CTA inside the first-screen product summary on product.html and product.alt.html.
  - The new mobile-only “В корзину” button appears directly under the price so users see a clear purchase action before scrolling.
  - Kept the existing desktop CTA buttons unchanged and hidden on mobile; the new CTA is scoped as .product-mobile-cart-cta.
  - Kept Mobile Sticky Action behavior from v2.32: it still appears only after the hero/summary area is scrolled and remains the persistent purchase action below the first screen.
  - Did not change header, footer, gallery, bottom sheet layout, accessory content or hamburger/drawer behavior.
  - Rollback point: use v2.32 if you need the previous mobile first screen without an inline cart CTA.
  Date: 2026-06-10


  v2.32 — mobile sticky real actions cleanup.
  - Reworked Mobile Sticky Action on product.html and product.alt.html as a real purchase/action component instead of a decorative ecommerce pattern.
  - Removed the fake wishlist/heart action because the prototype has no account or favorites scenario yet.
  - Kept price + stock in the sticky panel as a persistent purchase context, while keeping the main product price in the summary as content.
  - Added a compact consultation action between price/status and the “В корзину” button.
  - Mobile Sticky Action now appears only after the product hero/summary area has been mostly scrolled, reducing first-screen price duplication.
  - Desktop, footer, header, hamburger, gallery, product sections, bottom sheet layout and accessory content are unchanged.
  - Rollback point: use v2.31 if you need the previous always-visible sticky CTA with the wishlist placeholder.
  Date: 2026-06-10

  v2.31 — universal footer and navigation cleanup.
  - Reworked the shared footer into a more structured universal component for index.html, product.html and product.alt.html.
  - Footer navigation is now a single column and the top-level “Аксессуары” navigation item is removed because accessories live inside the catalog.
  - Added legal links, company placeholder information, copyright line and a unified dark-footer messenger row for Telegram, WhatsApp, MAX and VK.
  - Updated header and mobile drawer navigation on all three pages without changing the hamburger/drawer JS contract.
  - Product gallery, accessory page content, bottom sheet behavior, product specs, service/QR, FAQ and mobile sticky CTA are unchanged.
  - Rollback point: use v2.30 if you need the previous simpler footer while keeping the accessory gallery full-bleed fix.
  Date: 2026-06-10

  v2.30 — accessory gallery full-bleed images and footer spacing.
  - Updated product.alt.html gallery behavior so accessory images use the same full-bleed visual scale as the main product.html gallery instead of the earlier contain/padded presentation.
  - Reordered the accessory page gallery to start from the lifestyle accessory scene; the standalone filter image remains as the second slide.
  - Added scoped breathing room after the accessory page “Рекомендуемые аксессуары” block before the footer.
  - Did not add bottom sheet markup or behavior to the accessory page; did not change product.html, gallery JS, header, drawer, hamburger, product specs, service/QR or FAQ.
  - Rollback point: use v2.29 if the softer contained accessory gallery presentation is preferred.
  Date: 2026-06-10


  v2.29 — accessory product page variant.
  - Added a clean, scoped accessory-product page layer for product.alt.html using body.page-product-accessory.
  - Added a separate accessory feature strip and accessory information grid for lighter accessory pages such as a water filter.
  - Accessory gallery images use contain-style product presentation so filter/compact accessories are not cropped like lifestyle scenes.
  - No bottom sheet styles or markup are required for the accessory page; product.html bottom sheet behavior remains unchanged.
  - Existing product.html sections, product feature strip, specs, installation, service/QR, accessories, FAQ, header, drawer, gallery JS and hamburger geometry are unchanged.
  - Rollback point: use v2.28 if the accessory-card prototype page needs to be removed while keeping the gallery-arrow centering fix.
  Date: 2026-06-10

  v2.28 — product gallery right arrow centering.
  - Fixed the desktop product gallery right chevron centering by correcting only .gallery-arrow-right::before transform.
  - The pseudo-element now uses the same center anchoring as the left chevron instead of being shifted to the right by translate(50%, -50%).
  - Gallery button size, button position, left arrow, mobile gallery hiding rules, hamburger, drawer, HTML and JS are unchanged.
  - Rollback point: use v2.27 if you need to inspect the clean hamburger/drawer structural cleanup before this small gallery-control correction.
  Date: 2026-06-10


  v2.27 — mobile hamburger drawer structural cleanup.
  - Cleaned the mobile hamburger / drawer CSS structure after the previous branch accumulated late correction rules near the end of the file.
  - Moved approved cart icon, home mobile header, stock-dot, product mobile overflow and bottom-nav corrections into their proper sections instead of leaving them as tail patches.
  - Rebuilt the hamburger geometry in the main Header section with explicit variables for long line, short line, right alignment and vertical spacing.
  - Closed state remains: two long lines plus a shorter third line aligned to the right.
  - Open state remains: two equal centered diagonals with the middle line fading out.
  - Drawer visibility, scroll-lock classes and JS contract are unchanged; HTML and JS are not required for this version.
  - Rollback point: use v2.26 if the previous tail-correction structure needs to be inspected, but v2.27 is the cleaner working base.
  Date: 2026-06-10


  v2.25 — mobile drawer visibility restore and hamburger state safety.
  - Fixed the mobile drawer transform bug introduced while correcting hamburger geometry.
  - Restored opened drawer transform to translateY(0) instead of translateY(-50%), so menu links remain visible after scroll and in locked state.
  - Kept the closed hamburger geometry unchanged: two long lines plus the short lower line aligned to the right.
  - Kept the opened cross geometry unchanged: two equal centered diagonals.
  Date: 2026-06-09

  v2.26 — mobile hamburger closed spacing normalization.
  - Fixed the closed hamburger geometry after v2.25: the three lines are now evenly spaced vertically in the closed state.
  - Restored the intended right-aligned short lower line without changing the opened cross geometry.
  - Closed state: two long lines at -9px / 0 and one short right-aligned line at +9px.
  - Open state remains two equal centered diagonals at 45deg / -45deg.
  - HTML and JS are not required for this version.
  Date: 2026-06-09


  Work base:
  - Correct base for this file is v4-clean-from-v2 / v2 visual system.
  - This file was rebuilt from the formatted v2.3 CSS base, not from the shortened/minified v2.4 export.
  - V2 visual system is preserved: typography, background, card geometry, hover effects and core spacing.
  - V3 is used only as a donor for approved header/cart/Telegram and mobile product header ideas.

  Version log / rollback notes:

  v1.0 — base visual system from V2
  - Clean premium light background, calm typography, product-first hero.
  - Base blocks: feature cards, model cards, compare, accessories/selector, service/QR, FAQ/CTA, footer.
  - Base product page: gallery, summary, badges, feature strip, installation banner, specs, accessories, bottom sheet.
  - Rollback point: use this only if the whole site visual language needs to return to the original V2 prototype.

  v2.0 — v4-clean-from-v2 assembly
  - Returned to V2 visual base after the unsuccessful V3 direction.
  - Kept only approved V3 ideas: desktop Telegram/cart actions and mobile product-header direction.
  - Removed desktop header “Подобрать модель” button from the active header concept.
  - Rollback point: use this if later header/product experiments damage the overall V2 visual system.

  v2.1 — product mobile header cleanup
  - Removed the base .product-main padding: 34px 0 80px.
  - Centered product-page mobile brand in the header.
  - Removed extra padding from .mobile-menu-toggle.
  - Purpose: make product mobile header cleaner and stop the product page from starting too low.
  - Rollback point: use v2.0 if product mobile header spacing breaks badly.

  v2.2 — desktop header grid and cart geometry
  - Converted desktop .site-header__inner to CSS Grid: logo / centered nav / right actions.
  - Centered .main-nav inside the free middle column instead of attaching it to the logo.
  - Set .header-actions to the right grid column.
  - Updated .header-cart geometry: 52px height, 29px radius, calmer capsule style.
  - Added desktop-only optical brand alignment with transform: translateY(-2px).
  - Rollback point: use v2.1 if desktop header grid causes layout conflicts at intermediate widths.

  v2.3 — home header / SVG compatibility
  - Kept one desktop header system for home and product pages.
  - Added .cart-btn as a safe alias for .header-cart because one imported index.html variant used cart-btn.
  - Styled .feature-card > .line-svg so imported inline SVG icons do not render as huge black shapes.
  - Preserved existing .line-icon styles for the older V2 feature-card markup.
  - Rollback point: use v2.2 if imported home HTML compatibility is no longer needed.

  v2.4 — mobile header system decision
  - Fixed the intended mobile header logic at CSS level.
  - Mobile home: Juvu left + hamburger right; no top cart and no back button.
  - Mobile product: back left + centered Juvu + cart + hamburger right.
  - Unified mobile Juvu logo size direction between home and product.
  - Rollback point: use v2.3 if we decide the old larger home mobile logo was better.

  v2.4.1 — safe rebuild and explicit mobile logo sizing
  - Rebuilt from formatted v2.3 CSS to avoid the shortened/minified v2.4 export.
  - Preserved the expanded formatting and semicolons.
  - Set mobile .brand to 24px / 800 so home logo visually matches product logo size.
  - Set .page-product .brand to 24px / 800 explicitly while keeping it centered.
  - Set .page-home .brand to 24px / 800 explicitly while keeping it left-aligned.
  - No HTML changes are required for this version.

  v2.5 — mobile drawer cleanup and scroll-lock support
  - Cleaned the mobile hamburger menu visual style: removed framed/card-like borders from each menu item.
  - Kept the drawer as a calm premium white panel below the sticky header.
  - Added CSS support for html.is-locked + body.is-locked so the background page does not scroll when the mobile drawer or bottom sheet is open.
  - Did not use body position: fixed in CSS, so the sticky header keeps its normal position and does not disappear.
  - Rollback point: use v2.4.1 if the older framed mobile drawer is preferred or if scroll-lock needs to be reworked.

  v2.6 — sticky header hardening
  - Hardened the header behavior for desktop and mobile: .site-header stays sticky at top: 0 across pages.
  - Added -webkit-sticky fallback before sticky for Safari/iOS stability.
  - Replaced html/body overflow-x: hidden with overflow-x: clip so horizontal overflow prevention does not create a scroll container that can break sticky positioning.
  - Kept the header in normal document flow, so following sections do not slide underneath it and existing spacing remains intact.
  - No HTML changes are required for this version.
  - Rollback point: use v2.5 if overflow-x: clip causes compatibility issues and we decide to solve sticky with a fixed-header architecture instead.

  v2.7 — product gallery smooth autoplay
  - Product breadcrumbs margin changed from margin-bottom: 28px to margin: 28px auto.
  - Added premium-safe gallery motion: fade/scale image transition for main gallery image.
  - Added smooth active thumbnail frame using .gallery-thumbs::after controlled by JS CSS variables.
  - Added pointer-friendly gallery affordances for tap/click, mouse drag and touch swipe.
  - Kept mobile thumbnails hidden as before; mobile gallery still swipes/taps on the main image.
  - No global typography, background, cards or non-product sections were redesigned.
  - Requires JS v1.2 for autoplay, drag/tap navigation and thumbnail-frame sync.
  - Rollback point: use v2.6 if autoplay/gesture gallery behavior needs to be removed while keeping sticky header hardening.

  v2.8 — gallery controls alignment
  - Fixed visual centering of product gallery arrow controls by removing native button padding and using grid centering.
  - Fixed visual centering of the slide counter pill by switching it to inline-flex with explicit min-height and line-height.
  - Applied the fix to both desktop and mobile gallery states without changing HTML or JS.
  - Rollback point: use v2.7 if gallery controls need to return to the previous default browser-button alignment.

  v2.9 — gallery chevron optical centering
  - Replaced text glyph arrows inside .gallery-arrow with CSS-drawn chevrons using pseudo-elements.
  - This fixes the real optical-centering issue: typographic ‹/› glyphs have uneven side bearings and cannot be perfectly centered by align-items alone.
  - Kept the existing button HTML, button geometry, gallery JS and gallery layout unchanged.
  - Adjusted the slide counter pill to a fixed centered flex geometry with stable line-height and numeric rendering.
  - Rollback point: use v2.8 if you need the previous text-glyph arrow controls.

  v2.10 — product badges, feature strip and mobile gallery aspect
  - Reworked .product-badges from text-symbol glyphs to inline SVG line icons for delivery, installation, return and payment.
  - Rebuilt .product-feature-strip with the same thin accent SVG icon language and product-function labels.
  - Desktop feature strip remains a calm horizontal premium row; mobile feature strip becomes a clean 2-column card grid inspired by the approved mobile render.
  - Changed mobile gallery image geometry from a tall cropped 430px block to a 16:11 horizontal/square-safe aspect ratio so the product scene is not over-cropped on phones.
  - HTML changes are required in product.html because the old glyph icons were replaced with inline SVG.
  - Rollback point: use v2.9 if you only need the previous gallery control-centering fix without product-badge and feature-strip redesign.

  v2.11 — product feature strip light list
  - Rebalanced .product-feature-strip after UX review: the second icon block was visually competing with .product-badges.
  - Desktop feature strip was made lighter: lower height, calmer background, smaller icons and softer text weight.
  - Mobile feature strip was changed from a 2-column card grid into one clean list block: icon left, text right, thin row dividers.
  - This reduces icon/card overload on product mobile while preserving all six function labels.
  - No HTML or JS changes are required for this version.
  - Rollback point: use v2.10 if the previous mobile 2-column feature-card grid is preferred.

  v2.12 — product feature strip mobile chips
  - Reworked mobile .product-feature-strip again after visual review: the vertical list felt too utilitarian and too tall.
  - Mobile feature strip is now a compact horizontal swipe row of premium chips: icon left, short label right, one line, no stacked cards and no long row list.
  - Added desktop/mobile label support in product.html: full labels stay on desktop, shorter labels are shown on mobile to avoid ugly line breaks.
  - Desktop feature strip remains a calm horizontal row and keeps the product-function order before the installation banner.
  - HTML changes are required in product.html for .feature-text, .feature-label-desktop and .feature-label-mobile.
  - Rollback point: use v2.11 if the previous full-width mobile list is preferred, or v2.10 if the 2-column mobile card grid is preferred.

  v2.13 — specs and installation section rebuild
  - Removed the separate wide installation banner from product.html.
  - Removed the standalone finish-card from product.html because one available color does not need a fake selector.
  - Moved color information into the visible specification rows: “Цвет — Классический белый”.
  - Rebuilt the section after the feature strip as a two-column pair: specs card on the left and installation card on the right.
  - Added a smooth Safari-safe expandable specifications area with hidden extra rows and a down-arrow toggle.
  - Rebuilt the installation card with its own media area, heading, text and “Подробнее” action in the same premium card system.
  - Mobile installation image is no longer forced into a tiny 120px height; it can breathe and scale naturally.
  - Requires product.html changes and JS v1.3 for the specs toggle.
  - Rollback point: use v2.12 if the previous wide installation banner and finish-card layout is preferred.

  v2.14 — installation card desktop horizontal layout
  - Reworked only the desktop .installation-card layout after UX review: the previous top-image composition looked empty inside a tall two-column row.
  - Desktop installation card is now an inner two-column composition: media block on the left, copy/action on the right.
  - Kept the same card, heading, text and action semantics; no product.html changes are required.
  - Mobile installation card remains vertical and breathable: image above, copy below, full-width action button.
  - Rollback point: use v2.13 if the previous vertical installation-card composition is preferred on desktop.

  v2.15 — product service guarantee / QR rebuild
  - Rebuilt the product-page service block after UX review: the old two-column service/QR section looked too weak and empty on desktop.
  - Added a large inline SVG shield-with-check mark as the main trust symbol in the official warranty block.
  - Rebalanced the desktop section into two strong columns: wider warranty/service column on the left, registration/QR column on the right.
  - Enlarged the QR code and gave it a cleaner dedicated surface for product registration.
  - Mobile layout stays stacked and calm, with a larger QR code and no extra visual clutter.
  - Requires product.html changes because the service section markup was rebuilt.
  - Rollback point: use v2.14 if the previous minimal service-grid layout is preferred.

  v2.16 — service proof mobile centering and specs independent height
  - Centered the large service shield SVG on mobile so it does not stick to the left edge of the stacked warranty block.
  - Changed .product-content--specs from stretched grid items to start-aligned grid items.
  - This keeps the neighboring installation card at its natural height when “Смотреть все характеристики” expands the specs card.
  - Lower content still moves down naturally with the expanded specs card, but the installation card no longer visually stretches with the left column.
  - CSS-only change; no product.html or JS changes are required.
  - Rollback point: use v2.15 if the previous equal-height specs/installation pair is preferred.

  v2.17 — service registration desktop QR / mobile CTA
  - Reworked the service registration block after UX review: a QR code on a mobile screen is not a practical primary action.
  - Desktop still shows the QR code because it can be scanned from a computer screen with a phone.
  - Added a normal CTA link to the service page: “Перейти к регистрации”, so registration also works without scanning.
  - Mobile hides the QR code and shows a small premium inline SVG illustration of product packaging / QR / service shield instead.
  - Mobile CTA leads to service.html where the full product-registration form will live.
  - CSS + product.html change; JS is not required.
  - Rollback point: use v2.16 if the previous QR-on-mobile registration block is preferred.



  v2.18 — product feature strip mobile full-bleed swipe
  - Reworked only the mobile .product-feature-strip horizontal scroller after UX review.
  - The chip row now becomes a safe full-bleed mobile scroller: it starts from the same left content gutter but reaches the right edge of the viewport.
  - Removed the right-side container air so the next chip is visibly clipped at the screen edge, making the swipe affordance clear.
  - Kept page-level overflow safe: only the feature strip scrolls horizontally, the body does not gain horizontal scrolling.
  - CSS-only change; product.html and JS are unchanged.
  - Rollback point: use v2.17 if the centered container-width chip row is preferred.


  v2.19 — product accessories catalog and centered FAQ
  - Removed the lower “Бесплатная установка в день доставки” block from the product page until the service promise is confirmed.
  - Rebuilt the lower accessories section as a catalog-style “Рекомендуемые аксессуары” block with three accessory cards and a “Перейти в каталог” action.
  - Desktop accessories now use a calm 3-card row; mobile accessories use a horizontal swipe row with the next card partially visible.
  - Rebuilt product FAQ as a centered full-width product section with five questions and more vertical breathing room.
  - Kept the existing FAQ JS behavior and did not change gallery, header, specs, service or bottom-sheet logic.
  - HTML changes are required in product.html; JS changes are not required for this version.
  - Rollback point: use v2.18 if the previous two-column accessories/installation block and compact FAQ are needed.

  v2.20 — product accessories horizontal cards and clean FAQ
  - Reworked desktop recommended accessory cards after UI review: each card now uses a horizontal product/catalog layout with media on the left and title/description/price on the right.
  - Enlarged and clarified accessory media on desktop without changing the mobile swipe-card direction.
  - Moved the desktop “Перейти в каталог” action into the accessories section header as a compact button; mobile keeps a full-width catalog action after the swipe row.
  - Removed the outer card frame/background from the product FAQ block on desktop and mobile, leaving a clean centered FAQ section with only the question separators.
  - Requires product.html + CSS changes; JS is unchanged.
  - Rollback point: use v2.19 if the previous large vertical accessory cards and framed FAQ block are preferred.

  v2.21 — product footer integration
  - HTML-only step: added the global footer from the home page to product.html.
  - CSS was intentionally not changed because the footer styles already existed in the shared stylesheet.
  - Rollback point: remove the footer from product.html if the product page must temporarily stay footerless.

  v2.22 — mobile hamburger fixed overlay and animated close
  - Added explicit is-menu-open state support for the mobile menu, separate from the generic is-locked scroll state.
  - When the hamburger menu is open, the mobile header becomes fixed above the drawer, so it does not disappear after the page has been scrolled.
  - Converted the hamburger icon into a smooth animated close icon through aria-expanded CSS states.
  - Reworked the drawer visibility from display toggling to opacity/transform/visibility for a calmer premium open/close motion.
  - Kept desktop and page content spacing untouched; the fixed behavior is active only while the mobile menu is open.
  - Rollback point: use v2.20 CSS plus v1.3 JS if the temporary fixed-menu overlay behavior causes issues on older mobile browsers.

  v2.23 — mobile hamburger equal cross animation
  - Refined the open-state hamburger animation after visual QA: the close icon uses two equal-length centered strokes.
  - Regression note: this version accidentally centered the closed hamburger strokes too, so the short third line stopped being right-aligned.
  - Kept the product-specific third-line override scoped with :not([aria-expanded="true"]) so it cannot shorten the close icon.
  - CSS-only change; product.html and juvu.js do not need to be changed.
  - Rollback point: use v2.22 if the whole animated-close approach needs to be reverted.


  v2.24 — mobile hamburger closed-state right alignment
  - Fixed the regression from v2.23: the closed hamburger state is right-aligned again, including the shorter third line.
  - Kept the v2.23 open-state cross geometry: two equal centered 26px lines at 45deg / -45deg.
  - Separated closed-state geometry from opened-state geometry so improving the cross no longer changes the default hamburger look.
  - CSS-only change; product.html and juvu.js do not need to be changed.
  - Rollback point: use v2.23 only if the centered closed hamburger is intentionally preferred.

  Guardrails:
  - Do not reinterpret typography, background, model cards, hover effects, hero typography or base spacing without a direct task.
  - Do not add random patches at the end of the file.
  - Fix rules in their proper sections and update this version log with every CSS change.
  - When changing only CSS, return the full updated CSS file and keep this changelog detailed.

*/
:root {
  --bg: #f8f7f4;
  --surface: #fffdfa;
  --surface-2: #f4f1ec;
  --text: #11110f;
  --muted: #6d6963;
  --line: #e8e2da;
  --line-2: #d9d2c9;
  --accent: #c89462;
  --accent-soft: #f4eadf;
  --dark: #050505;
  --shadow: 0 22px 60px rgba(33, 27, 20, 0.075);
  --radius: 24px;
  --radius-lg: 34px;
  --container: 1640px;
  --pad: 64px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family:
    Inter,
    Manrope,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: clip;
}

html.is-locked,
body.is-locked,
html.is-menu-open,
body.is-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-locked {
  touch-action: none;
}

body.is-menu-open {
  touch-action: pan-y;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: min(calc(100% - var(--pad) * 2), var(--container));
  margin-inline: auto;
}

/* Header */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 70;
  height: 88px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(16, 16, 14, 0.06);
  backdrop-filter: saturate(130%) blur(18px);
  -webkit-backdrop-filter: saturate(130%) blur(18px);
}

.site-header__inner {
  width: min(calc(100% - var(--pad) * 2), var(--container));
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 44px;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: 42px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .site-header .brand {
    transform: translateY(-2px);
  }
}

.main-nav {
  display: flex;
  height: 100%;
  align-items: center;
  justify-self: center;
  gap: 38px;
  margin-left: 0;
  font-size: 15px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.01em;
}

.main-nav a {
  opacity: 0.96;
  transition:
    opacity 0.18s ease,
    color 0.18s ease;
}

.main-nav > a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

.main-nav a:hover {
  opacity: 0.7;
  color: var(--accent);
}

.header-actions {
  justify-self: end;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-phone {
  display: grid;
  text-align: right;
  line-height: 1.05;
}

.header-phone span {
  font-size: 21px;
  font-weight: 760;
  letter-spacing: 0.05em;
}

.header-phone small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.icon-btn,
.mobile-cart,
.mobile-back {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.icon-btn:hover,
.mobile-cart:hover,
.mobile-back:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.icon-btn svg,
.mobile-cart svg,
.mobile-back svg,
.header-cart svg,
.cart-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn svg {
  fill: none;
}

.icon-btn[aria-label="Telegram"] svg {
  fill: none;
  stroke-width: 1.55;
}

.header-cart svg,
.cart-btn svg {
  stroke-width: 1.75;
}

.header-cart,
.cart-btn {
  position: relative;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.82);
  font-weight: 720;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.header-cart:hover,
.cart-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(33, 27, 20, 0.08);
}

.cart-badge {
  position: absolute;
  z-index: 3;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #d84b3a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(216, 75, 58, 0.24);
  font-size: 10px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: 0;
  pointer-events: none;
}

.cart-badge.is-visible {
  display: inline-flex;
}

.header-cart .cart-badge,
.cart-btn .cart-badge {
  top: -7px;
  right: 4px;
}

.mobile-cart,
.mobile-back {
  display: none;
}

.mobile-menu-toggle {
  --hamburger-line-long: 25px;
  --hamburger-line-short: 16px;
  --hamburger-line-open: 26px;
  --hamburger-line-right: 8px;
  --hamburger-line-gap: 8px;

  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle span {
  position: absolute;
  top: 50%;
  right: var(--hamburger-line-right);
  display: block;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    width 0.24s ease,
    opacity 0.18s ease,
    right 0.24s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, width;
}

.mobile-menu-toggle span:nth-child(1) {
  width: var(--hamburger-line-long);
  transform: translateY(calc(var(--hamburger-line-gap) * -1));
}

.mobile-menu-toggle span:nth-child(2) {
  width: var(--hamburger-line-long);
  transform: translateY(0);
}

.mobile-menu-toggle span:nth-child(3) {
  width: var(--hamburger-line-short);
  transform: translateY(var(--hamburger-line-gap));
}

.mobile-menu-toggle[aria-expanded="true"] span {
  right: var(--hamburger-line-open-right, 50%);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  width: var(--hamburger-line-open);
  transform: translate(50%, -50%) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: translate(50%, -50%) scaleX(0.45);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  width: var(--hamburger-line-open);
  transform: translate(50%, -50%) rotate(-45deg);
}

.btn {
  min-height: 58px;
  padding: 0 30px;
  border-radius: 17px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-weight: 720;
  letter-spacing: 0.005em;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

.btn-light {
  background: rgba(255, 255, 255, 0.85);
  color: #121210;
}

.btn-small {
  min-height: 58px;
  padding: 0 30px;
}

.btn-wide {
  width: 100%;
}


/* Header company dropdown */
.main-nav__item {
  position: relative;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
}

.main-nav__item::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -28px;
  left: -18px;
  height: 32px;
  pointer-events: none;
}

.main-nav__item:hover::after,
.main-nav__item:focus-within::after {
  pointer-events: auto;
}

.main-nav__link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1;
  vertical-align: middle;
}

.main-nav a.active,
.main-nav__link.active {
  color: var(--accent);
  opacity: 1;
}

.main-nav__chevron {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  margin: 0;
  color: currentColor;
}

.main-nav__chevron::before,
.main-nav__chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 1.6px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.main-nav__chevron::before {
  transform: translate(-5px, -50%) rotate(45deg);
}

.main-nav__chevron::after {
  transform: translate(-1px, -50%) rotate(-45deg);
}

.main-nav__item:hover .main-nav__chevron::before,
.main-nav__item:focus-within .main-nav__chevron::before {
  transform: translate(-5px, -50%) rotate(-45deg);
}

.main-nav__item:hover .main-nav__chevron::after,
.main-nav__item:focus-within .main-nav__chevron::after {
  transform: translate(-1px, -50%) rotate(45deg);
}

.main-nav-dropdown {
  position: absolute;
  top: calc(100% + 26px);
  left: 50%;
  z-index: 95;
  width: 360px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-nav__item:hover .main-nav-dropdown,
.main-nav__item:focus-within .main-nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.main-nav-dropdown__inner {
  padding: 14px;
  border: 1px solid rgba(224, 213, 202, 0.88);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 70px rgba(39, 31, 24, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.main-nav-dropdown__intro,
.main-nav-dropdown__group > span,
.main-nav-dropdown__group small {
  display: none;
}

.main-nav-dropdown__intro {
  padding: 4px 4px 15px;
  border-bottom: 1px solid rgba(17, 17, 15, 0.08);
}

.main-nav-dropdown__intro span,
.main-nav-dropdown__group > span {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.main-nav-dropdown__intro p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.main-nav-dropdown__group {
  display: grid;
  gap: 6px;
}

.main-nav-dropdown__group + .main-nav-dropdown__group {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.main-nav-dropdown__group a {
  position: relative;
  display: block;
  padding: 13px 38px 13px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: #191815;
  opacity: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.main-nav-dropdown__group a::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 13px;
  color: rgba(200, 148, 98, 0.72);
  font-size: 15px;
  transform: translateY(-50%);
}

.main-nav-dropdown__group a:hover,
.main-nav-dropdown__group a:focus-visible {
  border-color: rgba(200, 148, 98, 0.18);
  background: rgba(255, 250, 244, 0.72);
  color: #17110f;
  opacity: 1;
  transform: translateY(-1px);
}

.main-nav-dropdown__group b {
  display: block;
  font-size: 15px;
  line-height: 1.22;
  font-weight: 720;
}

.main-nav-dropdown__group small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.mobile-drawer {
  position: fixed;
  inset: 88px 0 auto 0;
  z-index: 68;
  display: block;
  max-height: calc(100dvh - 88px);
  padding: 16px 0 20px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(16, 16, 14, 0.06);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-drawer__inner {
  width: min(calc(100% - var(--pad) * 2), var(--container));
  margin-inline: auto;
  display: grid;
  gap: 0;
}

.mobile-drawer a {
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(17, 17, 15, 0.08);
  border-radius: 0;
  background: transparent;
  color: #191815;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.mobile-drawer a:last-child {
  border-bottom: 0;
}

.mobile-drawer a:hover {
  color: var(--accent);
}


.mobile-drawer__nav {
  display: grid;
  gap: 0;
}

.mobile-drawer__nav > a,
.mobile-nav-group__toggle {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(17, 17, 15, 0.08);
  border-radius: 0;
  background: transparent;
  color: #191815;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
}

.mobile-drawer__nav > a.active,
.mobile-nav-group.is-active > .mobile-nav-group__toggle {
  color: var(--accent);
}

.mobile-nav-group {
  border-bottom: 1px solid rgba(17, 17, 15, 0.08);
}

.mobile-nav-group__toggle {
  border-bottom: 0;
}

.mobile-nav-group__icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: rgba(200, 148, 98, 0.12);
  color: var(--accent);
}

.mobile-nav-group__icon::before,
.mobile-nav-group__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.18s ease,
    transform 0.22s ease;
}

.mobile-nav-group__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mobile-nav-group.is-open .mobile-nav-group__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.mobile-nav-group__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.mobile-nav-group.is-open .mobile-nav-group__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mobile-nav-group__panel-inner {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.mobile-nav-group.is-open .mobile-nav-group__panel-inner {
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid rgba(224, 213, 202, 0.62);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(250, 247, 243, 0.6) 100%);
}

.mobile-nav-group__panel a {
  display: block;
  padding: 13px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #4a433c;
  font-size: 14px;
  font-weight: 620;
  line-height: 1.25;
}

.mobile-nav-group__panel a:hover {
  color: var(--accent);
  background: rgba(255, 250, 244, 0.82);
}

.mobile-drawer__support {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(17, 17, 15, 0.09);
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}

.mobile-drawer__support > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mobile-drawer__phone {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: #17110f;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.mobile-drawer__support p,
.mobile-drawer__support small {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.mobile-drawer__support .btn {
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
  padding: 0 22px;
  justify-content: center;
  border-radius: 16px;
  border-color: var(--dark);
  background: var(--dark);
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.09);
}

.phone-popover {
  position: fixed;
  right: 18px;
  top: 82px;
  z-index: 80;
  width: min(320px, calc(100vw - 36px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: 0.22s ease;
}

.phone-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.phone-popover button {
  position: absolute;
  right: 12px;
  top: 10px;
  border: 0;
  background: transparent;
  font-size: 26px;
}

.phone-popover strong {
  display: block;
  font-size: 20px;
  margin-bottom: 12px;
}

.phone-popover a {
  display: block;
  font-size: 24px;
  font-weight: 800;
}

.phone-popover span {
  display: block;
  color: var(--muted);
  margin-top: 8px;
}

/* Home hero */
.hero-home {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: #fbfaf7;
  isolation: isolate;
}

.hero-home:before {
  display: none;
}

.hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(calc(100% - var(--pad) * 2), var(--container));
  transform: translateX(-50%);
  overflow: hidden;
}

.hero__media:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      #fbfaf7 0%,
      #fff 21%,
      rgba(255, 255, 255, 0.96) 34%,
      rgba(255, 255, 255, 0.66) 49%,
      rgba(255, 255, 255, 0.14) 66%,
      rgba(255, 255, 255, 0) 84%
    ),
    linear-gradient(
      270deg,
      #fbfaf7 0%,
      rgba(251, 250, 247, 0.82) 3%,
      rgba(251, 250, 247, 0) 12%
    );
  pointer-events: none;
}

.hero__media:after {
  display: none;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero__content {
  position: relative;
  z-index: 2;
  min-height: 640px;
  display: flex;
  align-items: center;
}

.hero__copy {
  width: 560px;
  padding-top: 18px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(200, 148, 98, 0.58);
  border-radius: 8px;
  color: #b37f4f;
  background: rgba(255, 255, 255, 0.34);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__copy h1 {
  margin: 24px 0 0;
  font-size: 66px;
  line-height: 1.08;
  letter-spacing: 0.045em;
  font-weight: 570;
}

.hero__copy p {
  margin: 24px 0 0;
  max-width: 520px;
  color: #605d58;
  font-size: 20px;
  line-height: 1.62;
  letter-spacing: 0.015em;
}

.hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 36px;
}

.play-dot {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
}

.hero-trust {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 38px;
  max-width: 640px;
}

.hero-trust div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 178px;
  padding-right: 26px;
  margin-right: 26px;
  border-right: 1px solid rgba(18, 18, 16, 0.12);
}

.hero-trust div:last-child {
  border-right: 0;
  margin-right: 0;
}

.hero-trust svg {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-trust span {
  font-size: 14px;
  line-height: 1.35;
  color: #312f2b;
}

/* Feature cards */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.feature-card {
  min-height: 170px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.feature-card h3 {
  margin: 14px 0 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 620;
}

.feature-card p {
  margin: 0;
  color: #706b65;
  font-size: 14px;
  line-height: 1.45;
}

.line-icon {
  width: 56px;
  height: 40px;
  color: var(--accent);
  display: grid;
  place-items: center;
}

.line-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-card > .line-svg {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-icon.dots {
  position: relative;
}

.line-icon.dots:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    13px 0 0 var(--accent),
    26px 0 0 var(--accent),
    7px 10px 0 var(--accent),
    20px 10px 0 var(--accent),
    13px 20px 0 var(--accent);
  opacity: 0.95;
}

/* Sections / models */
.section-head {
  margin-bottom: 28px;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.section-head h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 560;
  letter-spacing: 0.02em;
}

.section-head p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 19px;
  max-width: 790px;
}

.section-head a {
  font-weight: 650;
}

.models {
  padding-top: 58px;
}

.models-mobile-cta {
  display: none;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.model-card {
  position: relative;
  min-height: 382px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 178px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.model-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #ded4c8;
}

.model-card img {
  width: 100%;
  height: 178px;
  object-fit: contain;
}

.model-card strong {
  display: block;
  margin: 0;
  padding-right: 58px;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 720;
}

.model-card p {
  margin: 10px 0 18px;
  padding-right: 44px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.model-card b {
  display: block;
  padding-right: 58px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.circle-arrow {
  align-self: end;
  justify-self: end;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 19px;
  background: #fff;
}

.model-card .circle-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
}

/* Compare */
.compare,
.selector-access,
.final-row {
  padding-top: 70px;
}

.compare-system {
  max-width: 1120px;
}

.compare-system__card {
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 148, 98, 0.08) 0, rgba(200, 148, 98, 0) 36%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 70px rgba(33, 27, 20, 0.04);
}

.compare-system__intro {
  max-width: 780px;
  margin-bottom: 30px;
}

.compare-system__intro .eyebrow {
  align-self: flex-start;
}

.compare-system__intro h2 {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: clamp(36px, 3vw, 48px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.compare-system__intro p {
  margin: 18px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.compare-system__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.compare-system__side {
  padding: 28px 30px;
  border: 1px solid rgba(232, 226, 218, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
}

.compare-system__side--active {
  border-color: rgba(200, 148, 98, 0.38);
  background: linear-gradient(135deg, #fffaf4 0%, #fff 62%, rgba(244, 234, 223, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 148, 98, 0.12);
}

.compare-system__label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(200, 148, 98, 0.24);
  border-radius: 999px;
  color: #8f7c69;
  background: rgba(250, 247, 243, 0.74);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.compare-system__side--active .compare-system__label {
  border-color: rgba(200, 148, 98, 0.48);
  color: var(--accent);
  background: rgba(255, 255, 255, 0.74);
}

.compare-system__side h3 {
  margin: 16px 0 0;
  color: #17110f;
  font-size: 25px;
  line-height: 1.18;
  font-weight: 640;
}

.compare-system__side ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}

.compare-system__side li {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 14px 0 14px 28px;
  border-top: 1px solid rgba(232, 226, 218, 0.88);
  color: #292724;
  font-size: 17px;
  line-height: 1.3;
}

.compare-system__side li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 2px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(156, 139, 121, 0.45);
  border-radius: 50%;
  background: rgba(156, 139, 121, 0.08);
}

.compare-system__side--active li::before {
  content: "✓";
  top: 15px;
  left: 0;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(200, 148, 98, 0.48);
  border-radius: 50%;
  background: rgba(200, 148, 98, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 780;
  line-height: 1;
}

.compare-system__side strong {
  color: #17110f;
  font-size: 19px;
  font-weight: 640;
}

.compare-system__side small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.28;
}

/* Accessories / selector */
.selector-access {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.wide-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
}

.wide-card__copy {
  position: relative;
  z-index: 2;
  max-width: 48%;
}

.wide-card__copy h2 {
  margin: 16px 0 16px;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 560;
}

.wide-card__copy p {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.wide-card img {
  position: absolute;
  right: 0;
  top: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
}

.accessories-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 46%,
    rgba(255, 255, 255, 0.2) 72%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
}

.service-mini-card {
  background: linear-gradient(135deg, #fffdf9 0%, #fff 68%, rgba(244, 234, 223, 0.18) 100%);
}

.service-mini-card .wide-card__copy {
  max-width: 100%;
}

.service-mini-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(200, 148, 98, 0.18);
}

.service-mini-list > span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.service-mini-icon {
  width: 23px;
  height: 23px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
}

.service-mini-list b {
  display: block;
  color: #17110f;
  font-size: 14px;
  line-height: 1.26;
}

.service-mini-list small {
  display: block;
  margin-top: 4px;
  color: #6f6961;
  font-size: 13px;
  line-height: 1.28;
}

/* FAQ / CTA */
.final-row {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 28px;
  padding-bottom: 76px;
}

.faq-card,
.cta-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 34px;
}

.faq-card h2,
.cta-card h2 {
  margin: 0 0 22px;
  font-size: 30px;
  line-height: 1.16;
  font-weight: 560;
}

.faq-list button {
  width: 100%;
  height: 54px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #25231f;
}

.faq-list button:first-child {
  border-top: 0;
}

.faq-list button span {
  font-size: 18px;
  color: #5a5650;
}

.faq-list div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}

.faq-list div p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.faq-list button.is-open + div {
  grid-template-rows: 1fr;
  padding-bottom: 14px;
}

.cta-card {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  padding: 52px;
}

.cta-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 52%,
    rgba(255, 255, 255, 0.5) 74%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
}

.cta-card > *:not(img) {
  position: relative;
  z-index: 2;
}

.cta-card p {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
  max-width: 560px;
}

.cta-card div {
  display: flex;
  gap: 14px;
}

.cta-card img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 51%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}




/* Inner pages core */
.container-medium {
  max-width: 1140px;
}

.container-reading {
  max-width: 1040px;
}

.inner-main {
  padding: 30px 0 88px;
}

.breadcrumbs a {
  color: inherit;
}

.breadcrumbs a:hover {
  color: var(--text);
}

.page-head {
  margin-bottom: 34px;
}

.page-head h1 {
  margin: 18px 0 0;
  max-width: 980px;
  font-size: clamp(42px, 4.8vw, 68px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.page-head p {
  margin: 20px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.58;
}

.page-head--plain .eyebrow {
  display: none;
}

.catalog-filter-panel,
.catalog-card,
.service-request-card,
.inner-info-card,
.service-qr-card,
.contact-card,
.contact-form-card,
.contact-quick-card,
.contact-requisites-card,
.manager-strip,
.support-strip,
.about-feature-card,
.about-hero-card,
.about-gallery,
.about-path__inner,
.company-overview__main,
.company-overview__side,
.company-link-card,
.company-meta__card,
.text-article,
.cart-item,
.cart-summary,
.cart-empty {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
}

/* Catalog */
.catalog-section {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-width: 0;
  gap: 24px;
  align-items: start;
}

.catalog-filter-panel {
  position: sticky;
  top: 104px;
  min-width: 0;
  padding: 22px;
}

.catalog-filter-panel__title {
  display: block;
  margin-bottom: 14px;
  color: #17110f;
  font-size: 18px;
  font-weight: 650;
}

.catalog-filter-panel__buttons {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
}

.catalog-filter-panel button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #2f2b27;
  font: inherit;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.catalog-filter-panel button.is-active {
  border-color: rgba(200, 148, 98, 0.5);
  background: rgba(200, 148, 98, 0.09);
  color: var(--accent);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: 18px;
}

.catalog-card {
  position: relative;
  min-width: 0;
  min-height: 382px;
  padding: 22px;
  display: grid;
  grid-template-rows: auto 178px minmax(0, 1fr);
  gap: 16px;
  color: var(--text);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.2s ease;
}

.catalog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #ded4c8;
}

.catalog-card.is-hidden {
  display: none;
}

.catalog-card__badge {
  justify-self: start;
  min-height: 26px;
  padding: 6px 10px 5px;
  border: 1px solid rgba(200, 148, 98, 0.3);
  border-radius: 999px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.catalog-card img {
  width: 100%;
  height: 178px;
  object-fit: contain;
}

.catalog-card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
}

.catalog-card p {
  margin: 10px 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.catalog-card strong {
  font-size: 22px;
}

.catalog-card .circle-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
}

/* About and company */
.about-intro,
.about-gallery,
.company-overview,
.company-meta {
  display: grid;
  gap: 24px;
}

.about-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  overflow: hidden;
}

.about-hero-card__content {
  padding: 38px;
}

.about-hero-card__content h2 {
  margin: 18px 0 0;
  font-size: 36px;
  line-height: 1.12;
}

.about-hero-card__content p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.about-hero-card__content .inner-hero__actions {
  margin-top: 24px;
}

.about-hero-card__media {
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 100%),
    #f7f1ea;
}

.about-hero-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.about-feature-card {
  overflow: hidden;
  padding: 0 0 26px;
}

.about-feature-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: #f4ede5;
}

.about-feature-card span {
  display: block;
  margin: 22px 26px 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-feature-card h2 {
  margin: 16px 26px 0;
  font-size: 24px;
  line-height: 1.18;
}

.about-feature-card p {
  margin: 14px 26px 0;
  color: var(--muted);
  line-height: 1.58;
}

.about-gallery {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  margin-top: 24px;
  padding: 36px;
}

.about-gallery__copy h2 {
  margin: 18px 0 0;
  font-size: 34px;
  line-height: 1.12;
}

.about-gallery__copy p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.64;
}

.about-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.about-gallery__item {
  min-height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: #f4ede5;
}

.about-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-path {
  margin-top: 24px;
}

.about-path__inner {
  padding: 42px 38px;
  text-align: center;
}

.about-path__inner > h2 {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: 34px;
  line-height: 1.12;
}

.about-path__inner > p {
  max-width: 780px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.64;
}

.about-path__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
  text-align: left;
}

.about-path-step {
  min-height: 188px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 44%),
    rgba(255, 255, 255, 0.58);
}

.about-path-step > span {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-path-step h3 {
  margin: 18px 0 0;
  font-size: 20px;
  line-height: 1.18;
}

.about-path-step p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.56;
}

.company-overview {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
}

.company-directory + .company-overview {
  margin-top: 52px;
}

.company-overview__main,
.company-overview__side {
  overflow: hidden;
}

.company-overview__main {
  padding: 36px;
}

.company-overview__main h2 {
  margin: 18px 0 0;
  font-size: 34px;
  line-height: 1.12;
}

.company-overview__main p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.company-overview__side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f4ede5;
}

.company-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.company-link-card {
  padding: 26px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.company-link-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #ded4c8;
}

.company-link-card span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(200, 148, 98, 0.28);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.company-link-card h3 {
  margin: 16px 0 0;
  font-size: 24px;
  line-height: 1.2;
}

.company-link-card p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.56;
}

.company-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
}

.company-meta__card {
  padding: 30px;
}

.company-meta__card h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.14;
}

.company-meta__card p,
.company-meta__card small {
  display: block;
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.58;
}

/* Service page */
.service-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 420px;
  gap: 24px;
  align-items: start;
}

.service-request-card {
  padding: 36px;
}

.service-request-card h2 {
  margin: 18px 0 0;
  font-size: 34px;
  line-height: 1.12;
}

.service-request-card > p {
  margin: 14px 0 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.service-request-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.service-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.service-field-wide {
  grid-column: 1 / -1;
}

.service-info-stack {
  display: grid;
  gap: 14px;
}

.inner-info-card,
.service-qr-card {
  padding: 24px;
}

.inner-info-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.inner-info-card h3,
.service-qr-card h3 {
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 1.18;
}

.inner-info-card p,
.service-qr-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.service-qr-card {
  overflow: hidden;
  padding: 0;
}

.service-qr-card__image {
  height: 220px;
  overflow: hidden;
  background: #f4ede5;
}

.service-qr-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-qr-card > div:not(.service-qr-card__image) {
  padding: 24px;
}

.support-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: 34px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 148, 98, 0.1) 0, rgba(200, 148, 98, 0) 36%),
    rgba(255, 255, 255, 0.78);
}

.support-strip h2 {
  margin: 16px 0 0;
  font-size: 34px;
  line-height: 1.12;
}

.support-strip p {
  margin: 12px 0 0;
  max-width: 660px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.support-strip__actions {
  display: flex;
  gap: 12px;
}

/* Contacts page */
.contacts-hub {
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.contact-form-card {
  padding: 36px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, rgba(249, 249, 247, 0.94) 0%, rgba(243, 243, 241, 0.88) 100%);
  box-shadow: 0 24px 70px rgba(33, 27, 20, 0.045);
}

.contact-form-card h2,
.contact-quick-card h2,
.contact-requisites-card h2 {
  margin: 18px 0 0;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.contact-form-card > p,
.contact-requisites-card > div > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.contact-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.contact-audience {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 452px);
  min-height: 52px;
  margin: 0;
  padding: 5px;
  border: 1px solid rgba(200, 148, 98, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 250, 244, 0.74) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.contact-audience legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-audience__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 2);
  border-radius: 13px;
  background: linear-gradient(135deg, #a87046 0%, #c89462 100%);
  box-shadow:
    0 12px 24px rgba(161, 104, 64, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateX(0);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease;
}

.contact-audience.is-company .contact-audience__thumb {
  transform: translateX(100%);
}

.contact-audience__option {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  cursor: pointer;
  user-select: none;
}

.contact-audience__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-audience__option span {
  color: #8f6849;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.contact-audience__option.is-active span {
  color: #fff;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-field--wide {
  grid-column: 1 / -1;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #7c756e;
  font-weight: 400;
  opacity: 1;
}

.contact-field select {
  width: 100%;
  height: 56px;
  padding: 0 46px 0 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0;
  outline: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8b8075 50%),
    linear-gradient(135deg, #8b8075 50%, transparent 50%);
  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.contact-field select:required:invalid {
  color: #7c756e;
}

.contact-field select option {
  color: var(--text);
  background: #fff;
}

.contact-field select option[value=""] {
  color: #7c756e;
}

.contact-field select:focus {
  border-color: rgba(200, 148, 98, 0.72);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(200, 148, 98, 0.12);
}

.contact-submit {
  justify-self: start;
  min-width: 250px;
}

.contact-aside {
  display: grid;
  gap: 16px;
}

.contact-quick-card {
  padding: 28px;
}

.contact-quick-card > p,
.contact-messengers p,
.contact-mail-line small {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.56;
}

.contact-quick-card .btn {
  margin-top: 22px;
}

.contact-messengers {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.contact-messengers h3 {
  margin: 0;
  color: #17110f;
  font-size: 23px;
  line-height: 1.18;
  font-weight: 720;
  letter-spacing: -0.015em;
}

.contact-social-links {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.contact-social-links a {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 10px;
  border: 1px solid rgba(224, 213, 202, 0.92);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 250, 244, 0.58) 100%);
  color: #201c18;
  font-weight: 720;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.contact-social-links a:hover {
  border-color: rgba(200, 148, 98, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 246, 236, 0.74) 100%);
  color: #9c6a42;
  box-shadow: 0 12px 24px rgba(37, 29, 22, 0.06);
  transform: translateY(-1px);
}

.contact-social-links svg {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 8px;
  border: 1px solid rgba(200, 148, 98, 0.16);
  border-radius: 12px;
  background: rgba(200, 148, 98, 0.08);
  color: var(--accent);
  fill: currentColor;
  box-sizing: border-box;
}

.contact-social-links span {
  min-width: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 720;
}

.contact-mail-line {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.contact-mail-line > span {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-mail-line a {
  display: inline-flex;
  margin-top: 10px;
  color: #17110f;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.contact-requisites-card {
  max-width: 1120px;
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: 34px;
  align-items: start;
  margin-top: 24px;
  padding: 36px;
}

.contact-requisites-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin: 0;
}

.contact-requisites-list div {
  min-width: 0;
}

.contact-requisites-list dt {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.contact-requisites-list dd {
  margin: 7px 0 0;
  color: #17110f;
  font-size: 17px;
  line-height: 1.42;
  font-weight: 680;
  letter-spacing: -0.005em;
}

.contact-requisites-list a {
  color: inherit;
}

/* Text and legal pages */
.text-article {
  padding: 38px;
}

.text-article section + section {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.text-article h2 {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.14;
}

.text-article h3 {
  margin: 24px 0 12px;
  font-size: 24px;
  line-height: 1.2;
}

.text-article p,
.text-article li {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.68;
}

.text-article ul,
.text-article ol {
  margin: 0;
  padding-left: 22px;
}

.text-article blockquote {
  margin: 0;
  padding: 24px 28px;
  border-left: 3px solid var(--accent);
  border-radius: 18px;
  background: rgba(200, 148, 98, 0.07);
  color: #2f2922;
  font-size: 20px;
  line-height: 1.52;
}

.text-note {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(200, 148, 98, 0.22);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.78);
  color: #4a4238;
  line-height: 1.55;
}

.text-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.text-article table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.text-article th,
.text-article td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.text-article th {
  color: #17110f;
  background: rgba(250, 247, 243, 0.72);
  font-weight: 680;
}

.text-article tr:last-child td {
  border-bottom: 0;
}

.text-article--single {
  margin-inline: auto;
}


/* Legal pages: compact table of contents */
.text-layout--legal {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.text-nav--compact {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 2px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
}

.text-nav--compact strong {
  display: block;
  margin: 0 0 8px;
  color: #17110f;
  font-size: 14px;
  line-height: 1.2;
}

.text-nav--compact a {
  display: block;
  padding: 7px 9px;
  border-radius: 10px;
  color: #5e574f;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 560;
}

.text-nav--compact a:hover {
  color: var(--accent);
  background: rgba(200, 148, 98, 0.08);
}

.text-article--legal {
  min-width: 0;
}

.text-article--legal h3 {
  color: #2a2520;
}


/* Cart pages */
.cart-shell {
  max-width: 1120px;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: 24px;
  align-items: start;
}

.cart-items {
  display: grid;
  gap: 14px;
}

.cart-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 138px 128px;
  gap: 18px;
  align-items: center;
  padding: 20px;
}

.cart-item img {
  width: 112px;
  height: 90px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(250, 247, 243, 0.8);
}

.cart-item__main {
  min-width: 0;
}

.cart-item h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.cart-item h2 a:hover {
  color: var(--accent);
}

.cart-item p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.cart-item__remove {
  width: fit-content;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.cart-item__remove:hover {
  color: #8d5e39;
}

.cart-qty {
  display: grid;
  grid-template-columns: 40px 56px 40px;
  align-items: center;
  width: 136px;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
}

.cart-qty__control,
.cart-qty button {
  height: 44px;
  border: 0;
  background: transparent;
  color: #17110f;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.cart-qty__control:hover,
.cart-qty button:hover {
  background: rgba(200, 148, 98, 0.08);
  color: var(--accent);
}

.cart-qty input {
  width: 100%;
  height: 44px;
  border: 0;
  border-inline: 1px solid var(--line);
  text-align: center;
  font: inherit;
  font-weight: 700;
  outline: none;
  -moz-appearance: textfield;
}

.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.cart-qty input:focus {
  background: rgba(255, 250, 244, 0.68);
}

.cart-item > strong,
.cart-item__cost {
  color: #17110f;
  font-size: 20px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.cart-summary {
  position: sticky;
  top: 104px;
  padding: 28px;
}

.cart-summary h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.12;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 22px 0;
  padding: 18px 0;
  border-block: 1px solid var(--line);
}

.cart-total + .cart-total {
  margin-top: -23px;
  border-top: 0;
}

.cart-total span {
  color: var(--muted);
}

.cart-total strong {
  font-size: 24px;
  white-space: nowrap;
}

.cart-summary__note {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid rgba(200, 148, 98, 0.18);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.68);
}

.cart-summary__note span {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cart-summary__note p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.cart-summary__actions,
.cart-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.cart-summary__clean {
  min-height: 52px;
  color: #3c352e;
}

.cart-empty {
  padding: 46px;
}

.cart-empty--wide {
  max-width: 860px;
}

.cart-empty h1 {
  margin: 20px 0 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.06;
}

.cart-empty p {
  max-width: 620px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.58;
}

[data-ms-action].is-loading {
  pointer-events: none;
  opacity: 0.62;
}


/* Checkout form */
.checkout-shell {
  max-width: 980px;
  margin-top: 46px;
}

.checkout-card {
  position: relative;
  display: grid;
  padding: clamp(34px, 4vw, 50px);
  border: 1px solid rgba(232, 226, 218, 0.92);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 148, 98, 0.075) 0, rgba(200, 148, 98, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 253, 250, 0.84) 100%);
  box-shadow: 0 24px 70px rgba(33, 27, 20, 0.045);
}

.checkout-card__head {
  max-width: 760px;
  margin-bottom: 30px;
}

.checkout-card__head h2 {
  margin: 20px 0 0;
  color: #17110f;
  font-size: clamp(34px, 3.1vw, 44px);
  line-height: 1.08;
  font-weight: 640;
  letter-spacing: -0.035em;
}

.checkout-card__head p {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.checkout-card .consult-field {
  gap: 8px;
}

.checkout-card .consult-field span {
  color: #292520;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.checkout-card .consult-field input,
.checkout-card .consult-field textarea {
  border-color: rgba(224, 213, 202, 0.92);
  background: rgba(255, 255, 255, 0.82);
  color: #17110f;
}

.checkout-card .consult-field input {
  height: 58px;
  padding-inline: 20px;
  border-radius: 17px;
}

.checkout-card .consult-field textarea {
  min-height: 112px;
  padding: 18px 20px;
  border-radius: 18px;
  line-height: 1.5;
}

.checkout-card .consult-field input::placeholder,
.checkout-card .consult-field textarea::placeholder {
  color: #8a8279;
}

.checkout-card .consult-field input:focus,
.checkout-card .consult-field textarea:focus {
  border-color: rgba(200, 148, 98, 0.7);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200, 148, 98, 0.11);
}

.checkout-card__section {
  margin-top: 34px;
  padding-top: 32px;
  border-top: 1px solid rgba(232, 226, 218, 0.92);
}

.checkout-card__section h3 {
  margin: 0 0 18px;
  color: #17110f;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 720;
  letter-spacing: -0.012em;
}

.checkout-options {
  display: grid;
  gap: 12px;
}

.checkout-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid rgba(224, 213, 202, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.checkout-option:hover {
  border-color: rgba(200, 148, 98, 0.34);
  background: rgba(255, 255, 255, 0.86);
  transform: translateY(-1px);
}

.checkout-option:has(input:checked) {
  border-color: rgba(200, 148, 98, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 250, 244, 0.68) 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 148, 98, 0.08);
}

.checkout-option input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--dark);
}

.checkout-option span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.checkout-option b {
  color: #17110f;
  font-size: 17px;
  line-height: 1.26;
  font-weight: 760;
}

.checkout-option small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.checkout-option > strong {
  color: #17110f;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 760;
  white-space: nowrap;
}

.checkout-summary {
  display: grid;
  gap: 0;
  max-width: 520px;
  margin-top: 34px;
  padding: 22px 24px;
  border: 1px solid rgba(224, 213, 202, 0.92);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 148, 98, 0.06) 0, rgba(200, 148, 98, 0) 46%),
    rgba(255, 255, 255, 0.72);
}

.checkout-summary div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid rgba(232, 226, 218, 0.9);
}

.checkout-summary div:first-child {
  border-top: 0;
  padding-top: 0;
}

.checkout-summary div:last-child {
  padding-bottom: 0;
}

.checkout-summary span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.35;
}

.checkout-summary strong {
  color: #17110f;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 780;
  white-space: nowrap;
}

.checkout-summary__total strong {
  font-size: 22px;
  letter-spacing: 0.01em;
}

.checkout-consent {
  max-width: 760px;
  margin-top: 24px;
  padding-top: 2px;
}

.checkout-consent a {
  color: #17110f;
}

.checkout-submit {
  width: min(100%, 520px);
  min-height: 62px;
  margin-top: 18px;
  border-radius: 18px;
  justify-self: start;
}

.field-error {
  display: block;
  margin-top: 4px;
  color: #b54a3a;
  font-size: 13px;
  line-height: 1.35;
}

/* Order success page */
.page-order-success .inner-main {
  padding-bottom: 78px;
}

.order-success {
  max-width: 1040px;
  margin-top: 4px;
}

.order-success__card {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 4vw, 62px);
  border: 1px solid rgba(232, 226, 218, 0.9);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(50, 119, 88, 0.085) 0, rgba(50, 119, 88, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 253, 250, 0.8) 100%);
  box-shadow: 0 24px 70px rgba(33, 27, 20, 0.045);
}

.order-success__card .eyebrow {
  border-color: rgba(50, 119, 88, 0.34);
  background: rgba(50, 119, 88, 0.045);
  color: #327758;
}

.order-success__card h1 {
  margin: 26px 0 0;
  color: #327758;
  font-size: clamp(48px, 4.4vw, 64px);
  line-height: 1.04;
  font-weight: 660;
  letter-spacing: -0.035em;
}

.order-success__card p {
  max-width: 820px;
  margin: 22px 0 0;
  color: #4e4b46;
  font-size: 19px;
  line-height: 1.62;
}

.order-success__number {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-top: 26px;
  color: #5c574f;
  font-size: 17px;
  line-height: 1.35;
}

.order-success__number strong {
  color: #17110f;
  font-size: 19px;
  font-weight: 780;
  letter-spacing: 0.01em;
}

.order-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}

.order-success__actions .btn {
  min-width: 220px;
}

.order-success__actions .btn-dark {
  min-width: 268px;
}

.order-success__actions .btn-light {
  background: rgba(255, 255, 255, 0.82);
}

.order-success__actions .btn span {
  margin-left: 6px;
}


/* Footer */
.site-footer {
  background: #080807;
  color: #fff;
  padding: 66px 0 calc(34px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-shell {
  display: grid;
  gap: 44px;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(150px, 0.5fr) minmax(260px, 0.9fr) minmax(230px, 0.75fr);
  gap: 46px;
  align-items: start;
}

.footer-about,
.footer-nav,
.footer-contact,
.footer-info {
  min-width: 0;
}

.footer-brand {
  display: inline-flex;
  color: #fff;
  font-size: 42px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
}

.site-footer p {
  margin: 18px 0 0;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.62;
}

.footer-title {
  display: block;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.footer-nav a,
.footer-legal a {
  color: rgba(255, 255, 255, 0.74);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-nav a:hover,
.footer-legal a:hover {
  color: #fff;
}

.footer-contact {
  display: grid;
  gap: 10px;
  color: rgba(255, 255, 255, 0.62);
}

.footer-phone {
  width: fit-content;
  color: #fff;
  font-size: 26px;
  font-weight: 780;
  letter-spacing: 0.04em;
  line-height: 1.12;
}

.footer-company-note {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  line-height: 1.45;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.footer-social {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.footer-social:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.28);
}

.footer-social svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: currentColor;
  stroke: none;
}

.footer-social:first-child svg {
  width: 20px;
  height: 20px;
}

.footer-social:nth-child(2) svg,
.footer-social:nth-child(3) svg,
.footer-social:nth-child(4) svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.44);
  font-size: 13px;
}

.footer-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.footer-version {
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 22px;
}

.bottom-nav {
  display: none;
}

.bottom-nav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav [data-cart-link] svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

/* Product page preserved */
.breadcrumbs {
  color: var(--muted);
  font-size: 14px;
  margin: 28px auto;
}

.breadcrumbs span {
  padding: 0 12px;
}

.product-hero {
  display: grid;
  grid-template-columns: 1.35fr 0.75fr;
  gap: 70px;
  align-items: start;
}

.gallery {
  position: relative;
}

.gallery-main {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #eee;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.gallery-main.is-grabbing {
  cursor: grabbing;
}

.gallery-main img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  transform: scale(1);
  opacity: 1;
  transition: opacity 0.28s ease, transform 0.34s ease;
  will-change: opacity, transform;
}

.gallery-main img.is-transitioning {
  opacity: 0.16;
  transform: scale(1.012);
}

.count {
  position: absolute;
  left: 18px;
  bottom: 18px;
  min-width: 64px;
  height: 40px;
  padding: 1px 14px 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gallery-arrow {
  position: absolute;
  z-index: 5;
  top: 245px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-size: 0;
  line-height: 0;
}

.gallery-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform-origin: center;
}

.gallery-arrow-left {
  left: 14px;
}

.gallery-arrow-left::before {
  transform: translate(-50%, -50%) rotate(-135deg);
}

.gallery-arrow-right {
  right: 14px;
}

.gallery-arrow-right::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.gallery-thumbs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 16px;
  --thumb-active-left: 0px;
  --thumb-active-top: 0px;
  --thumb-active-width: 0px;
  --thumb-active-height: 0px;
}

.gallery-thumbs::after {
  content: "";
  position: absolute;
  left: var(--thumb-active-left);
  top: var(--thumb-active-top);
  z-index: 3;
  width: var(--thumb-active-width);
  height: var(--thumb-active-height);
  border: 1px solid #111;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(17, 17, 15, 0.08);
  transition:
    left 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease;
}

.gallery-thumbs button {
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  overflow: hidden;
  opacity: 0.72;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.gallery-thumbs button:hover,
.gallery-thumbs button.active {
  opacity: 1;
}

.gallery-thumbs button:hover {
  transform: translateY(-1px);
}

.gallery-thumbs img {
  height: 82px;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.34s ease;
}

.gallery-thumbs button.active img {
  transform: scale(1.035);
}

.product-summary {
  padding-top: 40px;
}

.product-summary h1 {
  font-size: 54px;
  line-height: 1.05;
  margin: 20px 0 0;
}

.product-summary p {
  font-size: 19px;
  color: var(--muted);
  max-width: 520px;
}

.price {
  font-size: 32px;
  font-weight: 790;
  letter-spacing: 0.04em;
  margin: 22px 0;
}

.stock {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}

.stock span,
.mobile-sticky-cta small span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #41c46a;
}

.stock--out span,
.mobile-sticky-cta__stock.stock--out span {
  background: #d84b3a;
}

.stock i {
  width: 1px;
  height: 18px;
  background: var(--line);
}

.product-summary .btn {
  margin-bottom: 12px;
}

.product-mobile-cart-cta {
  display: none;
}

.product-mobile-cart-cta svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin-top: 30px;
}

.product-badges span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  color: #25221f;
}

.product-badges b {
  color: #1d1a17;
  font-size: 14px;
  line-height: 1.32;
  font-weight: 670;
}

.product-badges .product-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.product-icon {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-feature-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 30px;
  border: 1px solid rgba(232, 226, 218, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  overflow: hidden;
}

.product-feature-strip div {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  border-right: 1px solid rgba(232, 226, 218, .86);
}

.product-feature-strip div:last-child {
  border-right: 0;
}

.product-feature-strip .product-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.product-feature-strip .feature-text {
  color: #1f1d19;
  font-weight: 640;
  font-size: 14px;
  line-height: 1.32;
}

.product-feature-strip .feature-label-mobile {
  display: none;
}

.product-feature-strip .feature-label-desktop {
  display: inline;
}

.installation-banner {
  margin-top: 34px;
  padding: 28px 48px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffaf4;
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  gap: 36px;
}

.installation-banner img {
  height: 130px;
  object-fit: contain;
}

.installation-banner h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.installation-banner p {
  margin: 0;
  color: var(--muted);
}

.product-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.product-content--specs {
  align-items: start;
  margin-top: 34px;
}

.spec-card,
.finish-card,
.installation-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 34px;
}

.spec-card h2,
.finish-card h2,
.installation-card h2 {
  margin: 0 0 22px;
  font-size: 26px;
}

.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.spec-card dt,
.spec-card dd {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.spec-card dt {
  color: var(--muted);
}

.spec-card dd {
  text-align: right;
}

.spec-extra {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

.spec-extra__inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.spec-card.is-expanded .spec-extra {
  grid-template-rows: 1fr;
  opacity: 1;
}

.spec-toggle {
  margin-top: 22px;
}

.spec-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1;
  transition: transform 0.24s ease;
}

.spec-card.is-expanded .spec-toggle__icon {
  transform: rotate(180deg);
}

.installation-card {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  gap: 34px;
  background: linear-gradient(180deg, #fffaf4 0%, #fffdfb 100%);
}

.installation-card__media {
  align-self: stretch;
  min-height: 100%;
  margin-bottom: 0;
  padding: 28px 20px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 42%, rgba(200, 148, 98, 0.09), rgba(255, 255, 255, 0) 66%);
  display: grid;
  place-items: center;
}

.installation-card__media img {
  width: min(245px, 92%);
  height: auto;
  object-fit: contain;
}

.installation-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.installation-card h2 {
  margin-top: 18px;
}

.installation-card p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.installation-card .btn {
  width: fit-content;
  margin-top: 26px;
}

.finish-card p {
  color: var(--muted);
}

.finish-option {
  display: grid;
  grid-template-columns: auto 70px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 12px;
  padding: 10px;
}

.finish-option.active {
  border-color: var(--accent);
}

.finish-option img {
  width: 70px;
  height: 52px;
  object-fit: contain;
}

.finish-option small {
  color: var(--muted);
}

.product-service {
  padding-top: 24px;
}

.product-service-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 70px rgba(33, 27, 20, 0.045);
}

.service-proof {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 48px 56px;
  border-right: 1px solid var(--line);
  background: linear-gradient(135deg, #fffdf9 0%, #fff 54%, rgba(244, 234, 223, 0.35) 100%);
}

.service-proof__mark {
  width: 106px;
  height: 124px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.service-proof__mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.service-proof__shield-glow {
  fill: rgba(200, 148, 98, 0.08);
  stroke: rgba(200, 148, 98, 0.16);
  stroke-width: 8;
  filter: drop-shadow(0 18px 28px rgba(200, 148, 98, 0.18));
}

.service-proof__shield,
.service-proof__check {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-proof__shield {
  stroke-width: 3.2;
}

.service-proof__check {
  stroke-width: 4.6;
}

.service-proof__body h2 {
  margin: 18px 0 0;
  font-size: 36px;
  line-height: 1.12;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.service-proof__body p {
  margin: 18px 0 0;
  max-width: 660px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.58;
}

.service-proof__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(200, 148, 98, 0.24);
}

.service-proof__facts span {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.service-proof__facts small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.service-proof__facts b {
  color: #17110f;
  font-size: 15px;
  line-height: 1.32;
}

.service-register {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  padding: 48px 50px;
  background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
}

.service-register__copy h3 {
  margin: 18px 0 0;
  font-size: 28px;
  line-height: 1.16;
  font-weight: 620;
}

.service-register__copy p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.service-register__copy small {
  display: block;
  margin-top: 18px;
  color: #8a8279;
  font-size: 13px;
  line-height: 1.45;
}

.service-register__link {
  margin-top: 24px;
  min-height: 52px;
  padding-inline: 24px;
}

.service-register__mobile-visual {
  display: none;
}

.service-register__mobile-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.service-register__mobile-box,
.service-register__mobile-qr,
.service-register__mobile-shield {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-register__mobile-glow {
  fill: rgba(200, 148, 98, 0.08);
}

.service-register__mobile-tile {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(200, 148, 98, 0.24);
  stroke-width: 1.4;
}

.service-register__qr {
  width: 190px;
  height: 190px;
  padding: 16px;
  border: 1px solid rgba(200, 148, 98, 0.24);
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 52px rgba(33, 27, 20, 0.07);
}

.service-register__qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product accessories */
.product-accessories {
  padding-top: 46px;
}

.product-accessories__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.product-accessories__head > div {
  max-width: 720px;
}

.product-accessories__head h2 {
  margin: 16px 0 0;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.product-accessories__head p {
  margin: 14px 0 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.accessory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.accessory-card {
  position: relative;
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  padding: 24px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 22px;
  align-items: center;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.accessory-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 148, 98, 0.34);
  box-shadow: 0 22px 58px rgba(33, 27, 20, 0.07);
}

.accessory-card__media {
  grid-row: 1 / 4;
  width: 150px;
  min-height: 164px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248, 247, 244, 0.82), rgba(255, 255, 255, 0.3));
}

.accessory-card__media img {
  width: 100%;
  height: 132px;
  object-fit: contain;
}

.accessory-card__media svg {
  width: 116px;
  height: 116px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accessory-card h3 {
  margin: 0;
  max-width: 260px;
  font-size: 20px;
  line-height: 1.24;
  font-weight: 690;
}

.accessory-card p {
  margin: 12px 0 20px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}

.accessory-card b {
  align-self: end;
  margin-top: 4px;
  padding-right: 52px;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.accessory-card__add {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.9);
  color: #17110f;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.accessory-card__add:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: #fffaf4;
}

.product-accessories__catalog {
  width: auto;
  min-height: 52px;
  padding-inline: 26px;
  flex: 0 0 auto;
}

.product-accessories__catalog--mobile {
  display: none;
}

/* Product FAQ */
.product-faq {
  max-width: 980px;
  padding-top: 62px;
  padding-bottom: 92px;
}

.product-faq__card {
  max-width: none;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-faq__card h2 {
  margin: 0 0 30px;
  text-align: center;
  font-size: 34px;
  line-height: 1.12;
}

.product-faq .faq-list button {
  height: auto;
  min-height: 76px;
  padding: 22px 0;
  font-size: 17px;
  line-height: 1.35;
}

.product-faq .faq-list div p {
  font-size: 16px;
  line-height: 1.6;
}

.product-faq .faq-list button.is-open + div {
  padding-bottom: 22px;
}

.faq-list--extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.36s ease, opacity 0.24s ease, visibility 0.24s ease;
}

.faq-list--extra.is-visible {
  max-height: 720px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.faq-list--extra button:first-child {
  border-top: 1px solid var(--line);
}

.faq-more-toggle {
  width: fit-content;
  max-width: 100%;
  min-height: 52px;
  margin: 30px auto 0;
  padding-inline: 24px;
  display: flex;
}

.faq-more-toggle span:last-child {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.24s ease;
}

.faq-more-toggle.is-open span:last-child {
  transform: rotate(180deg);
}

.home-faq {
  padding-top: 72px;
  padding-bottom: 44px;
}

.home-final-cta {
  padding-bottom: 86px;
}

.home-final-cta .cta-card {
  max-width: 1120px;
  margin-inline: auto;
}


/* Accessory product page */
.page-product-accessory .gallery-main {
  background:
    radial-gradient(circle at 50% 44%, rgba(200, 148, 98, 0.13), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #fffdfa 0%, #f3f0eb 100%);
}

.page-product-accessory .gallery-main img {
  object-fit: cover;
  object-position: center center;
  padding: 0;
}

.page-product-accessory .gallery-thumbs img {
  object-fit: contain;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 45%, rgba(200, 148, 98, 0.07), rgba(255, 255, 255, 0) 64%),
    #fffdfa;
}

.accessory-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 30px;
  border: 1px solid rgba(232, 226, 218, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  overflow: hidden;
}

.accessory-feature-strip__item {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  border-right: 1px solid rgba(232, 226, 218, .86);
}

.accessory-feature-strip__item:last-child {
  border-right: 0;
}

.accessory-feature-strip__item .product-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.accessory-feature-strip__item span {
  color: #1f1d19;
  font-weight: 640;
  font-size: 14px;
  line-height: 1.32;
}

.accessory-info {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: 24px;
  margin-top: 34px;
}

.accessory-info__main,
.accessory-info__side,
.accessory-info__card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
}

.accessory-info__main {
  padding: 38px;
}

.accessory-info__main h2,
.accessory-info__card h3 {
  margin: 0;
  color: #171410;
  line-height: 1.12;
}

.accessory-info__main h2 {
  margin-top: 16px;
  max-width: 690px;
  font-size: 34px;
  font-weight: 640;
}

.accessory-info__main p {
  margin: 18px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.accessory-info__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.accessory-info__facts span {
  min-height: 104px;
  padding: 18px;
  border: 1px solid rgba(232, 226, 218, .9);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.84), rgba(255, 255, 255, 0.66));
}

.accessory-info__facts small {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.accessory-info__facts b {
  display: block;
  color: #171410;
  font-size: 18px;
  line-height: 1.25;
}

.accessory-info__side {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.accessory-info__card {
  border: 0;
  border-radius: 0;
  padding: 30px;
  background: transparent;
}

.accessory-info__card + .accessory-info__card {
  border-top: 1px solid var(--line);
}

.accessory-info__card h3 {
  font-size: 24px;
  font-weight: 640;
}

.accessory-info__card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.58;
}

.accessory-list {
  display: grid;
  gap: 11px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.accessory-list li {
  position: relative;
  padding-left: 18px;
  color: #25221f;
  font-size: 16px;
  line-height: 1.45;
}

.accessory-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.page-product-accessory .product-accessories {
  margin-bottom: 78px;
}



/* Consultation modal / mobile sheet */
.consult-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(7, 7, 6, 0.48);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.consult-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.consult-modal {
  position: fixed;
  inset: 0;
  z-index: 131;
  display: grid;
  place-items: center;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}

.consult-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.consult-modal__panel {
  position: relative;
  width: min(570px, calc(100vw - 40px));
  max-height: min(760px, calc(100dvh - 60px));
  overflow: hidden;
  border: 1px solid rgba(232, 226, 218, 0.9);
  border-radius: 32px;
  background: rgba(255, 253, 250, 0.98);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.24);
  transform: translateY(18px) scale(0.985);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.consult-modal__scroll {
  max-height: calc(min(760px, calc(100dvh - 60px)) - 16px);
  margin: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 28px;
  border-radius: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(173, 139, 106, 0.46) transparent;
}

.consult-modal__scroll::-webkit-scrollbar {
  width: 6px;
}

.consult-modal__scroll::-webkit-scrollbar-track {
  margin: 24px 0;
  background: transparent;
}

.consult-modal__scroll::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 253, 250, 0.98);
  border-radius: 999px;
  background: rgba(173, 139, 106, 0.42);
}

.consult-modal__scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(173, 139, 106, 0.62);
}

.consult-modal.is-open .consult-modal__panel {
  transform: translateY(0) scale(1);
}

.consult-modal__handle {
  display: none;
}

.consult-modal__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: #15130f;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.consult-modal__close::before,
.consult-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.consult-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.consult-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.consult-modal__close:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.consult-modal__head {
  padding-right: 54px;
}

.consult-modal__head .eyebrow {
  display: none;
}

.consult-modal__head h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.consult-modal__head p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.consult-form {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.consult-field {
  display: grid;
  gap: 8px;
}

.consult-field span {
  color: #2a2723;
  font-size: 13px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.consult-field input,
.consult-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.consult-field input {
  height: 56px;
  padding: 0 18px;
}

.consult-field textarea {
  min-height: 108px;
  padding: 16px 18px;
  resize: vertical;
}

.consult-field input:focus,
.consult-field textarea:focus {
  border-color: rgba(200, 148, 98, 0.72);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200, 148, 98, 0.12);
}

.consult-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.consult-consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--dark);
}

.consult-consent a {
  color: #1a1815;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.consult-submit {
  margin-top: 4px;
}

.consult-form__success {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(45, 153, 88, 0.2);
  border-radius: 14px;
  background: rgba(45, 153, 88, 0.08);
  color: #236b41;
  font-size: 14px;
  line-height: 1.45;
}

.consult-alt {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}

.consult-alt > span {
  color: var(--muted);
  font-size: 14px;
}

.consult-messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consult-messenger {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #1a1815;
  font-size: 14px;
  font-weight: 680;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.consult-messenger:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: #fff;
}

.consult-messenger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.consult-phone {
  width: fit-content;
  color: #1a1815;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0.035em;
}

.mobile-sticky-cta {
  display: none;
}



@media (max-width: 1180px) {
  :root {
    --pad: 28px;
  }

  .main-nav {
    gap: 22px;
    margin-left: 0;
  }

  .header-phone {
    display: none;
  }

  .product-hero {
    gap: 34px;
  }

  .gallery-main img {
    height: 460px;
  }

  .product-feature-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .accessory-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accessory-feature-strip__item:nth-child(2n) {
    border-right: 0;
  }

  .accessory-feature-strip__item:nth-child(n + 3) {
    border-top: 1px solid rgba(232, 226, 218, .86);
  }

  .accessory-info {
    grid-template-columns: 1fr;
  }

  .product-service-card {
    grid-template-columns: 1fr;
  }

  .service-proof {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-register {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hero__media {
    width: min(calc(100% - var(--pad) * 2), var(--container));
  }

  .hero__copy h1 {
    font-size: 58px;
  }

  .catalog-section,
  .about-hero-card,
  .about-gallery,
  .company-overview,
  .service-page-grid,
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .catalog-filter-panel,
  .cart-summary {
    position: static;
  }

  .catalog-filter-panel__buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-grid,
  .company-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-values,
  .company-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-feature-card:last-child {
    grid-column: span 2;
  }

  .contacts-hub {
    grid-template-columns: 1fr;
  }

  .contact-aside {
    grid-template-columns: 1fr;
  }

  .contact-requisites-card {
    grid-template-columns: 1fr;
  }


}

@media (max-width: 767px) {
  :root {
    --pad: 18px;
    --radius: 18px;
  }

  body {
    background: var(--bg);
  }

  .site-header {
    height: 74px;
    background: rgba(255, 255, 255, 0.96);
  }

  html.is-menu-open .site-header,
  body.is-menu-open .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 120;
    height: 74px;
  }

  html.is-menu-open .mobile-drawer,
  body.is-menu-open .mobile-drawer {
    inset: 74px 0 0 0;
    z-index: 110;
  }

  .site-header__inner {
    width: calc(100% - 44px);
    gap: 0;
    position: relative;
    display: flex;
    align-items: center;
  }

  .page-home .site-header__inner {
    justify-content: space-between;
  }

  .brand {
    font-size: 24px;
    font-weight: 800;
  }

  .main-nav,
  .header-actions {
    display: none;
  }

  .mobile-menu-toggle {
    --hamburger-line-right: 0px;
    --hamburger-line-open-right: calc(var(--hamburger-line-open) / 2);

    display: block;
    margin-left: auto;
  }

  .page-home .mobile-menu-toggle {
    margin-left: auto;
  }

  .page-home .mobile-cart,
  .page-home .mobile-back {
    display: none;
  }

  .page-home .brand {
    position: static;
    transform: none;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .container {
    width: calc(100% - 36px);
  }

  .mobile-drawer {
    inset: 74px 0 0 0;
    max-height: calc(100dvh - 74px);
    padding: 8px 0 calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer__inner {
    width: calc(100% - 44px);
  }

  .mobile-drawer a {
    padding: 17px 0;
  }

  .mobile-drawer__inner {
    min-height: calc(100dvh - 74px - 26px - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .mobile-drawer__nav {
    flex: 0 0 auto;
  }

  .mobile-drawer__support {
    margin-top: auto;
  }

  .mobile-nav-group__panel a {
    padding: 13px 12px;
  }

  .phone-popover {
    top: 76px;
  }

  .page-product .mobile-back {
    display: grid;
    width: 42px;
    height: 42px;
    margin-right: auto;
  }

  .page-product .mobile-cart {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    margin-left: auto;
  }

  .mobile-cart .cart-badge {
    top: -5px;
    right: -5px;
  }

  .page-product .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .page-product .mobile-menu-toggle {
    margin-left: 8px;
  }

  .hero-home {
    min-height: 456px;
    display: block;
    background: #fbfaf7;
    isolation: isolate;
  }

  .hero-home:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background:
      linear-gradient(
        90deg,
        rgba(251, 250, 247, 0.98) 0%,
        rgba(251, 250, 247, 0.98) 47%,
        rgba(251, 250, 247, 0.72) 59%,
        rgba(251, 250, 247, 0.14) 78%,
        rgba(251, 250, 247, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(251, 250, 247, 0) 72%,
        #fbfaf7 100%
      );
    pointer-events: none;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    margin-top: 0;
    transform: none;
    overflow: hidden;
  }

  .hero__media:before,
  .hero__media:after {
    display: none;
  }

  .hero__media img {
    object-position: 68% center;
  }

  .hero__content {
    display: block;
    min-height: auto;
    margin-top: 0;
    padding-top: 34px;
    padding-bottom: 26px;
  }

  .hero__copy {
    width: 100%;
    max-width: 330px;
    padding-bottom: 0;
  }

  .eyebrow {
    font-size: 10px;
    height: 27px;
    letter-spacing: 0.24em;
  }

  .hero__copy h1 {
    font-size: 39px;
    line-height: 1.12;
    max-width: 330px;
    margin-top: 18px;
    letter-spacing: 0.035em;
  }

  .hero__copy p {
    font-size: 18px;
    line-height: 1.48;
    max-width: 310px;
    margin-top: 18px;
  }

  .hero__actions {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    width: 260px;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: space-between;
  }

  .hero-trust {
    display: none;
  }

  .feature-cards {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px;
  }

  .feature-card {
    min-height: 108px;
    justify-items: start;
    text-align: left;
    padding: 18px;
  }

  .feature-card p {
    display: none;
  }

  .feature-card h3 {
    font-size: 16px;
    margin: 0;
  }

  .line-icon {
    width: 42px;
    height: 34px;
    margin-bottom: 10px;
  }

  .line-icon svg {
    width: 36px;
    height: 36px;
  }

  .feature-card > .line-svg {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
  }

  .line-icon.dots:before {
    width: 4px;
    height: 4px;
    box-shadow:
      10px 0 0 var(--accent),
      20px 0 0 var(--accent),
      5px 8px 0 var(--accent),
      15px 8px 0 var(--accent),
      10px 16px 0 var(--accent);
  }

  .section-head-row {
    align-items: center;
  }

  .section-head h2 {
    font-size: 25px;
    line-height: 1.15;
  }

  .section-head-row a {
    font-size: 14px;
    max-width: 105px;
    text-align: right;
    line-height: 1.35;
  }

  .models {
    padding-top: 42px;
  }

  .models .section-head-row {
    align-items: flex-start;
  }

  .models .models-desktop-link {
    display: none;
  }

  .model-grid {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    margin-right: -18px;
    padding: 0 18px 12px 0;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }

  .model-grid::-webkit-scrollbar {
    display: none;
  }

  .model-card {
    flex: 0 0 min(78vw, 320px);
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 150px minmax(0, 1fr);
    scroll-snap-align: start;
    padding: 20px;
    border-radius: 20px;
    gap: 16px;
  }

  .model-card img {
    height: 150px;
  }

  .model-card strong {
    padding-right: 48px;
    font-size: 20px;
    line-height: 1.2;
  }

  .model-card p {
    margin: 10px 0 18px;
    padding-right: 34px;
    font-size: 14px;
    line-height: 1.45;
  }

  .model-card b {
    padding-right: 48px;
    font-size: 22px;
  }

  .models-mobile-cta {
    display: flex;
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    justify-content: center;
  }

  .circle-arrow {
    width: 42px;
    height: 42px;
  }

  .compare,
  .selector-access,
  .final-row {
    padding-top: 34px;
  }

  .compare-system {
    max-width: none;
  }

  .compare-system__card {
    padding: 24px;
    border-radius: 20px;
    box-shadow: none;
  }

  .compare-system__intro {
    max-width: none;
    margin-bottom: 22px;
  }

  .compare-system__intro h2 {
    max-width: 330px;
    font-size: 31px;
    line-height: 1.08;
  }

  .compare-system__intro p {
    max-width: none;
    font-size: 16px;
    line-height: 1.5;
  }

  .compare-system__columns {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .compare-system__side {
    padding: 18px;
    border-radius: 18px;
  }

  .compare-system__side h3 {
    font-size: 21px;
  }

  .compare-system__side ul {
    margin-top: 18px;
  }

  .compare-system__side li {
    min-height: auto;
    padding: 12px 0 12px 27px;
    font-size: 16px;
  }

  .compare-system__side li::before {
    top: 18px;
  }

  .compare-system__side--active li::before {
    top: 11px;
  }

  .selector-access,
  .product-content,
  .final-row {
    grid-template-columns: 1fr;
  }

  .wide-card {
    min-height: 300px;
    padding: 24px;
    border-radius: 20px;
    align-items: flex-start;
  }

  .wide-card__copy {
    max-width: 100%;
  }

  .wide-card__copy h2 {
    font-size: 28px;
  }

  .wide-card__copy p {
    font-size: 16px;
  }

  .wide-card img {
    width: 100%;
    height: 48%;
    top: auto;
    bottom: 0;
    opacity: 0.7;
  }

  .accessories-card:before {
    background: linear-gradient(
      180deg,
      #fff 0%,
      #fff 48%,
      rgba(255, 255, 255, 0.42) 75%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .accessories-card {
    padding-bottom: 180px;
  }

  .service-mini-card {
    min-height: auto;
  }

  .service-mini-list {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0 24px;
    padding-top: 18px;
  }

  .service-mini-list > span {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
  }

  .accessories-card .btn,
  .service-mini-card .btn {
    width: min(100%, 340px);
    justify-content: center;
  }

  .service-mini-card .btn {
    padding-inline: 18px;
    font-size: 14px;
  }

  .product-service {
    padding-top: 20px;
  }

  .product-service-card {
    grid-template-columns: 1fr;
    border-radius: 20px;
    box-shadow: none;
  }

  .service-proof {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 30px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-proof__mark {
    width: 84px;
    height: 98px;
    justify-self: center;
    margin-inline: auto;
  }

  .service-proof__body h2 {
    margin-top: 16px;
    font-size: 30px;
    line-height: 1.1;
  }

  .service-proof__body p {
    font-size: 17px;
    line-height: 1.55;
  }

  .service-proof__facts {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
  }

  .service-proof__facts span {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .service-register {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 22px;
  }

  .service-register__copy h3 {
    font-size: 24px;
  }

  .service-register__link {
    width: 100%;
    margin-top: 22px;
  }

  .service-register__mobile-visual {
    width: min(230px, 72vw);
    height: min(174px, 56vw);
    margin: 22px auto 0;
    padding: 14px;
    border: 1px solid rgba(200, 148, 98, 0.18);
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 20px 44px rgba(33, 27, 20, 0.07);
  }

  .service-register__qr {
    display: none;
    width: min(230px, 72vw);
    height: min(230px, 72vw);
    justify-self: center;
    padding: 14px;
    border-radius: 22px;
    box-shadow: 0 20px 44px rgba(33, 27, 20, 0.07);
  }

  .service-image {
    min-height: 240px;
    height: 240px;
  }

  .final-row {
    padding-bottom: 42px;
  }

  .faq-card,
  .cta-card {
    padding: 24px;
  }

  .cta-card {
    min-height: 240px;
  }

  .cta-card div {
    display: grid;
  }

  .cta-card img {
    display: none;
  }

  .home-faq {
    width: calc(100% - 36px);
    padding-top: 44px;
    padding-bottom: 24px;
  }

  .home-final-cta {
    width: calc(100% - 36px);
    padding-bottom: 54px;
  }

  .home-final-cta .cta-card {
    padding: 26px 22px;
  }

  .faq-more-toggle,
  .models-mobile-cta {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .faq-more-toggle {
    margin-top: 22px;
  }

  .site-footer {
    padding: 48px 0 calc(120px + env(safe-area-inset-bottom));
  }

  .footer-shell {
    gap: 34px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand {
    font-size: 36px;
  }

  .footer-company-note {
    margin-top: 22px;
  }

  .footer-phone {
    font-size: 24px;
  }

  .footer-socials {
    gap: 9px;
  }

  .footer-bottom {
    display: grid;
    gap: 18px;
    align-items: start;
    justify-content: stretch;
  }

  .footer-copy {
    gap: 7px;
  }

  .footer-legal {
    display: grid;
    justify-content: stretch;
    gap: 10px;
  }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    height: 74px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .bottom-nav a {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #68645f;
    font-size: 21px;
  }

  .bottom-nav .cart-badge {
    top: 6px;
    right: calc(50% - 23px);
  }

  .bottom-nav span {
    font-size: 12px;
  }

  .bottom-nav .active {
    color: var(--accent);
  }

  .page-home main {
    padding-bottom: 0;
  }

  .breadcrumbs {
    display: none;
  }

  .product-main {
    overflow: hidden;
    padding-bottom: 56px;
  }

  .product-hero {
    display: block;
    width: 100%;
    margin: 0;
  }

  .gallery-main {
    aspect-ratio: 16 / 11;
    border-radius: 0;
    background: #eee;
    touch-action: pan-y;
  }

  .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
  }

  .gallery-arrow,
  .gallery-thumbs {
    display: none;
  }

  .count {
    left: auto;
    right: 24px;
    bottom: 18px;
  }

  .product-summary {
    padding: 22px 18px 0;
    background: var(--bg);
  }

  .product-summary .eyebrow {
    margin-bottom: 14px;
  }

  .product-summary h1 {
    font-size: 42px;
    margin-top: 0;
  }

  .product-summary p {
    font-size: 18px;
    max-width: 360px;
  }

  .price {
    font-size: 34px;
    margin-top: 20px;
  }

  .stock {
    font-size: 16px;
  }

  .product-summary > .btn,
  .product-summary .stock {
    display: none;
  }

  .product-summary > .product-mobile-cart-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 18px 0 20px;
    border-radius: 16px;
    font-size: 15px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
  }

  .product-summary > .product-mobile-cart-cta span {
    line-height: 1;
  }

  .product-badges {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .product-badges span {
    min-height: 78px;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 13px;
    background: rgba(255, 255, 255, .86);
  }

  .product-badges .product-icon {
    width: 28px;
    height: 28px;
  }

  .product-badges b {
    display: block;
    font-size: 12.5px;
    line-height: 1.28;
    font-weight: 670;
  }

  .product-feature-strip {
    width: 100%;
    max-width: none;
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0 0 8px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .product-feature-strip::-webkit-scrollbar {
    display: none;
  }

  .product-feature-strip div {
    flex: 0 0 auto;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .86);
    scroll-snap-align: start;
    box-shadow: 0 10px 24px rgba(33, 27, 20, .035);
  }

  .product-feature-strip div:last-child {
    border-right: 1px solid var(--line);
  }

  .product-feature-strip .product-icon {
    width: 22px;
    height: 22px;
  }

  .product-feature-strip .feature-text {
    display: block;
    font-size: 13.5px;
    line-height: 1;
    font-weight: 680;
    white-space: nowrap;
  }

  .product-feature-strip .feature-label-desktop {
    display: none;
  }

  .product-feature-strip .feature-label-mobile {
    display: inline;
  }

  .installation-banner {
    grid-template-columns: 1fr;
    margin-top: 20px;
    padding: 24px;
  }

  .installation-banner img {
    height: 120px;
  }

  .product-content--specs {
    margin-top: 22px;
  }

  .spec-card,
  .finish-card,
  .installation-card {
    padding: 24px;
  }

  .spec-list,
  .spec-extra__inner {
    grid-template-columns: 0.72fr 1fr;
  }

  .spec-card dt,
  .spec-card dd {
    font-size: 15px;
  }

  .spec-toggle {
    margin-top: 20px;
  }

  .installation-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
  }

  .installation-card__media {
    align-self: auto;
    min-height: 0;
    margin-bottom: 26px;
    padding: 10px 0 4px;
    background: radial-gradient(circle at 50% 45%, rgba(200, 148, 98, 0.08), rgba(255, 255, 255, 0) 68%);
  }

  .installation-card__media img {
    width: min(250px, 82%);
    max-height: none;
  }

  .installation-card h2 {
    margin-top: 16px;
    font-size: 26px;
    line-height: 1.18;
  }

  .installation-card p {
    font-size: 16px;
    line-height: 1.52;
  }

  .installation-card .btn {
    width: 100%;
    margin-top: 24px;
  }

  .page-product-accessory .gallery-main img {
    object-fit: cover;
    object-position: center center;
    padding: 0;
    background: transparent;
  }

  .page-product-accessory .product-summary h1 {
    max-width: 360px;
  }

  .accessory-feature-strip {
    width: 100%;
    max-width: none;
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0 0 8px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .accessory-feature-strip::-webkit-scrollbar {
    display: none;
  }

  .accessory-feature-strip__item,
  .accessory-feature-strip__item:nth-child(2n),
  .accessory-feature-strip__item:nth-child(n + 3) {
    flex: 0 0 auto;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .86);
    scroll-snap-align: start;
    box-shadow: 0 10px 24px rgba(33, 27, 20, .035);
  }

  .accessory-feature-strip__item .product-icon {
    width: 22px;
    height: 22px;
  }

  .accessory-feature-strip__item span {
    display: block;
    font-size: 13.5px;
    line-height: 1;
    font-weight: 680;
    white-space: nowrap;
  }

  .accessory-info {
    width: calc(100% - 36px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 22px auto 0;
  }

  .accessory-info__main {
    padding: 24px;
  }

  .accessory-info__main h2 {
    margin-top: 14px;
    font-size: 28px;
  }

  .accessory-info__main p {
    font-size: 16px;
    line-height: 1.55;
  }

  .accessory-info__facts {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
  }

  .accessory-info__facts span {
    min-height: 0;
    padding: 16px;
  }

  .accessory-info__card {
    padding: 24px;
  }

  .accessory-info__card h3 {
    font-size: 22px;
  }

  .product-accessories {
    width: 100%;
    max-width: none;
    margin: 34px 0 0;
    padding: 0 0 0 18px;
  }

  .product-accessories__head {
    display: block;
    width: calc(100% - 36px);
    margin-bottom: 22px;
  }

  .product-accessories__head > div {
    max-width: none;
  }

  .product-accessories__head h2 {
    font-size: 28px;
  }

  .product-accessories__head p {
    font-size: 16px;
  }

  .product-accessories__catalog--desktop {
    display: none;
  }

  .product-accessories__catalog--mobile {
    display: inline-flex;
  }

  .accessory-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .accessory-grid::-webkit-scrollbar {
    display: none;
  }

  .accessory-card {
    flex: 0 0 min(82vw, 330px);
    min-height: 320px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
  }

  .accessory-card__media {
    grid-row: auto;
    width: 100%;
    min-height: 0;
    height: 126px;
    margin-bottom: 20px;
  }

  .accessory-card__media img {
    height: 106px;
  }

  .accessory-card__media svg {
    width: 104px;
    height: 104px;
  }

  .accessory-card h3 {
    font-size: 20px;
  }

  .accessory-card p {
    font-size: 15.5px;
  }

  .accessory-card b {
    margin-top: auto;
    padding-right: 52px;
  }

  .product-accessories__catalog {
    width: calc(100% - 36px);
    margin-top: 10px;
  }

  .page-product-accessory .product-accessories {
    margin-bottom: 54px;
  }

  .page-product .product-faq,
  .page-product-accessory .product-faq {
    width: calc(100% - 36px);
    padding: 40px 0 120px;
  }

  .product-faq__card {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .product-faq__card h2 {
    margin-bottom: 22px;
    font-size: 28px;
    text-align: left;
  }

  .product-faq .faq-list button {
    min-height: 70px;
    padding: 20px 0;
    font-size: 16px;
  }

  .product-faq .faq-list div p {
    font-size: 15px;
  }


  .consult-modal {
    align-items: end;
    place-items: end stretch;
    padding: 0;
  }

  .consult-modal__panel {
    width: 100%;
    max-height: 86dvh;
    padding: 14px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 28px 28px 0 0;
    transform: translateY(105%);
  }

  .consult-modal__scroll {
    max-height: calc(86dvh - 27px);
    margin: 0;
    padding: 0 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 0;
    scrollbar-width: none;
  }

  .consult-modal__scroll::-webkit-scrollbar {
    display: none;
  }

  .consult-modal.is-open .consult-modal__panel {
    transform: translateY(0);
  }

  .consult-modal__handle {
    display: block;
    width: 58px;
    height: 5px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: #d8d1c9;
  }

  .consult-modal__close {
    top: 20px;
    right: 18px;
    width: 40px;
    height: 40px;
    font-size: 0;
    line-height: 0;
  }

  .consult-modal__head {
    padding-right: 48px;
  }

  .consult-modal__head .eyebrow {
    display: inline-flex;
  }

  .consult-modal__head h2 {
    margin-top: 16px;
    font-size: 30px;
  }

  .consult-modal__head p {
    font-size: 15.5px;
    line-height: 1.52;
  }

  .consult-form {
    gap: 12px;
    margin-top: 22px;
  }

  .consult-field input {
    height: 52px;
    border-radius: 14px;
  }

  .consult-field textarea {
    min-height: 92px;
    border-radius: 14px;
  }

  .consult-consent {
    font-size: 12.5px;
  }

  .consult-submit {
    min-height: 54px;
    border-radius: 15px;
  }

  .consult-alt {
    margin-top: 20px;
    padding-top: 18px;
  }

  .consult-messengers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .consult-messenger {
    min-height: 42px;
    justify-content: center;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 12.5px;
  }

  .consult-messenger svg {
    width: 17px;
    height: 17px;
  }

  .mobile-sticky-cta {
    position: fixed;
    z-index: 75;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(92px, 1fr) 52px minmax(126px, 1.42fr);
    gap: 10px;
    align-items: center;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid var(--line);
    box-shadow: 0 -18px 44px rgba(31, 27, 22, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 14px));
    transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobile-sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-sticky-cta__meta {
    min-width: 0;
  }

  .mobile-sticky-cta strong {
    display: block;
    font-size: 23px;
    line-height: 1.05;
    letter-spacing: 0.035em;
    white-space: nowrap;
  }

  .mobile-sticky-cta small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
  }

  .mobile-sticky-cta__consult {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--accent);
  }

  .mobile-sticky-cta__consult svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-sticky-cta .btn {
    min-height: 52px;
    border-radius: 14px;
    padding-inline: 14px;
  }



  .page-inner main {
    padding-bottom: 72px;
  }

  .page-inner .breadcrumbs {
    display: flex;
    width: calc(100% - 36px);
    gap: 0;
    margin: 18px auto 16px;
    overflow-x: auto;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .page-inner .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .page-inner .breadcrumbs span {
    padding: 0 8px;
  }

  .container-medium,
  .container-reading,
  .contacts-hub,
  .contact-requisites-card,
  .manager-strip,
  .cart-shell {
    max-width: none;
  }

  .inner-main {
    padding-top: 0;
    padding-bottom: 48px;
  }

  .page-head {
    margin-bottom: 24px;
  }

  .page-head h1 {
    font-size: 34px;
    line-height: 1.08;
  }

  .page-head p {
    font-size: 16px;
    line-height: 1.52;
  }

  .catalog-section,
  .about-hero-card,
  .about-gallery,
  .company-overview,
  .service-page-grid,
  .cart-layout,
  .about-values,
  .company-directory,
  .company-meta,
  .contacts-hub,
  .contact-aside,
  .contact-form-grid,
  .contact-requisites-card,
  .contact-requisites-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .catalog-filter-panel,
  .service-request-card,
  .inner-info-card,
  .service-qr-card,
  .contact-card,
  .contact-form-card,
  .contact-quick-card,
  .contact-requisites-card,
  .manager-strip,
  .support-strip,
  .about-feature-card,
  .about-hero-card,
  .about-gallery,
  .company-overview__main,
  .company-overview__side,
  .company-link-card,
  .company-meta__card,
  .text-article,
  .cart-item,
  .cart-summary,
  .cart-empty {
    border-radius: 20px;
  }

  .catalog-filter-panel,
  .cart-summary {
    position: static;
  }

  .catalog-filter-panel {
    max-width: 100%;
    padding: 18px;
    overflow: hidden;
  }

  .catalog-filter-panel__buttons {
    display: flex;
    min-width: 0;
    max-width: 100%;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .catalog-filter-panel__buttons::-webkit-scrollbar {
    display: none;
  }

  .catalog-filter-panel button {
    flex: 0 0 auto;
    padding-inline: 16px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .catalog-card {
    min-height: 0;
    grid-template-rows: auto 150px minmax(0, 1fr);
    padding: 20px;
  }

  .catalog-card img {
    height: 150px;
  }

  .about-hero-card__content,
  .service-request-card,
  .contact-card,
  .contact-form-card,
  .contact-quick-card,
  .contact-requisites-card,
  .manager-strip,
  .support-strip,
  .company-overview__main,
  .company-link-card,
  .company-meta__card,
  .about-gallery,
  .about-path__inner,
  .text-article,
  .cart-summary,
  .cart-empty {
    padding: 24px 22px;
  }

  .about-hero-card__content h2,
  .company-overview__main h2,
  .service-request-card h2,
  .contact-form-card h2,
  .contact-quick-card h2,
  .contact-requisites-card h2,
  .manager-strip h2,
  .support-strip h2,
  .about-path__inner > h2,
  .text-article h2,
  .cart-summary h2 {
    font-size: 28px;
  }

  .about-hero-card__media {
    min-height: 240px;
  }

  .about-feature-card img {
    height: 180px;
  }

  .about-gallery__grid {
    grid-template-columns: 1fr;
  }

  .about-gallery__item {
    min-height: 200px;
  }

  .about-path__inner {
    text-align: left;
  }

  .about-path__inner > h2,
  .about-path__inner > p {
    max-width: none;
    margin-inline: 0;
  }

  .about-path__steps {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
  }

  .about-path-step {
    min-height: 0;
    padding: 18px;
    border-radius: 16px;
  }

  .about-path-step h3 {
    font-size: 18px;
  }

  .service-form-grid {
    grid-template-columns: 1fr;
  }

  .manager-strip,
  .support-strip {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .manager-strip .btn,
  .support-strip .btn {
    width: 100%;
    justify-content: center;
  }

  .support-strip__actions {
    display: grid;
    gap: 10px;
  }

  .contact-aside {
    order: -1;
  }

  .contact-audience {
    width: 100%;
    min-height: 48px;
  }

  .contact-audience__option span {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .contact-submit {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .contact-social-links {
    grid-template-columns: 1fr;
  }

  .contact-mail-line a {
    font-size: 19px;
  }

  .service-qr-card__image {
    height: 190px;
  }

  .text-article section + section {
    margin-top: 28px;
    padding-top: 26px;
  }

  .text-article table {
    min-width: 560px;
  }

  .cart-item {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .cart-item img {
    width: 86px;
    height: 74px;
  }

  .cart-qty {
    grid-column: 1 / 2;
    width: 124px;
    grid-template-columns: 36px 52px 36px;
  }

  .cart-qty__control,
  .cart-qty button,
  .cart-qty input {
    height: 42px;
  }

  .cart-item > strong,
  .cart-item__cost {
    grid-column: 2 / 3;
    text-align: right;
  }

  .cart-empty h1 {
    font-size: 36px;
  }


  .checkout-shell {
    width: calc(100% - 36px);
    max-width: none;
    margin-top: 34px;
  }

  .checkout-card {
    padding: 26px 22px 28px;
    border-radius: 22px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.84);
  }

  .checkout-card__head {
    margin-bottom: 24px;
  }

  .checkout-card__head .eyebrow {
    height: 28px;
    padding-inline: 12px;
    letter-spacing: 0.18em;
  }

  .checkout-card__head h2 {
    margin-top: 20px;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .checkout-card__head p {
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.54;
  }

  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .checkout-card .consult-field {
    gap: 7px;
  }

  .checkout-card .consult-field span {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .checkout-card .consult-field input {
    height: 54px;
    padding-inline: 18px;
    border-radius: 15px;
  }

  .checkout-card .consult-field textarea {
    min-height: 104px;
    padding: 16px 18px;
    border-radius: 16px;
  }

  .checkout-card__section {
    margin-top: 28px;
    padding-top: 26px;
  }

  .checkout-card__section h3 {
    margin-bottom: 14px;
    font-size: 21px;
  }

  .checkout-options {
    gap: 10px;
  }

  .checkout-option {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
  }

  .checkout-option > strong {
    grid-column: 2 / 3;
    margin-top: -2px;
  }

  .checkout-option b {
    font-size: 16px;
  }

  .checkout-option small {
    font-size: 13.5px;
    line-height: 1.44;
  }

  .checkout-summary {
    max-width: none;
    margin-top: 28px;
    padding: 18px;
    border-radius: 18px;
  }

  .checkout-summary div {
    padding: 12px 0;
  }

  .checkout-summary span {
    font-size: 14px;
  }

  .checkout-summary strong {
    font-size: 17px;
  }

  .checkout-summary__total strong {
    font-size: 20px;
  }

  .checkout-consent {
    max-width: none;
    margin-top: 22px;
    font-size: 12.5px;
  }

  .checkout-submit {
    width: 100%;
    min-height: 60px;
    margin-top: 18px;
    justify-self: stretch;
    border-radius: 17px;
  }
  .text-layout--legal {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .text-nav--compact {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px;
    border-radius: 18px;
    scrollbar-width: none;
  }

  .text-nav--compact::-webkit-scrollbar {
    display: none;
  }

  .text-nav--compact strong {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 8px 0 0;
    font-size: 13px;
  }

  .text-nav--compact a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 10px;
  }

  .page-order-success .inner-main {
    padding-bottom: 54px;
  }

  .order-success {
    width: calc(100% - 36px);
    max-width: none;
    margin-top: 0;
  }

  .order-success__card {
    padding: 28px 22px 30px;
    border-radius: 22px;
    box-shadow: none;
    background:
      radial-gradient(circle at 100% 0%, rgba(50, 119, 88, 0.09) 0, rgba(50, 119, 88, 0) 42%),
      rgba(255, 255, 255, 0.84);
  }

  .order-success__card .eyebrow {
    height: 28px;
    padding-inline: 12px;
    letter-spacing: 0.18em;
  }

  .order-success__card h1 {
    margin-top: 24px;
    font-size: 41px;
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  .order-success__card p {
    max-width: none;
    margin-top: 22px;
    font-size: 16.5px;
    line-height: 1.56;
  }

  .order-success__number {
    margin-top: 24px;
    gap: 7px;
    font-size: 16px;
  }

  .order-success__number strong {
    font-size: 17px;
  }

  .order-success__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }

  .order-success__actions .btn,
  .order-success__actions .btn-dark {
    width: 100%;
    min-width: 0;
  }

  .order-success__actions .btn {
    min-height: 60px;
    padding-inline: 22px;
    border-radius: 17px;
  }

  .order-success__actions .btn-dark {
    justify-content: space-between;
  }

  .order-success__actions .btn-light {
    min-height: 58px;
  }

  .page-product .bottom-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}