/****** taxons.header.content ******/
.ui.cards > .card > .image > img, .ui.card > .image > img {
    display: block;
    width: auto;
    height: auto;
    border-radius: inherit;
    max-width: 100px;
}

div.ui.monster.section.bg-img {
    /*position: relative;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*width: 150%;*/
    height: 50vh;
    /*left: -25%;*/
    margin: 0 auto 1em;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.9);
}

div.ui.monster.section.bg-img.empty {
    height: 25vh;
    background-image: none !important;
    color: black;
}

div.ui.monster.section.bg-img h1 {
    width: auto;
    max-width: unset !important;
    padding: 0;
    margin: 0 0 10px !important;
    font-family: var(--cinzel) !important;
    font-weight: 400;
    font-style: normal;
    font-size: 4em;
    letter-spacing: 3px;
    color: inherit;
    text-shadow: -1px 2px 5px #0000004f;
}

div.ui.monster.section.bg-img.empty h1 {
    width: auto;
}

div.ui.monster.section.bg-img .ui.dividing.header {
    border-bottom: 1px solid rgba(234, 234, 234, 0.5);
}

div.ui.monster.section.bg-img.empty .ui.dividing.header {
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}

div.ui.monster.section.bg-img .sub.header {
    max-width: 50%;
    font-size: 1.1em;
    text-align: center;
    color: inherit;
    text-shadow: 1px 2px 8px #000000c2;
}

div.ui.monster.section.bg-img.empty .sub.header {
    text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.35);
}


/****** vertical.menu.filters ******/
.ui.fluid.vertical.menu {
    transform: unset !important;
    padding: 15px 35px;
    margin: 0 !important;
    background-color: var(--ligth-color);
}

.ui.fluid.vertical.menu .drop-filters {
    display: none;
    float: right;
    cursor: pointer;
}

.ui.fluid.vertical.menu .drop-filters:hover {
    color: var(--active-color);
}

.ui.fluid.vertical.menu .item.header:not(.category) {
    margin: 0 !important;
    padding: 10px 0 !important;
    font-size: 1.1em !important;
    font-family: var(--lato) !important;
    font-weight: 700;
    letter-spacing: 2px;
}

.ui.fluid.vertical.menu .item {
    background-color: inherit;
}

.ui.fluid.vertical.menu a {
    font-style: italic;
    font-size: 1em;
    color: var(--active-color) !important;
}

.ui.fluid.vertical.menu legend {
    display: block !important;
    padding: 3px 7px !important;
    height: auto;
    border-left: 1px solid var(--ligth-color);
    border-bottom: 1px solid var(--ligth-color);
}

.ui.fluid.vertical.menu .expendable:not(.active) legend {
    height: 140px;
    border-left: 1px solid var(--bg-light-color);
    border-bottom: 1px solid var(--active-color);
    border-bottom-left-radius: 5px;
    overflow-y: hidden;
}

.ui.fluid.vertical.menu .expendable span.expend {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    line-height: 24px;
    transform: rotate(0);
    transition: transform 300ms ease-in;
    color: var(--active-color);
    cursor: pointer;
}

.ui.fluid.vertical.menu .expendable.active span.expend {
    transform: rotate(-45deg);
    transition: transform 300ms ease-in;
}

.ui.fluid.vertical.menu legend.reset-filter {
    margin-top: 15px !important;
}

.ui.fluid.vertical.menu a.reset {
    margin-top: 10px;
}

.ui.fluid.vertical.menu legend .attribute-row {
    position: relative;
    padding: 10px 0 5px 0 !important;
    border-radius: 6px;
    /*font-style: italic;*/
    font-size: .9em;
    text-transform: uppercase;
}

.ui.fluid.vertical.menu legend .attribute-row:before {
    display: block;
    display: none;
    content: "•";
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: transparent;
}

.ui.fluid.vertical.menu legend label {
    display: inline-block;
    width: 100%;
    margin: 0 !important;
    padding: 0 0 5px 0 !important;
    font-size: .9em !important;
}

[data-route="sylius_shop_product_index"] .ui.fluid.vertical.menu .item:not(.header) ,
[data-route="app_product_offer_index"] .ui.fluid.vertical.menu .item:not(.header) {
    padding: 5px 0 5px 20px !important
}

[data-route="sylius_shop_product_index"] .ui.fluid.vertical.menu .item:not(.header):before ,
[data-route="app_product_offer_index"] .ui.fluid.vertical.menu .item:not(.header):before {
    left: 2px;
}

[data-route="app_product_offer_index"] .ui.fluid.vertical.menu .item.header {
    border-bottom: 2px solid #eee;
}

.ui.fluid.vertical.menu .category {
    margin: 0 0 10px 0 !important;
    padding: 10px 0 !important;
    font-size: 1.1em !important;
    font-weight: 700;
    font-style: italic;
    font-family: var(--cinzel) !important;
    letter-spacing: 2px;
}

[data-route="sylius_shop_product_index"] .ui.grid .twelve.wide.column {
    position: relative;
    top: -55px;
}

[data-route="sylius_shop_product_index"] .ui.grid .ui.small.header {
    position: relative;
    z-index: 10;
}


/****** taxon.product.grid ******/
.ui.clearing.hidden.divider {
    margin-bottom: 30px;
}

.ui.right.floated.small.header {
    position: relative;
    top: 22px;
    font-style: italic;
    font-size: .9em;
}

.ui.right.floated.small.header .content {
    margin-left: 15px;
}

.ui.right.floated.small.header * {
    font-weight: normal !important;
}

