/* Shop & Product Archive specific styles
   Loaded only on: shop page, product category/tag/attribute archives
   ------------------------------------------------------------------ */

/* Product category thumbnail rendered as a full-width banner inside
   #main > .fusion-row (which is constrained to 1240px). Breaks out of the
   constrained row using the 100vw trick so it spans the full viewport
   width, with the image centered and covering the entire element. */
.sp-product-cat-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 190px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

   header.woocommerce-products-header {
    max-width: 1100px;
    margin: auto;
    padding-top: 40px;
}

/* FacetWP: selected-facet chips inside the archive header */
.sp-facetwp-selections {
    margin: 16px 0 0;
    margin-top: 1em;
    margin-bottom: 10px;
}
.sp-facetwp-selections:empty {
    display: none;
}

/* FacetWP: sort + per-page toolbar above the product loop */
.sp-facetwp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
}
.sp-facetwp-toolbar__item {
    display: flex;
    align-items: center;
}
.sp-facetwp-toolbar .facetwp-facet {
    margin-bottom: 0;
}

/* FacetWP: pagination row below the product loop */
.sp-facetwp-pagination {
    margin: 24px 0 0;
    display: flex;
    justify-content: center;
}
.sp-facetwp-pagination:empty {
    display: none;
}

body.archive.woocommerce.has-sidebar #content,
body.search.has-sidebar #content {
    width: 937px;
}

.archive.woocommerce.woocommerce .woocommerce-container,
body.search .woocommerce-container {
    width: 100%;
    margin: auto;
}

body.has-sidebar.archive.woocommerce #main .sidebar,
body.has-sidebar.search #main .sidebar {
    width: 250px;
    overflow: hidden;
    padding-top: 40px;
}

.archive.woocommerce.woocommerce-page #main .fusion-row,
body.search #main .fusion-row {
    width: 1240px;
    margin: auto;
}

