@import 'variables.scss';

/******************************
SIDE COLUMN
*******************************/

#column-right {
  padding: $margin $margin $margin 0;
}

#column-left {
  padding: $margin 0 $margin $margin;
}

#column-right {
  width: $side;
  float: right;
}

#column-left {
  width: $side;
  float: left;
}

#column-right + #content {
  margin-right: $side;
}

#column-left + #content {
  margin-left: $side;
}

#column-left + #column-right + #content{
  margin-left: $side;
  margin-right: $side;
}

#column-left + span + #content {
  margin-left: $side;
}
#column-right + span + #content {
  margin-right: $side;
}
#column-left + #column-right + span + #content{
  margin-left: $side;
  margin-right: $side;
}

//Columns
.side-column {
  position: relative;
  z-index: 2;

  .heading-title, .box-heading{
    max-height: 100%;
    height: auto;
  }

  ul, li{
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
    position: relative;
  }
  .box{
    margin-bottom: $margin;
  }
  > .box:last-of-type{
      margin-bottom: 0;
  }
  .box-content > div,
  .box-category{
    overflow: hidden;
  }
  //Box Content
  .box-content{
    p{
      padding: 10px;
      text-align: left;
      line-height: 1.4;
      margin-bottom: 0;
    }
    p + select{
      margin-bottom: 15px;
    }
  }
  //Box Category
  .box-content, .box-category{
    li a {
      transition: background-color .2s, color .2s;
      border-bottom-width: 1px;
      border-bottom-color: $f4;
      border-bottom-style: solid;
      display:block;
      position: relative;
    }
    li a.active {
      //font-weight: normal;
      color: $red;
    }
    li ul {
      display: none;
      margin-bottom: 0;
    }
    li a.active + ul {
      display: block;
    }
    li a:before{
      position: relative;
      float: left;
      margin-right: 5px;
    }
  }
  .box-content > ul > li, .box-category > ul > li{
    &:last-of-type > a{
      border-bottom: 0 !important;
    }
  }

/******************************
 SIDE CATEGORY
*******************************/

  .side-category{
    i{
      text-align: center;
      position: absolute;
      transition: background-color 0.2s, color 0.2s;
      display: table;
      line-height: 100%;
      span{
        position: relative;
        display: table-cell;
      }
    }
  }

  //Accordion
   .side-category-accordion{
     .box-category li ul li a:before{
       float: none;
       content: "";
     }
   }

//Opencart modules
.oc-module{
  overflow: hidden;
  display: block;
  .product-wrapper{
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    transition: all 0.2s;
    .p-over{
      display: none;
    }
  }
  .product-wrapper:hover{
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .product-details{
    background-color: transparent;
    padding-bottom: 0;
    float: left;
    max-width: 145px;
  }
  .product-details:before{
    content: "";
  }

  .product-grid-item{
    .quickview-button{
      display: none;
    }

    width: 100%;
    display: inline-block;
    border-bottom: 1px solid $e4;
    margin-bottom: 0;
    text-align: left;

    .image {
      display: block;
      float: left;
      position: relative;
      width: auto;
      span{
        display: none !important;
      }
      a{
        background: transparent !important;
        margin-right: 5px;
        line-height: 100%;
        border-radius: 0;
        border: none;
      }
      img {
        border:0;
        display: block;
        padding: 0;
        max-width: 55px;
        width: auto;
      }
    }
    .name {
      position: relative;
      display: block;
      margin-top: 2px;
      a {
        white-space: normal;
        font-size: 12px;
        text-decoration: none;
        display: block;
        text-align: left;
        padding: 0 0 2px 0;
      }
    }
    .sale{
      display: none;
    }
    .price {
      display: inline-block;
      font-size: 13px;
      padding: 0;
      text-align: left;
      border: none;
      margin-bottom: 4px;
      background-color: transparent;
      border-radius: 0;
    }
    .price-old {
      font-weight: normal;
      color: $red;
      padding-right: 2px;
      text-decoration: line-through;
      font-size: 12px;
    }
    .price-new {
      font-size: 13px;
    }
    .rating {
      position: relative;
      margin: 0;
      left: 0;
      top: 0;
      padding: 0;
    }
    .cart{
      display: none !important;
    }
    .cart input {
      color: white;
      font-family:$sans;
      text-transform: none;
      font-weight: bold;
    }
  }
  .product-grid-item:last-of-type{
    border-bottom: none;
  }
}

/******************************
 CAROUSEL MODULE
*******************************/
  .journal-carousel{

    .product-wrapper:hover{
      box-shadow: none;
    }
    .owl-wrapper-outer{
      //overflow: visible;
    }

    .owl-controls{
      overflow: visible;
    }

    .owl-buttons{
      -webkit-backface-visibility: hidden;
    }

    //Tabs
    .htabs{
      a{
        width: 100%;
        text-align: left;
        border-bottom: 1px solid $gray;
        border-right: 0;
      }
      a:last-of-type{
        border-bottom: none;
      }
    }
    .htabs.single-tab{
      a, a.selected, a:hover{
        border-bottom: none;
      }
    }
    .htabs.single-tab a{
      padding-left: 0;
    }
  }


  /******************************
   TEXT ROTATOR
  *******************************/

  .quote {
    padding-bottom: 30px;
    overflow: hidden;
  }

  .rotator-image{
    float: none !important;
    margin: 10px auto 0 auto !important;
    height: auto;
  }

  .quovolve-nav {
    bottom: 10px !important;
    left: 0;
    width:100%;
    text-align: center;
    ul, ol{
      margin: 0;
      padding: 0;
      display: inline-block;
    }
  }

  /******************************
   PHOTO GALLERY
  *******************************/

  .journal-gallery{
    //margin-bottom:0;
    overflow: hidden;
    .box-heading{
      margin-bottom: 10px;
    }
    .box-content{
      margin-right: -10px;
      margin-bottom: -10px;
      .gallery-thumb{
        padding-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .gallery-thumb a:before{
    font-size: 20px;
    margin-left: -10px;
    margin-top: -12px;
  }

  /******************************
   CMS BLOCKS
  *******************************/
  
  
  .cms-block, .static-banner{
    margin-bottom: $margin;
    &:last-of-type{
      margin-bottom: 0;
    }
  }
  .box.cms-blocks{
    background-color: transparent;
    .cms-block{
      margin-bottom: 0;
      &:last-of-type{
        margin-bottom: 0;
      }
    }
    .box-heading{
      margin-bottom:0;
    }
    .block-content{
      height: auto !important;
      background-color: transparent;
    }
  }
  .static-banners.box{
    background-color: transparent;
  }
  .editor-content h1,
  .editor-content h2,
  .editor-content h3,
  .side-column .block-content p{
    padding-bottom: 0;
  }
}



.extended-layout{
  #column-right, #column-left{
    .journal-gallery .box-content{
      padding: 10px;
      padding-top: 0;
    }
    .box{
      &:last-of-type{
        margin-bottom: $margin;
      }
    }
  }
}

.side-column{
  .oc-module .inline-button br{
    display: none;
  }
  .box.journal-carousel{
    background-color: transparent;
    margin-bottom: 10px;
    .owl-pagination{
      margin-bottom: 0;
    }
  }
  .owl-carousel .owl-wrapper-outer{
    overflow: visible;
  }
}
