/* id="ALMUNIR_ALJAZEERA_CATEGORY_FILTERS_V1" */ /* ============================================================ AL-MUNIR CATEGORY PAGE Al Jazeera inspired desktop catalog ============================================================ */ @media (min-width: 992px) { /* ======================================================== PAGE ======================================================== */ html body .lx-category-catalog { padding-top: 28px !important; background: #FFFFFF !important; } html body .lx-category-catalog > .container { width: min( calc(100% - 48px), 1440px ) !important; max-width: 1440px !important; padding-left: 0 !important; padding-right: 0 !important; } /* ======================================================== CATEGORY HEADER ======================================================== */ html body .lx-category-catalog .lx-catalog-hero { padding: 14px 0 28px !important; border-bottom: 1px solid #E9E9E9 !important; } html body .lx-category-catalog .lx-catalog-eyebrow { display: none !important; } html body .lx-category-catalog .lx-catalog-hero__row { display: block !important; } html body .lx-category-catalog .lx-catalog-total { display: none !important; } html body .lx-category-catalog .lx-catalog-hero h1 { margin: 0 0 8px !important; color: #181818 !important; font-size: 34px !important; font-weight: 700 !important; } html body .lx-category-catalog .lx-catalog-hero p { margin: 0 !important; color: #8B8B8B !important; font-size: 13px !important; } /* ======================================================== HORIZONTAL FILTER BAR ======================================================== */ html body .alm-category-filterbar { display: flex !important; min-height: 78px !important; padding: 18px 0 !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 34px !important; border-bottom: 1px solid #EAEAEA !important; background: #FFFFFF !important; } html body .alm-category-filterbar__form { display: flex !important; align-items: flex-end !important; gap: 34px !important; margin: 0 !important; } /* ======================================================== EACH FILTER ======================================================== */ html body .alm-category-filter-control { position: relative !important; display: flex !important; min-width: 145px !important; margin: 0 !important; flex-direction: column !important; gap: 5px !important; } html body .alm-category-filter-control > span { display: block !important; color: #999999 !important; font-size: 10px !important; font-weight: 400 !important; } html body .alm-category-filter-control select { width: 100% !important; height: 34px !important; padding: 0 0 6px !important; border: 0 !important; border-bottom: 1px solid #1B1B1B !important; border-radius: 0 !important; outline: none !important; background-color: transparent !important; color: #222222 !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; box-shadow: none !important; } html body .alm-category-filter-control select:focus { border-bottom-color: #654320 !important; } /* ======================================================== RESET ======================================================== */ html body .alm-category-filter-reset { display: inline-flex !important; min-height: 34px !important; padding: 0 4px 6px !important; align-items: flex-end !important; border-bottom: 1px solid #654320 !important; color: #654320 !important; font-size: 11px !important; font-weight: 600 !important; text-decoration: none !important; } /* ======================================================== REMOVE OLD DESKTOP SIDEBAR ======================================================== */ html body .lx-category-catalog .lx-category-filter-sidebar { display: none !important; } html body .lx-category-catalog .lx-catalog-shell { display: block !important; padding-top: 24px !important; } html body .lx-category-catalog .lx-catalog-main { width: 100% !important; max-width: none !important; } /* ======================================================== PRODUCT COUNT ROW ======================================================== */ html body .lx-category-catalog .lx-catalog-toolbar { min-height: 42px !important; margin: 0 0 24px !important; padding: 0 0 12px !important; border-bottom: 1px solid #EEEEEE !important; } html body .lx-category-catalog .lx-catalog-toolbar__count { margin-inline-start: auto !important; } html body .lx-category-catalog .lx-catalog-toolbar__count strong { font-size: 13px !important; } html body .lx-category-catalog .lx-catalog-toolbar__count span { font-size: 11px !important; } html body .lx-category-catalog .lx-catalog-toolbar__actions { display: none !important; } /* ======================================================== 4 PRODUCT CARDS DESKTOP ======================================================== */ html body:not(.store-display-list) .lx-category-catalog .lx-catalog-grid { display: grid !important; grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; column-gap: 22px !important; row-gap: 46px !important; } html body:not(.store-display-list) .lx-category-catalog .lx-catalog-grid > .lx-col { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } } /* ============================================================ LAPTOP ============================================================ */ @media (min-width: 992px) and (max-width: 1199px) { html body .alm-category-filterbar, html body .alm-category-filterbar__form { gap: 18px !important; } html body .alm-category-filter-control { min-width: 125px !important; } html body:not(.store-display-list) .lx-category-catalog .lx-catalog-grid { grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; } } /* ============================================================ MOBILE Keep the existing working filter drawer. ============================================================ */ @media (max-width: 991px) { html body .alm-category-filterbar { display: none !important; } html body .lx-category-catalog .lx-catalog-toolbar { display: flex !important; margin-top: 0 !important; } html body .lx-category-catalog .lx-catalog-filter-mobile { display: inline-flex !important; border: 1px solid #DADADA !important; background: #FFFFFF !important; color: #654320 !important; } }