@charset 'utf-8';
/*
 * name:category.css
 * author:sovanda nulo
*/

/* category
------------------------------------------------ */

#pages.category .wrap { max-width: 130em; }
#pages.category .pages--desc { max-width: 45em; }

.category__filter { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 4em; position: relative; z-index: 10; }
.category__filter--block { display: flex; flex-wrap: wrap; align-items: center; position: relative; }
.category__filter--title { font-size: 1.6em; }
.category__filter--lists { margin-left: 3em; position: relative; }
.category__filter--text { font-size: 1.6em; }
.category__filter--click { cursor: pointer; position: relative; }
.category__filter--click:after { content: ''; display: inline-block; vertical-align: .05em; margin-left: .33em; width: .77em; height: .5em; background-image: url(../../img/share/icon-arrow2.png); background-repeat: no-repeat; background-size: 100% 100%; }

.category__filter--links { font-size: 1.6em; position: absolute; top: calc( 100% - 1em ); left: 0; min-width: 16.53em; width: 100%; opacity: 0; visibility: hidden; transition: linear .2s; box-shadow: 0 .3em 1em rgba(68, 68, 68, .2); z-index: 2; }
.category__filter--links ul { padding: 1em 0; display: block; background: #23350D; }
.category__filter--links ul li { line-height: initial; }
.category__filter--links ul li a { padding: 1em 1.25em; display: block; color: #fff; }
.category__filter--links ul li .category__filter--links { top: 0; left: calc( 100% - 1em ); padding-left: 1px; padding-top: 0; }
.category__filter--links ul > li a:hover { color: #C2B280; }
.category__filter--lists.on .category__filter--links { top: calc( 100% + 1em ); opacity: 1; visibility: initial; }
.category__filter--lists.on .category__filter--click:after { transform: rotate(180deg); }

.category__filter--form { min-width: 30em; width: 100%; padding: 3.2em 2em; background-color: #23350D; color: #fff; box-shadow: 0 .3em 1em rgba(68, 68, 68, .2); z-index: 2; transition: linear .2s; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: column; position: absolute; top: calc( 100% - 1em ); left: 0; opacity: 0; visibility: hidden; }
.category__filter--form:hover { box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.2); }
.category__filter--priceBlock { display: flex; flex-direction: column; width: 100%; }
.category__filter--priceBlock dt { margin-bottom: 0.25em; font-weight: bold; font-size: 1.6em; }
.category__filter--priceBlock input { font-family: inherit; font-size: 1.6em; padding: 0 1em; border: none; border-radius: var(--border-radius); outline: none; background-color: transparent; background-color: #f5f5f5; color: #000; height: 2.5em; width: 100%; border: none; appearance: none; box-shadow: none; box-sizing: border-box; }
.category__filter--priceBlock input::placeholder { color: #999; }
.category__filter--priceSearch { font-size: 1.6em; background-color: #C2B280; margin-top: 1.25em; display: block; height: 2.5em; width: 100%; border-radius: var(--border-radius); color: #fff; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; width: 100%; border: none; appearance: none; box-shadow: none; box-sizing: border-box; }
.category__filter--priceSearch:hover { background-color: #978245; }
.category__filter--lists.on .category__filter--form { top: calc( 100% + 1.6em ); opacity: 1; visibility: initial; }

    @media screen and (max-width: 768px) {
        .category__filter { display: block; margin-bottom: 2em; }
        .category__filter--block { display: block; }
        .category__filter--title { font-size: 1.8em; margin-bottom: .75em; }
        .category__filter--lists { margin: 0; }
        .category__filter--text { font-size: 1.5em; padding: .75em 0; border-top: 1px dashed; }
        .category__filter--click { display: block; }
        .category__filter--click:after { position: absolute; right: 1em; top: calc( 50% - .25em ); }

        .category__filter--form,
        .category__filter--links { min-width: initial; }
        .category__filter--lists.on .category__filter--form,
        .category__filter--lists.on .category__filter--links { top: calc( 100% + 1px ); }

        .category__filter--links { font-size: 1.5em; }
    }