/*
 * Peptilab — Shop layout
 * Two-column: sidebar + product grid.
 * Reactivity handled by WooCommerce Interactivity API
 * (woocommerce/product-filters + woocommerce/product-collection).
 *
 * IMPORTANT:
 *   This file uses STABLE theme aliases (pl-filters__*, pl-check-list__*,
 *   pl-chips, pl-filter-clear, pl-results-count, pl-sort) that are injected
 *   into the WC block output by the `peptilab_add_filter_aliases` filter in
 *   functions.php. If a WC class is renamed in a future plugin update, only
 *   the map in functions.php needs an edit — this file stays untouched.
 *
 * Depends on: variables.css
 */

/* ============================================================
   Local tokens
   ============================================================ */
:root {
    /* Filter sidebar palette */
    --pl-filters-bg:        #6E7787;
    --pl-filters-fg:        #F7F9FC;
    --pl-filters-fg-muted:  rgba(247, 249, 252, .5);
    --pl-filters-border:    rgba(255, 255, 255, .15);
    --pl-filters-checkbox:  rgba(255, 255, 255, .4);

    /* Toolbar */
    --pl-toolbar-muted:     #8A94A6;
    --pl-view-btn-border:   #DEDEDE;

    /* Shop geometry */
    --pl-shop-sidebar-w:    287px;
    --pl-shop-card-max:     286px;

    /* Icons */
    --pl-ic-chevron:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000E15' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --pl-ic-filter:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'%3E%3Cpath d='M13.4231 8H16.5M13.4231 8C13.4231 8.29667 13.3328 8.58668 13.1638 8.83336C12.9948 9.08003 12.7545 9.27229 12.4734 9.38582C12.1922 9.49935 11.8829 9.52906 11.5845 9.47118C11.286 9.4133 11.0119 9.27044 10.7968 9.06066C10.5816 8.85088 10.4351 8.58361 10.3757 8.29264C10.3164 8.00166 10.3468 7.70006 10.4633 7.42597C10.5797 7.15189 10.7769 6.91762 11.0299 6.7528C11.2829 6.58797 11.5803 6.5 11.8846 6.5C12.0866 6.5 12.2867 6.5388 12.4734 6.61418C12.66 6.68956 12.8296 6.80005 12.9725 6.93934C13.1153 7.07863 13.2287 7.24399 13.306 7.42597C13.3833 7.60796 13.4231 7.80302 13.4231 8ZM0.807692 8H10.3462M3.57692 2H0.5M3.57692 2C3.57692 1.70333 3.66715 1.41332 3.8362 1.16665C4.00525 0.919972 4.24552 0.727713 4.52664 0.614181C4.80776 0.50065 5.11709 0.470945 5.41552 0.528823C5.71396 0.586701 5.98808 0.729562 6.20324 0.939341C6.4184 1.14912 6.56492 1.41639 6.62429 1.70736C6.68365 1.99834 6.65318 2.29994 6.53674 2.57403C6.4203 2.84812 6.22311 3.08238 5.97011 3.24721C5.71711 3.41203 5.41966 3.5 5.11538 3.5C4.70736 3.5 4.31605 3.34197 4.02753 3.06066C3.73901 2.77936 3.57692 2.39783 3.57692 2ZM16.1923 2H6.65385' stroke='%231A1A1A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   Page wrapper
   ============================================================ */
.peptilab-shop-page {
    padding: 60px !important;
}

.peptilab-shop-wrapper {
    align-items: flex-start !important;
    gap: clamp(20px, 5.56vw, 80px) !important;
}

/* ============================================================
   Sidebar — container
   ============================================================ */
.peptilab-shop-sidebar {
    position:    sticky;
    top:         100px;
    width:       var(--pl-shop-sidebar-w) !important;
    flex-shrink: 0 !important;
}

/* Filters panel */
.pl-filters {
    --wc-product-filters-text-color:       var(--pl-filters-fg) !important;
    --wc-product-filters-background-color: var(--pl-filters-bg) !important;
    background:    var(--pl-filters-bg) !important;
    border-radius: 32px !important;
    padding:       24px 20px !important;
    overflow:      hidden;
    gap:           0 !important;
}

/* ── Desktop: collapse WC's modal overlay into an inline panel ── */
.pl-filters .pl-filters__overlay {
    display:    block !important;
    position:   static !important;
    inset:      auto !important;
    background: transparent !important;
    overflow:   visible !important;
    z-index:    auto !important;
}

.pl-filters .pl-filters__overlay-wrap,
.pl-filters .pl-filters__overlay-dialog {
    position:      static !important;
    width:         auto !important;
    height:        auto !important;
    max-width:     none !important;
    max-height:    none !important;
    background:    transparent !important;
    box-shadow:    none !important;
    border-radius: 0 !important;
    overflow:      visible !important;
    transform:     none !important;
}

.pl-filters .pl-filters__overlay-content {
    background:    transparent !important;
    border-radius: 0 !important;
}

.pl-filters .pl-filters__open,
.pl-filters .pl-filters__overlay-head,
.pl-filters .pl-filters__overlay-foot {
    display: none !important;
}

/* ── Filter heading ── */
.pl-filters .pl-filter-heading {
    font-family:    var(--pl-font-body) !important;
    font-size:      18px !important;
    font-weight:    600 !important;
    line-height:    calc(28 / 18) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color:          var(--pl-filters-fg) !important;
    padding:        0 !important;
    margin:         0 0 16px !important;
}

/* ── Active filters: chips + clear btn ── */
.pl-filter-active {
    margin-bottom: 20px;
}

.pl-filter-active .pl-chips,
.pl-filter-active .pl-chips__items {
    display:    flex !important;
    flex-wrap:  wrap !important;
    gap:        6px !important;
    list-style: none !important;
    margin:     0 !important;
    padding:    0 !important;
}

.pl-filter-active .pl-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px 10px;
    background:    var(--pl-filters-border);
    border-radius: 20px;
    font-size:     14px;
    color:         var(--pl-filters-fg);
}