.archive.woocommerce .catalog-ordering,
body.search .catalog-ordering {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.archive.woocommerce .catalog-ordering:before,
.archive.woocommerce .catalog-ordering:after,
body.search .catalog-ordering:before,
body.search .catalog-ordering:after {
    display: none;
}


.archive.woocommerce-page .woocommerce-products-header .awb-breadcrumb-list .breadcrumb-leaf,
body.search .woocommerce-products-header .awb-breadcrumb-list .breadcrumb-leaf {
    color: #777;
}

body.search .woocommerce-products-header .awb-breadcrumb-list .fusion-breadcrumb-item:last-child > span {
    color: #777;
}

.archive.woocommerce-page .woocommerce-products-header .awb-breadcrumb-list a,
body.search .woocommerce-products-header .awb-breadcrumb-list a {
    color: #000;
}

.archive.woocommerce-page .woocommerce-products-header .awb-breadcrumb-list a:hover,
body.search .woocommerce-products-header .awb-breadcrumb-list a:hover {
    text-decoration: underline;
}

.archive.woocommerce .sidebar .widget:not(.widget:first-child),
body.search .sidebar .widget:not(.widget:first-child) {
    background: #fff;
    border: solid 1px #dfdfdf !important;
    border-radius: 5px;
}

.archive.woocommerce .sidebar .widget h4,
body.search .sidebar .widget h4 {
    margin: 0;
    padding: 10px 1em !important;
    font-size: 18px;
    display: block;
}

.facetwp-facet.facetwp-type-checkboxes .facetwp-checkbox {padding: 10px 1em !important;border-top: solid 1px #dfdfdf;padding-left: 2.5em !important;background-position: 1em center;line-height: 1.2em;padding-bottom: 6px !important;font-size: 15px !important;background-image: url(/wp-content/themes/Avada-Child-Theme-SurfacePrep/assets/icons/checkbox-off.png?test=3);background-size: 16px;background-position: 12px calc(50% - -1px);position: relative;}

a.facetwp-toggle:not(.facetwp-hidden) {
    padding: 10px 1em;
    line-height: 1em;
    width: 100%;
    display: block;
    color: #000;
    border-top: solid 1px #dfdfdf;
    text-align: center;
}

.archive.woocommerce .facetwp-facet,
body.search .facetwp-facet {
    margin-bottom: 0;
}

a.facetwp-toggle:not(.facetwp-hidden):hover {
    background: var(--link_color);
    color: #fff;
}

.sp-facetwp-toolbar__item label {
    margin-right: 6px;
    font-size: 14px;
    text-transform: uppercase;
}

.archive.woocommerce .sidebar .widget:first-child,
body.search .sidebar .widget:first-child {
    margin-bottom: 0;
}

.archive.woocommerce .sidebar .widget:first-child h3,
body.search .sidebar .widget:first-child h3 {
    margin-bottom: 3px;
    margin-top: 0;
}
header.woocommerce-products-header h1 {
    margin-bottom: 16px;
    margin-top: 0;
}

header.woocommerce-products-header h1 .sp-results-count {
    font-size: 0.5em;
    color: #777;
    font-weight: 500;
    margin-left: 0.4em;
    white-space: nowrap;
}

.sp-facetwp-selections .facetwp-selections > ul > li {
    border: solid 1px #ccc;
    padding: 10px;
    background: #fff;
}

.sp-facetwp-selections .facetwp-selections > ul > li .facetwp-selection-value:last-child {
    margin-right: 0;
}

.sp-facetwp-selections .facetwp-selections > ul > li .facetwp-selection-label {
    font-weight: bold;
}

.sp-facetwp-selections .facetwp-selections > ul {
    margin: 0;
    padding: 0 !important;
}

/* Collapsible sidebar widgets (those with a .heading) */
.archive.woocommerce .sidebar .widget.sp-collapsible > .heading,
body.search .sidebar .widget.sp-collapsible > .heading {
    position: relative;
}
.archive.woocommerce .sidebar .widget.sp-collapsible > .heading .widget-title,
body.search .sidebar .widget.sp-collapsible > .heading .widget-title {
    padding: 0;
}
.archive.woocommerce .sidebar .widget.sp-collapsible .sp-collapsible-toggle,
body.search .sidebar .widget.sp-collapsible .sp-collapsible-toggle {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    position: relative;
}
.archive.woocommerce .sidebar .widget.sp-collapsible .sp-collapsible-toggle:focus-visible,
body.search .sidebar .widget.sp-collapsible .sp-collapsible-toggle:focus-visible {
    outline: 2px solid var(--link_color);
    outline-offset: -2px;
}
.archive.woocommerce .sidebar .widget.sp-collapsible .sp-collapsible-toggle::after,
body.search .sidebar .widget.sp-collapsible .sp-collapsible-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(-135deg);
    transition: transform 0.2s ease;
    pointer-events: none;
    opacity: 0.7;
}
.archive.woocommerce .sidebar .widget.sp-collapsible.is-collapsed .sp-collapsible-toggle::after,
body.search .sidebar .widget.sp-collapsible.is-collapsed .sp-collapsible-toggle::after {
    transform: translateY(-75%) rotate(45deg);
}
.archive.woocommerce .sidebar .widget.sp-collapsible .sp-collapsible-toggle:hover::after,
body.search .sidebar .widget.sp-collapsible .sp-collapsible-toggle:hover::after {
    opacity: 1;
}
.archive.woocommerce .sidebar .widget.sp-collapsible > .textwidget,
body.search .sidebar .widget.sp-collapsible > .textwidget {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.25s ease;
}
.archive.woocommerce .sidebar .widget.sp-collapsible > .textwidget > *,
body.search .sidebar .widget.sp-collapsible > .textwidget > * {
    min-height: 0;
    overflow: hidden;
}
.archive.woocommerce .sidebar .widget.sp-collapsible.is-collapsed > .textwidget,
body.search .sidebar .widget.sp-collapsible.is-collapsed > .textwidget {
    grid-template-rows: 0fr;
}
@media (prefers-reduced-motion: reduce) {
    .archive.woocommerce .sidebar .widget.sp-collapsible > .textwidget,
    .archive.woocommerce .sidebar .widget.sp-collapsible .sp-collapsible-toggle::after,
    body.search .sidebar .widget.sp-collapsible > .textwidget,
    body.search .sidebar .widget.sp-collapsible .sp-collapsible-toggle::after {
        transition: none;
    }
}

.archive.woocommerce .sidebar div#text-6,
body.search .sidebar div#text-6 {
    background: none;
    border: none !important;
}

