/* Header */
.headerList { margin-bottom: 20px; }
.headerList .class-header_sCat { width: 100% !important; height: auto !important; }
.headerList .class-header_sCat .header_sCat { width: 100% !important; height: auto !important; position: relative !important; }
.headerList .class-header_sCat .header_sCat > div { padding: 10px; }
.headerList .class-header_sCat .header_sCat > div,
.headerList > img { width: 100%; }
.headerList .hdr_lst_ttl { font-size: 25px; padding: 15px 0 15px 40px; margin: 0; line-height: 54px; font-family: 'Quicksand'; }

.headerList .headerDesc .headerDesc_short > p, 
.headerSearch .headerDesc .headerDesc_short > p { display: inline; }
.headerList .headerDesc .headerDesc_short .dsp_full, 
.headerSearch .headerDesc .headerDesc_short .dsp_full { margin: 0 0 0 5px; }
.headerList .headerDesc .headerDesc_short .dsp_full.moins, 
.headerSearch .headerDesc .headerDesc_short .dsp_full.moins { display: none; }
.headerList .headerDesc.full .dsp_full.plus, 
.headerSearch .headerDesc.full .dsp_full.plus { display: none; }
.headerList .headerDesc.full .dsp_full.moins, 
.headerSearch .headerDesc.full .dsp_full.moins { display: inline-block; }
.headerList .headerDesc .headerDesc_full, 
.headerSearch .headerDesc .headerDesc_full { height: 0; overflow: hidden; margin: 10px 0 0 0; }
.headerList .headerDesc .keywords, 
.headerSearch .headerDesc .keywords { padding: 30px 0 0 0; }

/* Filtres general */
aside.left { margin-top: 15px; }
aside.left .filters .mobActions { display: none; }
aside.left .filters .panel-heading { margin-bottom: 10px; border: 0; }
aside.left .filters .panel-heading .panel-title > a,
aside.left .filters .panel-heading .panel-title > a > h1 { padding: 0; font-size: 17px; }
aside.left .filters .panel-heading .panel-title > a > .fa { font-size: 16px; right: 0; top: 4px; }
aside.left .filters section > div { padding-bottom: 15px; }

