/*
Theme Name: VapeSociety2.0
Template: flatsome
Theme URI: http://flatsome.uxthemes.com/
Author: UX-Themes
Author URI: http://www.uxthemes.com/
Description: Multi-Purpose Responsive WooCommerce Theme
Version: 3.8.4
Text Domain: flatsome
License: http://themeforest.net/licenses
License URI: http://themeforest.net/licenses
*/

/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/

/* Keep desktop controls in Flatsome's existing layout. */
.vss-mobile-catalog-controls{display:contents}

/* Mobile/tablet Filter + Sort controls. */
@media screen and (max-width:849px){
.vss-mobile-catalog-controls{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;column-gap:14px;row-gap:8px;width:100%;margin-top:12px}
.vss-mobile-catalog-controls>.vss-header-product-filters,.vss-mobile-catalog-controls>.vss-native-result-count{display:none!important}
.vss-mobile-catalog-controls>.category-filtering{display:block!important;order:1;align-self:flex-start;flex:0 0 calc(50% - 7px);width:calc(50% - 7px)!important;max-width:calc(50% - 7px);height:48px!important;margin:0!important;padding:0!important}
.vss-mobile-catalog-controls .filter-button{display:flex!important;align-items:center;justify-content:flex-start;gap:6px;width:100%;height:48px;min-height:48px;margin:0!important;padding:0 8px 0 16%;border:1px solid #c8c8c8;border-radius:5px;background:#fff;color:#222!important;line-height:1;text-transform:none!important}
.vss-mobile-catalog-controls .filter-button strong{font-size:14px;font-weight:600;white-space:nowrap;text-transform:capitalize!important}
.vss-mobile-catalog-controls .filter-button i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:19px;line-height:1;flex:0 0 20px}
.vss-mobile-catalog-controls>.vss-native-catalog-ordering{position:relative;display:block!important;order:2;align-self:flex-start;flex:0 0 calc(50% - 7px);width:calc(50% - 7px)!important;max-width:calc(50% - 7px);height:48px!important;min-width:0;margin:0!important;padding:0!important}
.vss-mobile-catalog-controls .woocommerce-ordering{display:block;width:100%;height:48px;margin:0!important;padding:0!important}
.vss-mobile-catalog-controls .orderby{-webkit-appearance:none;appearance:none;width:100%!important;max-width:none!important;height:48px!important;margin:0!important;padding:0 8px 0 calc(16% + 24px)!important;border:1px solid #c8c8c8!important;border-radius:5px!important;background:#fff!important;box-shadow:none!important;color:#222!important;font-size:14px!important;font-weight:600;line-height:48px;text-overflow:ellipsis;text-transform:none!important;white-space:nowrap;cursor:pointer}
.vss-mobile-catalog-controls>.vss-native-catalog-ordering::before{content:"\21C5";position:absolute;top:0;left:16%;z-index:1;display:flex;align-items:center;justify-content:center;width:20px;height:48px;color:#222;font-size:19px;font-weight:900;line-height:1;-webkit-text-stroke:.35px currentColor;text-shadow:.35px 0 currentColor,-.35px 0 currentColor;pointer-events:none}
.vss-mobile-catalog-controls>.vss-clear-brand-filter{order:3;flex:0 0 100%;width:100%;margin:14px 0 0!important;text-align:center}
}
@media screen and (max-width:500px){
.vss-mobile-catalog-controls .filter-button{padding-left:4%}
.vss-mobile-catalog-controls .filter-button strong,.vss-mobile-catalog-controls .orderby{font-size:13px!important}
.vss-mobile-catalog-controls .orderby{padding-left:calc(4% + 22px)!important}
.vss-mobile-catalog-controls>.vss-native-catalog-ordering::before{left:4%}
}
@media screen and (max-width:350px){
.vss-mobile-catalog-controls{column-gap:8px}
.vss-mobile-catalog-controls>.category-filtering,.vss-mobile-catalog-controls>.vss-native-catalog-ordering{flex-basis:calc(50% - 4px);width:calc(50% - 4px)!important;max-width:calc(50% - 4px)}
.vss-mobile-catalog-controls .filter-button{padding-right:4px;padding-left:4%}
.vss-mobile-catalog-controls .filter-button strong,.vss-mobile-catalog-controls .orderby{font-size:11px!important}
.vss-mobile-catalog-controls .orderby{padding-left:calc(4% + 22px)!important}
.vss-mobile-catalog-controls>.vss-native-catalog-ordering::before{left:4%;width:20px;font-size:18px}
}