/*
Theme Name: ДиаВитра
Theme URI: https://diavitra.ru/
Description: Тема интернет-магазина ДиаВитра. Вёрстка перенесена с прежнего сайта на OpenCart 3: стили, шрифты и структура блоков сохранены, шаблоны переписаны под WordPress и WooCommerce.
Author: Диавитра
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diavitra
Tags: e-commerce, custom-colors, custom-menu, two-columns
*/

/*
 * Оформление лежит в assets/css/main-new.css — это перенесённый без изменений
 * скомпилированный стиль прежнего сайта. Здесь только то, что относится
 * к самому WordPress и к вставкам WooCommerce, которых в старой вёрстке не было.
 */

/* Служебные классы WordPress, которых не было в исходной вёрстке */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    white-space: normal;
}

.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: #6d6d6d; }

img.wp-post-image,
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/*
 * Пропорции картинок товара.
 *
 * Шаблоны OpenCart выводили <img src alt> без размеров, поэтому в перенесённом
 * main-new.css у картинок задан только max-width: 100%. WordPress же добавляет
 * атрибуты width и height — и высота остаётся жёсткой, пока ширина ужимается
 * под колонку: картинка вытягивается по вертикали. Возвращаем высоту к auto.
 */
.cat-items .item .cols .image img,
.section-catalog-item .cols .image img,
.cart-mini .item .image img {
    height: auto;
}

/* Сообщения WooCommerce: в старой теме их аналогов не было */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    list-style: none;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    background: #fbfbfb;
    font-size: 15px;
    line-height: 1.4;
}

