/* vim: set ts=2 sw=2 sts=2 et: */

/**
 * Styles
 *
 * Copyright (c) 2001-present Qualiteam software Ltd. All rights reserved.
 * See https://www.x-cart.com/license-agreement.html for license details.
 */

//
// Main responsive styles
// --------------------------------------------------

.category-description img,
.products-sidebar-small-thumbnails div.product-photo img,
#logo img {
  .img-responsive !important;
  height: auto !important;
}

.products-grid div.product-photo {
  .thumbnail;
}

.product-details div.image img.product-thumbnail {
  margin: 0 auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  height: auto;
}

.mobile-hidden {
  .hidden-xs;
  .hidden-sm;
  .visible-md;
  .visible-lg;
}

.desktop-hidden {
  .hidden-md;
  .hidden-lg;
}

#page {
  > ul.desktop-hidden {
    display: none;
  }
}

.search-form-main-part td.submit-button {
  .hidden-xs;
  .hidden-sm;
}

.search-form-main-part.visible-xs td.submit-button {
  .visible-xs;
  .visible-sm;
  text-align: center;
  padding-left: 17px;
  padding-right: 17px;
}

.search-form-main-part.visible-xs td.less-search-options-cell {
  text-align: center;
  padding-left: 17px;
  padding-right: 17px;
}

#header-area .account-links {
  .desktop-hidden;
}

#header-area .mobile_header {
  .desktop-hidden;
}

#header-bar > .account-links {
  .mobile-hidden;
}

ul.search-including-options li,
#logo,
#search {
  .make-xs-column(12; 0);
}

#header-area {
  .clearfix;
}

#logo {
  .make-md-column(3; 0);
}

.search-product-form .substring-cell {
  .make-md-column(9; 0);
}

div.product-details .product-details-info {
  .make-xs-column(12; 0);
  .make-sm-column(7; 0);
}

div.product-details div.image {
  .make-sm-column(5; 0);
}

.products-sidebar-small-thumbnails {
  .row;
}

.products-sidebar-small-thumbnails li.product-cell {
  .make-xs-column(12; 0);
}

.products-sidebar-small-thumbnails li.more_link {
  .make-xs-column(12; 0);
}

.simple-search-product-form {
  .make-xs-column(12; 0);
}

.search-product-form .substring-cell input.form-text {
  .make-xs-column(12; 0);
  padding-left: 12px;
  padding-right: 12px;
}

.checkout-block .steps .step.shipping-step {
  .make-xs-column(12; 0);
  .make-sm-column(7; 0);
  .make-md-column(8; 0);
  .make-lg-column(9; 0);
}

.checkout-block .steps .step.review-step {
  .make-xs-column(12; 0);
  .make-sm-column(5; 0);
  .make-md-column(4; 0);
  .make-lg-column(3; 0);
}

.checkout-block .steps .subsection.shipping-section {
  .make-sm-column(12; 0);
  .make-md-column(6; 0);
}

.checkout-block .steps .subsection.payment-section {
  .make-xs-column(12; 0);
  .make-sm-column(12; 0);
  .make-md-column(6; 0);
}

ul.products-grid.grid-list li.product-cell {
  .make-xs-column(12; 0);
  .make-sm-column(6; 0);
  .make-md-column(4; 0);
}

ul.subcategory-view-icons.subcategory-list.grid-list > li {
  .make-xs-column(12; 0);
  .make-sm-column(6; 0);
  .make-md-column(4; 0);
}

.two-sidebars ul.products-grid.grid-list li.product-cell {
  .make-sm-column(12; 0);
  .make-md-column(6; 0);
}

.two-sidebars ul.subcategory-view-icons.subcategory-list.grid-list > li {
  .make-sm-column(12; 0);
  .make-md-column(6; 0);
}

.no-sidebars ul.products-grid.grid-list li.product-cell {
  .make-lg-column(3; 0);
}

.no-sidebars .add-to-cart-popup ul.products-grid.grid-list li.product-cell {
  .make-lg-column(4; 0);
}

.sidebar ul.subcategory-view-icons.subcategory-list.grid-list > li {
  .make-xs-column(12; 0);
}

#shopping-cart {
  .make-xs-column(12; 0);
  .make-sm-column(7; 0);
}

#cart-right {
  .make-xs-column(12; 0);
  .make-sm-column(4; 0);
  .make-sm-column-offset(1);
}

