/* =============================================================================
   shop-listing.css - category / shop listing page
   -----------------------------------------------------------------------------
   Covers the shared listing partials used by category.blade.php and
   searchfilter.blade.php. The page header band (photo background,
   breadcrumb, H1) is its own component with its own sheet:
   front/components/page-header-band.blade.php + page-header-band.css.

     .shop-listing-meta       result count line above the toolbar
     .shop-toolbar            Filters trigger + sort dropdown row
     .shop-filter-trigger     the leftmost button with active count
     .shop-filter-drawer      the left sliding filter drawer (all devices)
     .shop-filter-form        the filter form inside the drawer
     .shop-filter-price       min / max price inputs
     .shop-chips / .shop-chip active filter chips
     .shop-grid               auto-fill grid, the count flexes not the card
     .shop-showmore           Show More button + progress line
     .shop-empty              zero products / zero results states

   Written mobile first. Colours and radii come from variables.css only.
   ============================================================================= */


/* ------------------------------------------------------------------ *
   1. RESULT COUNT + TOOLBAR
   The H1 sits in the page header band above; here only the count
   line and the control row.
 * ------------------------------------------------------------------ */
.shop-listing-meta {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 16px;
    border-top: 1px solid var(--forest-200);
    border-bottom: 1px solid var(--forest-200);
}

.shop-toolbar__sort .dropdown-toggle {
    font-size: 13px;
    padding: 8px 16px;
}

.shop-toolbar__sort .dropdown-item.active {
    color: var(--primary);
    font-weight: 600;
}

/* Leftmost trigger. Simple pill so it reads as a control, and a count
   badge so the state is visible before opening the drawer. */
.shop-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1.5px solid var(--primary);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.shop-filter-trigger i {
    font-size: 16px;
}

.shop-filter-trigger:hover,
.shop-filter-trigger:focus {
    background: var(--primary);
    color: #ffffff;
}

.shop-filter-trigger__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.shop-filter-trigger:hover .shop-filter-trigger__badge,
.shop-filter-trigger:focus .shop-filter-trigger__badge {
    background: #ffffff;
    color: var(--primary);
}


/* ------------------------------------------------------------------ *
   2. FILTER DRAWER
   Opens from the left on every device, desktop included, exactly
   like on mobile. The offcanvas body stops its own scrolling
   (overflow hidden), the form fills it as a flex column and the
   __body scrolls instead, so the sticky footer stays pinned while
   the list scrolls.
 * ------------------------------------------------------------------ */
.shop-filter-drawer {
    width: min(360px, 92vw);
}

.shop-filter-drawer .offcanvas-body {
    padding: 0;
    overflow: hidden;
}

.shop-filter-drawer .shop-filter-form {
    flex: 1 1 auto;
    min-height: 0;
}


/* ------------------------------------------------------------------ *
   3. FILTER FORM (rendered inside the drawer)
   The form fills the drawer, the body scrolls, the footer sticks.
 * ------------------------------------------------------------------ */
.shop-filter-form {
    display: flex;
    flex-direction: column;
}

.shop-filter-form__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
}

.shop-filter-form .accordion-button {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
    background: transparent;
    box-shadow: none;
}

.shop-filter-form .accordion-body {
    padding-top: 4px;
    padding-bottom: 12px;
}

.shop-filter-form .form-check {
    margin-bottom: 6px;
}

.shop-filter-form .form-check-label {
    font-size: 14px;
    color: var(--text-body);
    cursor: pointer;
}

.shop-filter-price {
    border-top: 1px solid var(--forest-200);
    margin-top: 8px;
    padding: 14px 4px 4px;
}

.shop-filter-price__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.shop-filter-price__inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.shop-filter-price__inputs input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--forest-200);
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--text-body);
    background: var(--surface);
}

.shop-filter-price__inputs input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--forest-50);
}

.shop-filter-price__sep {
    color: var(--text-muted);
}

