/* Надстройка над стандартной темой Shop-Script: шаблоны и скрипты остаются штатными
   (их обновляет «Установщик»), здесь только приведение к виду сайта «Мять».
   Подключается последней, поэтому перекрывает default.shop.css и css/order.css. */

.app-shell { padding-top: calc(var(--u) * 8); padding-bottom: calc(var(--u) * 12); min-height: 60vh; }
/* font-feature-settings задан на body темы сайта, но поля и кнопки браузер рисует своим
   шрифтом и фирменный набор до них не доходит: без этой строки в корзине и в полях ввода
   возвращается ноль с точкой внутри. */
.app-shell, .app-shell input, .app-shell select, .app-shell textarea, .app-shell button { font-family: var(--font); font-feature-settings: "ss01"; }
.app-shell h1 { font-weight: 300; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 calc(var(--u) * 5); }
.app-shell h2, .app-shell h3 { font-weight: 400; letter-spacing: 0; }
.app-shell a { color: var(--black); }
.app-shell .breadcrumbs { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-bottom: calc(var(--u) * 4); }
.app-shell .breadcrumbs a { color: var(--gray); text-decoration: none; }

/* Кнопки и поля — острые углы, чёрная заливка, как на остальном сайте */
.app-shell input[type="submit"], .app-shell input[type="button"], .app-shell button, .app-shell .button, .app-shell .wa-button {
  border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; background-image: none !important;
  font-family: var(--font); font-weight: 300; letter-spacing: .08em; text-transform: uppercase; }
.app-shell input[type="submit"], .app-shell .button, .app-shell .wa-button.js-submit-order-button, .app-shell button.wa-button {
  background: var(--black) !important; border: 1px solid var(--black) !important; color: var(--paper) !important; }
.app-shell input[type="text"], .app-shell input[type="email"], .app-shell input[type="tel"], .app-shell input[type="password"], .app-shell input[type="number"], .app-shell select, .app-shell textarea {
  border-radius: 0 !important; box-shadow: none !important; font-weight: 300; }
.app-shell .price, .app-shell .wa-price, .app-shell .wa-total { font-weight: 400; color: var(--black); }
.app-shell .badge, .app-shell .rating, .app-shell .wa-rating { display: none; }

/* ── Переменные штатных стилей магазина ───────────────────────────────────────────────
   Стили Shop-Script (default.shop.css, css/order.css) написаны на переменных, которые
   задаёт стандартная тема сайта. В нашем макете её нет, поэтому переменные задаются здесь
   — нашими значениями: чёрный акцент вместо фиолетового, острые углы, без теней.
   На :root, а не на .app-shell: всплывающие окна магазина рисуются прямо в <body>. */
:root {
  --white: #ffffff; --white-auto: #ffffff; --black-auto: #0b0b0b;
  --gray1: #2a2c2e; --gray2: #4f4f4f; --gray3: #77777a; --gray4: #b5b3ae; --gray5: #dedbd5; --gray6: #f4f0e9; --gray7: #faf8f4;
  --gray20: #c9c6c0; --gray-main: #77777a; --gray-strong: #4f4f4f; --gray-muted: #8f8f92; --gray-subtle: #b5b3ae;
  --red: #a3261b; --green: #2f6b3a; --orange: #9a6a1f;
  --accent-color: #0b0b0b; --accent-color-light: #2a2c2e; --accent-color-lighter: #77777a; --accent-color-dark: #000000;
  --element-border-radius: 0; --gap: 0;
  --bg: #ffffff; --bg-color: #ffffff; --bg-color-accent: #ffffff; --bg-gray-color: #f4f0e9;
  --divider-color: #dedbd5; --border-color: #dedbd5;
  --text-color: #0b0b0b; --text-color-secondary: #4f4f4f; --text-color-additional: #77777a; --color-secondary: #4f4f4f; --hint-color: #77777a;
  --link-color: #0b0b0b; --link-hover-color: #4f4f4f; --link-visited-color: #0b0b0b;
  --header-menu-pages-link-color: #2a2c2e;
  --input-bg-color: #ffffff; --input-border-color: #0b0b0b; --input-color: #0b0b0b; --input-placeholder-color: #b5b3ae;
  --button-bg-color: #0b0b0b; --button-text-color: #ffffff; --button-hover-bg-color: #2a2c2e; --button-hover-text-color: #ffffff;
  --button-active-bg-color: #000000; --button-active-text-color: #ffffff; --button-disabled-bg-color: #b5b3ae; --button-disabled-text-color: #ffffff;
  --shadow: none; --shadow1: none;
  --h5-size: 21px; --font-family: var(--font);
}