.archive.woocommerce .sidebar .widget:has(.facetwp-reset) button.facetwp-reset,
body.search .sidebar .widget:has(.facetwp-reset) button.facetwp-reset {
    display: block;
    width: 100%;
    background: #666;
    color: #fff;
    font-size: 18px;
    border-radius: 22px;
    padding: 14px;
    padding-bottom: 12px;
    text-transform: none;
    border: none;
    cursor: pointer;
}

.archive.woocommerce .sidebar .widget:has(.facetwp-reset) button.facetwp-reset:hover,
body.search .sidebar .widget:has(.facetwp-reset) button.facetwp-reset:hover {
    background: var(--link_color)
}

.archive.woocommerce .sidebar .widget,
body.search .sidebar .widget {
    margin-bottom: 20px;
}
.facetwp-facet.facetwp-type-checkboxes .facetwp-checkbox.checked {
    background-image: url(/wp-content/themes/Avada-Child-Theme-SurfacePrep/assets/icons/checkbox-on.png);
}

.sp-facetwp-toolbar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* 2. Add your own arrow using a Background Image (SVG is best for color) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(79, 189, 54)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  
  /* 3. Tweak the Position */
  background-position: right 10px center; /* Adjust 10px to move it left/right */
  background-size: 1em;
  
  /* Make sure there is enough padding so text doesn't overlap your new arrow */
  padding-left: 10px;
  padding-right: 30px;
  text-transform: uppercase;
}

.facetwp-pager a {
    border: solid 1px #ccc;
    background: #fff;
    margin: 0;
    border-right: none;
    padding: 5px 13px;
    color: #777;
}

.facetwp-pager a:last-child {
    border-right: solid 1px #ccc;
}

.facetwp-pager a.active, .facetwp-pager a.active:hover {
    background: var(--link_color);
    color: #fff;
}

.facetwp-pager a:hover {
    color: var(--link_color);
}

/* Match fallback WooCommerce pagination to FacetWP pager styles */
body.search .woocommerce-pagination.sp-pagination-fallback {
    margin: 24px 0 0;
    display: flex;
    justify-content: center;
    max-width: none;
    font-size: 16px;
    line-height: 24px;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
    border: 0 !important;
}

