/* Сайт-витрина компании (shop.go, templates/shop): публичный сайт с
   каталогом по разделам, корзиной и заявками на адресе компании или ее
   домене. Стили свои, от программы не зависят: клиенты выбирают оформление
   в настройках витрины — тему (theme-light / theme-dark на body) и цвет
   акцента (accent-indigo … accent-blue). JavaScript не нужен: корзина,
   заявки и меню разделов — формы и CSS. */

@import url("shop-theme.css");

@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Переменные тем и цветов — в shop-theme.css: их же использует
   мини-превью в настройках витрины (shop-preview.css). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.shop { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
  font: 15px/1.5 "Onest", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.shop main { flex: 1; }
.shop-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.fine { font-size: 12.5px; color: var(--muted); }

/* Поля и кнопки */
input, textarea, select { font: inherit; color: #222; background: var(--input-bg); border: 1px solid var(--input-line); border-radius: 10px; padding: 9px 12px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea { resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); }
label input, label textarea { margin-top: 4px; }
button, .button { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--raised); color: var(--fg); border-radius: 10px; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; }
button:hover, .button:hover { text-decoration: none; filter: brightness(.97); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
.card { background: var(--card); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: 14px; padding: 20px 22px; }
.card .muted, .card .fine, .card label { color: var(--card-muted); }
.card button:not(.primary) { background: #f1f1f4; border-color: #e0e0e6; color: #222; }
.card a:not(.primary) { color: var(--accent); }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 600; }

/* Шапка: верхняя строка со ссылками, телефонами и «Оставить заявку»;
   основная — логотип, поиск, корзина; ниже — меню разделов. */
.shop-top { background: var(--top); color: var(--top-fg); border-bottom: 1px solid var(--top-line); }
.shop-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; font-size: 13.5px; border-bottom: 1px solid var(--top-line); }
.shop-links { display: flex; gap: 22px; }
.shop-links a, .shop-line .phone { color: var(--top-fg); }
.shop-line-right { display: flex; align-items: center; gap: 22px; }
.request-btn, a.request-btn { color: var(--top-fg); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.request-btn:hover { color: var(--accent); text-decoration: none; }
.shop-main { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.shop-brand { display: flex; align-items: center; gap: 12px; color: var(--top-fg); font-weight: 800; font-size: 22px; letter-spacing: -.02em; min-width: 0; flex: none; max-width: 36%; }
.shop-brand:hover { text-decoration: none; }
.shop-brand img { max-height: 52px; max-width: 100%; display: block; }
.shop-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-weight: 800; font-size: 19px; flex: none; }
.shop-search { display: flex; flex: 1 1 320px; max-width: 560px; background: #fff; border-radius: 28px; overflow: hidden; border: 1px solid var(--input-line); }
.shop-search input { border: 0; border-radius: 0; padding: 11px 18px; background: #fff; }
.shop-search input:focus { outline: none; }
.shop-search button { border: 0; border-radius: 0; background: var(--accent); color: var(--accent-fg); padding: 0 18px; }
.cart-btn, a.cart-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--top-fg); font-weight: 700; font-size: 16px; white-space: nowrap; }
.cart-btn:hover { text-decoration: none; color: var(--accent); }
.cart-btn .n { background: var(--accent); color: var(--accent-fg); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; font-size: 15px; }
.shop-menu { background: var(--menu); color: var(--menu-fg); }
.shop-menu .shop-wrap { display: flex; flex-wrap: wrap; }
.shop-menu .mi { position: relative; }
.shop-menu .mi > a { display: block; padding: 13px 18px; color: var(--menu-fg); font-weight: 600; font-size: 14px; }
.shop-menu .mi > a:hover, .shop-menu .mi:focus-within > a { background: var(--accent); color: var(--accent-fg); text-decoration: none; }
.shop-menu .sub { display: none; position: absolute; left: 0; top: 100%; z-index: 5; min-width: 240px; background: var(--card); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: 0 0 12px 12px; padding: 8px 0; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.shop-menu .mi:hover .sub, .shop-menu .mi:focus-within .sub { display: block; }
.shop-menu .sub a { display: block; padding: 8px 16px; color: var(--card-fg); font-size: 14px; }
.shop-menu .sub a:hover { background: var(--accent-soft); text-decoration: none; }

/* Вступление, разделы, списки */
.shop-hero { padding: 34px 0 10px; }
.shop-hero.with-cats { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: var(--accent-fg); border-radius: 16px; padding: 38px 36px; margin: 22px 0 6px; }
.shop-hero h1 { font-size: 34px; margin: 0 0 8px; }
.shop-hero p { margin: 0; max-width: 60em; white-space: pre-line; }
.shop-hero.with-cats a { color: inherit; text-decoration: underline; }
.hero-note { margin-top: 10px !important; font-size: 14px; opacity: .9; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0 10px; }
.cat { display: flex; flex-direction: column; background: var(--card); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: 14px; overflow: hidden; }
.cat:hover { text-decoration: none; border-color: var(--accent); }
.cat .pic { aspect-ratio: 5 / 3; background: #f3f3f6; display: grid; place-items: center; overflow: hidden; }
.cat .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat .body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-weight: 600; }
.cat .cnt { color: var(--card-muted); font-weight: 500; font-size: 13px; }
.list-title, .cat-title { font-size: 26px; margin: 26px 0 12px; }
.cat-title { font-size: 34px; margin: 10px 0 10px; }
.cat-descr { margin: 0 0 12px; max-width: 60em; white-space: pre-line; color: var(--muted); }
.shop-bar { display: flex; gap: 10px; align-items: center; margin: 18px 0 12px; flex-wrap: wrap; }
.shop-bar form { display: flex; gap: 8px; flex: 1 1 320px; max-width: 460px; }
.kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.kinds a { padding: 7px 14px; border-radius: 16px; border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.kinds a:hover { text-decoration: none; border-color: var(--accent); }
.kinds a.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; }
.sorts { display: flex; gap: 22px; justify-content: flex-end; margin: 0 0 14px; font-size: 14.5px; flex-wrap: wrap; }
.sorts a.active { color: var(--fg); font-weight: 600; }
/* Пиксель Метрики без JavaScript (layout.html, noscript). */
.ym-pixel { position: absolute; left: -9999px; }
.shop-notice { margin: 16px 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: #222; font-size: 14px; }
.shop-error { margin: 16px 0; padding: 10px 14px; border-radius: 10px; background: #f9e1e0; color: #8a2622; font-size: 14px; }

/* Плитки товаров */
.goods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: 30px; }
.good { background: var(--card); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.good .pic, .item .pic { background: #fff; display: grid; place-items: center; overflow: hidden; }
.good .pic { aspect-ratio: 1; border-bottom: 1px solid var(--card-line); padding: 12px; }
.good .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Живой снимок (не товар на белом) заполняет рамку: .cover ставит сервер
   по краям миниатюры (files.PlainBackground). */
.good .pic.cover, .item .pic.cover { padding: 0; }
.good .pic.cover img, .item .pic.cover img { object-fit: cover; }
/* Safari (iPhone) не растягивает img с height: 100% внутри сетки с aspect-ratio:
   снимок уезжал вниз рамки, сверху оставалась пустота. Поэтому картинка
   кладется поверх рамки абсолютно, отступы рамки повторяются через inset. */
.cat .pic, .good .pic, .item .pic { position: relative; }
.cat .pic img, .good .pic img, .item .pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.good .pic img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.item .pic img { inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.good .pic.cover img, .item .pic.cover img { inset: 0; width: 100%; height: 100%; }
.ph { font-size: 48px; font-weight: 800; color: var(--accent-soft); letter-spacing: -.04em; user-select: none; }
.good .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.good .name { color: var(--card-fg); font-weight: 600; line-height: 1.3; }
.good .code { color: var(--card-muted); font-size: 12.5px; min-height: 1em; }
.good .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.good form { margin: 0; }
.price { font-weight: 800; color: var(--accent); font-size: 20px; white-space: nowrap; }
.price small { color: var(--card-muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; }
.price.ask { font-size: 13.5px; color: var(--card-muted); font-weight: 500; white-space: normal; }
.good .add { padding: 8px 14px; font-size: 13.5px; border-radius: 20px; }
.good .added { color: var(--accent); font-size: 13px; font-weight: 600; }
.empty { padding: 40px 0 60px; color: var(--muted); }
.info { margin: 10px 0 20px; }
.info h2 { font-size: 22px; margin-bottom: 8px; }
.info p { white-space: pre-line; color: var(--muted); max-width: 60em; margin: 0; }

/* Листалка больших разделов (shop.go, paginate) */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 22px 0 10px; font-size: 14.5px; }
.pager a, .pager .cur, .pager .gap { min-width: 38px; padding: 8px 12px; border-radius: 10px; text-align: center; box-sizing: border-box; }
.pager a { border: 1px solid var(--line); color: var(--fg); }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager .cur { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.pager .gap { color: var(--muted); padding: 8px 4px; min-width: 0; }
.pager .pager-info { color: var(--muted); margin-right: 8px; }

/* Хлебные крошки и карточка товара */
.crumbs { font-size: 13.5px; color: var(--muted); padding: 22px 0 10px; }
.crumbs .sep { color: var(--accent); margin: 0 4px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 10px 0 30px; }
.item .pic { border: 1px solid var(--card-line); border-radius: 14px; aspect-ratio: 1; padding: 20px; }
.item .pic .ph { font-size: 96px; }
.item h1 { font-size: 30px; margin: 0 0 8px; }
.item .meta { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.item .price { font-size: 30px; margin: 6px 0 18px; display: block; }
.item .price.ask { font-size: 15px; color: var(--muted); }
.buy { display: flex; gap: 10px; align-items: center; margin: 0 0 24px; flex-wrap: wrap; }
.buy input { width: 90px; text-align: center; }
.buy .primary { padding: 11px 24px; border-radius: 22px; }
.ask-link { font-size: 14px; }
.buy .buy-sum { flex-basis: 100%; margin: 0; }
/* Товар упаковками: цена за м², переключатель «м² / упак», шаг — упаковка,
   сумма сразу в карточке (shop.js, data-buy) */
.buy-box { background: var(--card); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: 16px; padding: 20px 22px; margin: 0 0 24px; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.buy-box .buy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.item .buy-box .price { margin: 0; font-size: 30px; }
.buy-box .price small { text-transform: none; font-size: 15px; }
.seg { display: inline-flex; background: var(--accent-soft); border-radius: 12px; padding: 3px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: block; padding: 7px 16px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--card-fg); }
.seg input:checked + span { background: #fff; color: #222; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
.buy-box .pack-note { margin: 0; color: var(--card-muted); font-size: 14px; }
.buy-box .buy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.stepper { display: flex; align-items: center; background: var(--accent-soft); border-radius: 12px; overflow: hidden; }
.stepper input { flex: 1; min-width: 0; width: 100%; text-align: center; border: 0; background: transparent; font-size: 17px; font-weight: 600; color: var(--card-fg); padding: 12px 4px; }
.stepper button { border: 0; background: transparent; color: var(--accent); font-size: 22px; padding: 6px 14px; border-radius: 0; }
.buy-box .buy-row .primary { padding: 13px 18px; border-radius: 12px; font-size: 16px; }
.buy-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--card-muted); }
.buy-sum b { color: var(--accent); font-size: 22px; font-weight: 800; }
.buy-box .buy-sum { margin: 0; border-top: 1px solid var(--card-line); padding-top: 12px; }
.buy-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.cart .packs, .est-table .packs { display: block; color: var(--card-muted); font-size: 12.5px; font-weight: 500; }
.descr { line-height: 1.6; white-space: pre-line; }
/* Описание и характеристики под фото и покупкой, от левого края: текст —
   читаемой ширины, таблица характеристик — колонками по ширине страницы. */
.item-info { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
.item-info > .descr:first-child > h3 { margin-top: 14px; }
.item-info > .descr { max-width: 860px; }
.item-info > .descr:has(.specs) { max-width: none; }
.item-info .specs { width: 100%; border-collapse: collapse; }
.item-info .specs tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 40px; }
.item-info .specs tr { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
.item-info .specs th { width: auto; }
.descr h3 { font-size: 16px; margin: 20px 0 8px; }
.specs { font-size: 14px; white-space: normal; }
.specs th { width: 45%; font-weight: 500; color: var(--muted); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs td { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* Заявка */
.request { background: var(--card); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: 16px; padding: 26px 28px; margin: 20px 0 40px; }
.request h2 { font-size: 24px; margin-bottom: 4px; }
.request .muted { color: var(--card-muted); margin: 0 0 16px; }
.request-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.request-form label { color: var(--card-muted); }
.request-form .wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.request-form label.wide { display: block; }
.request-form .primary { padding: 11px 30px; border-radius: 22px; }

/* Корзина и заказ */
.cart { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; padding: 26px 0 48px; align-items: start; }
.cart .card { margin: 0; }
.cart h1 { font-size: 26px; margin: 0 0 12px; }
.cart table th { color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; padding: 0 10px 10px 0; }
.cart table td { padding: 12px 10px 12px 0; vertical-align: middle; border-top: 1px solid var(--card-line); }
.cart td.r, .cart th.r { text-align: right; padding-right: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.line-name .thumb { width: 48px; height: 48px; border-radius: 8px; flex: none; overflow: hidden; display: grid; place-items: center; background: #f3f3f6; color: #9a9aa6; font-weight: 700; font-size: 18px; line-height: 1; }
.line-name .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.line-name > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.line-name > div > b { line-height: 1.25; }
.line-name > div > span, .line-name .sub { color: var(--card-muted); font-size: 12.5px; line-height: 1.35; }
.qty { display: inline-flex; align-items: center; gap: 2px; }
.qty form { margin: 0; }
.qty button { padding: 2px 10px; border-radius: 6px; }
.qty b { min-width: 2.2em; text-align: center; display: inline-block; }
.cart button.x, .cart .x button { border: 0; background: none; box-shadow: none; color: var(--card-muted); padding: 4px 8px; font-size: 18px; line-height: 1; }
.cart button.x:hover, .cart .x button:hover { color: #8a2622; filter: none; }
.cart table td:last-child { width: 1%; padding: 12px 0 12px 8px; }
.cart table td form { margin: 0; }
.cart td.price-col, .cart td.r { white-space: nowrap; font-variant-numeric: tabular-nums; }
.total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; padding-top: 12px; margin-top: 8px; border-top: 2px solid var(--card-line); }
.total .price { font-size: 20px; }
.order-form label { margin-bottom: 10px; }
.order-form .primary { width: 100%; padding: 12px; margin-top: 6px; border-radius: 22px; }
.order-form .f { color: var(--card-muted); font-size: 12.5px; margin-top: 10px; }
.done { max-width: 560px; margin: 40px auto 60px; text-align: center; }
.done .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-size: 30px; margin: 0 auto 14px; }
.done h1 { font-size: 26px; margin-bottom: 8px; }
.done .button { margin-top: 18px; }

/* Подвал */
.shop-foot { background: var(--foot); color: var(--foot-fg); padding: 36px 0 24px; margin-top: 20px; }
.shop-foot a { color: var(--foot-fg); }
.shop-foot a:hover { color: var(--accent); }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 14px; line-height: 1.9; }
.foot-title { font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 4px; }
.shop-foot .muted { color: #9a9aa3; }
.powered { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: #9a9aa3; }

@media (max-width: 1000px) {
  .goods, .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-brand { max-width: 50%; }
}
@media (max-width: 760px) {
  .shop-wrap { padding: 0 16px; }
  .shop-line { display: none; }
  .shop-main { flex-wrap: wrap; gap: 12px; min-height: 0; padding: 12px 16px; }
  .shop-brand { max-width: 70%; font-size: 18px; }
  .shop-search { order: 3; flex-basis: 100%; max-width: none; }
  .cart-btn { font-size: 0; gap: 0; }
  .cart-btn .n { font-size: 14px; width: 32px; height: 32px; }
  .shop-menu .shop-wrap { overflow-x: auto; flex-wrap: nowrap; }
  .shop-menu .mi > a { white-space: nowrap; padding: 11px 14px; font-size: 13.5px; }
  .shop-menu .sub { display: none !important; }
  .goods, .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-hero.with-cats { padding: 24px 20px; }
  .shop-hero h1, .cat-title { font-size: 26px; }
  .item { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cart { grid-template-columns: minmax(0, 1fr); }
  .request-form { grid-template-columns: minmax(0, 1fr); }
  .request { padding: 20px 18px; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .goods { grid-template-columns: minmax(0, 1fr); }
  .good .pic { aspect-ratio: 4 / 3; }
}

/* Расчет цены услуги (item.html, data-calc): варианты, метраж, адрес и зона;
   итог считает shop.js, сервер пересчитывает при заказе. */
.calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; background: var(--card); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: 14px; padding: 18px 20px; margin: 0 0 24px; }
.calc .calc-f { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--card-muted); }
.calc .calc-f .fine { font-weight: 400; }
.calc select, .calc input { font: inherit; font-weight: 500; color: var(--card-fg); background: #fff; border: 1px solid var(--card-line); border-radius: 9px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.calc .calc-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--card-line); padding-top: 12px; font-size: 15px; }
.calc .calc-total b { color: var(--accent); font-size: 22px; font-weight: 800; }
.calc .calc-total small { color: var(--card-muted); font-weight: 600; }
.calc .buy { grid-column: 1 / -1; margin: 0; }
.shop [hidden] { display: none !important; }
.calc-addr, .order-form .calc-addr { display: flex; gap: 6px; align-items: stretch; }
.calc-addr input { flex: 1 1 auto; min-width: 0; margin: 0; }
.calc-addr button { margin: 0; flex: 0 0 auto; }
.calc .calc-f.wide { grid-column: 1 / -1; }
.calc-addr button, .order-form .calc-addr button { font: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; border-radius: 9px; border: 1px solid var(--card-line); background: #fff; color: var(--card-fg); cursor: pointer; white-space: nowrap; }
.calc .calc-map { grid-column: 1 / -1; }
.calc .calc-map .fine, .order-form .f .fine { margin: 6px 0 0; }
.calc .map-msg, .order-form .map-msg { margin: 6px 0 0; font-size: 13px; color: var(--card-muted); }
.pmap-box { height: 320px; }
@media (max-width: 640px) { .pmap-box { height: 260px; } }
.calc .fine { grid-column: 1 / -1; margin: 0; color: var(--card-muted); }
.cart .zone-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 14px 0 6px; }
.cart .zone-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--card-muted); font-weight: 600; min-width: 220px; }
.cart .total.sub { font-size: 14px; color: var(--card-muted); border: 0; padding-bottom: 0; }
@media (max-width: 640px) { .calc { grid-template-columns: 1fr; } }
/* Телефон: строка корзины в две линии — товар сверху, количество,
   сумма и «убрать» под ним. */
@media (max-width: 640px) {
  .cart table, .cart table tbody { display: block; width: 100%; }
  .cart table tr:first-child { display: none; }
  .cart table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; padding: 12px 0; border-top: 1px solid var(--card-line); }
  .cart table td { display: block; border: 0; padding: 0; }
  .cart table td:first-child { grid-column: 1 / -1; margin-bottom: 10px; }
  .cart table td:last-child { width: auto; padding: 0; }
  .cart .price-col { display: none !important; }
  .line-name { gap: 10px; }
  .line-name .thumb { width: 44px; height: 44px; font-size: 16px; }
}

/* Расчет стоимости (templates/shop/estimate.html): смета по этапам, как
   коммерческое предложение — сверху общая стоимость и предоплата, по
   этапам таблицы «вид работы / объем / стоимость» с итогом и графиком
   оплаты. Шапка таблиц — --head, подложки итогов — --accent-soft. */
.estimate { display: grid; gap: 18px; padding: 26px 0 48px; }
.estimate .sub { color: var(--card-muted); font-size: 14px; margin: 6px 0 0; }
.estimate h1 { font-size: 30px; margin: 2px 0 0; }
.estimate h2 { font-size: 24px; margin: 2px 0 0; }
.estimate h3 { font-size: 17px; margin: 18px 0 8px; }
.est-kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.est-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.est-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.est-stages-k { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.est-total { margin-top: 8px; }
.est-total span, .est-prepay span { display: block; color: var(--card-muted); font-size: 14px; }
.est-total b { font-size: 28px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.est-prepay { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.est-prepay b { font-size: 22px; font-variant-numeric: tabular-nums; }
.est-list { list-style: none; margin: 14px 0 0; padding: 0; }
.est-list li { display: flex; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--card-line); }
.est-list .n { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; width: 24px; }
.est-list li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.est-list .nm { font-size: 14px; }
.est-list b { font-variant-numeric: tabular-nums; }
.est-table { margin-top: 14px; border-radius: 10px; overflow: hidden; }
.est-table th { background: var(--head); color: var(--head-fg); font-weight: 600; font-size: 13px; padding: 10px 12px; }
.est-table td { padding: 9px 12px; border-top: 1px solid var(--card-line); vertical-align: middle; }
.est-table tr:nth-child(odd) td { background: color-mix(in srgb, var(--card-fg) 3%, var(--card)); }
.est-table td .sub { display: block; font-size: 12.5px; margin: 1px 0 0; }
.estimate .card .est-table td a { color: var(--card-fg); }
.est-table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.est-table .x-col { width: 1%; padding-left: 4px; padding-right: 4px; }
.est-table .est-sum td { background: var(--accent-soft) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; padding: 11px 12px; }
.est-table .est-sum td.r { font-size: 16px; text-transform: none; letter-spacing: 0; }
.vol-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.vol-form input[name=qty] { width: 5.5em; text-align: right; padding: 5px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.vol-form .unit { color: var(--card-muted); font-size: 13px; }
.vol-print { display: none; }
.estimate button.x { border: 0; background: none; box-shadow: none; color: var(--card-muted); padding: 4px 6px; font-size: 18px; line-height: 1; }
.estimate button.x:hover { color: #8a2622; filter: none; }
.estimate .est-table td form { margin: 0; }
.est-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; background: var(--accent-soft); border-radius: 10px; overflow: hidden; }
.est-pay > div { padding: 12px 16px; border-left: 1px solid rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 2px; }
.est-pay > div:first-child { border-left: 0; }
.est-pay .pct { color: var(--accent); font-weight: 800; font-size: 22px; }
.est-pay .when { color: var(--card-muted); font-size: 13px; }
.est-pay b { font-size: 17px; font-variant-numeric: tabular-nums; }
.est-note { margin: -6px 4px 0; }
.est-print-head { display: none; }
.est-order .est-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.est-order .wide { grid-column: 1 / -1; }
.est-order .primary { width: auto; min-width: 240px; }
@media (max-width: 760px) {
  .est-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .estimate h1 { font-size: 26px; }
  .estimate h2 { font-size: 21px; }
  .est-order .est-order-grid { grid-template-columns: minmax(0, 1fr); }
  .est-order .primary { width: 100%; }
  .est-table th, .est-table td { padding-left: 8px; padding-right: 8px; }
  .vol-form input[name=qty] { width: 4.5em; }
}
@media (max-width: 640px) {
  /* Телефон: строка таблицы в две линии — работа, под ней объем, сумма и «убрать». */
  .est-table, .est-table tbody { display: block; width: 100%; }
  .est-table tr:first-child { display: none; }
  .est-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; padding: 8px 10px; border-top: 1px solid var(--card-line); }
  .est-table td { display: block; border: 0; padding: 0; background: none !important; }
  .est-table td:first-child { grid-column: 1 / -1; margin-bottom: 6px; }
  .est-table tr.est-sum { background: var(--accent-soft); }
  .est-table .est-sum td:first-child { grid-column: 1; margin: 0; }
  .est-table .est-sum td:nth-child(2), .est-table .est-sum td.x-col { display: none; }
  .est-table .est-sum td.r { grid-column: 2 / -1; }
  .est-pay { grid-template-columns: minmax(0, 1fr); }
  .est-pay > div { border-left: 0; border-top: 1px solid rgba(0,0,0,.08); flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .est-pay > div:first-child { border-top: 0; }
  .est-pay b { margin-left: auto; }
}
@media print {
  /* «Сохранить в PDF»: только расчет, без шапки сайта, кнопок и формы. */
  body.shop { background: #fff; color: #111; font-size: 12px; }
  .shop-top, .shop-foot, .est-actions, .est-order, .x-col, .zone-form, .shop-error { display: none !important; }
  .shop-wrap { max-width: none; padding: 0; }
  .estimate { padding: 0; gap: 14px; }
  .estimate .card { border: 0; padding: 0 0 6px; break-inside: avoid; }
  .est-head { break-inside: avoid; }
  .estimate .est-stage { break-inside: auto; }
  .est-table tr, .est-pay { break-inside: avoid; }
  .estimate h2, .estimate h3 { break-after: avoid; }
  .est-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .est-table .est-sum td, .est-pay, .est-prepay { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vol-form input, .vol-form .unit { display: none; }
  .vol-print { display: inline; }
  .est-table td a { color: #111; text-decoration: none; }
  .estimate .sub a { color: inherit; }
  .est-print-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 0 8px; border-bottom: 2px solid var(--accent); font-size: 13px; }
  .est-print-head b { font-size: 18px; }
}

/* Карта зон на сайте — только по кнопке «Показать на карте» (USER
   05.11.2026); окно «Ваш объект» — площадь и адрес на страницах услуг
   (shop_object.go). Без скрипта окно открывается якорем #object. */
.map-open { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--card-line); background: #fff; color: var(--card-fg); cursor: pointer; }
.map-open:hover { border-color: var(--accent); color: var(--accent); }
.map-fold .map-body { margin-top: 10px; }
.obj-bar { margin: 14px 0 0; text-align: right; }
.obj-bar a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--card-line); background: var(--card); color: var(--card-fg); }
.obj-bar a::before { content: "⌂"; color: var(--accent); }
.obj-bar a:hover { border-color: var(--accent); text-decoration: none; }
.obj-dlg { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(15, 18, 30, .55); align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.obj-dlg.open, .obj-dlg:target { display: flex; }
.obj-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; background: var(--card); color: var(--card-fg); border-radius: 16px; padding: 24px 24px 20px; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.obj-card h2 { margin: 0; font-size: 22px; padding-right: 32px; }
.obj-card p.muted { margin: 0; color: var(--card-muted); font-size: 14px; }
.obj-card .calc-f { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--card-muted); }
.obj-card input { font: inherit; font-weight: 500; color: var(--card-fg); background: #fff; border: 1px solid var(--card-line); border-radius: 9px; padding: 9px 11px; width: 100%; box-sizing: border-box; }
.obj-card .calc-addr button { font: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; border-radius: 9px; border: 1px solid var(--card-line); background: #fff; color: var(--card-fg); cursor: pointer; white-space: nowrap; }
.obj-card .fine, .obj-card .map-msg { margin: 6px 0 0; font-size: 13px; color: var(--card-muted); }
.obj-card .pmap-box { height: 260px; }
.obj-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--card-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.obj-x:hover { background: rgba(0, 0, 0, .06); color: var(--card-fg); }
.obj-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.obj-actions .primary { padding: 10px 22px; }
.obj-skip { font: inherit; border: 0; background: none; color: var(--card-muted); cursor: pointer; text-decoration: underline; }
body.obj-lock { overflow: hidden; }
@media print { .obj-dlg, .obj-bar, .map-fold { display: none !important; } }