.profile-form-container ul.main-table {
  .make-xs-column(12; 0);
}

.profile-form-container ul.main-table li.input {
  .make-xs-column(12; 0);
}

.profile-form-container ul.main-table li.input div.table-label {
  .make-sm-column(4; 0);
  .make-md-column(3; 0);
  .make-lg-column(2; 0);
}

.profile-form-container ul.main-table li.input div.star {
  .make-sm-column(1; 0);
}

.profile-form-container ul.main-table li.input div.table-value {
  .make-xs-column(12; 0);
  .make-sm-column(7; 0);
  .make-md-column(8; 0);
  .make-lg-column(8; 0);
}

.profile-form-container ul.main-table li.input div.table-value span.input,
.profile-form-container ul.main-table li.input div.table-value select,
.profile-form-container ul.main-table li.input div.table-value span.label-field {
  .make-xs-column(12; 0);
  .make-md-column(8; 0);
  .make-lg-column(7; 0);
}

#shopping-cart .cart-buttons {
  .make-xs-column(7; 0);
}

#shopping-cart .sums {
  .make-xs-column(5; 0);
}

div.model-form-buttons {
  .make-xs-column-offset(0);
  .make-xs-column(12; 0);
  .make-sm-column-offset(5);
  .make-sm-column(7; 0);
  .make-md-column-offset(4);
  .make-md-column(8; 0);
  .make-lg-column-offset(3);
  .make-lg-column(9; 0);
}

.ui-dialog {
  .make-xs-column(12; 0);
  .make-sm-column(8; 0);
  .make-md-column(7; 0);
  float: none;
}

.address-dialog ul.default-table {
  .make-xs-column(12; 0);

  @media(max-width: @screen-xs-max) {
    min-width: initial;
  }
}

.address-dialog ul.default-table,
.step-box ul.form {
  > li {
    .make-xs-column(12; 0);

    div.table-label {
      @media (max-width: @screen-xxs-max) {
        width: auto;
        label {
          width: auto;
        }
      }
      .make-xs-column(2; 0);
      .make-md-column(3; 0);
    }

    div.star {
      text-align: right;
      padding-right: 10px;
      width: 20px;
    }

    div.table-value {
      @media (max-width: @screen-xxs-max) {
        width: auto;
        float: none;
      }
      .make-xs-column(9; 0);
      .make-md-column(8; 0);

      .input-field-wrapper {
        width: 100%;
      }
      input,
      select {
        width: 100%;
      }
    }

    &.input-checkbox-enabled {
      .table-label {
        vertical-align: middle;
        display: inline-block;
        width: auto;

        label {
          width: auto;
        }
      }

      .star {
        display: none;
      }

      .table-value {
        width: auto;
        display: inline-block;
        padding-top: 8px;
        margin-left: 20px;
        vertical-align: middle;

        input {
          width: auto;
        }
      }
    }

    &.address-zipcode {
      .make-xs-column(6; 0);

      div.table-label {
        .make-xs-column(4; 0);
        .make-md-column(6; 0);
      }

      div.table-value {
        .make-xs-column(6; 0);
        .make-md-column(4; 0);
      }
    }

    &.address-phone {
      .make-xs-column(6; 0);

      div.table-label {
        .make-xs-column(4; 0);
        .make-md-column(6; 0);
        @media (max-width: @screen-xxs-max) {
          padding-left: 5%;
        }
      }

      div.star {
        @media (max-width: @screen-xxs-max) {
          padding-left: 5%;
        }
      }

      div.table-value {
        .make-xs-column(6; 0);
        .make-md-column(4; 0);
        @media (max-width: @screen-xxs-max) {
          float: right;
        }
      }
    }
  }
}

.step-box ul.form > li div.table-value {
  input, select {
    @media (max-width: @screen-xxs-max) {
      width: 95%;
    }
  }
}

.checkout-block .item-email .subbox {
  .make-xs-column(9; 0);
  .make-xs-column-offset(2);
  .make-sm-column(9; 0);
  .make-sm-column-offset(2);
  .make-md-column(8; 0);
  .make-md-column-offset(3);
  @media (max-width: @screen-xxs-max) {
    padding-left: 20px;
  }
  padding-left: 40px;
}

.invoice-box .addresses,
.invoice-box .thank-you {
  .make-xs-column(12; 0);
}

