//minor template mods
#folderNav ul, #categoryNav ul {
  padding:0 0 20px;
}
#folderNav ul li, #categoryNav ul li {
  margin:0;
}
.header-hidden #header h1 {
  font-size: 2.5em;
}
.footer-nav {
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
}
#footer{display:none;}
// full width elements
.outer-wrapper, #header, .main-image-wrapper {width:100%;}

// variables
@main-colour: #000;
@light-colour: #FFF;
@grey: #4d4d4d;
@lightgrey: #d3d3d3;
@main-font-family: "proxima-nova", "Open Sans", Helvetica, Arial, sans serif;
@main-font-size: 0.9em;
@main-font-weight:500;
@title-font-size: 1.3em;
//// end variables
html {
  height:101%;
}
html, body {
  overflow-x:hidden;
}
// basic grid structure
.main-content-wrapper {
  overflow:hidden;
  #sidebar.left_col {
    width:200px;
    padding-right:50px;
    position:relative;
    overflow:hidden;
    float:left;
    padding-bottom:100px;
    @media (max-width:760px){
      height:240px;
    }
    &.fixed {
      position: fixed;
      top: 210px;
    }
    @media (max-width:650px){
      display:none;
    }
    #controls {
      width:200px;
      float:left;
      margin:0;
      clear:none;
      @media (max-width:740px){
        height:240px;
        padding-right:20px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }
      // filter title
      .main-control-header {
        padding-bottom:8px;
        p.title {
          width:100%;
          padding-top:0;
          padding-bottom:5px;
          margin:0px;
          font-size:@title-font-size;
          text-transform:uppercase;
          font-family: @main-font-family;
          border-bottom:2px solid @main-colour;
        } // p.title
      } // first .refine-control-header
      .refine-control-header {
        background:@main-colour;
        display:block;
        width:auto;
        clear:both;
        overflow:hidden;
        cursor:pointer;
      }
      p.sub-title {
        padding:4px;
        margin:0;
        float:left;
        text-transform:capitalize;
        font-weight:400;
        font-size:@main-font-size;
        display:inline-block;
        a.toggleControl {
          color:@light-colour;
          &:focus {
            outline:0;
          }
        }
      } // p.sub-title
    } // #controls
  } // #sidebar.left-col

  #productList {
    width: ~"calc(100% - 250px)";
    margin-left:-250px;
    float:right;
    clear:none;
    overflow:hidden;
    @media (max-width:1020px){
      width: ~"calc(100% - 280px)";
      margin-left: -280px;
    }
    @media (max-width:840px){
      width: ~"calc(100% - 250px)";
      margin-left:-250px;
    }
    @media (max-width:650px){
      width:100%;
    }
    a.product {
      &:last-of-type{margin-bottom:50px;}
      @media (max-width:1200px) {
        width:25%;
      }
      @media (max-width:850px) {
        width:98%;
      }
      @media (max-width:650px) {
        width:100%;
      }
    }
  }
} // main-content wrapper

// utils – arrows
.arrow-right {
  display:inline-block;
  float:left;
  margin-top:10px;
  height:0;
  width:0;
  line-height: 5px;
  margin-left:8px;
  margin-right:3px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid @light-colour;
}
.arrow-down {
  display:inline-block;
  float:left;
  height:0;
  width:0;
  margin-top:14px;
  line-height: 5px;
  margin-left:6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid @light-colour;
}
// checkbox input/label styles
.attribute-items {
  // checkbox
  .checkbox_options {
    width:50%;
    float:left;
    &:last-of-type {padding-bottom:5px;}
    input {
      &:hover {
        border-color:@lightgrey;
      }
    }
    &.disabled {
      color:@lightgrey;
      cursor: default;
      &:hover {color:@lightgrey;}
      input:disabled, label {
        cursor: default;
      }
      label:before {
        border-color: @lightgrey;
      }
    } // disabled
  }
  .checkbox-custom, .radio-custom {
    opacity: 0;
    position: absolute;
  }

  .checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 3px;
    cursor: pointer;
  }

  .checkbox-custom-label, .radio-custom-label {
    position: relative;
  }

  .checkbox-custom + .checkbox-custom-label:before,
  .radio-custom + .radio-custom-label:before {
    content: '';
    background: @light-colour;
    border: 0.14em solid @main-colour;
    display: inline-block;
    vertical-align: text-top;
    width: 5px;
    height: 5px;
    padding:2px;
    margin-top:2px;
    margin-right: 4px;
    text-align: center;
  }

  .checkbox-custom:checked + .checkbox-custom-label:before {
    background: @main-colour;
  }

  .radio-custom + .radio-custom-label:before {
    border-radius: 50%;
  }

  .radio-custom:checked +
  .radio-custom-label:before {
    background: @main-colour;
  }

  .checkbox-custom:focus + .checkbox-custom-label,
  .radio-custom:focus + .radio-custom-label {
    outline: 0; /* focus style */
  }

  label.checkbox-custom-label:hover::before {
    transition:all 200ms ease;
    border-color:@lightgrey;
  }

  label {
    font-weight:@main-font-weight;
    text-transform:uppercase;
    font-size:@main-font-size;
    font-family:@main-font-family;
    transition:all 200ms ease;
    &:hover {
      color: @lightgrey;
    }
  }
  &:not(.size) {
    label {
      font-weight:@main-font-weight;
      text-transform:capitalize;
      transition:all 300ms ease;
      font-size:@main-font-size;
      font-family:@main-font-family;
    }
  }
  // checked styling
  label.checked::before {
    &:hover {
      border-color:@main-colour;
    }}
} // attr items
/// *** END of filter menu styling ****