/******************************************************************************************************
    Default Layout 
    For medium/tablet screeens (width 481px - 768px).
******************************************************************************************************/    
    
    .mq-medium-hide {
    display: none; }
    
    .mq-medium-show {
    display: block; }
    
    .mq-medium-no-padding {
    padding: 0; }
    
    .box {
    margin: 2px; }
    
    .box.box-breadcrums {
    background: none;
    padding: 0;
    margin: 0 5px; }
    
    .box.dark {
    margin: 4px;
    padding: 5px; }
    
    .social {
    right: 0;
    top: 0; }
    
/**************************************************
    Main
**************************************************/    
    
    main {
    padding: 2px; }
    
    .column-left {
    width: auto;
    float: none; }
        
        .column-left .cell {
        width: 100%; }
    
    .column-right {
    width: auto;
    float: none; }
    
        .column-right .cell {
        width: 100%; }
    
    .column-middle {
    overflow: auto; }
    
    .cell {
    width: 100%; }
    
    .group-1 { width: 100%;    }
    .group-2 { width: 50%;     }
    .group-3 { width: 33.333%; }
    .group-4 { width: 50%;     }
    .group-5 { width: 20%;     }
    .group-6 { width: 50%;     }

/**************************************************
    Header
**************************************************/
    
    .header-bottom {
    padding: 0; }
    
    .logo {
    margin: 5px 0 0 0; }
    
    .logo a {
    background-size: 190px;
    background-position: 5px 0;
    width: 195px;
    height: 40px; }
        
    .search {
    margin: 0;
    width: 100%; }
    
        .search .button {
        right: 10px;
        top: 10px; }
        
    .mobile-navigation-button {
    padding: 10px; }
        
/**************************************************
    Mobile Cart
**************************************************/

    .mobile-help,
    .mobile-cart {
    display: block; }
    
/**************************************************
    Footer
**************************************************/
    
    footer .group-5 {
    width: 25%; }
    
    footer .group-5:last-child {
    width: 100%; }

/**************************************************
    Filter
**************************************************/ 
    
    .filter, .top-menu {
    margin-bottom: 0; }
            
