/*
 * Webasyst “Default” theme family
 * (additional CSS for mobile multi-touch devices)
 *
 * @link http://www.webasyst.com/
 * @author Webasyst LLC
 * @copyright 2012 Webasyst LLC
 * @package Webasyst
 */

* { -webkit-text-size-adjust: 100%; }

.mobile-only { display: block; }
.non-mobile-only { display: none; }

.container { padding: 1px 15px 0; min-width: 0; }

.sidebar { margin-bottom: 20px; }
.sidebar.left, .sidebar.left300px { width: 100%; float: none; }
.sidebar.right, .sidebar.right300px { width: 100%; float: none; }
.content.left, .content.left300px { margin-left: 0; }
.content.right, .content.right300px { margin-right: 0; }
.app-header { min-height: 0; padding-top: 0; }
.top-padded { padding-top: 0; }

#header { margin-bottom: 20px; }
#header ul#wa-apps li.selected { background: none; }
#footer { padding-bottom: 30px; }
#footer .container { margin: 0 15px; }
#footer #copyright { padding-left: 0; }
#footer #sub-links { margin-left: 0; margin-top: 30px; }
#footer #sub-links ul li { float: none; margin-bottom: 5px; }

/* Shop-Script specific
----------------------- */

.nowrap { white-space: normal; }

#breadcrumbs { margin-bottom: 15px; }
#breadcrumbs a { color: #aaa; }

div.cart { float: none !important; width: auto !important; }
div#cart-summary.cart.fixed { right: 0; left: 0; }

table.cart td { padding: 7px 2px 10px; display: inline-block; border: 0; }
table.cart td img { display: none; }
table.cart td input[type="text"] { min-width: 0; }
table.cart td br { display: none; }
table.cart td a.bold { margin-top: 20px; font-size: 1.3em; }
table.cart td .services { margin-bottom: 0; }

.search { margin-bottom: 20px; }
.search.float-right { float: none !important; }
.search input { width: auto; }

.sidebar.hide-for-mobile { display: none; }

.image img { height: auto !important; }

.review-form-fields label { width: auto; float: none; }
.review-form-fields input { width: 80%; }
.review-form textarea { width: 100%; }
.review-form .review-submit { padding-left: 0; }
.review-form .wa-captcha img { margin-bottom: 10px; }

.wa-form { overflow: hidden; }
.wa-form .wa-field .wa-name { float: none; padding-bottom: 0; }
.wa-form .wa-field .wa-value { margin-left: 0; }
.wa-form .wa-field .wa-value p span { display: block; }
.wa-auth-adapters p { width: 100%; }

#checkout { margin: 20px 0; padding-bottom: 30px; }
#checkout ul.checkout-options li { width: 100%; }
#checkout ul.checkout-options li img { display: none; }
#checkout ul.checkout-options li .rate { min-width: 0; width: auto; max-width: 150px; padding-top: 5px; }
#checkout ul.checkout-options li .rate.error { padding-top: 10px; }
#checkout ul.checkout-options li .rate .hint { display: none; }
#checkout ul.checkout-options li .wa-form.wa-address p { font-size: 1em; }
#checkout table.table th,
#checkout table.table td { font-size: 0.75em; }
#checkout table.table td .gray { display: none; }
#checkout table.table td.nowrap { white-space: normal; }
#checkout table.table td.nowrap.bold { white-space: nowrap; }
#checkout blockquote ul.menu-v li { font-size: 0.7em; padding: 10px 0; line-height: 1.3em; }
#checkout li .wa-form { margin-left: -25px; }
#checkout .checkout-step input[type="submit"] { margin: 0 auto; display: block; font-size: 1.2em; font-weight: bold; }

/*=====================================================================
   АДАПТАЦИЯ ПОД СОВРЕМЕННЫЕ МОБИЛЬНЫЕ УСТРОЙСТВА
   -----------------------------------------------------------------
   Всё выше — исходный mobile.css общей темы Webasyst "Default": он
   не содержит ни одного селектора для вёрстки самой Behringer
   (#main, #logo-block, .header-menu, #sidebar-left, #product и т.п.),
   поэтому на смартфоне сайт показывал обычную desktop-раскладку
   шириной 1200px, сжатую в экран — с горизонтальной прокруткой и
   обрезанными блоками. Правила ниже возвращают реальную адаптивность.
=====================================================================*/