.invoice-box .addresses li.address {
  .make-xs-column(12; 0);
  margin: 0 0 10px 0;
}

.invoice-box .addresses li.address.payment {
  margin-left: 0;
}

.product-quicklook .product-details div.image {
  .make-xs-column(6; 0);
}

.ui-dialog .product-quicklook .product-details-info {
  .make-xs-column-offset(1);
  .make-xs-column(5; 0);
  @media (max-width: @screen-xs-max) {
    width: 100%
  }
}

.product-quicklook .product-details div.image {
  padding-right: 0;
}

.signin-wrapper {
  .signin-login-wrapper {
    .make-xs-column(12; 0);
  }

  .or-line {
    .make-xs-column(12; 0);
  }

  .signin-anonymous-wrapper {
    .make-xs-column(12; 0);
  }
}

div.product-details div.image {
  padding: 20px 0px 20px 0;
}

@media (max-width: @screen-sm-max) {

  #header {
    float: right;
    position: fixed;
    right: 0;
    z-index: 71;

    .block {
      border: none;

      .content {
        border: none;

        .lc-minicart {
          float: left;
          padding-right: 10px;

          .minicart-items-number {
            margin: 17px 0;
            font-size: @font-size-h4;
            font-weight: bold;
            color: @mobile-menu-icons-color;
          }

          .minicart-items-text {
            display: none;
          }

        }
      }
    }

  }

  .lc-minicart .items-list {
    top: @mobile-menu-height !important;
  }

  #logo {
    padding-top: 29px;
    text-align: center;
    z-index: 50;
    padding-bottom: 10px;
    margin-top: @mobile-menu-height;

    img {
      margin: 0 auto;
    }
  }

  .add2cartpopup .products-list-box {
    display: none;
  }

  .password-eye {
    right: 12%;
  }

  #search {
    display: none;
  }

  div.product-details {
    div.image {
      .make-xs-column(12; 0);
      max-width: 100%;

    }

    .product-photo {
      height: auto !important;
    }
  }
}

@media (min-width: @screen-sm-min) {

  ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell {
    clear: none;
  }

  ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell {
    clear: left;
  }

  ul.subcategory-view-icons.subcategory-list.grid-list > li:nth-child(3n) + li {
    clear: none;
  }

  ul.subcategory-view-icons.subcategory-list.grid-list > li:nth-child(2n) + li {
    clear: left;
  }

  .navbar-brand {
    display: none;
  }

  .products-sidebar-small-thumbnails div.product-photo {
    width: 80px;
    float: left;
    padding-right: 8px;
  }

  .products-sidebar-small-thumbnails .details {
    padding-left: 88px;
    text-align: left;
  }

  .products-sidebar-small-thumbnails div.product-photo a.product-thumbnail {
    display: inline;
    margin: 0;
  }

  #header .block {
    float: none;
  }

  .profile-form-container ul.main-table li.input div.star {
    text-align: right;
    padding-right: 5px;
  }

  .model-form-buttons .button.delete_profile {
    clear: left;
  }

  .delete-user-button {
    margin: 10px 0 0 !important;
  }

  .ui-dialog {
    .border-top-radius(10px);
    .border-right-radius(0);
    .border-bottom-radius(10px);
  }

  .ui-dialog .ui-dialog-titlebar-close {
    right: -44px;
    top: 0;
    .border-right-radius(11px);
  }

  .checkout-block .shipping-step .step-box {
    border: 1px solid #dfdfdf;
  }

  .checkout-block .shipping-step .step-box,
  .checkout-block .review-step .step-box .box {
    margin-right: 10px;
  }

  #secondary-menu span a {
    padding: 0 10px 1px;
  }

  .loupe {
    display: none;
  }

  div.product-details div.image {
    padding: 20px 0 20px 0;
  }
}

@media (max-width: @screen-sm-max) {
  .signin-wrapper {
    margin-bottom: 30px;

    .form-control {
      width: 100% !important;
    }
  }

  .or-line {
    padding-bottom: 0 !important;

    .line {
      width: 100% !important;
      border: none !important;
      border-top: 1px dotted #bbbbbb !important;
      height: 10px !important;
    }

    .or-box {
      top: 15px !important;
    }
  }

  .signin-login-title, .signin-anonymous-title {
    white-space: normal !important;
  }

  .signin-anonymous-box {
    width: 100% !important;
  }

  table.login-form, table.recover-password-form {
    min-width: 0 !important;
  }

  #secondary-menu span a {
    padding: 0 5px 0;
  }

  .product-details div.image img.product-thumbnail {
    .img-responsive !important;
    height: auto !important;
  }

  .product-details div.image {
    width: auto !important;
  }
}

