/* ---------------------------------------------------------------------------
   Responsive layer for the desktop theme.
   Loaded LAST, on top of Bootstrap 2.3.1 (non-responsive build) + the theme CSS.
   Desktop layout is untouched above 1024px; below that the fixed 950-1200px
   container is unlocked and the Bootstrap fluid grid is made to stack.
   --------------------------------------------------------------------------- */

img { max-width: 100%; height: auto; }
/* the logo keeps its fixed size on desktop (defined in header.css); this
   rule only needs to relax it on narrow/mobile widths, see below */

@media (max-width: 980px) {
    /* nothing may push the page wider than the viewport */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* --- forms: unstack Bootstrap 2 horizontal forms, fields fill width --- */
    .form-horizontal .control-label {
        float: none;
        width: auto;
        text-align: left;
        padding-top: 0;
        margin-bottom: 4px;
    }
    .form-horizontal .controls { margin-left: 0; }
    input, select, textarea,
    .input-xxlarge, .input-xlarge, .input-large, .input-medium,
    .uneditable-input {
        max-width: 100%;
        box-sizing: border-box;
    }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="search"], input[type="url"],
    textarea, select { width: 100%; }
    .input-mini, .input-small,
    input[type="checkbox"], input[type="radio"] { width: auto; }
    .input-append, .input-prepend { display: flex; }
    .input-append input, .input-prepend input { flex: 1 1 auto; min-width: 0; }

    /* --- CMS text blobs must not force the page wide --- */
    #text, #text *,
    .page-content, .page-content * { max-width: 100%; overflow-wrap: break-word; }

    /* header contact block: shrink the CKEditor-inlined 16px text so it fits */
    #contact_static { font-size: 13px; line-height: 1.45; }
    #contact_static span,
    #contact_static strong { font-size: inherit !important; }
    #contact_static sup { font-size: 0.7em !important; }

    /* --- content tables ---
       Description / spec tables (incl. CMS-authored .meta tables) must fit the
       viewport and wrap their cells. The cart and compare tables keep their
       columns and scroll inside a box instead. */
    #content table,
    table.meta {
        table-layout: fixed;
        width: 100% !important;
        max-width: 100%;
    }
    #content table td, #content table th,
    table.meta td, table.meta th { overflow-wrap: break-word; }
    #summary { max-width: 100%; overflow-x: auto; }
    #content .table-compare { table-layout: auto; width: auto !important; }
    #shopping-cart,
    #content .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* --- cart: stack each row into a card (image left, then title, price,
       quantity, and the line total UNDER the quantity) --- */
    #shopping-cart-widget,
    #shopping-cart-widget tbody { display: block; width: 100%; }
    #shopping-cart-widget thead { display: none; }
    #shopping-cart-widget tr { display: block; }
    #shopping-cart-widget td {
        display: block;
        border: 0;
        padding: 3px 0;
        text-align: left;
        width: auto !important;
        white-space: normal;
    }
    #shopping-cart-widget tr.cart-product {
        position: relative;
        min-height: 84px;
        margin-bottom: 12px;
        padding: 12px 12px 12px 96px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background: #fff;
    }
    #shopping-cart-widget tr.cart-product td:first-child {   /* thumbnail */
        position: absolute;
        left: 12px;
        top: 12px;
        width: 72px !important;
        padding: 0;
    }
    #shopping-cart-widget tr.cart-product td:first-child img { max-width: 72px; height: auto; }
    #shopping-cart-widget tr.cart-product td:nth-child(3)::before { content: "Ціна: "; color: #888; }
    #shopping-cart-widget tr.cart-product td.amount { margin-top: 6px; }
    #shopping-cart-widget tr.cart-product td.amount .input-append,
    #shopping-cart-widget tr.cart-product td.amount .input-prepend { display: inline-flex; width: auto; }
    #shopping-cart-widget tr.cart-product td.amount input {
        flex: 0 0 3.2em;
        width: 3.2em;
        min-width: 0;
        text-align: center;
        padding-left: 4px;
        padding-right: 4px;
    }
    #shopping-cart-widget tr.cart-product td:nth-child(5) {   /* line total, under the quantity */
        margin-top: 6px;
        font-weight: bold;
    }
    #shopping-cart-widget tr.cart-product td:nth-child(5)::before {
        content: "Сума: ";
        font-weight: normal;
        color: #888;
    }
    /* totals / checkout row */
    #shopping-cart-widget tr:last-child {
        border-top: 2px solid #00AADE;
        padding-top: 12px;
        background: none;
    }
    #shopping-cart-widget tr:last-child td:empty { display: none; }
    #shopping-cart-widget tr:last-child td.actions { text-align: center; }
    #shopping-cart-widget tr:last-child td.actions .btn { margin: 4px; }
    #shopping-cart-widget tr:last-child td.price {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #000;
    }
    #shopping-cart-widget tr:last-child td.price::before { content: "Разом: "; font-weight: normal; color: #888; }
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Catalog sidebar toggle button - hidden on desktop, shown when the sidebar
   collapses (see the media query below). */