/* ---------- общая раскладка: убираем фиксированную ширину 1200px ---------- */
#main, #fast-links, #breadcrumbs, #footer, #product-category, #slogan {
    width: auto;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
}
#main-wrapper { padding: 15px 0; }
#logo-block-wrapper { padding: 15px 0; }

/* ---------- шапка: логотип, поиск, меню категорий, корзина ---------- */
#logo-block {
    width: auto;
    height: auto;
    padding: 0 15px;
    box-sizing: border-box;
}
/* в desktop-вёрстке логотип/поиск/меню/корзина расставлены через
   position:absolute с фиксированными top/left — на мобильном это
   рушится первым делом, переводим их в обычный поток */
#logo-block > div, .header-menu { position: static; }
#logo { text-align: center; margin-bottom: 10px; }
#logo a { margin: 0 auto; }
#header-search { width: 100%; margin-bottom: 10px; }
#header-search #search,
#header-search #search:focus {
    width: 100%;
    box-sizing: border-box;
}
/* меню категорий (МИКШЕРЫ АКУСТИКА ...) — горизонтальная прокрутка
   вместо обрезания по правому краю экрана */
.header-menu {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 6px;
}
#cart { float: none; text-align: center; margin: 10px 0 0; }

/* ---------- верхняя строка (Доставка/Оплата/... + телефон + кабинет) ---------- */
#fast-links { display: block; text-align: left; }
#fast-links #page-list { flex-wrap: wrap; }
#fast-links #page-list li { margin: 2px 14px 2px 0; }
#fast-links #phone,
#fast-links #cabinet {
    display: block;
    text-align: left;
    margin-top: 6px;
}

/* ---------- слайдеры (баннеры нарисованы под ширину 1200/950px) ---------- */
#home-slider, #home-slider .slide { height: 200px; }
#category-slider, #category-slider .slide { height: 110px; }
#home-slider .slide-01, #home-slider .slide-02, #home-slider .slide-03,
#category-slider .slide-11, #category-slider .slide-12, #category-slider .slide-13 {
    background-size: cover;
}

/* ---------- боковые колонки и контент каталога/поиска ---------- */
#sidebar-left, #sidebar-right {
    float: none;
    width: 100%;
    box-sizing: border-box;
}
.content, #category, #search {
    float: none;
    width: auto;
    margin-left: 0;
}
/* #category #products у темы зашит в 700px (под десктопные 950px
   колонки с фильтром справа) — на мобильном фильтр уже не плавает
   справа, поэтому и список товаров должен быть во всю ширину */
#category #products, #products { width: auto; }

/* ---------- карточки товаров: аккуратная сетка вместо обрезанной ---------- */
#category .product-list,
#search .product-list,
#other .product-list,
.product-set .product-list {
    text-align: center;
}
#category .product-list li.product,
#search .product-list li.product,
#other .product-list li.product,
.product-set .product-list li.product {
    float: none;
    margin: 0 auto 14px;
}

/* ---------- страница товара: фото и блок покупки друг под другом ---------- */
#product #main-image-wrapper,
#product #buy-block {
    float: none;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}
#product #buy-block { margin-top: 20px; }
#product #main-image-wrapper { display: block; text-align: center; }
#product #product-core-image { display: block; }
#product #product-core-image .cur-img { max-width: 100%; height: auto; }
/* увеличенное фото по hover на телефоне не открыть — прибираем, чтобы
   скрытый 580px-блок не мог случайно повлиять на ширину страницы */
#easy_zoom { display: none !important; }

/* вкладки «Описание / Характеристики / Видео / Отзывы» и карусель
   миниатюр галереи — фиксированные desktop-отступы и ширины */
#tabs .ui-tabs-panel { padding: 15px; box-sizing: border-box; }
.jcarousel-wrapper, .jcarousel { width: 100% !important; box-sizing: border-box; }

/* таблица характеристик — фиксированная раскладка колонок, иначе
   длинная ссылка (сайт производителя) растягивает таблицу вширь */
#product #features table { table-layout: fixed; width: 100%; }
#product #features table td { word-break: break-word; }

/* блок "Выгодное предложение" (кабели/аксессуары, плагин sku-sets):
   на десктопе 4 карточки по 23% в ряд, на телефоне слишком тесно для
   кнопки "Добавить" — переводим на 2 карточки в ряд */
.sku-sets .set { width: 48%; padding: 10px; }
.sku-sets .set .set-item-name a { font-size: 15px; }
.sku-sets .set button.button { width: 100%; padding: 8px 10px; font-size: 13px; box-sizing: border-box; }