/* =========================================================
   1. GLOBAL HIDES & RESET
   ========================================================= */
.hp-listing__created-date.hp-listing__date.hp-meta,
.hp-listing-category__description,
.hp-vendor__details,
#infinite-footer, 
#zip-ai-sidebar, 
#zip-ai-sidebar-admin-trigger {
    display: none !important;
}

/* Disable automatic capitalization for headings */
h1, h2, h3,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title {
    text-transform: none !important;
}

/* =========================================================
   2. SHARED CARD STYLES (Categories, Listings & Home Grid)
   ========================================================= */
.hp-grid__item.hp-col-sm-4.hp-col-xs-12,
.hp-listing--view-block,
.hp-listing-view-block,
.hp-listing--view-grid,
.home .hp-listing-categories .hp-grid__item.hp-col-sm-6.hp-col-xs-12 {
    background: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.hp-grid__item.hp-col-sm-4.hp-col-xs-12:hover,
.hp-listing--view-block:hover,
.hp-listing-view-block:hover,
.hp-listing--view-grid:hover,
.home .hp-listing-categories .hp-grid__item.hp-col-sm-6.hp-col-xs-12:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
    transform: translateY(-4px);
}

/* =========================================================
   3. CATEGORY & LISTING TEXT/CONTENT LAYOUT
   ========================================================= */
.hp-listing-category--view-block {
    text-align: center !important;
}

.hp-listing-category--view-block img {
    max-width: 120px !important;
    height: auto !important;
    margin: 0 auto 12px auto !important;
}

.hp-listing-category__name {
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
}

.hp-listing__title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
}

.hp-listing__attributes--ternary .hp-listing__attribute {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
}

/* Flex stacking for listing blocks */
.hp-listing--view-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.hp-listing__footer {
    margin-top: auto !important;
    padding-top: 4px !important;
}

/* =========================================================
   4. IMAGE & GALLERY FIXES (Slick Slider & Flickering)
   ========================================================= */
.hp-listing__image:not(.slick-initialized),
.hp-listing__image-slider:not(.slick-initialized) {
    visibility: hidden !important;
}

.hp-listing__image.slick-initialized,
.hp-listing__image-slider.slick-initialized {
    visibility: visible !important;
}

.hp-listing__image img,
.hp-listing__image-slider img,
.hp-listing__image-slider .slick-track,
.hp-listing__image-slider .slick-slide {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
}

.hp-listing--view-block .hp-listing__image {
    max-height: 230px !important;
    overflow: hidden !important;
}

.hp-listing--view-block .hp-listing__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* =========================================================
   5. SINGLE LISTING PAGE & SIDEBAR STYLES
   ========================================================= */
.hp-page.site-main {
    background-color: #cfeacc !important;
    padding: 20px !important;
    border-radius: 8px !important;
}

.hp-page__sidebar {
    height: 100% !important;
}

.hp-form--listing-filter {
    background-color: #cfeacc !important;
    min-height: 100vh !important;
    padding-bottom: 100px !important;
}

/* Single listing slider defaults */
.hp-listing--view-page .hp-listing__images-slider,
.hp-listing--view-page .hp-listing__images-slider .slick-list,
.hp-listing--view-page .hp-listing__images-slider .slick-track,
.hp-listing--view-page .hp-listing__images-slider .slick-slide {
    height: 520px !important;
    background: transparent !important;
}

.hp-listing--view-page .hp-listing__images-slider .slick-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hp-listing--view-page .hp-listing__images-slider img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Sticky sidebar reset on single listings */
.single-hp_listing aside.hp-page__sidebar,
.single-hp_listing aside.hp-page__sidebar *,
.single-hp_listing .hp-listing__sidebar,
.single-hp_listing .hp-listing__sidebar *,
.hp-page__sidebar[data-component="sticky"],
.hp-page__sidebar.is-sticky {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
}

/* =========================================================
   6. BRAND FILTER & BUTTONS
   ========================================================= */