.woocommerce-message { border-color: #6cb644; background: #f3faef; }
.woocommerce-error   { border-color: #e5291f; background: #fdf1f0; }
.woocommerce-error li { margin: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
    float: right;
    margin-left: 15px;
}

/* Постраничная навигация */
.dv-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 25px;
}

.dv-pagination .page-numbers {
    display: block;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    font-size: 15px;
    color: #232323;
    transition: all 0.2s ease-out;
}

.dv-pagination .page-numbers:hover { border-color: #6cb644; color: #6cb644; }

.dv-pagination .page-numbers.current {
    background: #6cb644;
    border-color: #6cb644;
    color: #fff;
}

/* Пустой результат */
.dv-empty {
    padding: 30px 0;
    font-size: 16px;
    color: #53586b;
}

/* -------------------------------------------------------------------------
 * Списки WooCommerce внутри текстовых блоков
 *
 * В перенесённой вёрстке у списков есть декоративный маркер:
 *   .text ul li        { padding-left: 40px; margin-left: 30px; }
 *   .text ul li:before { content:""; position:absolute; left:0; ... }
 *
 * Он рассчитан на editorial-контент. Служебные списки WooCommerce (сводка
 * заказа, корзина, кабинет) выводятся внутри того же .text, но своими
 * стилями обнуляют padding-left — и маркер, привязанный к left: 0,
 * оказывается поверх текста. Снимаем оформление для них.
 * ------------------------------------------------------------------------- */

.text ul[class*="woocommerce"] li,
.text ul[class*="wc-block"] li,
.text ol[class*="woocommerce"] li,
.text ol[class*="wc-block"] li {
    padding-left: 0;
    margin-left: 0;
}

.text ul[class*="woocommerce"] li::before,
.text ul[class*="wc-block"] li::before,
.text ol[class*="woocommerce"] li::before,
.text ol[class*="wc-block"] li::before {
    content: none;
}

/* Сводка заказа на странице «Заказ принят»: разделители между колонками */
.text ul.order_details li {
    padding-right: 2em;
    margin-right: 2em;
}

.text ul.order_details li:last-of-type {
    padding-right: 0;
    margin-right: 0;
}

/* -------------------------------------------------------------------------
 * Модальные формы
 *
 * Окно — разметка layer_up() прежнего сайта (template-parts/forms.php),
 * его вид задаёт main-new.css: затемнение .layer, круглая бирюзовая кнопка
 * .close справа от окна, на телефоне — над ним. Прежний скрипт создавал окно
 * в момент открытия и включал его стилями на лету; здесь окно в разметке
 * заранее, поэтому добавлено только это.
 * ------------------------------------------------------------------------- */

.layer[hidden] { display: none; }

.layer .layer-block { visibility: visible; }

/* Карточка формы в main-new.css скрыта: скрипт показывал её копию в окне */
.layer .layer-block > .form { display: block; }

/* Окно проявляется, как после fadeIn() в layer_up() */
.layer:not([hidden]) .layer-block { animation: dv-fade-in 0.4s; }

@keyframes dv-fade-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .layer:not([hidden]) .layer-block { animation: none; }
}

/* Крестик — кнопка, а не ссылка, как было: снимаем собственный вид кнопки */
.layer .layer-block > .close {
    padding: 0;
    font: inherit;
    appearance: none;
}

/* Общее правило .close гасит outline — возвращаем рамку фокуса для клавиатуры */
.layer .layer-block > .close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body.body-blur { overflow: hidden; }

/*
 * Поле телефона.
 *
 * В main-new.css поля оформлены выборочно по типу — input[type="text"]
 * и input[type="email"]. Телефон у нас type="tel": так на мобильных
 * открывается цифровая клавиатура. Повторяем для него то же оформление,
 * чтобы не трогать перенесённый файл стилей.
 */
.form-order input[type="tel"],
.form-message input[type="tel"] {
    display: block;
    width: 100%;
    background: #fbfbfb;
    border: 1px solid #e2e2e2;
    height: 50px;
    padding: 0 29px;
    font-family: inherit;
    font-weight: 300;
    font-size: 16px;
}

/* Ловушка для ботов: поле не должно видеть ни человек, ни скринридер */
.dv-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.dv-form-result {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

/* Пустой блок ответа не должен раздувать окно: оно выше, чем было, на отступ */
.dv-form-result:empty { margin-top: 0; }

.dv-form-result.is-ok    { color: #2fa244; }
.dv-form-result.is-error { color: #e5291f; }

/* -------------------------------------------------------------------------
 * Слайдер на главной
 *
 * Оформление — исходное .section-slider из main-new.css. Прежде слайды
 * листал slick, который и прятал неактивные. Его нет, поэтому показываем
 * только слайд с .is-active — иначе все три встали бы друг под другом.
 * ------------------------------------------------------------------------- */

.section-slider .item { display: none; }
.section-slider .item.is-active { display: block; }

/* Ссылкой слайд делаем, только если у него есть адрес — наследуем цвет */
.section-slider a.item { color: inherit; }

/*
 * Стрелки — кнопки. В исходной вёрстке это были ссылки, оформление
 * рассчитано на <a>: снимаем собственный вид кнопки.
 */
.section-slider .prev,
.section-slider .next {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    appearance: none;
    z-index: 2;
}

/* -------------------------------------------------------------------------
 * Слайдер «Бренды» на главной
 *
 * Разметка и оформление — product/manufacturers_slider.twig и main-new.css.
 * Листал ленту slick из прежней сборки: по 4 бренда, уже 992px — по 3,
 * уже 768px — по 2 и без стрелок, уже 500px — по одному. Здесь лента —
 * прокручиваемый ряд с привязкой к плитке: стрелки листают его на ширину
 * видимой части (initBrandsSlider() в assets/js/theme.js), пальцем — свайпом.
 * ------------------------------------------------------------------------- */

.section-home-brands .items {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.section-home-brands .items::-webkit-scrollbar { display: none; }

.section-home-brands .items .item {
    flex: 0 0 25%;
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .section-home-brands .items .item { flex-basis: 33.3333%; }
}

@media (max-width: 767px) {
    .section-home-brands .items .item { flex-basis: 50%; }

    .section-home-brands .brands .prev,
    .section-home-brands .brands .next { display: none; }
}

@media (max-width: 499px) {
    .section-home-brands .items .item { flex-basis: 100%; }
}

/* Логотипы разной формы вписываются в ячейку с сохранением пропорций —
   на прежнем сайте картинки выводились без атрибутов размера */
.section-home-brands .items .item .image img {
    width: auto;
    height: auto;
}

/* Стрелки — кнопки, а не ссылки: снимаем собственный вид кнопки */
.section-home-brands .brands .prev,
.section-home-brands .brands .next {
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
}

/* -------------------------------------------------------------------------
 * «Рекомендуемые товары» на странице товара
 *
 * Разметка и оформление — product.twig и main-new.css. Slick показывал по две
 * карточки, уже 992px — по одной, уже 600px — без стрелок; высоту ряда брал
 * по видимым карточкам, не вытягивая их. Лента — как у «Брендов»:
 * прокрутка с привязкой к карточке, листает carousel() в theme.js.
 * Ширина карточки — как у slick: ряд шире на отступы (margin: 0 -15px),
 * у карточки по 15px с каждой стороны.
 * ------------------------------------------------------------------------- */

.section-cat-items-rec .cat-items {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    scrollbar-width: none;
}

.section-cat-items-rec .cat-items::-webkit-scrollbar { display: none; }

.section-cat-items-rec .cat-items .item {
    flex: 0 0 calc(50% - 30px);
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .section-cat-items-rec .cat-items .item { flex-basis: calc(100% - 30px); }
}

@media (max-width: 599px) {
    .section-cat-items-rec .cat-items-rec .prev,
    .section-cat-items-rec .cat-items-rec .next { display: none; }
}

.section-cat-items-rec .cat-items-rec .prev,
.section-cat-items-rec .cat-items-rec .next {
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
}

/* -------------------------------------------------------------------------
 * Страницы корзины, оформления и кабинета
 *
 * Их рисует WooCommerce своими шаблонами — задаём минимум, чтобы они
 * не выбивались из вёрстки.
 * ------------------------------------------------------------------------- */

.dv-shop-page table { width: 100%; border-collapse: collapse; }
.dv-shop-page table th,
.dv-shop-page table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: middle;
}

.dv-shop-page .button,
.dv-shop-page button[type="submit"] {
    display: inline-block;
    padding: 12px 26px;
    border: 0;
    border-radius: 8px;
    background: #6cb644;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease-out;
}

.dv-shop-page .button:hover,
.dv-shop-page button[type="submit"]:hover { background: #2fa244; }

.dv-shop-page input[type="text"],
.dv-shop-page input[type="email"],
.dv-shop-page input[type="tel"],
.dv-shop-page input[type="password"],
.dv-shop-page textarea,
.dv-shop-page select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
}

.dv-shop-page .form-row { margin-bottom: 14px; }

/*
 * Отступ над полем «Страна/регион» в адресе доставки.
 *
 * Форма адреса — это flex с gap: 0 12px, то есть вертикального зазора у сетки
 * нет вовсе: расстояние между строками держится на margin-top каждого поля
 * (12px). У поля страны этот отступ обнуляется собственным правилом
 * WooCommerce для шага оформления, и оно прилипает к строке с именем.
 *
 * Возвращаем общий ритм. Через :not(:first-child) — если в другой локали
 * страна окажется первым полем, лишний отступ сверху не появится.
 */
.wc-block-components-address-form .wc-block-components-country-input:not(:first-child),
.wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form .wc-block-components-country-input:not(:first-child) {
    margin-top: 12px;
}

/* -------------------------------------------------------------------------
 * Мобильное меню
 *
 * В main-new.css .menu-layer оформлена, но показа у неё нет: прежний скрипт
 * создавал панель в момент открытия и удалял при закрытии. Отдаём её
 * разметкой сразу и управляем видимостью здесь.
 * ------------------------------------------------------------------------- */

.menu-layer[hidden],
.menu-layer .nav[hidden] { display: none; }

/* Телефоны и «Заказать звонок» — только на первом уровне, как в make_nav() */
.menu-layer.mobile-menu-has-back .phones { display: none; }

/*
 * «Назад» и «Закрыть» — кнопки. В перенесённой вёрстке они были ссылками,
 * поэтому оформление рассчитано на <a>: снимаем собственный вид кнопки.
 * Только цвет фона, а не весь фон: крестик на телефоне — картинка
 * close_menu.svg фоном (main-new.css), её трогать нельзя. Стрелку «назад»
 * рисует глиф .icon-prev из шрифта иконок, как на прежнем сайте.
 */
.menu-layer .top .prev,
.menu-layer .top .close {
    padding: 0;
    border: 0;
    background-color: transparent;
    font-family: inherit;
    appearance: none;
}

/* -------------------------------------------------------------------------
 * Юридические страницы (шаблон page-legal.php)
 *
 * Фон и отступ под классом legal-page уже есть в main-new.css. Выделенный
 * текст вне ссылок custom.js прежнего сайта красил инлайном в тёмный —
 * иначе заголовки разделов, набранные <strong>, выходили зелёными
 * по общему правилу .text strong.
 * ------------------------------------------------------------------------- */

body.legal-page strong:not(a strong),
body.legal-page b:not(a b) {
    color: #232323;
    font-weight: 600;
}