#products .ui.fluid.card {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    /*background-color: var(--ligth-color) !important;*/
}

#products .blurring.dimmable.image {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 360px;
    max-width: 320px;
    padding: 10px;
}

#products .blurring.dimmable.image img {
    width: auto;
    max-height: 320px;
    margin: 10px;
    object-fit: cover;
}

#products .ui.fluid.card .spacer {
    position: absolute;
    bottom: 0;
    display: block;
    width: 20px;
    height: 0;
    align-self: center;
    border-bottom: 2px solid #cdcdcd;
    border-radius: 3px;
    will-change: width;
    transition: width 150ms ease-in-out;
}

#products .blurring.dimmable.image:hover > .spacer {
    width: 100%;
    transition: width 200ms ease-in;
}

#products .card .image, .card .image .dimmer {
    border-radius: 5px !important;
}

#products .blurring.dimmable > .dimmer {
    background-color: rgba(0, 0, 0, 0.2);
}

#products .ui.fluid.card .content {
    display: flex !important;
    flex-direction: column;
    border-top: none !important;
}

#products .ui.fluid.card .content #appliedPromotions,
#products .ui.fluid.card .content .variant-name,
#products .ui.fluid.card .content .ui.horizontal.list {
    width: 100%;
    text-align: center;
}

#products .ui.fluid.card .content .variant-name,
#products .ui.fluid.card .content .ui.horizontal.divided.list {
    margin-top: auto;
}

#products .ui.fluid.card .content a.header {
    font-family: var(--lato) !important;
    font-weight: 400;
    /*font-style: italic;*/
    text-align: center;
}

#products .ui.fluid.card .content a > * {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 1.1em;
    /*font-family: inherit !important;*/
}

#products .ui.fluid.card .content a .subTitle {
    font-size: 1em;
}

#products .ui.fluid.card .content a .vintage {
    font-size: .8em;
}

#products .ui.fluid.card .content #appliedPromotions > div {
    margin-top: 5px;
}

#products .ui.fluid.card .content .row-prices {
    position: relative;
    width: 100%;
}

#products .ui.fluid.card .content .row-prices .sylius-product-price {
    width: 100%;
    text-align: center;
    font-size: 1em;
}

#products .ui.fluid.card .content .row-prices .sylius-product-original-price {
    position: absolute;
    /*left: 10px;*/
    left: 0;
    top: 3px;
    width: auto;
    margin-right: 10px;
    font-size: .9em;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.87);
}

#products form select {
    width: 100%;
    padding: 7px !important;
    margin: 4px 0;
    font-size: .9em;
    text-align: center;
}

#products form button {
    width: 100%;
    margin: 0;
}



/* NOTE remove paginationLimits
.ui.dropdown.sylius-paginate {
    display: none !important;
}
*/



@media (max-width: 1200px) {
    .ui.grid > .row > [class*="four wide"].column,
    .ui.grid > .column.row > [class*="four wide"].column,
    .ui.grid > [class*="four wide"].column,
    .ui.column.grid > [class*="four wide"].column {
        width: 30% !important;
    }

    .ui.grid > .row > [class*="twelve wide"].column,
    .ui.grid > .column.row > [class*="twelve wide"].column,
    .ui.grid > [class*="twelve wide"].column,
    .ui.column.grid > [class*="twelve wide"].column {
        width: 70% !important;
    }
}

@media (max-width: 990px) {
    .ui.grid > .row > [class*="four wide"].column,
    .ui.grid > .column.row > [class*="four wide"].column,
    .ui.grid > [class*="four wide"].column,
    .ui.column.grid > [class*="four wide"].column {
        width: 100% !important;
    }

    .ui.grid > .row > [class*="twelve wide"].column,
    .ui.grid > .column.row > [class*="twelve wide"].column,
    .ui.grid > [class*="twelve wide"].column,
    .ui.column.grid > [class*="twelve wide"].column {
        width: 100% !important;
    }

    .ui.fluid.vertical.menu form {
        display: flex !important;
        flex-wrap: wrap;
    }

    .ui.fluid.vertical.menu form > * {
        width: calc(100% / 3);
    }

    .ui.fluid.vertical.menu form .header.item,
    .ui.fluid.vertical.menu form legend:last-child {
        width: 100%;
    }


    [data-route="sylius_shop_product_index"] .ui.grid .twelve.wide.column {
        position: relative;
        top: -50px;
    }

    [data-route="sylius_shop_product_index"] .ui.grid .ui.small.header {
        float: unset !important;
        position: relative;
        top: 40px;
    }

    [data-route="sylius_shop_product_index"] .ui.grid .ui.small.header .content {
        margin-left: unset;
    }
}

@media (max-width: 768px) {
    div.ui.monster.section.bg-img h1 {
        border-bottom: none !important;
        line-height: 45px !important;
        text-align: center;
    }

    div.ui.monster.section.bg-img .sub.header {
        max-width: 90%;
    }

    .ui.fluid.vertical.menu {
        padding: 10px;
    }

    .ui.fluid.vertical.menu form > * {
        width: calc(100% / 2 - 8px);
        margin: 0 2px;
    }

    .ui.fluid.vertical.menu.filters {
        height: 48px;
        overflow: hidden;
    }

    .ui.fluid.vertical.menu.filters.dropped {
        height: auto;
    }

    .ui.fluid.vertical.menu .drop-filters {
        display: block;
    }

    .ui.fluid.vertical.menu legend label {
        padding-left: 5px !important;
    }
}