/* ── Корзина и оформление заказа ──────────────────────────────────────────────────── */
.app-shell .s-order-page { font-size: 18px; }
.app-shell .s-order-page .s-header { font-weight: 300; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.01em; }
.app-shell .s-order-page .s-order-section > .s-section-body { border: 1px solid var(--line); box-shadow: none; border-radius: 0; background: var(--paper); }
.app-shell .s-order-page a { text-underline-offset: 4px; }
.app-shell .s-order-page input[type="text"], .app-shell .s-order-page input[type="email"], .app-shell .s-order-page input[type="tel"] { border: 1px solid var(--black); font-size: 18px; }
.app-shell .s-order-page .wa-submit-button, .app-shell .s-order-page .js-submit-order-button, .app-shell .s-order-page .wa-button.blue, .app-shell .s-order-page .wa-button.large {
  background: var(--black) !important; border: 1px solid var(--black) !important; color: var(--paper) !important; border-radius: 0 !important; }
/* Заглушка «нет фото» у товара без картинки: у сертификата картинки нет и не будет. */
.app-shell .s-order-page .wa-column-image, .app-shell .s-order-page .wa-image-section { display: none; }

/* Начертание: у Cocomat Pro подключены 300/400/500, поэтому «жирный» штатных стилей (700) браузер
   рисовал бы искусственно. Акценты — весом 500, остальное — 300/400. */
.app-shell .s-order-page :is(b, strong, h3, h4, h5, .wa-header, .wa-name, .wa-price, .wa-total, .wa-label, a) { font-weight: 400; }
.app-shell .s-order-page :is(.wa-price-total, .wa-total .wa-price, .wa-section-header > .wa-header) { font-weight: 500; }
.app-shell .s-order-page .wa-section-header > .wa-header { font-size: 21px; }
/* Количество в розничном заказе не меняется: один заказ — один сертификат или абонемент,
   получатель в нём один. Несколько штук — это корпоративный раздел /corporate/ (решение
   владельца 14.10.2026), поэтому счётчик «−/+» скрыт. */
.app-shell .s-order-page .wa-quantity-cart-section { display: none; }
/* Текст согласия должен читаться, а не теряться светло-серым. */
.app-shell .s-order-page :is(.wa-agreement-wrapper, .wa-service-agreement, label) { color: var(--graphite); }

/* ── Получатель подарка (плагин myatrecipient) ────────────────────────────────────── */
.app-shell .s-order-page .myat-recipient { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.app-shell .s-order-page .myat-recipient__toggle { display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--black); }
.app-shell .s-order-page .myat-recipient__toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--black); }
/* Поля раскрываются галочкой без скрипта: форму шага Shop-Script перерисовывает сам. */
.app-shell .s-order-page .myat-recipient__fields { display: none; margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
.app-shell .s-order-page .myat-recipient__toggle:has(input:checked) + .myat-recipient__fields { display: grid; }
.app-shell .s-order-page .myat-recipient__fields .wa-line { margin: 0 0 16px !important; padding: 0; }
.app-shell .s-order-page .myat-recipient__fields :is(.wa-field-wrapper, input) { display: block; width: 100% !important; max-width: none; box-sizing: border-box; }
.app-shell .s-order-page .myat-recipient__hint { grid-column: 1 / -1; margin: 8px 0 0; font-size: 16px; color: var(--graphite); }
@media (max-width: 760px) { .app-shell .s-order-page .myat-recipient__fields { grid-template-columns: 1fr; } }

/* Способ получения сертификата (тот же плагин). Студия нужна только при самовывозе. */
.app-shell .s-order-page .myat-delivery { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.app-shell .s-order-page .myat-delivery__title { margin: 0 0 4px; color: var(--black); }
.app-shell .s-order-page .myat-delivery__studio { display: none; margin-top: 4px; }
.app-shell .s-order-page .myat-delivery:has(input[value="pickup"]:checked) .myat-delivery__studio { display: block; }
.app-shell .s-order-page .myat-delivery select { width: 100%; box-sizing: border-box; border: 1px solid var(--black); border-radius: 0; font: inherit; font-size: 18px; padding: 12px; background: var(--paper); }

/* Дизайн бланка: выбор глазами, поэтому карточки с превью, а не список названий.
   Радиокнопку прячем — роль переключателя берёт на себя сама карточка. */
.app-shell .s-order-page .myat-design { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.app-shell .s-order-page .myat-design__label { margin: 0 0 12px; color: var(--black); }
.app-shell .s-order-page .myat-design__cards { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.app-shell .s-order-page .myat-design__card { display: block; cursor: pointer; padding: 8px; border: 1px solid var(--line); background: var(--paper); transition: border-color .15s; }
.app-shell .s-order-page .myat-design__card:hover { border-color: #b5b5b5; }
.app-shell .s-order-page .myat-design__card:has(input:checked) { border-color: var(--black); }
.app-shell .s-order-page .myat-design__card input { position: absolute; opacity: 0; pointer-events: none; }
.app-shell .s-order-page .myat-design__card img { display: block; width: 100%; height: auto; }
.app-shell .s-order-page .myat-design__title { display: block; margin-top: 10px; color: var(--black); }
.app-shell .s-order-page .myat-design__hint { display: block; font-size: 15px; color: var(--muted, #8a8782); }
@media (max-width: 480px) { .app-shell .s-order-page .myat-design__cards { grid-template-columns: 1fr; } }