/* ============================================================
   PAGES — molecmag скин для стандартных OC-страниц
   (аккаунт, информация, контакты, поиск, сравнение, 404, спецпредложения…)
   Тема не грузит bootstrap — поэтому здесь themed-shim его классов.
   Все правила скоплены в .container/#content/#column-left, чтобы не задевать
   кастомные страницы темы (home/category/cart/product со своими классами).
   ============================================================ */

/* ── скрыть чужие модули старой темы `new`, протекающие в content_top/bottom ── */
.menu.shopMenu, .shopMenu, .menu_mobile { display: none !important; }

/* ── мини-сетка (вместо bootstrap grid) ── */
.container > .row, #content .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.container > .row > [class*="col-"], #content .row > [class*="col-"] { padding: 0 12px; box-sizing: border-box; width: 100%; }
@media (min-width: 768px) {
  [class*="col-sm-"] { float: none; }
  .col-sm-1{width:8.333%}.col-sm-2{width:16.66%}.col-sm-3{width:25%}.col-sm-4{width:33.33%}
  .col-sm-5{width:41.66%}.col-sm-6{width:50%}.col-sm-7{width:58.33%}.col-sm-8{width:66.66%}
  .col-sm-9{width:75%}.col-sm-10{width:83.33%}.col-sm-11{width:91.66%}.col-sm-12{width:100%}
  .col-sm-offset-8{margin-left:66.66%}.col-sm-offset-3{margin-left:25%}
}
.col-xs-1{width:8.333%}.col-xs-2{width:16.66%}.col-xs-3{width:25%}.col-xs-4{width:33.33%}
.col-xs-6{width:50%}.col-xs-12{width:100%}
@media (min-width: 992px) {
  .col-md-3{width:25%}.col-md-4{width:33.33%}.col-md-6{width:50%}.col-md-8{width:66.66%}.col-md-9{width:75%}.col-md-12{width:100%}
  .col-lg-2{width:16.66%}.col-lg-3{width:25%}.col-lg-4{width:33.33%}.col-lg-6{width:50%}.col-lg-8{width:66.66%}.col-lg-9{width:75%}.col-lg-12{width:100%}
}
/* товарная сетка (поиск/спецпредложения/производитель) — фикс ширины плитки */
#content .product-layout { box-sizing: border-box; padding: 0 12px; }
@media (min-width: 768px) { #content .product-layout.product-grid { width: 33.33%; } }
@media (min-width: 1200px) { #content .product-layout.product-grid { width: 25%; } }
#content .product-layout.product-list { width: 100%; }

/* ── основная область + заголовки ── */
.container { padding-top: 24px; padding-bottom: 64px; }
#content { min-width: 0; }
#content h1, #content h2 { font-family: 'Rubik', sans-serif; color: var(--text-primary); letter-spacing: -.3px; }
#content h1 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; margin: 0 0 20px; }
#content h2 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; margin: 28px 0 14px; }
#content h3 { font: 600 18px 'Geologica', sans-serif; color: var(--text-primary); margin: 20px 0 10px; }
#content p, #content li { color: var(--text-secondary); line-height: 1.6; }
#content a { color: var(--teal); text-decoration: none; }
#content a:hover { text-decoration: underline; }
#content img { max-width: 100%; height: auto; }

/* ── хлебные крошки ── */
.container > .breadcrumb, .breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 20px; padding: 0;
  font-size: 13px; color: var(--text-tertiary); background: none;
}
.breadcrumb > li + li::before { content: '/'; margin-right: 6px; color: var(--text-tertiary); }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb > li:last-child a, .breadcrumb > .active { color: var(--text-primary); }

/* ── кнопки ── */
#content .btn, #column-left .btn, #column-right .btn, .buttons .btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 400 15px 'Geologica', sans-serif; cursor: pointer; text-decoration: none; transition: opacity .15s, background .15s;
}
.btn-primary, .btn-info { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover, .btn-info:hover { opacity: .92; color: #fff; text-decoration: none; }
.btn-default, .btn-light { background: var(--bg-secondary); color: var(--text-primary); }
.btn-default:hover { background: #e9eef2; text-decoration: none; }
.btn-danger { background: #fdecec; color: #c0392b; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-sm, .btn-xs { height: 38px; padding: 0 16px; font-size: 13px; }
.btn-block { width: 100%; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.buttons .pull-left { margin-right: auto; } .buttons .pull-right { margin-left: auto; }

/* ── формы ── */
#content .form-group, #column-left .form-group { margin-bottom: 16px; }
#content .control-label, #content label, #column-left label { display: inline-block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 400; }
.form-group.required > .control-label::after, .form-group.required > label::after { content: ' *'; color: #c0392b; }
#content .form-control, #column-left .form-control,
#content input[type=text], #content input[type=email], #content input[type=tel],
#content input[type=password], #content input[type=number], #content select, #content textarea {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px;
  border: 1px solid var(--border-primary); border-radius: var(--radius-12);
  background: #fff; font: 400 14px 'Geologica', sans-serif; color: var(--text-primary); transition: border-color .15s;
}
#content textarea, #content .form-control[rows] { height: auto; min-height: 110px; padding: 12px 16px; resize: vertical; }
#content .form-control:focus, #content input:focus, #content select:focus, #content textarea:focus { outline: none; border-color: var(--teal); }
#content .input-group { display: flex; gap: 8px; }
#content .radio, #content .checkbox { margin: 8px 0; }
#content .radio label, #content .checkbox label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); margin: 0; cursor: pointer; }
#content input[type=radio], #content input[type=checkbox] { accent-color: var(--teal); width: 18px; height: 18px; }
.help-block { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.text-danger { color: #c0392b; font-size: 13px; }
.form-horizontal .form-group { display: block; }
/* горизонтальные формы (контакты, аккаунт) — метка над полем, всё на всю ширину */
.form-horizontal .form-group > .control-label,
.form-horizontal .form-group > label { width: 100%; text-align: left; float: none; }
.form-horizontal .form-group > [class*="col-"] { width: 100% !important; max-width: 100%; padding: 0; float: none; }
#content fieldset > legend { font: 600 18px 'Geologica', sans-serif; }

/* ── карточки/панели ── */
#content .panel, #content .well, #content fieldset {
  background: var(--bg-tertiary); border: none; border-radius: var(--radius-24); padding: 24px; margin: 0 0 20px;
  box-shadow: var(--shadow-s);
}
#content .panel-heading, #content legend {
  font: 600 18px 'Geologica', sans-serif; color: var(--text-primary); padding: 0 0 14px; margin: 0 0 16px;
  background: none; border: none; border-bottom: 1px solid var(--border-tertiary); width: 100%;
}
#content .panel-body { padding: 0; }
#content .panel-footer { background: none; border: none; padding: 16px 0 0; }

/* ── меню аккаунта / списки (column_left, account dashboard) ── */
.list-group { display: flex; flex-direction: column; gap: 4px; border-radius: var(--radius-16); overflow: hidden; list-style: none; margin: 0 0 20px; padding: 0; }
.list-group-item {
  display: block; padding: 12px 16px; background: var(--bg-tertiary); border: none !important; border-radius: var(--radius-12) !important;
  color: var(--text-primary); text-decoration: none; font-size: 14px; box-shadow: var(--shadow-s);
}
a.list-group-item:hover { color: var(--teal); text-decoration: none; }
.list-group-item.active, a.list-group-item.active { background: var(--teal); color: #fff; }

/* ── таблицы (история заказов, адреса, возвраты, сравнение) ── */
#content .table-responsive { overflow-x: auto; }
#content table.table { width: 100%; border-collapse: collapse; background: var(--bg-tertiary); border-radius: var(--radius-16); overflow: hidden; margin: 0 0 20px; box-shadow: var(--shadow-s); }
#content table.table thead td, #content table.table thead th { background: var(--bg-primary-bg); font: 500 13px 'Geologica', sans-serif; color: var(--text-secondary); text-align: left; padding: 14px 16px; }
#content table.table td, #content table.table th { padding: 14px 16px; border-bottom: 1px solid var(--border-tertiary); font-size: 14px; color: var(--text-primary); vertical-align: middle; }
#content table.table tbody tr:last-child td { border-bottom: none; }
#content table.table .text-right { text-align: right; } #content table.table .text-center { text-align: center; }
#content table.table img { border-radius: 10px; }

/* ── алерты ── */
.alert { border: none; border-radius: var(--radius-12); padding: 14px 18px; margin: 0 0 20px; font-size: 14px; }
.alert-success { background: #e6f7f2; color: #137a68; }
.alert-danger { background: #fdecec; color: #c0392b; }
.alert-info, .alert-warning { background: #eef4f8; color: var(--text-primary); }

/* ── пагинация ── */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; }
.pagination > li > a, .pagination > li > span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--border-primary); border-radius: var(--radius-12); background: #fff; color: var(--text-primary); text-decoration: none; font-size: 14px;
}
.pagination > .active > span, .pagination > li > a:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.row.pagination-row, .text-right.pagination { justify-content: flex-end; }

/* ── товарная сетка (search / special / manufacturer) ── */
#content .product-layout { margin-bottom: 24px; }
#content .product-thumb {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 12px;
  background: var(--bg-tertiary); border: none; border-radius: var(--radius-24); box-shadow: var(--shadow-s);
}
#content .product-thumb .image { border-radius: var(--radius-16); overflow: hidden; background: var(--bg-primary-bg); aspect-ratio: 1; }
#content .product-thumb .image img { width: 100%; height: 100%; object-fit: contain; }
#content .product-thumb .caption { padding: 0; flex: 1; }
#content .product-thumb h4 { font: 500 15px/1.25 'Geologica', sans-serif; margin: 0 0 8px; }
#content .product-thumb h4 a { color: var(--text-primary); }
#content .product-thumb .price { font: 600 18px 'Geologica', sans-serif; color: var(--teal); margin-top: auto; }
#content .product-thumb .price-old { color: var(--text-tertiary); font-weight: 400; font-size: 14px; text-decoration: line-through; }
#content .product-thumb .price-tax { display: none; }
#content .product-thumb .button-group { display: flex; gap: 8px; }
#content .product-thumb .button-group button {
  flex: 1; height: 44px; border: none; border-radius: var(--radius-pill); background: var(--teal); color: #fff; cursor: pointer; font: 500 14px 'Geologica', sans-serif;
}
#content .product-thumb .button-group button:nth-child(n+2) { flex: 0 0 44px; background: var(--bg-secondary); color: var(--text-primary); border-radius: 50%; }
#content .product-thumb .button-group button:hover { opacity: .92; }
/* список: горизонтальная карточка */
#content .product-layout.product-list .product-thumb { flex-direction: row; align-items: stretch; gap: 20px; }
#content .product-layout.product-list .product-thumb .image { flex: 0 0 200px; width: 200px; align-self: flex-start; }
#content .product-layout.product-list .product-thumb .caption { display: flex; flex-direction: column; gap: 8px; }
#content .product-layout.product-list .product-thumb .button-group { max-width: 360px; }
#content .product-layout.product-list .product-thumb .description { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
@media (max-width: 600px) { #content .product-layout.product-list .product-thumb { flex-direction: column; } #content .product-layout.product-list .product-thumb .image { width: 100%; flex-basis: auto; } }

/* ── прочее ── */
#content .well { padding: 24px; }
#content hr { border: none; border-top: 1px solid var(--border-tertiary); margin: 20px 0; }
.rating .fa-star, .rating .fa-star-o { color: #f5a623; }
#content .text-muted, #content small { color: var(--text-tertiary); }
.required { } /* подавляем bootstrap-специфику */

/* ── адаптив ── */
@media (max-width: 767px) {
  #content table.table thead { display: none; }
  .buttons { flex-direction: column; align-items: stretch; }
  .buttons .pull-left, .buttons .pull-right { margin: 0; }
  .btn { width: 100%; }
}

/* ============================================================
   «Доставка и оплата» (information id=6) — карточки на всю ширину
   Контент лежит в .mm-prose (агрессивные !important на типографику) —
   поэтому здесь много !important, чтобы перебить базовые правила prose.
   ============================================================ */
.mm-prose:has(.dp-list) { max-width: 1040px; }
.dp-list { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 4px; }

.dp-card {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--bg-tertiary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-24, 24px); padding: 28px 30px;
  box-shadow: var(--shadow-s, 0 1px 4px rgba(60,83,135,.09));
}
.dp-card__icon {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary-bg, #eef4f6); color: var(--teal);
}
.dp-card__icon svg { width: 40px; height: 40px; }
.dp-card__body { flex: 1; min-width: 0; }

.mm-prose .dp-card__title { margin: 4px 0 12px !important; font: 600 22px/1.25 'Rubik', sans-serif !important; color: var(--text-primary) !important; }
.mm-prose .dp-card__text { margin: 0 0 10px !important; color: var(--text-secondary) !important; line-height: 1.7 !important; }
.mm-prose .dp-card__text:last-child { margin-bottom: 0 !important; }
.mm-prose .dp-card__meta { margin: 14px 0 0 !important; font-size: 14px !important; color: var(--text-tertiary) !important; line-height: 1.6 !important; }
.mm-prose .dp-card__meta a { color: var(--teal) !important; text-decoration: none; }
.mm-prose .dp-card__meta a:hover { text-decoration: underline; }

/* доставка: два под-блока (Москва / регионы) */
.dp-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; }
.mm-prose .dp-sub__title { margin: 0 0 7px !important; font: 600 13px/1.3 'Geologica', sans-serif !important; text-transform: uppercase; letter-spacing: .05em; color: var(--teal) !important; }
.mm-prose .dp-sub p { margin: 0 !important; color: var(--text-secondary) !important; line-height: 1.7 !important; }

/* скидки: таблица порогов (перебиваем маркеры списков из .mm-prose) */
.dp-tiers { list-style: none; margin: 14px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.mm-prose .dp-tiers li { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin: 0 !important; padding: 12px 18px !important; background: var(--bg-primary-bg, #f5f8fa); border-radius: 14px; color: var(--text-primary) !important; line-height: 1.4 !important; }
.mm-prose .dp-tiers li::before { display: none !important; }
.mm-prose .dp-tiers__val { color: var(--teal) !important; font: 600 17px 'Rubik', sans-serif !important; white-space: nowrap; }

/* оплата: список способов с галочками (перебиваем точку-маркер из .mm-prose) */
.dp-pay { list-style: none; margin: 0 0 4px !important; padding: 0 !important; display: flex; flex-direction: column; gap: 11px; }
.mm-prose .dp-pay li { position: relative; margin: 0 !important; padding: 0 0 0 32px !important; color: var(--text-primary) !important; line-height: 1.5 !important; }
.mm-prose .dp-pay li::before {
  content: '' !important; position: absolute; left: 0 !important; top: 1px !important;
  width: 20px !important; height: 20px !important; border-radius: 0 !important; background: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2318a2b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
}

@media (max-width: 640px) {
  .dp-card { flex-direction: column; gap: 16px; padding: 22px 20px; }
  .dp-card__icon { width: 60px; height: 60px; border-radius: 16px; }
  .dp-card__icon svg { width: 32px; height: 32px; }
  .dp-card__cols { grid-template-columns: 1fr; }
  .mm-prose .dp-card__title { font-size: 20px !important; }
}