.pl-filter-active .pl-chip__remove {
    background: transparent;
    border:     none;
    color:      var(--pl-filters-fg);
    cursor:     pointer;
    padding:    0;
    display:    flex;
}

.pl-filter-active .pl-chip__remove-icon {
    width:  14px;
    height: 14px;
}

.pl-filter-active .pl-filter-clear .wp-block-button__link {
    background:   transparent !important;
    color:        var(--pl-filters-fg) !important;
    border-color: rgba(255, 255, 255, .3) !important;
    font-size:    12px !important;
    padding:      5px 8px !important;
}

.pl-filter-active .pl-filter-clear .wp-block-button__link:hover {
    border-color: var(--pl-filters-fg) !important;
}

/* ── Category checkbox list ── */
.pl-filter-cats fieldset {
    border:  none !important;
    margin:  0 !important;
    padding: 0 !important;
}

.pl-filter-cats .pl-check-list__items {
    display:        flex !important;
    flex-direction: column !important;
    gap:            12px !important;
}

.pl-filter-cats .pl-check-list__item {
    margin:  0 !important;
    padding: 0 !important;
}

.pl-filter-cats .pl-check-list__label {
    display:     flex !important;
    align-items: center !important;
    padding:     0 !important;
    font-family: var(--pl-font-body) !important;
    font-size:   14px !important;
    font-weight: 400 !important;
    line-height: calc(20 / 14) !important;
    color:       var(--pl-filters-fg) !important;
    cursor:      pointer;
    transition:  opacity var(--pl-transition);
    background:  transparent !important;
    border:      none !important;
    gap:         0 !important;
}

.pl-filter-cats .pl-check-list__label:hover {
    opacity: .7;
}

.pl-filter-cats .pl-check-list__input-wrap {
    display:      flex;
    align-items:  center;
    flex-shrink:  0;
    margin-right: 10px;
}

.pl-filter-cats .pl-check-list__input {
    appearance:         none !important;
    -webkit-appearance: none !important;
    width:              16px !important;
    height:             16px !important;
    border:             1.5px solid var(--pl-filters-checkbox) !important;
    border-radius:      3px !important;
    background:         transparent !important;
    cursor:             pointer;
    margin:             0 !important;
    transition:         border-color var(--pl-transition), background var(--pl-transition);
}

