/* =========================================================
   PLIS ME — штатные страницы OpenCart в стиле бренда
   (оформление заказа, кошик, кабінет, реєстрація, блог, інформаційні сторінки, контакти).
   Подключается только на них, после Bootstrap 3 и стилей темы:
   1) возвращает шапке/подвалу темы их вид (Bootstrap переопределяет .nav, a, body…);
   2) перекрашивает компоненты Bootstrap токенами из tokens.css.
   ========================================================= */

/* ---------- 1. Защита шапки, подвала и оверлеев темы от Bootstrap ---------- */
body.oc-page { font-family: var(--font-base); font-size: 16px; line-height: 1.4; color: var(--text-primary); background: var(--bg-page); }
.oc-page .header .nav, .oc-page .footer .footer__list, .oc-page .mobile-nav { margin: 0; padding: 0; list-style: none; }
.oc-page .header .nav { display: flex; }
.oc-page .header .nav > li { display: block; position: static; }
.oc-page .header .nav > li > a { padding: 0; display: inline; }
.oc-page .header .nav > li > a:hover, .oc-page .header .nav > li > a:focus { background: none; }
.oc-page .header a, .oc-page .footer a, .oc-page dialog a, .oc-page .quiz a { text-decoration: none; }
.oc-page .header a:hover, .oc-page .footer a:hover { text-decoration: none; }
.oc-page .footer a, .oc-page .header a { color: inherit; }
.oc-page .header .nav__link--sale { color: var(--text-sale); }
.oc-page .footer h2, .oc-page dialog h2, .oc-page dialog h3, .oc-page .quiz h2, .oc-page .quiz h3 { font-family: var(--font-base); margin: 0; }
.oc-page dialog label, .oc-page .quiz label { font-weight: inherit; margin: 0; max-width: none; }
.oc-page .badge { border-radius: 0; font-weight: inherit; line-height: inherit; }
.oc-page .product-card .btn, .oc-page dialog .btn, .oc-page .quiz .btn, .oc-page .footer .btn { border: 0; border-radius: 0; line-height: inherit; white-space: normal; }
.oc-page .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 2. Контент штатных страниц ---------- */
.oc-shell { padding: 32px 32px 80px; min-height: 50vh; }
.oc-shell .container { width: auto; max-width: 1280px; padding: 0; }
.oc-shell .row { margin-left: -12px; margin-right: -12px; }
.oc-shell [class*="col-"] { padding-left: 12px; padding-right: 12px; }
.oc-shell a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.oc-shell a:hover, .oc-shell a:focus { color: var(--text-secondary); }
.oc-shell h1, .oc-shell h2, .oc-shell h3, .oc-shell h4, .oc-shell h5 { font-family: var(--font-base); font-weight: var(--fw-medium); color: var(--text-primary); letter-spacing: -.01em; }
.oc-shell h1 { font-size: 40px; line-height: 1.15; margin: 8px 0 28px; }
.oc-shell h2 { font-size: 28px; margin: 32px 0 16px; }
.oc-shell h3 { font-size: 22px; }
.oc-shell h4, .oc-shell h5 { font-size: 18px; }
.oc-shell p, .oc-shell li, .oc-shell td, .oc-shell label, .oc-shell .help-block { font-size: 16px; }
.oc-shell label { font-weight: var(--fw-regular); }
.oc-shell legend { font-family: var(--font-base); font-size: 22px; font-weight: var(--fw-medium); border-bottom: 1px solid var(--border-default); padding-bottom: 8px; }
.oc-shell hr { border-color: var(--border-default); }

/* хлебные крошки */
.oc-shell .breadcrumb { background: none; padding: 0; margin: 0 0 8px; border-radius: 0; font-size: 14px; }
.oc-shell .breadcrumb > li + li::before { content: "/"; color: var(--text-muted); padding: 0 8px; }
.oc-shell .breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.oc-shell .breadcrumb .fa-home::before { content: "Головна"; font-family: var(--font-base); }

/* кнопки */
.oc-shell .btn { font-family: var(--font-base); font-size: 15px; font-weight: var(--fw-medium); border-radius: 0; border: 1px solid transparent; padding: 12px 24px; line-height: 1.2; text-decoration: none; text-transform: none; box-shadow: none; transition: background-color .2s, border-color .2s, color .2s; }
.oc-shell .btn-primary, .oc-shell .btn-success { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.oc-shell .btn-primary:hover, .oc-shell .btn-primary:focus, .oc-shell .btn-primary:active,
.oc-shell .btn-success:hover, .oc-shell .btn-success:focus, .oc-shell .btn-success:active { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); color: var(--btn-primary-text); }
.oc-shell .btn-default, .oc-shell .btn-info { background: var(--bg-surface); border-color: var(--btn-outline-border); color: var(--text-primary); }
.oc-shell .btn-default:hover, .oc-shell .btn-info:hover, .oc-shell .btn-default:focus { background: var(--bg-surface); border-color: var(--btn-outline-border-hover); color: var(--text-primary); }
.oc-shell .btn-danger { background: var(--bg-surface); border-color: var(--btn-outline-border); color: var(--status-out-of-stock); }
.oc-shell .btn-danger:hover { border-color: var(--status-out-of-stock); background: var(--bg-surface); color: var(--status-out-of-stock); }
.oc-shell .btn-link { color: var(--text-primary); }
.oc-shell .btn[disabled], .oc-shell .btn.disabled { background: var(--btn-disabled-bg); border-color: var(--btn-disabled-bg); color: var(--btn-disabled-text); opacity: 1; }
.oc-shell .btn-sm, .oc-shell .btn-xs { padding: 6px 12px; font-size: 14px; }
.oc-shell .input-group-btn .btn { padding: 11px 16px; }

