/* =========================
   1. HIDE CREATED DATE
   ========================= */
.hp-listing__created-date.hp-listing__date.hp-meta {
    display: none !important;
}


/* =========================
   2. CATEGORY GRID & CARDS
   ========================= */

/* 4 categories per row on desktop, with gaps */
@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;
    }
}

/* Category cards appearance (box, shadow, hover) */
.hp-grid__item.hp-col-sm-4.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 {
    box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
    transform: translateY(-4px);
}

/* Center content in category card */
.hp-listing-category--view-block {
    text-align: center !important;
}

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

/* Category title: wrap nicely, keep words intact, no "..." */
.hp-listing-category__name {
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: normal !important;        /* allow wrapping */
    word-break: normal !important;         /* don't break inside words */
    overflow-wrap: break-word !important;  /* wrap between words */
    hyphens: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
}

/* Hide category description text under the title */
.hp-listing-category__description {
    display: none !important;
}

/* Category title responsive sizes */
@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;
    }
}


/* =========================
   3. LISTING CARD CONTENT
   ========================= */

.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;
}

/* Make listing card stack: image on top, details, price at bottom */
.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. LAYOUT (SIDEBAR + GRID)
   ========================= */

@media (min-width: 1024px) {
    /* 3 listings per row on desktop */
    .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;
    }

    /* Sidebar narrower, listings wider */
    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;
    }
}

/* 2 listings per row on tablets */
@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;
    }
}

/* 1 listing per row on phones */
@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;
    }
}


/* =========================
   5. SMALL WINDOW SCALING
   ========================= */

@media (max-width: 768px) {
    /* Reduce big headings + listing title */
    h1, h2, h3, .hp-listing__title {
        font-size: 18px !important;
    }

    /* Listing attributes */
    .hp-listing__attributes,
    .hp-listing__attribute {
        font-size: 12px !important;
    }

    /* Price */
    .hp-listing__footer {
        font-size: 14px !important;
    }

    /* Category images a bit smaller */
    .hp-listing-category__view-block img {
        max-width: 200px !important;
        height: auto !important;
    }

    /* Less padding in listing cards */
    .hp-listing__view-block {
        padding: 5px !important;
    }

    .hp-listing__header,
    .hp-listing__title {
        margin-top: 5px !important;
        margin-bottom: 4px !important;
    }
}


/* =========================
   6. GALLERY / IMAGE FIXES
   (no stacked images flash, no flicker)
   ========================= */

/* Hide image area & slider until Slick finishes initializing */
.hp-listing__image:not(.slick-initialized),
.hp-listing__image-slider:not(.slick-initialized) {
    visibility: hidden !important;
}

/* Show once Slick is ready */
.hp-listing__image.slick-initialized,
.hp-listing__image-slider.slick-initialized {
    visibility: visible !important;
}

/* Remove any fade/animation that causes flicker */
.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;
}

/* Same height for all listing images, whole photo visible */
.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;
}


/* =========================
   7. LISTING CARD STYLE (like categories)
   ========================= */

.hp-listing--view-block,
.hp-listing-view-block,
.hp-listing--view-grid {
    background: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 12px !important;
    padding: 20px !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-listing--view-block:hover,
.hp-listing-view-block:hover,
.hp-listing--view-grid:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
    transform: translateY(-4px);
}


/* =========================
   8. SINGLE LISTING PAGE BG + IMAGE HEIGHT
   ========================= */

.hp-page.site-main {
    background-color: #cfeacc !important;  /* light green */
    padding: 20px !important;
    border-radius: 8px !important;
}


/* =========================
   SINGLE LISTING PAGE – UNIFORM MAIN IMAGE SIZE
   ========================= */

/* DESKTOP (default) */
.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;
}

/* Center image inside each slide */
.hp-listing--view-page .hp-listing__images-slider .slick-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Image always fits inside same box */
.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;
}

/* TABLET */
@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;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .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;
  }
}


/* Make entire slider background transparent on single listing page */
.hp-listing--view-page .hp-listing__images-slider,
.hp-listing--view-page .hp-listing__images-slider * {
    background: transparent !important;
}


/* =========================
   9. HOME PAGE – PARENT CATEGORY GRID
   ========================= */

/* Home page category cards (2-column Elementor grid base style) */
.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;
}

/* Hover effect on HOME only */
.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);
}

/* Home – 3 per row on desktop */
@media (min-width: 1024px) {
  .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;
  }
}

/* Home – 2 per row on tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .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;
  }
}

/* Home – 1 per row on mobile */
@media (max-width: 767px) {
  .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;
  }
}




/* =========================
   11. HIDE VENDOR DETAILS ON SINGLE LISTING
   ========================= */

.hp-vendor__details {
    display: none !important;
}

/* SINGLE LISTING – completely disable sticky behaviour
   for the attributes sidebar in ALL languages */
.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 * {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Disable automatic capitalization for all H1 and H2 and H3*/
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;
} 
/* Hide the infinite footer and Zip AI sidebar */
#infinite-footer, 
#zip-ai-sidebar, 
#zip-ai-sidebar-admin-trigger {
    display: none !important;
}
/* This forces the sidebar to stay at the top and stop following the scroll */
.hp-page__sidebar[data-component="sticky"] {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

/* This ensures the 'sticky' wrapper created by JavaScript doesn't interfere */
.hp-page__sidebar.is-sticky {
    position: relative !important;
    top: 0 !important;
}

/* 1. Reset & Unify all Show More/Less buttons */
.hp-brand-filter-show-more {
    background-color: #319772 !important; /* Matches your green 'Filter' button */
    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-top: 10px !important;
    margin-bottom: 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;
}

/* 2. Hover & Active States (Prevents color shifting on click) */
.hp-brand-filter-show-more:hover,
.hp-brand-filter-show-more:focus,
.hp-brand-filter-show-more:active {
    background-color: #287d5e !important; /* Slightly darker green for feedback */
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 3. Fix Sidebar Background Stretch */
.hp-page__sidebar {
    height: 100% !important;
}

.hp-form--listing-filter {
    background-color: #cfeacc !important; /* The light green sidebar color */
    min-height: 100vh !important; /* Forces it to stay long */
    padding-bottom: 100px !important; /* Extra space so it hits the footer nicely */
}
/* Brand filter search box */
.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;
}