body.search .woocommerce-pagination.sp-pagination-fallback > ul.page-numbers.page-numbers {
    margin: 0 !important;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li {
    margin: 0;
    padding: 0;
    line-height: 24px;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li + li {
    margin-left: 0;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers a,
body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers span {
    border: solid 1px #ccc !important;
    background: #fff;
    margin: 0 !important;
    border-right: none !important;
    padding: 5px 13px;
    color: #777;
    text-decoration: none;
    display: inline-block;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px !important;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li > .page-numbers {
    margin: 0 !important;
    border: 1px solid #ccc !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-right: none !important;
    height: 36px !important;
    min-height: 36px !important;
    width: auto !important;
    min-width: 36px !important;
    max-width: none !important;
    line-height: 24px !important;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li > a.next.page-numbers,
body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li > a.prev.page-numbers {
    border: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    border-style: solid !important;
    border-width: 1px !important;
    background: #fff !important;
    width: auto !important;
    min-width: 36px !important;
    padding: 5px 13px !important;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li > a.next.page-numbers::after,
body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li > a.prev.page-numbers::after,
body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li > a.next.page-numbers::before,
body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li > a.prev.page-numbers::before {
    content: none !important;
    display: none !important;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers a.prev,
body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers a.next {
    font-weight: 400;
}

body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li:last-child a,
body.search .woocommerce-pagination.sp-pagination-fallback ul.page-numbers li:last-child span {
    border-right: solid 1px #ccc !important;
}

body.search .woocommerce-pagination.sp-pagination-fallback .page-numbers.current,
body.search .woocommerce-pagination.sp-pagination-fallback .page-numbers.current:hover {
    background: var(--link_color);
    color: #fff;
}

body.search .woocommerce-pagination.sp-pagination-fallback a.page-numbers:hover {
    color: var(--link_color);
}


.archive.woocommerce.woocommerce-page #main > .fusion-row {
  flex-direction: column !important;
}

body.search .products li.product {
    margin-bottom: 0;
}
body.search .products li.product.type-product {
    border: none;
    margin-bottom: 0;
}
body.search .products li.product .fusion-product-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
body.search .products li.product .product-images {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1.43 / 1;
    overflow: hidden;
    margin-bottom: 14px;
}
body.search .products li.product .product-images .featured-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
body.search .products li.product .product-images .featured-image img {
    display: block;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}
body.search .products li.product .fusion-product-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
    text-align: left;
}
body.search .products li.product .product-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.search .products li.product .product-details-container {
    min-height: 0;
}
body.search .products li.product .product-title {
    font-size: 18px;
    line-height: 1.2;
    text-transform: none;
    margin: 0 0 8px;
    text-align: left;
    min-height: 5em !important;
}
body.search .products li.product .product-buttons {
    display: block;
    margin-top: auto;
    padding-top: 0;
    border-top: none;
}
body.search .products li.product .show_details_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    max-width: none !important;
    width: 100%;
    height: 48px;
    margin-top: 40px;
    padding: 0 18px;
    border: none !important;
    border-radius: 999px;
    background: var(--link_color) !important;
    color: #fff !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-transform: none;
    transition: background-color 0.2s ease;
}
body.search .products li.product .show_details_button:before {
    display: none;
}

@media (min-width: 801px) and (max-width: 1267px) {
  
body.archive.woocommerce.has-sidebar #content,
body.search.has-sidebar #content {float: none !important;width: 100%;}
    body.search #main .fusion-row {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.search header.woocommerce-products-header {
        max-width: 100%;
    }
    #sp-mobile-filter-btn {
        width: 200px !important;
    }
}

@media (max-width: 800px) {
    body.search #main .fusion-row {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.search.has-sidebar #content {
        width: 100% !important;
        float: none !important;
    }
    body.search header.woocommerce-products-header {
        max-width: 100%;
    }
}

/* --- Desktop/Base Defaults --- */
#sp-mobile-filter-btn {
    display: none; /* Hidden outside flyout mode */
    padding: 14px 24px 12px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 22px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 18px;
    text-transform: none;
    width: 100%;
    max-width: 100%;
}

#sp-mobile-filter-btn:hover {
    background: var(--link_color);
}

#sp-sidebar-close-btn {
    display: none; /* Hidden outside flyout mode */
}

/* --- Mobile Flyout Styles (1267px or less) --- */
@media (max-width: 1267px) {
    
    h3.fusion-responsive-typography-calculated { margin: 0 !important; margin-bottom: 1rem !important; }
    #sp-mobile-filter-btn {
        display: block; /* Show button on mobile */
    }

    aside#sidebar {
        position: fixed !important;
        top: 0;
        left: -100% !important; /* Start offscreen */
        width: 300px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 999999 !important; /* Above site header */
        transition: left 0.3s ease;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        margin: 0 !important;
        overflow: hidden !important;
    }

    aside#sidebar.active {
        left: 0 !important; /* Slide in */
    }

    #sp-sidebar-scroll-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 20px !important;
        padding-bottom: 100px !important;
        -webkit-overflow-scrolling: touch;
    }

    #sp-sidebar-close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1000000;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* Lock the background page when modal is open */
    body.filter-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }


    #sidebar .widget.widget_text {
        margin-bottom: 1em !important;
    }
}