/******************************************************************************************************
    Selector
******************************************************************************************************/    
    
    .selector .control {
    display: none; }
    
    .selector .native-control {
    display: block; }
    
    .selector.gray .native-control {
    background-color: #e8e8e8; }
    
/******************************************************************************************************
    Navigation
******************************************************************************************************/ 
    
    .mobile-navigation-button {
    display: block; }
    
    .navigation {
    display: none; }
    
    .navigation.open {
    display: block; }
    
    .navigation h3 {
    display: none; }

/******************************************************************************************************
    Product
******************************************************************************************************/ 
    
    /*.product .read-more {
    margin: 0; }*/
    
    .product .details {
    float: none;
    width: 100%; }
    
/**************************************************
    Tiles 
    Fix layout issues.
**************************************************/

    .product-list-style-tiles .group-3 .product-list .extra-label {
    display: block;
    line-height: 15px;
    height: 15px; }
    
    .product-list-style-tiles .group-3 .product-list .footnote {
    height: 20px; }
    
    .product-list-style-tiles .group-3 .product-list .buttons button {
    width: 100%;
    text-align: center; }
    
    .product-list-style-tiles .group-3 .product-list .buttons button.gray {
    line-height: 15px;
    margin: 0 0 5px 0; }

/**************************************************
    List Options
**************************************************/
    
.list-options {
    margin: 0 0 0 5px;
    padding: 0 0 0 5px;
    border-left: 1px solid #888; }
    
        .list-options:last-child {
        border-left: none; }
        
        .list-options dt { 
        display: none; }

/******************************************************************************************************
    Checkout
    !checkout
******************************************************************************************************/

    .checkout.address form {
    width: 100%; }

    .wishlist-list .image       { width: 10%; }
    /*.wishlist-list .article     { width: 10%; }*/
    .wishlist-list .name        { width: 30%; }
    .wishlist-list .price       { width: 14%; }
    .wishlist-list .amount      { width: 16%; }
    .wishlist-list .sum         { width: 14%; }
    .wishlist-list .operations  { width: 16%; }
    .wishlist-summery .total    { width: 70%; }
    .wishlist-summery .sum      { width: 14%; }
    .wishlist-summery .buttons  { width: 16%; }
    
    .cartlist-list .image       { width: 10%; }
    /*.cartlist-list .article     { width: 10%; }*/
    .cartlist-list .name        { width: 30%; }
    .cartlist-list .price       { width: 16%; }
    .cartlist-list .amount      { width: 18%; }
    .cartlist-list .sum         { width: 16%; }
    .cartlist-list .operations  { width: 10%; }
    .cartlist-summery .total    { width: 70%; }
    .cartlist-summery .sum      { width: 20%; }
    .cartlist-summery .buttons  { width: 100%; }

.cartlist-summary-weights span:first-of-type {
    width: 70%;
}

.cartlist-summary-weights span:last-of-type {
    width: 20%;
}


@media (min-width: 481px) and (max-width: 600px) {   

    .wishlist-list .price,
    .cartlist-list .price {
    text-align: left;
    padding: 0 5px 5px 15%; }
    
    .wishlist-list .image img,
    .cartlist-list .image img {
    max-height: 30px; }
    
    .wishlist-list .name,
    .cartlist-list .name {
    padding: 10px 5px 10px 0; }
    
    .wishlist-list .amount,
    .wishlist-list .sum,
    .wishlist-list .operations,
    .cartlist-list .amount,
    .cartlist-list .sum,
    .cartlist-list .operations {
    padding: 0 5px 5px 5px; }
    
        .wishlist-header .name,
        .cartlist-header .name {
        padding: 5px 5px 0 0; }
        
        .cartlist-list .cartlist-summery .sum,
        .wishlist-list .wishlist-summery .sum {
        padding: 5px; }
     
    .wishlist-list .image       { width: 15%;  }
    /* .wishlist-list .article     { display: none; } */
    .wishlist-list .name        { width: 85%;  }
    .wishlist-list .price       { width: 30%;  }
    .wishlist-list .amount      { width: 20%;  }
    .wishlist-list .sum         { width: 20%;  }
    .wishlist-list .operations  { width: 30%;  }
    .wishlist-summery .total    { width: 50%;  }
    .wishlist-summery .sum      { width: 20%;  }
    .wishlist-summery .buttons  { width: 30%;  }

    .cartlist-list .image       { width: 15%; }
    /*.cartlist-list .article     { width: 10%; }*/
    .cartlist-list .name        { width: 85%; }
    .cartlist-list .price       { width: 30%; }
    .cartlist-list .amount      { width: 20%; }
    .cartlist-list .sum         { width: 20%; }
    .cartlist-list .operations  { width: 30%; }
    .cartlist-summery .total    { width: 50%; }
    .cartlist-summery .sum      { width: 20%; }
    .cartlist-summery .buttons  { width: 30%; }


    .cartlist-summary-deliverytime {
    width: 100%;
    text-align: left;
    }

    .cartlist-summary-weights span:first-of-type {
    width: 50%;
    }

    .cartlist-summary-weights span:last-of-type {
    width: 20%;
    }

    .id-checkout-agreements.has-estimated-deliverydate {
    float: none;
    width: 100%;
    }
}
    
/******************************************************************************************************
    Order History
    !order !history !order-history
******************************************************************************************************/

    /*.order-history .order .item    { width: 15%; }*/
    .order-history .order .name    { width: 55%; }
    .order-history .order .price   { width: 15%; }
    .order-history .order .amount  { width: 15%; }
    .order-history .order .sum     { width: 15%; }
    .order-history .order .label   { width: 80%; }
    .order-history .order .value   { width: 20%; }
    
    .order-history .delivery .item         { width: 30%; }
    .order-history .delivery .date         { width: 30%; }
    .order-history .delivery .amount       { width: 40%; }
    .order-history .delivery .trace        { width: 60%; }
    .order-history .delivery .operations   { width: 40%; }
    
        .order-history .delivery .item,
        .order-history .delivery .date,
        .order-history .delivery .amount,
        .order-history .delivery .name {
        padding: 5px 5px 0 5px; }
        
        .order-history .delivery .trace,
        .order-history .delivery .operations { 
        padding: 0 5px 5px 5px; }
        
        .order-history .delivery .inner-table .table-header .table-cell { 
        padding: 5px; }
        
        /*.order-history .delivery .inner-table .item      { width: 15%; }*/
        .order-history .delivery .inner-table .name      { width: 55%; }
        .order-history .delivery .inner-table .amount    { width: 15%; }
        .order-history .delivery .inner-table .total     { width: 30%; }

    .order-history .invoice .item          { width: 30%; }
    .order-history .invoice .invoice-date  { width: 35%; }
    .order-history .invoice .last-date     { width: 35%; }
    .order-history .invoice .sum           { width: 30%; }
    .order-history .invoice .operations    { width: 70%; }
        
        .order-history .invoice .item,
        .order-history .invoice .invoice-date,
        .order-history .invoice .last-date,
        .order-history .invoice .name,
        .order-history .invoice .price,
        .order-history .invoice .amount,
        .order-history .invoice .sum {
        padding: 5px 5px 0 5px; }
        
        /*.order-history .invoice .sum,
        .order-history .invoice .operations {
        padding: 0 5px 5px 5px; }*/
        
        .order-history .invoice .last-date {
        text-align: right; }
        
        .order-history .invoice .sum {
        text-align: left; }
        
        .order-history .invoice .inner-table .table-header .table-cell { 
        padding: 5px; }
        
        /*.order-history .invoice .inner-table .item      { width: 15%; }*/
        .order-history .invoice .inner-table .name      { width: 45%; }
        .order-history .invoice .inner-table .price     { width: 20%; }
        .order-history .invoice .inner-table .amount    { width: 15%; }
        .order-history .invoice .inner-table .sum       { width: 20%; }