@import 'variables.scss';

/******************************
Flexbox for Equal Height
*******************************/

@supports (display: flex){
  .product-grid,
  .box-product,
  .cms-blocks .blocks,
  .refine-images {
    display: flex;
    flex-wrap: wrap;
  }

  .product-list,
  .product-grid-item,
  .product-wrapper,
  .product-wrapper .product-details,
  .product-wrapper .product-details .caption {
    display: flex;
    flex-direction: column;
  }

  .product-details {
    justify-content: space-between;
  }

  .product-wrapper,
  .product-details,
  .product-details .caption {
    flex-grow: 1;
  }

  .product-details .caption {
    align-items: center;
  }

  /******************************
   CMS Blocks
  *******************************/
  .cms-block {
    display: flex;
  }
  .block-content-top {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    .block-icon {
      flex: 0 0 auto;
    }
  }

  /******************************
   Blog
  *******************************/

  .blog-grid-view,
  .posts.box-content{
    display: flex;
    flex-wrap: wrap;
  }

  .post-module .post-item,
  .blog-grid-view > div {
    display: flex;
  }

  .post-wrapper,
  .post-item-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .blog-list-view .post-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .post-item-details {
    align-items: flex-start;
  }

  /******************************
   Header
  *******************************/

  .mega-menu,
  .mega-menu-column.mega-menu-categories,
  .mega-menu-column.mega-menu-products {
    > div {
      display: flex;
      flex-wrap: wrap;
      //width: 100%;
      > h3 {
        width: 100%;
      }
    }
    .mega-menu-item {
      display: flex;
      flex-direction: column;
      > div {
        flex: 1;
      }
    }
  }

  /******************************
   Footer
  *******************************/

  footer .columns {
    display: flex;
    flex-wrap: wrap;
  }

  /******************************
   Checkout
  *******************************/

  .journal-checkout {
    #payment-confirm-button fieldset {
      #card-new label + div {
        width: auto;
        margin-right: 10px;
      }
      input[type='text'] {
        min-width: 250px;
      }
    }
  }
  #card-new .form-group {
    display: flex;
    flex-wrap: wrap;
  }

  #account .form-group {
    .radio {
      width: auto;
    }
  }

  /******************************
   Headline Rotator
  *******************************/

  .headline-mode {
    .quote {
      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
      &.cta-center {
        > div {
          flex-direction: column;
        }
      }
    }
  }
}

/******************************
 Clearfix fix
*******************************/

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after{
  flex-basis: 0;
  order:1;
}

/******************************
 OC 3
*******************************/

.oc2{
  .ui-pnotify-text a{
    margin:0;
  }
  .notification-buttons a{
    margin:7px 10px 0 0;
  }
  &.account-page{
    .buttons.clearfix{
      clear: none;
    }
  }
}