.hp-brand-filter-search {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 8px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.hp-brand-filter-show-more {
    background-color: #319772 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: 10px 0 15px !important;
    transition: background-color 0.2s ease, opacity 0.2s ease !important;
    text-align: center !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
}

.hp-brand-filter-show-more:hover,
.hp-brand-filter-show-more:focus,
.hp-brand-filter-show-more:active {
    background-color: #287d5e !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* =========================================================
   7. RESPONSIVE MEDIA QUERIES
   ========================================================= */

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .hp-grid__item.hp-col-sm-6.hp-col-xs-12 {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
    aside.hp-page__sidebar.hp-col-sm-4.hp-col-xs-12 {
        width: 20% !important;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
    div.hp-page__content.hp-col-sm-8.hp-col-xs-12 {
        width: 80% !important;
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }
    .home .hp-listing-categories .hp-grid__item.hp-col-sm-6.hp-col-xs-12 {
        width: calc(33.333% - 24px) !important;
        flex: 0 0 calc(33.333% - 24px) !important;
        max-width: calc(33.333% - 24px) !important;
        margin: 0 12px 30px !important;
    }
}

/* Category grid (768px and up) */
@media (min-width: 768px) {
    .hp-listing-categories .hp-col-sm-4 {
        width: calc(25% - 24px) !important;
        flex: 0 0 calc(25% - 24px) !important;
        max-width: calc(25% - 24px) !important;
        margin: 0 12px 30px !important;
    }
}

/* Tablets (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hp-grid__item.hp-col-sm-6.hp-col-xs-12 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .home .hp-listing-categories .hp-grid__item.hp-col-sm-6.hp-col-xs-12 {
        width: calc(50% - 24px) !important;
        flex: 0 0 calc(50% - 24px) !important;
        max-width: calc(50% - 24px) !important;
        margin: 0 12px 30px !important;
    }
}

/* Tablet - Single Listing Slider Height */
@media (max-width: 1024px) {
    .hp-listing--view-page .hp-listing__images-slider,
    .hp-listing--view-page .hp-listing__images-slider .slick-list,
    .hp-listing--view-page .hp-listing__images-slider .slick-track,
    .hp-listing--view-page .hp-listing__images-slider .slick-slide {
        height: 460px !important;
    }
}

/* Intermediate Category Title Breakpoints */
@media (max-width: 1100px) {
    .hp-listing-category__name { font-size: 18px !important; }
}
@media (max-width: 900px) {
    .hp-listing-category__name { font-size: 16px !important; }
}
@media (max-width: 700px) {
    .hp-listing-category__name { font-size: 14px !important; }
}

/* Mobile & Small Windows (up to 768px) */
@media (max-width: 768px) {
    h1, h2, h3, .hp-listing__title {
        font-size: 18px !important;
    }
    .hp-listing__attributes,
    .hp-listing__attribute {
        font-size: 12px !important;
    }
    .hp-listing__footer {
        font-size: 14px !important;
    }
    .hp-listing-category--view-block img {
        max-width: 200px !important;
        height: auto !important;
    }
    .hp-listing--view-block {
        padding: 5px !important;
    }
    .hp-listing__header,
    .hp-listing__title {
        margin-top: 5px !important;
        margin-bottom: 4px !important;
    }
    .hp-listing--view-page .hp-listing__images-slider,
    .hp-listing--view-page .hp-listing__images-slider .slick-list,
    .hp-listing--view-page .hp-listing__images-slider .slick-track,
    .hp-listing--view-page .hp-listing__images-slider .slick-slide {
        height: 420px !important;
    }
}

/* Mobile Columns (up to 767px) */
@media (max-width: 767px) {
    .hp-grid__item.hp-col-sm-6.hp-col-xs-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .home .hp-listing-categories .hp-grid__item.hp-col-sm-6.hp-col-xs-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;
    }
}
/* =========================
   NATIVE SELECT – SORTING ONLY
   ========================= */

/* Make the real <select> for sorting visible & clickable */
.hp-form__field--select select[name="_sort"] {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  pointer-events: auto !important;
}

/* Hide ONLY the Select2 widget for the sorting field */
.hp-form__field--select select[name="_sort"] + .select2 {
  display: none !important;
}