.shop-filter-form__footer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--forest-200);
    padding: 12px;
    box-shadow: 0 -4px 12px rgba(24, 53, 43, 0.06);
}

.shop-filter-form__footer .themeButton2 {
    text-align: center;
}


/* ------------------------------------------------------------------ *
   4. ACTIVE FILTER CHIPS
 * ------------------------------------------------------------------ */
.shop-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--forest-200);
    border-radius: var(--r-pill);
    background: var(--sage-soft);
    color: var(--text-heading);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
}

.shop-chip i {
    font-size: 11px;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.shop-chip:hover {
    background: var(--forest-100);
    color: var(--primary-dark);
    text-decoration: none;
}

.shop-chip:hover i {
    color: var(--primary-dark);
}

.shop-chip--clear {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.shop-chip--clear:hover {
    background: var(--primary);
    color: #ffffff;
}


/* ------------------------------------------------------------------ *
   5. PRODUCT GRID
   Auto-fill grid: a column is never narrower than the tier minimum,
   so the CARD size stays steady while the NUMBER of cards per row
   flexes with the available width (2 up on phones, 3 on tablets,
   4 on small laptops, 5 across on wide desktops). Replaces the old
   fixed row-cols counts, which squeezed the cards instead.

   The minimums are plain pixel values, NOT a custom property: some
   in-app browsers and older WebViews fail to resolve var() inside
   minmax() and collapse the tracks to min-content, which squeezed
   every card into a thin strip. Hardcoded values work everywhere.
 * ------------------------------------------------------------------ */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

@media (min-width: 576px) {
    .shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }
}

@media (min-width: 992px) {
    .shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
        gap: 16px;
    }
}

/* Two line title clamp so mixed length names keep the rows visually
   even now that card widths flex a little more than they used to. */
.shop-grid .pc-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}


/* ------------------------------------------------------------------ *
   6. SHOW MORE
 * ------------------------------------------------------------------ */
.shop-showmore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    text-align: center;
}

.shop-showmore__progress {
    font-size: 14px;
    color: var(--text-muted);
}

.shop-showmore__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    justify-content: center;
}

/* Spinner shows only while a fetch is in flight */
.shop-showmore__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: shopShowmoreSpin 0.6s linear infinite;
}

.shop-showmore__btn.is-loading {
    pointer-events: none;
    opacity: 0.65;
}

.shop-showmore__btn.is-loading .shop-showmore__spinner {
    display: inline-block;
}

.shop-showmore__done {
    font-size: 13px;
    color: var(--text-faint);
    margin-bottom: 0;
}

@keyframes shopShowmoreSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ------------------------------------------------------------------ *
   7. EMPTY STATES
 * ------------------------------------------------------------------ */
.shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 16px;
    text-align: center;
}

.shop-empty i {
    font-size: 42px;
    color: var(--sage);
    margin-bottom: 8px;
}

.shop-empty h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 0;
}

.shop-empty p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* CTA row for a genuinely empty page: a wider browse (parent or full
   catalogue) plus a quiet secondary link, so one action stays primary */
.shop-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.shop-empty__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shop-empty__link:hover {
    color: var(--primary-dark);
}

/* ------------------------------------------------------------------ *
   8. SEARCH PAGE EXTRAS
   The suggestion line moved out of the old header block, tiny styling
   so it blends with the new toolbar layout.
 * ------------------------------------------------------------------ */
.search-results__suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.search-results__suggestion a {
    color: var(--primary);
    font-weight: 600;
}


/* ------------------------------------------------------------------ *
   9. PAGE EDGE SPACING
   The global .container override in common.css carries no horizontal
   padding, and the page used to get its side inset from Bootstrap
   column gutters. Those wrappers are gone, so the listing blocks
   align themselves: one rule covers the count line, toolbar, chips,
   grid, show more and the empty states. The page header band handles
   its own padding.
 * ------------------------------------------------------------------ */
#product-filter-section > .container {
    padding-left: 12px;
    padding-right: 12px;
}