.catalog-toggle {
    display: none;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-weight: bold;
    text-align: left;
}

/* ---- unlock the fixed-width container ---------------------------------- */
@media (max-width: 1200px) {
    .min-max-width {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
}

/* ---- tablet / phone: stack the grid ---------------------------------- */
@media (max-width: 980px) {
    /* Bootstrap 2 (non-responsive) gives .row > .spanN a FIXED width (.span12 =
       950px) and .row a negative margin - both cause horizontal overflow.
       Stack every grid column, fluid or fixed. */
    .row > [class*="span"],
    .row-fluid > [class*="span"] {
        display: block;
        float: none;
        width: auto !important;
        margin-left: 0 !important;
        min-height: 0;
        box-sizing: border-box;
    }
    .row > [class*="offset"],
    .row-fluid > [class*="offset"] { margin-left: 0 !important; }
    .row { margin-left: 0; }
    .container { width: auto !important; max-width: 100%; }

    /* sticky-footer maths break once the footer height is auto */
    #wrapper { margin-bottom: 0; min-height: 0; }
    #content { padding-bottom: 20px; }

    /* --- header --- */
    #head-navigation { height: auto; }
    #head-navigation .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 4px;
    }
    #head-navigation .nav-tabs > li,
    #head-navigation li.dotted,
    #head-navigation li.bordered {
        float: none;
        margin: 0;
        list-style: none;
        border: 0;
    }
    #head-navigation li.pull-right { float: none !important; }

    #search-block .row-fluid > div { text-align: center; }
    #logo { text-align: center; }
    #logo img { height: 60px; }
    #search-block form { padding-top: 12px; }
    #search {
        width: 90%;
        max-width: 420px;
        box-sizing: border-box;
    }
    #iconed-menu > ul { text-align: center; }
    #iconed-menu > ul > li { width: auto; margin: 0 10px; }
    #iconed-menu a { margin-top: 8px; }
    #contact_static { text-align: center; line-height: 1.5; padding-top: 10px; }
    #cart-info { text-align: center; margin-top: 12px; }
    #cart-info .cart-widget .icon { float: none; margin: 0 auto; }

    /* --- catalog sidebar becomes a toggle ---
       NB: keep the hide + show selectors at the SAME specificity. An earlier
       version hid via `#left-side-bar #left-menu` (2 IDs) which the 1-ID
       `.open` show rule could not override on category pages. */
    .catalog-toggle { display: block; }
    ul#left-menu.sm { display: none; }
    ul#left-menu.sm.open { display: block; }

    /* --- filter page: catalog + filters above the product list --- */
    .filter-layout { display: flex; flex-direction: column; }
    .filter-layout #left-side-bar  { order: 1; }
    .filter-layout #right-side-bar { order: 2; }
    .filter-layout #grid          { order: 3; }
    .filter-layout > .row-fluid   { order: 4; }   /* pagination */
    #right-side-bar .noUiSlider {
        width: auto !important;
        max-width: 280px;
        margin: 14px 14px 30px !important;   /* the 18px handle overhangs both ends by 9px */
    }
    #right-side-bar .noUiSlider div { z-index: 2; }
    #right-side-bar .prices { position: relative; }
    #right-side-bar .manufacturers,
    #right-side-bar .options { max-height: 220px; overflow-y: auto; }

    /* --- product grid: one full-width column on mobile (both list and the
       JS-driven "tile" view, which sets an inline width:40%) --- */
    #grid { text-align: left; }
    #grid .product {
        box-sizing: border-box;
        display: block !important;
        width: auto !important;
        max-width: 100%;
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- homepage "Новинки" row (inline-block cells with inline width) --- */
    #novelty { display: flex; flex-wrap: wrap; justify-content: center; }
    #novelty > h3 { flex-basis: 100%; width: 100%; }
    #novelty > div {
        width: 48% !important;
        box-sizing: border-box;
        margin: 0 0 10px;
    }
    #novelty .slide {
        margin-right: 0;
        height: auto !important;
        overflow: visible;
    }
    #novelty .slide .slider-content-wrapper { height: auto; }
    #novelty .slide .annotate { max-width: 100%; height: auto; max-height: 60px; }

    /* --- promo / banner slider: only cap the fixed 300px height, let
       royalSlider manage everything else (don't break swipe / touch). --- */
    #informer { overflow: hidden; }
    #informer,
    #informer .slider-bg,
    #informer #informer-slider,
    #informer .royalSlider,
    #informer .rsOverflow { height: 220px !important; }
    #informer .slider-bg {
        background-size: cover !important;
        background-position: center !important;
    }

    /* --- CMS contact block: drop stray bullets, un-right-align on mobile --- */
    #contact_static ul { list-style: none !important; margin: 0; padding: 0; }
    #contact_static li { list-style: none !important; text-align: center !important; }

    /* --- list view cards: drop the fixed row/column heights that overlap
       once the image and info columns are stacked --- */
    .product > div,
    .product > div > div { height: auto !important; }
    .product .img { min-height: 0; }
    .product .info { margin-top: 10px; }
    .product .info .product-title,
    .product .info .annotate,
    .product .info .product-info-wrapper {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .product .rating { float: none; }
    .product .cart { text-align: left; margin-top: 10px; }
    /* kill the desktop hover title-expansion (sticky :hover on touch overlaps text) */
    .product:hover .info .product-title { position: static; overflow-y: visible; }
    .product:hover .info .product-title .title {
        position: static !important;
        background: none !important;
        padding-bottom: 0 !important;
    }

    /* --- product detail --- */
    #product h1 { font-size: 22px; }
    #gallery-slider, .royalSlider { max-width: 100%; }
    #product .cart, #product .rating { text-align: left; }

    /* --- category rubrics --- */
    #rubrics .rubric,
    #rubrics .rubric.two-column {
        display: block;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }

    /* --- footer --- */
    #footer { height: auto; padding: 15px 0; }
    #footer .row-fluid > div { text-align: center !important; margin-bottom: 10px; }
    #copyright, #socials { text-align: center !important; }
    #code-logo { margin: 0 auto; }

    /* --- controls row on filter pages --- */
    #show-controls .span6,
    #show-controls .switch-view-container,
    #show-controls .sort-direction { text-align: left; margin-bottom: 6px; }

    /* --- modals --- */
    .modal {
        width: 92% !important;
        left: 4% !important;
        margin-left: 0 !important;
    }
    #shopping-cart-modal {
        width: 92% !important;
        left: 4% !important;
        margin: 0 !important;
        height: auto !important;
        max-height: 90%;
    }
    #shopping-cart-modal .modal-body { max-height: 75vh; }
}

/* ---- small phones ---------------------------------------------------- */
@media (max-width: 480px) {
    body { font-size: 13px; }
    #content #grid .product { width: 96%; }
    #novelty > div { width: 100% !important; }
    #iconed-menu > ul > li { margin: 0 5px; }
    #iconed-menu a { font-size: 9px; }
    h1 { font-size: 20px; }
    #product h1 { font-size: 19px; }

    #content table.table td,
    #content table.table th { padding: 6px 4px; font-size: 12px; }
    #shopping-cart td { padding: 6px; font-size: 14px; }
}