.pl-filter-cats .pl-check-list__input:checked {
    background:   var(--pl-filters-fg) !important;
    border-color: var(--pl-filters-fg) !important;
}

.pl-filter-cats .pl-check-list__mark {
    position:       absolute;
    width:          16px;
    height:         16px;
    color:          var(--pl-accent-dark);
    pointer-events: none;
}

.pl-filter-cats .pl-check-list__text-wrap {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex:            1;
    gap:             4px;
    font-size:       14px;
    font-weight:     400;
}

.pl-filter-cats .pl-check-list__text {
    display:     flex;
    color:       var(--pl-filters-fg);
    font-size:   14px;
    font-weight: 400;
}

.pl-filter-cats .pl-check-list__count {
    margin-left: auto;
    font-size:   12px;
    font-weight: 400;
    color:       var(--pl-filters-fg-muted);
}

.pl-filter-cats .pl-check-list__input:checked
    ~ .pl-check-list__text-wrap
    .pl-check-list__text {
    font-weight: 600;
}

/* ============================================================
   Main content area
   ============================================================ */
.peptilab-shop-content {
    min-width: 0;
    width:     100%;
}

/* ── Toolbar ── */
.pl-shop-toolbar {
    padding-bottom: 12px;
    margin-bottom:  20px;
    gap:            12px !important;
}

/* Result count (WC block + JS fallback) */
.pl-shop-toolbar__count,
.pl-result-count-fallback,
.pl-results-count {
    font-size: 13px;
    color:     var(--pl-muted);
    margin:    0;
    padding:   0;
}

.pl-shop-toolbar__count p,
.pl-result-count-fallback p,
.pl-results-count__p {
    font-size:   14px !important;
    color:       var(--pl-toolbar-muted);
    margin:      0 !important;
    padding:     0;
    line-height: 1.4;
}

/* Per-page switcher */
.pl-shop-toolbar__perpage {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    color:       var(--pl-muted);
}

.pl-shop-toolbar__perpage a {
    color:           var(--pl-text);
    text-decoration: none;
    font-weight:     500;
    padding:         2px 6px;
    border-radius:   4px;
    transition:      color var(--pl-transition);
}

.pl-shop-toolbar__perpage a:hover,
.pl-shop-toolbar__perpage a.is-active {
    color: var(--pl-accent);
}

.pl-shop-toolbar__perpage a.is-active {
    font-weight: 700;
}

/* Sort dropdown */
.pl-shop-toolbar__sort .pl-sort {
    margin: 0;
}

.pl-shop-toolbar__sort .pl-sort select,
.pl-shop-toolbar__sort select {
    padding:            12px 32px 12px 12px;
    border:             1px solid var(--pl-view-btn-border);
    border-radius:      var(--pl-border-radius);
    background:         transparent var(--pl-ic-chevron) no-repeat right 10px center;
    -webkit-appearance: none;
    appearance:         none;
    font-family:        var(--pl-font-body);
    font-size:          14px !important;
    font-weight:        500;
    line-height:        20px !important;
    color:              var(--pl-text);
    cursor:             pointer;
    text-align:         center;
}

.pl-shop-toolbar__sort .pl-sort select:focus,
.pl-shop-toolbar__sort select:focus {
    outline:      none;
    border-color: var(--pl-accent);
}

