@charset "utf-8"

/* ---- Default Styles ---- */

.oe_product
    border: 1px solid rgba(100,100,100,0.2)

.products_pager
    text-align: center
    > div
        margin: 0 auto
        display: inline-block
        > *
            vertical-align: middle
            float: none
            padding: 0
        > ul
            padding-left: 10px
    > ul
        margin-left: auto
        margin-right: auto

/* ---- Default Styles ---- */

.oe_product
    position: relative
    .oe_product_image
        position: absolute
        left: 15px
        right: 15px
        top: 15px
        bottom: 55px
        text-align: center
        img
            max-width: 100%
            max-height: 100%
            margin: auto
            position: absolute
            top: 0
            left: 0
            bottom: 0
            right: 0
            z-index: 4
    section
        position: absolute
        left: 0
        right: 0
        bottom: 0
        overflow: hidden
        padding: 0 15px 24px 10px
        min-height: 56px
        border-top: 1px solid rgba(255,255,255,0.2)
        background: rgba(255, 255, 255, 0.75)
        z-index: 5
    .product_price
        padding: 5px 0
        position: absolute
        bottom: 0
    .oe_product_cart
        position: relative
        width: 100%
        height: 100%
    .oe_subdescription
        font-size: 0.8em
        overflow: hidden
        margin-bottom: 10px

.oe_mycart
    .input-group-addon
        padding-left: 6px
        padding-right: 6px

/* Products Options */

.oe_product.oe_image_full
    .oe_product_image
        left: 0
        right: 0
        top: 0
        bottom: 0

/* Ribbon for promotionso on products */

.oe_product
    &.oe_ribbon_promo
        .ribbon-wrapper
            display: block

    .ribbon-wrapper
        display: none
        width: 85px
        height: 88px
        z-index: 5
        overflow: hidden
        position: absolute
        top: 0
        right: 0

    .ribbon
        font: bold 15px Sans-Serif
        color: white
        text-align: center
        -webkit-transform: rotate(45deg)
        -moz-transform:    rotate(45deg)
        -ms-transform:     rotate(45deg)
        -o-transform:      rotate(45deg)
        position: relative
        padding: 7px 0
        left: -5px
        top: 15px
        width: 120px
        cursor: default


/* ---- Product Sizes ---- */

.col-md-12
    .oe-height-1
        height: 75px
    .oe-height-2
        height: 150px
    .oe-height-4
        height: 300px
    .oe-height-6
        height: 450px
    .oe-height-8
        height: 600px
.col-md-9
    .oe-height-1
        height: 70px
    .oe-height-2
        height: 140px
    .oe-height-4
        height: 280px
    .oe-height-6
        height: 420px
    .oe-height-8
        height: 560px

@media (max-width: 768px)
    #products_grid
        table, tbody,tr, td
            float: left
            width: 100%
            display: inline-block
        .oe_product
            float: left
            width: 100%
            height: 300px
            display: inline-block
    .products_pager
        .pagination
            margin: 5px auto !important

@media (max-width: 400px)
    #products_grid
        .oe_product
            height: 270px
            section
                background: rgba(100, 100, 100, 0.2)
            .oe_product_image
                top: 0
                bottom: 65px
    #products_grid
        .oe_product.oe_image_full
            .oe_product_image
                bottom: 50px


@media (min-width: 992px)
    .col-md-12
        .oe-height-1
            height: 95px
        .oe-height-2
            height: 190px
        .oe-height-4
            height: 380px
        .oe-height-6
            height: 570px
        .oe-height-8
            height: 760px
    .col-md-9
        .oe-height-1
            height: 72px
        .oe-height-2
            height: 144px
        .oe-height-4
            height: 288px
        .oe-height-6
            height: 432px
        .oe-height-8
            height: 576px

@media (min-width: 1200px)
    .col-md-12
        .oe-height-1
            height: 125px
        .oe-height-2
            height: 250px
        .oe-height-4
            height: 500px
        .oe-height-6
            height: 750px
        .oe-height-8
            height: 1000px
    .col-md-9
        .oe-height-1
            height: 95px
        .oe-height-2
            height: 190px
        .oe-height-4
            height: 380px
        .oe-height-6
            height: 570px
        .oe-height-8
            height: 760px

/* ---- Cart ---- */
.oe_cart, #modal_optional_products
    a span.visible-xs-inline
        display: none !important
.oe_cart, #modal_optional_products
    a span.hidden-xs
        display: inline !important

.oe_cart table td:first-child
    min-width: 76px