/* Filtres Catégories / Types de produit */
aside.left .filters section.type > div > ul > li { margin: 0 0 10px 10px; }
aside.left .filters section.type > div > ul > li > a.typeName { border-bottom: 1px solid #000; font-size: 1.1em;  }
aside.left .filters section.type > div > ul > li > a { width: 90%; display: inline-block; transition: 0.3s color ease; }
aside.left .filters section.type > div > ul > li > a > h2 { display: inline; font-size: 1em; }
aside.left .filters section.type > div > ul > li > div { padding-left: 10px; }
aside.left .filters section.type div[data-filterParam] > ol { margin: 10px 0 0px 0;}
aside.left .filters section.type div[data-filterParam] > ol > li { margin: 0 0 10px 0;}
aside.left .filters section.type div[data-filterParam] > ol > li a { display: inline-block; vertical-align: middle; max-width: calc(100% - 30px); }
aside.left .filters section.type div[data-filterParam] > ol > li a > h3,
aside.left .filters section.type div[data-filterParam] > ol > li a > h2 { display: inline; font-size: 1em; }
aside.left .filters span.chk { vertical-align: middle; display: inline-block; position: relative; margin: 0 5px 0 0; }
aside.left .filters .filter.disabled { opacity: 0.3; cursor: default; }
aside.left .filters .filter.disabled a,
aside.left .filters .filter.disabled > span.chk { cursor: default; }
aside.left .filters .filter.disabled a:hover { color: inherit; }
aside.left .filters span.chk > .check { background-image: url(../../ximg/custom.png); background-position: -17px 0; display: block; width: 17px; height: 16px;}
aside.left .filters span.filter.btn.checked,
aside.left .filters .criteria li.selected span.btn.chk { color: #fff; }
aside.left .filters li.checked span.chk > .check,
aside.left .filters .criteria li.checked span.chk > .check {background-position: -17px -17px} 

/* Filtres Tailles */
aside.left .filters section.sizes span.filter { margin: 0 5px 5px 0; width: 46px; float: left; }
aside.left .filters .sizeGuid { clear: both; font-size: 0.9em; display: block; padding-top: 10px; }

/* Filtres Couleurs */
aside.left .filters li.chk { cursor: pointer; }	
aside.left .filters section.colors > div > ul > li .color { margin: 0 5px 5px 0; position: relative; display: inline-block; vertical-align: middle; width: 16px; height: 16px; position: relative; }
aside.left .filters section.colors > div > ul > li .color > img { width: 100%; display: block; }
aside.left .filters section.colors > div > ul > li span.color:after { font-family: "Fontawesome"; content: "\f00c"; line-height: 13px; font-size: 13px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; transition: all 0.2s ease; }
aside.left .filters section.colors > div > ul > li:not(.checked) span.color:after { opacity: 0; transform: scale(0); }
aside.left .filters section.colors > div > ul > li.checked span.color:after { opacity: 1; transform: scale(1); background-color: rgba(255,255,255,0.8); border: 1px solid #e1e1e1; }

/* Filtres Prix */
aside.left .filters section.price [data-filterParam="priceRange"] .sldp { margin: 60px 20px 10px 20px; }
aside.left .filters section.price [data-filterParam="priceRange"] .sldp > div > div > span { color: #666; font-size: 14px; margin: 0 0 0 -10px; }

/* Filtres Promos */
aside.left .filters section.price .chkPromo > label { vertical-align: top; max-width: calc(100% - 30px); font-size: 0.9em; }
aside.left .filters section.price .cbxPromo { overflow: hidden; height: 0; }
aside.left .filters section.price .cbxPromo > label { display: inline-block; vertical-align: middle; color: #666; font-size: 15px; width: 52%; margin: 0 3% 0 0; }
aside.left .filters section.price .cbxPromo > .btn-group { margin-top: 20px; }

/* Filtres Critères */
aside.left .filters section.criteria .filter { margin-bottom: 5px; }

/* Tri */
#prodList .sortBy { text-align: right; position: relative; z-index: 100; padding: 20px 0 10px;}
	#prodList .sortBy .sort { display: inline-block; vertical-align: middle; text-align: left; width: 35%; float: left; }

/* Pagination */
#prodList nav.pages { overflow: hidden; }
#prodList nav.pages.top { width: 65% !important; }
#prodList nav.pages.bottom { margin-bottom: 20px; }
#prodList nav.pages .pagination { margin: 0; }
/* Information sur les filtres activés */
#prodList .filterState { display: none; border-bottom:1px solid #000; border-top:1px solid #000; font-size:12px; padding:10px 40px 10px 10px; position:relative; width:100%; margin-bottom: 20px; }
	#prodList .filterState .closeBtn { display:block; margin: -9px 0 0; position:absolute; right:10px; top:50%; }
	
/* Produits */
#prodList .prods { position: relative; z-index: 1; text-align: left; }
#prodList .prods .prod { text-align: center; position: relative; padding-bottom: 15px; border: 1px solid transparent; border-radius: 5px; }
#prodList .prods .prod .img { position: relative; margin: 0 auto 10px; overflow: hidden; }
#prodList .prods .prod .img > a { display: block; width: 100%; }
#prodList .prods .prod .img > a span.picto { position: absolute; top: 10px; right: 10px; max-width: 50px; z-index: 10; }
#prodList .prods .prod .img > a span.picto > img { max-width: 100%; }
#prodList .prods .prod .img > a > img { position: relative; width: 100%; max-width: 100%; height: auto; }
#prodList .prods .prod .img > span.prev,
#prodList .prods .prod .img > span.next { position: absolute; top: 50%; margin: -10px 0 0 0; display: none; z-index: 10; cursor: pointer; }
#prodList .prods .prod .img > span.prev { left: 0; }
#prodList .prods .prod .img > span.next { right: 0; }
#prodList .prods .prod .img .prodInfos  { display: none; }
#prodList .prods .prod .img .prodInfos .sizes { position: absolute; bottom: 20px; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.7); text-align: center; border-width: 1px; border-style: solid; }
#prodList .prods .prod .img .prodInfos .sizes .lbl { display: block; margin: 3px 0; }
#prodList .prods .prod .img .prodInfos .sizes .sizesList { display: block; }
#prodList .prods .prod .img .prodInfos .sizes .Qbuy { margin: 5px 0; width: 90%; }
#prodList .prods .prod .infos { display: block; }
#prodList .prods .prod .name { font-size: 15px; text-align: center; display: block; margin: 0 auto 5px; height: 35px; overflow: hidden; color: #000; line-height: 1.2; }
#prodList .prods .prod .price > span:not(.best) { padding: 0; }
#prodList .prods .prod .price > .old { text-decoration: line-through; }
#prodList .prods .prod .availableColors { color: #666; font-size: 12px; text-decoration: underline; display: block; text-align: center; clear: both; height: 20px; }
#prodList .prods .prod > menu,
#prodList .prods .prod .QBuy { display: none; }
#prodList .prods .prod .img > menu { height: 10px; margin: 10px 0 0 0; }
#prodList .prods .prod .img > menu > a { display: inline-block; vertical-align: top; border-width: 1px; border-style: solid; border-radius: 10px; height: 10px; width: 10px; margin: 0 auto; transition: 0.3s background-color ease; }

/* Lazyload */
.lazyload,
.lazyloading { opacity: 0; }
.lazyloaded { opacity: 1; transition: opacity 200ms; }

/* Loader */
#loader_icon { width: 100px; }

/* ----- [TAB Portrait] ----- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
	/* Header */
	.headerList .class-header_sCat .header_sCat > div { max-height: 65px; }
	.headerList .hdr_lst_ttl { line-height: 1em; padding-top: 5px; padding-left: 20px; }
	
	/* Produits */
	#prodList .prods .prod .img > menu { display: block; }
	#prodList .prods .prod .price .best { padding: 0; font-size: 19px; }
	#prodList .prods .prod .price .best sup { font-size: 10px; padding: 0 0 0 1px; top: -.8em; }
	#prodList .prods .prod .price > span:not(.best) { font-size: 14px; }
	#prodList .prods .prod .price > span:not(.best) sup { font-size: 10px; padding: 0; }
}

/* ----- [MOB] ----- */
@media (max-width: 767px) {
	/* Header */
	.headerList .hdr_lst_ttl { font-size: 20px; line-height: initial; padding: 2px 0 2px 10px; }
	/* Filtres */
	aside.left .filters { height: 0; overflow: hidden; width: 100%; background-color: #FFF; min-width: 320px; margin: 0; }
	aside.left .filters.open { height: auto; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden; z-index: 9999; padding-top: 45px; }
	aside.left .filters.open .mobActions { display: block; position: relative; margin: 0 0 25px 0; }
	aside.left .filters.open .mobActions > menu { border-bottom: 1px solid #666; position: fixed; width: 100%; top: 0px; background-color: #fff; z-index: 100; padding: 10px 0; }
	aside.left .filters.open .mobActions > menu a { position: absolute; top: 10px; left: 10px; }
	aside.left .filters.open .mobActions > menu a.color4 { right: 10px; left: inherit; }
	aside.left .filters.open .mobActions > menu > strong { display: block; font-size: 20px; text-align: center; text-transform: none; margin: 0 auto; line-height: 34px; }
	aside.left .filters.open > .panel { margin: 0 15px; }
	aside.left .filters section.type > div > ul > li > div > ol > li a > h3,
	aside.left .filters section.type > div > ul > li > div > ol > li a > span { font-size: 0.9em; }
	/* Annuler filtres */
	menu[data-filterparam='resetAll'] > a { margin-bottom: 10px; }
	/* Tri */
	#prodList .sortBy .sort { width: 100%; }
	/* Pagination */
	#prodList nav.pages.top { width: 100% !important; margin: 20px 0 0 0; }
	/* Produits */
	#prodList .prods .prod .img > span.picto img { width: 30px; }
	#prodList .prods .prod .img > menu { display: block; }
	#prodList .prods .prod .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* Hauteur du conteneur des images produits */
/* ----- [MOB Paysage] ----- */
@media (max-width: 767px) and (orientation : landscape) {
	#prodList .prods [data-_="prod"] { min-height: 450px; }
	#prodList .prods [data-_="prod"] .img > a { min-height: 321px; }
}
/* ----- [MOB Portrait] ----- */
@media (max-width: 767px) and (orientation : portrait) {
	#prodList .prods [data-_="prod"] { min-height: 290px; }
	#prodList .prods [data-_="prod"] .img > a { min-height: 160px; }
}
/* ----- [TAB Portrait] ----- */
@media (min-width: 768px) { 
	#prodList .prods [data-_="prod"] { min-height: 255px; }
	#prodList .prods [data-_="prod"] .img > a { min-height: 125px; }
}
/* ----- [DTP] ----- */
@media (min-width: 1200px) {
	#prodList .prods [data-_="prod"] { min-height: 385px; }
	#prodList .prods [data-_="prod"] .img > a { min-height: 250px; }
}