/* поля */
.oc-shell .form-control { height: auto; min-height: 46px; padding: 11px 14px; font-family: var(--font-base); font-size: 16px; color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 0; box-shadow: none; }
.oc-shell textarea.form-control { min-height: 120px; }
.oc-shell .form-control:focus { border-color: var(--border-strong); box-shadow: none; }
.oc-shell .has-error .form-control { border-color: var(--status-out-of-stock); }
.oc-shell .text-danger, .oc-shell .has-error .help-block, .oc-shell .has-error .control-label { color: var(--status-out-of-stock); }
.oc-shell .control-label { font-weight: var(--fw-regular); color: var(--text-secondary); }
.oc-shell .required .control-label::before, .oc-shell .required > label::before { color: var(--text-sale); }
.oc-shell .radio label, .oc-shell .checkbox label { font-weight: var(--fw-regular); }
.oc-shell input[type="radio"], .oc-shell input[type="checkbox"] { accent-color: var(--color-ink); }
.oc-shell .input-group-addon { border-radius: 0; background: var(--bg-subtle); border-color: var(--border-default); }

/* панели (аккордеон оформления заказа, блоки кабинета) */
.oc-shell .panel { border-radius: 0; border: 1px solid var(--border-default); box-shadow: none; margin-bottom: 12px; }
.oc-shell .panel-default > .panel-heading { background: var(--bg-subtle); border-color: var(--border-default); border-radius: 0; padding: 16px 20px; }
.oc-shell .panel-title { font-family: var(--font-base); font-size: 18px; font-weight: var(--fw-medium); }
.oc-shell .panel-title a { text-decoration: none; }
.oc-shell .panel-body { padding: 24px 20px; }
.oc-shell .well { background: var(--bg-subtle); border: 0; border-radius: 0; box-shadow: none; padding: 24px; }

/* таблицы (кошик, замовлення, порівняння) */
.oc-shell .table { font-size: 15px; }
.oc-shell .table-bordered, .oc-shell .table-bordered > thead > tr > td, .oc-shell .table-bordered > tbody > tr > td, .oc-shell .table-bordered > tfoot > tr > td,
.oc-shell .table-bordered > thead > tr > th, .oc-shell .table-bordered > tbody > tr > th { border-color: var(--border-default); }
.oc-shell .table > thead > tr > td, .oc-shell .table > thead > tr > th { background: var(--bg-subtle); color: var(--text-secondary); font-weight: var(--fw-regular); }
.oc-shell .table > tbody > tr > td { vertical-align: middle; }
.oc-shell .img-thumbnail { border-radius: 0; border-color: var(--border-default); padding: 0; }

/* сообщения */
.oc-shell .alert { border-radius: 0; border: 0; padding: 14px 18px; font-size: 15px; }
.oc-shell .alert-success { background: var(--bg-subscription); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--status-in-stock); }
.oc-shell .alert-danger { background: var(--bg-subscription); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--status-out-of-stock); }
.oc-shell .alert-info, .oc-shell .alert-warning { background: var(--bg-subtle); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--status-low-stock); }
.oc-shell .alert .close { opacity: .5; }

/* списки кабинета, пагинация, вкладки */
.oc-shell .list-group-item { border-radius: 0 !important; border-color: var(--border-default); text-decoration: none; }
.oc-shell .list-group-item.active, .oc-shell .list-group-item.active:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--text-inverse); }
.oc-shell .pagination > li > a, .oc-shell .pagination > li > span { border-radius: 0 !important; color: var(--text-primary); border-color: var(--border-default); text-decoration: none; }
.oc-shell .pagination > .active > a, .oc-shell .pagination > .active > span { background: var(--color-ink); border-color: var(--color-ink); color: var(--text-inverse); }
.oc-shell .nav-tabs { border-color: var(--border-default); }
.oc-shell .nav-tabs > li > a { border-radius: 0; color: var(--text-secondary); text-decoration: none; }
.oc-shell .nav-tabs > li.active > a { color: var(--text-primary); border-color: var(--border-default) var(--border-default) transparent; }

/* колонки модулей OpenCart (кабинет) */
.oc-shell #column-left .list-group, .oc-shell #column-right .list-group { margin-bottom: 24px; }

/* оформление заказа: шаги-аккордеон */
.oc-shell #accordion .panel-heading .panel-title a, .oc-shell #accordion .panel-title { display: block; }
.oc-shell #accordion .panel-heading .fa-caret-down { margin-left: 6px; }
.oc-shell .buttons { margin-top: 16px; }
.oc-shell .buttons .pull-right .btn, .oc-shell .buttons .pull-left .btn { min-width: 180px; }

/* блог ocStore и информационные страницы: удобная длина строки */
.oc-shell #content > p, .oc-shell #content > ul, .oc-shell #content > ol, .oc-shell .article-description, .oc-shell #content .description { max-width: 820px; }
.oc-shell #content img { max-width: 100%; height: auto; }

/* вторичные элементы Bootstrap, которые в теме не нужны */
.oc-shell .fa-home { font-family: var(--font-base); }

@media (max-width: 767px) {
  .oc-shell { padding: 20px 16px 56px; }
  .oc-shell h1 { font-size: 30px; }
  .oc-shell .table-responsive { border: 0; }
  .oc-shell .buttons .pull-right, .oc-shell .buttons .pull-left { float: none !important; }
  .oc-shell .buttons .btn { width: 100%; margin-bottom: 8px; }
}