/* Grid / List toggle */
.pl-shop-toolbar__view {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.pl-view-btn {
    width:           44px;
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          1px solid var(--pl-view-btn-border);
    border-radius:   50%;
    background:      #fff;
    color:           #1A1A1A;
    cursor:          pointer;
    transition:
        color        var(--pl-transition),
        border-color var(--pl-transition),
        background   var(--pl-transition);
}

.pl-view-btn:hover,
.pl-view-btn.is-active {
    color:        #fff;
    border-color: var(--pl-accent);
    background:   var(--pl-accent);
}

/* ============================================================
   Product grid
   ============================================================ */
.peptilab-products-grid ul.wc-block-product-template {
    display:               grid !important;
    grid-template-columns: repeat(3, minmax(0, var(--pl-shop-card-max)));
    gap:                   20px;
    list-style:            none;
    margin:                0;
    padding:               0;
}

/* ============================================================
   Pagination
   ============================================================ */
.peptilab-pagination {
    margin-top: 32px;
    text-align: center;
    gap:        10px;
}

.peptilab-pagination .page-numbers,
.peptilab-pagination .wp-block-query-pagination-numbers {
    display:    inline-flex;
    flex-wrap:  wrap;
    gap:        6px;
    list-style: none;
    margin:     0;
    padding:    0;
}

.peptilab-pagination a,
.peptilab-pagination span {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    height:          38px;
    padding:         0 10px;
    background:      #fff;
    border:          1px solid var(--pl-border);
    border-radius:   6px;
    font-size:       14px;
    color:           var(--pl-text);
    text-decoration: none;
    transition:
        background   var(--pl-transition),
        border-color var(--pl-transition),
        color        var(--pl-transition);
}

.peptilab-pagination a:hover,
.peptilab-pagination .current,
.peptilab-pagination span.current {
    background:   var(--pl-accent);
    border-color: var(--pl-accent);
    color:        #fff;
}

.peptilab-pagination .current,
.peptilab-pagination span.current {
    font-weight: 700;
}

    .pl-shop-toolbar__left {
        flex-wrap: wrap !important;
    }

/* ============================================================
   Empty state
   ============================================================ */
.peptilab-no-products {
    padding:    64px 24px;
    text-align: center;
    color:      var(--pl-muted);
}

/* ============================================================
   Site footer inside shop context
   ============================================================ */
.site-footer .wp-block-site-logo img {
    height: 30px;
    width:  auto;
}

/* Kill WC's default bottom margin on the result count <p> */
.woocommerce .pl-results-count__p {
    margin-bottom: 0;
}

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media (max-width: 1100px) {
    .peptilab-products-grid ul.wc-block-product-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .peptilab-shop-page {
        padding: 20px 24px !important;
    }
}

/* ============================================================
   Responsive — mobile (≤900px)
   ============================================================ */
@media (max-width: 900px) {
    .peptilab-shop-wrapper {
        flex-direction: column !important;
        gap:            0 !important;
    }

    /* Sidebar collapses to a single Filter button row */
    .peptilab-shop-sidebar {
        width:         100% !important;
        position:      relative !important;
        flex-basis:    auto !important;
        min-height:    50px;
        margin-bottom: 0;
    }

    /* Filters panel itself is chromeless on mobile — button only */
    .pl-filters {
        background:    transparent !important;
        border-radius: 0 !important;
        padding:       0 !important;
    }

    /* Hide inline content; show open-overlay button */
    .pl-filters .pl-filters__overlay-content {
        display: none !important;
    }

    .pl-filters.is-overlay-opened .pl-filters__overlay-content {
        display:     block !important;
        height:      fit-content;
        flex-shrink: 1;
        flex-grow:   0;
    }

    /* Show close/apply chrome inside the overlay */
    .pl-filters .pl-filters__overlay-head,
    .pl-filters .pl-filters__overlay-foot {
        display:     flex !important;
        align-items: center;
        padding:     16px 0;
        box-shadow:  none;
    }

    .pl-filters .pl-filters__overlay-head {
        justify-content: flex-end;
        border-bottom:   1px solid var(--pl-filters-border);
        margin-bottom:   16px;
    }

    /* Overlay becomes fullscreen modal */
    .pl-filters .pl-filters__overlay {
        position:   fixed !important;
        inset:      0 !important;
        z-index:    99999 !important;
        background: rgba(0, 0, 0, .5) !important;
        overflow:   auto !important;
        display:    none !important;
    }

    .pl-filters.is-overlay-opened .pl-filters__overlay {
        display: flex !important;
    }

    .pl-filters .pl-filters__overlay-dialog {
        width:         90vw !important;
        max-width:     400px !important;
        height:        100% !important;
        max-height:    100vh !important;
        background:    var(--pl-filters-bg) !important;
        overflow-y:    auto !important;
        margin-left:   auto !important;
        border-radius: 0 !important;
        padding:       24px 20px !important;
    }

    .pl-filters .pl-filters__close {
        background:  transparent;
        border:      none;
        color:       var(--pl-filters-fg);
        cursor:      pointer;
        font-size:   14px;
        display:     flex;
        align-items: center;
        gap:         6px;
    }

    .pl-filters .pl-filters__apply {
        width:         100%;
        padding:       12px;
        background:    var(--pl-accent);
        color:         #fff;
        border:        none;
        border-radius: 32px;
        font-size:     14px;
        font-weight:   600;
        cursor:        pointer;
        margin-top:    16px;
    }

    /* "Filter" button — positioned absolutely at top-left of toolbar row */
    .pl-filters .pl-filters__open {
        position:      absolute;
        top:           -50px;
        left:          0;
        z-index:       5;
        display:       flex !important;
        align-items:   center;
        gap:           8px;
        padding:       10px 0;
        background:    transparent;
        color:         var(--pl-text);
        border-radius: 32px;
        font-size:     14px;
        font-weight:   500;
        cursor:        pointer;
        width:         fit-content;
    }

    /* Replace default WC icon with custom one */
    .pl-filters .pl-filters__open svg {
        display: none !important;
    }

    .pl-filters .pl-filters__open::before {
        content:             "";
        display:             inline-block;
        width:               17px;
        height:              10px;
        background-image:    var(--pl-ic-filter);
        background-repeat:   no-repeat;
        background-position: center;
        background-size:     17px 10px;
    }

    /* Replace "Filter products" text with "Filter" */
    .pl-filters .pl-filters__open span {
        font-size: 0 !important;
    }

    .pl-filters .pl-filters__open span::before {
        font-family: var(--pl-font-body);
        content:   "Filter";
        font-size: 14px;
    }

    /* Counter floats above the sort row */
    .pl-shop-toolbar__left .pl-shop-toolbar__count,
    .pl-shop-toolbar__left .pl-results-count,
    .pl-shop-toolbar__left .pl-result-count-fallback {
        position: absolute;
        top:      -30px;
        left:     0;
        z-index:  4;
    }

    .pl-shop-toolbar__perpage,
    .pl-shop-toolbar__view {
        display: none !important;
    }

    .pl-shop-toolbar {
        position:  relative;
        flex-wrap: wrap !important;
    }

    .pl-shop-toolbar__left {
        min-height: 0;
    }

    .peptilab-products-grid ul.wc-block-product-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   Responsive — single column (≤480px)
   ============================================================ */
@media (max-width: 480px) {
    .peptilab-products-grid ul.wc-block-product-template {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ============================================================
   Single product — quantity discount offer buttons
   (rendered after Add-to-cart by the ADP integration in
    functions.php → woocommerce_after_add_to_cart_button)
   ============================================================ */
/* Hide ADP's own "Bulk deal" table — we render our own offer buttons. */
.wdp_bulk_table_content {
    display: none !important;
}

.pl-qty-offers {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-left: 4px;
}

.pl-qty-offer-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          52px;
    padding:         0 24px;
    background:      transparent !important;
    color:           var(--pl-accent, #537FF4) !important;
    border:          1px solid var(--pl-accent, #537FF4) !important;
    border-radius:   28px;
    font-family:     var(--pl-font-body, Inter, sans-serif);
    font-size:       16px;
    font-weight:     600;
    line-height:     20px;
    cursor:          pointer;
    transition:      background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
    text-decoration: none;
    box-shadow:      none;
}

.pl-qty-offer-btn:hover:not(:disabled),
.pl-qty-offer-btn:focus-visible {
    background:   var(--pl-accent-dark, #3560D3) !important;
    color:        #F7F9FC !important;
    border-color: var(--pl-accent-dark, #3560D3) !important;
    outline:      none;
}

.pl-qty-offer-btn:disabled,
.pl-qty-offer-btn.is-busy {
    opacity:        .55;
    cursor:         default;
    pointer-events: none;
}