@media (min-width: @screen-md-min) {

  ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell {
    clear: none;
  }

  ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell {
    clear: left;
  }

  ul.subcategory-view-icons.subcategory-list.grid-list > li:nth-child(2n) + li {
    clear: none;
  }

  ul.subcategory-view-icons.subcategory-list.grid-list > li:nth-child(3n) + li {
    clear: left;
  }

  .two-sidebars ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell {
    clear: left;
  }

  .two-sidebars ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell {
    clear: none;
  }

  .two-sidebars ul.subcategory-view-icons.subcategory-list.grid-list > li:nth-child(2n) + li {
    clear: left;
  }

  .two-sidebars ul.subcategory-view-icons.subcategory-list.grid-list > li:nth-child(3n) + li {
    clear: none;
  }

  #logo {
    float: left;
  }

  #header-area {
    padding-top: 0;
  }

  .lc-minicart {
    padding-left: 40px;
  }

  ul.search-including-options li {
    width: auto;
  }

  .simple-search-box div.table-value {
    float: left;
  }

  #header-bar {
    text-align: right;
    width: auto;
  }

  #header {
    padding-left: floor((@grid-gutter-width / 2));
  }

  #header .block .content {
    border-width: 1px;
    border-style: none solid solid none;
    padding: 0;
    border-top: none;
    .border-top-radius(0);
  }

  #header .block.minicart-block .content {
    border-left-style: solid;
  }

  .lc-minicart {
    min-width: 115px;
    background-color: @light-accent-color;
    background: url("@{customer-skin}/images/shopping-bag.png") 10px 15px no-repeat;

    svg {
      display: none;
    }
  }

  .lc-minicart.empty:hover {
    background-color: @light-accent-color;
  }

  .lc-minicart .minicart-items-number,
  .lc-minicart .minicart-items-text {
    color: #6999c4;
    margin: 0 16px 0 30px;
    line-height: 1em;
    float: none;
  }

  .lc-minicart .minicart-items-number {
    font-size: 26px;
    padding-top: 16px;
    clear: right;
  }

  .lc-minicart .minicart-items-text {
    font-size: 11px;
    clear: left;
  }

  #header .block .content {
    height: 70px;
  }

  ul.account-links li {
    margin: 0 0 0 (@grid-gutter-width / 2);
    font-size: @font-size-base;
  }

  #search {
    float: right;
    width: auto;
  }

  .simple-search-box {
    height: 24px;
    width: 240px;
    margin-top: 0;
  }

  #search .simple-search-box input.form-text {
    width: 212px;
    float: right;
    padding: 1px 3px;
    box-shadow: none;
  }

  .simple-search-box button.submit-button {
    margin: 3px 3px 0px 0px;
    top: 0;
  }

  #header .block {
    float: left;
  }

  .ui-dialog .product-quicklook {
    min-width: 600px;
  }

  .products .product .quicklook {
    display: block;
  }

  div.product-details div.image {
    padding: 20px 0 20px 0;
  }

  .delete-user-button {
    margin: 0 0px 0px 40px !important;
  }

  .model-form-buttons .button.delete_profile {
    clear: none;
  }

  .ui-dialog .ui-dialog-titlebar-close {
    right: -44px;
    .border-right-radius(11px);
  }

  .signin-wrapper {
    .signin-login-wrapper {
      margin-left: 2%;
      width: 46%;
    }

    .or-line {
      width: 4%;
    }

    .signin-anonymous-wrapper {
      width: 46%;
      margin-right: 2%;
    }
  }

  .invoice-box .addresses li.address {
    .make-xs-column(5.5; 0);
    width: 48%;
    margin: 0px;
    margin-right: 4%;
  }

  .invoice-box .addresses li.address:last-child {
    margin-right: 0px;
  }

}

@media (min-width: @screen-lg-min) {
  div.product-details div.image {
    padding: 20px 0 20px 0;
  }

  .no-sidebars ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell {
    clear: none;
  }

  .no-sidebars ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell {
    clear: left;
  }
}