@media (max-width: 992px)
    #modal_optional_products table:last-child
        td:last-child
            overflow: hidden
        td:nth-child(2)
            width: 50%
        td:nth-child(3)
            width: 20%
        td:last-child, td:nth-last-child(2)
            width: 15%
@media (max-width: 500px)
    .oe_website_sale .oe_website_spinner
        margin: auto
    .oe_cart table, #modal_optional_products table
        display: inline-block
        thead
            display: none
        tbody, tr, td
            float: left
            width: 100% !important
            display: inline-block
        td:first-child
            display: none
        td:nth-child(2)
            border-top-style: double
            border-top-width: 6px
        td:last-child
            margin-bottom: 16px
        &:last-child tr:last-child td:last-child
            margin-bottom: 0
        td:last-child, td:nth-last-child(2)
            width: 50% !important
            height: 46px
            text-align: center
    #modal_optional_products table:last-child td:nth-child(3) > div
        float: none !important
    .oe_cart a, #modal_optional_products a
        span.hidden-xs
            display: none !important
        span.visible-xs-inline
            display: inline !important
/* ---- Product list style ---- */

@media (min-width: 400px)
    .oe_product.oe_list
        border: none
        border-bottom: 1px solid rgba(100, 100, 100, 0.2)
        width: 100%
        min-height: 100px
        position: relative
        padding-bottom: 5px
        .oe_product_image
            top: 0
            bottom: 0
            left: 0
            right: 0
            width: 170px
        section
            position: relative
            border: 0
            top: 0
            bottom: auto
            left: 180px
            background: transparent

.oe_website_sale .row .row .col-md-12
    float: none

/* product detail */

.css_attribute_color
    display: inline-block
    border: 1px solid #999999
    text-align: center
    input
        margin: 8px
        height: 13px
        opacity: 0
    &.active
        border: 3px ridge #66ee66
    &.active input
        margin: 6px

.css_not_available_msg
    display: none
.css_not_available.js_product
    > *:nth-child(4) > *
        display: none
    .product_price, .css_quantity
        display: none
    .css_not_available_msg
        display: block

option.css_not_available
    color: #ccc
label.css_not_available
    opacity: 0.6
label.css_attribute_color.css_not_available
    opacity: 1
    background-image: url('/website_sale/static/src/img/redcross.png')
    background-size: cover

.product_detail_img
    margin-left: auto
    margin-right: auto
    display: block
    max-height: 500px

.oe_default_price
    display: none
.discount .oe_default_price
    display: block

.oe_website_sale input.js_quantity
    min-width: 48px
    text-align: center

/* ---- Publish managment and options ---- */

#products_grid .css_options
    display: none
    position: absolute
    top: -6px
    left: 50%
    z-index: 10
    .dropdown
        position: relative
        left: -50%
        [name="size"]
            table
                margin-left: 20px
            td
                margin: 0
                padding: 0
                width: 20px
                height: 20px
                border: 1px #dddddd solid
                cursor: pointer
                &.selected
                    background-color: #B1D4F1
            table.oe_hover td.selected
                background-color: transparent
            table.oe_hover td.select
                background-color: #B1D4F1

.cke_editable
    #products_grid .oe_product_cart:hover > .css_options
        display: block

/* Wizard */


ul.wizard
    padding: 0
    margin-top: 20px
    list-style: none outside none
    -webkit-border-radius: 4px
    -moz-border-radius: 4px
    border-radius: 4px
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)

ul.wizard li 
    border: 1px solid #d4d4d4
    border-right-width: 0
    position: relative
    float: left
    padding: 0 10px 0 20px
    margin: 0
    line-height: 38px
    background: #fbfbfb

ul.wizard li .chevron
    position: absolute
    top: 0
    right: -10px
    z-index: 1
    display: block
    border: 20px solid transparent
    border-right: 0
    border-left: 10px solid #d4d4d4

ul.wizard li .chevron:before
    position: absolute
    top: -20px
    right: 1px
    display: block
    border: 20px solid transparent
    border-right: 0
    border-left: 10px solid #fbfbfb
    content: ""

ul.wizard li.text-success
    background: #f3f4f5

ul.wizard li.text-success .chevron:before
    border-left: 10px solid #f5f5f5

ul.wizard li.text-primary
    background: #f1f6fc

ul.wizard li.text-primary .chevron:before
    border-left: 10px solid #f1f6fc

ul.wizard li:first-child
    padding-left: 15px
    border-radius: 4px 0 0 4px