/* ==================================================
   css/pages/products.css — the products catalogue page's styles
   ================================================== */


/* ── Results Count ──────────────────────────────── */
#results-count {
    font-size: 0.88rem;
    color: var(--muted-text);
    margin-bottom: 1rem;
    min-height: 22px;
}


/* ── Products Grid Entrance Animations ─────────── */
#products-container .product-card {
    --slide-y: 16px;
    --slide-scale: 0.97;
    animation: fadeSlideIn var(--dur-slow) var(--ease-decelerate) both;
}

#products-container .product-card:nth-child(1) { animation-delay: var(--dur-fast); }
#products-container .product-card:nth-child(2) { animation-delay: var(--dur-fast); }
#products-container .product-card:nth-child(3) { animation-delay: var(--dur-fast); }
#products-container .product-card:nth-child(4) { animation-delay: var(--dur-fast); }
#products-container .product-card:nth-child(5) { animation-delay: var(--dur-fast); }
#products-container .product-card:nth-child(6) { animation-delay: var(--dur-fast); }
#products-container .product-card:nth-child(7) { animation-delay: var(--dur-base); }
#products-container .product-card:nth-child(8) { animation-delay: var(--dur-base); }
#products-container .product-card:nth-child(9) { animation-delay: var(--dur-slow); }

/* The first row has no entrance: it is the first thing on screen and holds the page's largest
   image, which waited at opacity 0 for the delay and the fade. product.php leaves .reveal off
   the same three columns. Three is the row on a desktop; on a phone it covers the first
   card, which is the one that matters there. */
#products-container .product-item:nth-child(-n+3) .product-card { animation: none; }

/* ── Inline Style Class Replacements ─────────────── */
.price-range-val { white-space: nowrap; color: var(--accent); }
.results-count-text { color: var(--muted-text); font-size: .85rem; }
.admin-delete-form { position: absolute; top: 8px; right: 8px; z-index: 20; }
.product-link { text-decoration: none; }
.qty-input-sm { width: 60px; }

/* ═══════════════════════════════════════════════════════════════════
   Quantity & Action Buttons — Redesign
   ═══════════════════════════════════════════════════════════════════ */

/* A unified stepper — one container with continuous edges */
.quantity-box {
    display: inline-flex !important;
    align-items: center;
    gap: 0 !important;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

.quantity-box > * {
    border-radius: 0 !important;
    border: none !important;
}

/* Internal separators between the elements */
.quantity-box > *:not(:last-child) {
    border-right: 1px solid var(--card-border-color) !important;
}

/* The first element: a radius on the left */
.quantity-box > *:first-child {
    border-top-left-radius: 7px !important;
    border-bottom-left-radius: 7px !important;
}

/* The last element: a radius on the right */
.quantity-box > *:last-child {
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}

/* The +/− buttons inside the container */
.quantity-box .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    background: transparent !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
}

.quantity-box .btn:hover {
    background: var(--bg-color) !important;
}

.quantity-box .btn:active {
    background: var(--section-border) !important;
}

/* The quantity field: borderless, transparent, centred */
.quantity-input {
    width: 56px !important;
    height: 40px !important;
    text-align: center;
    border: none !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 8px !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-input:focus {
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
}

/* The Add to Cart / Notify Me button beneath the stepper */
.quantity-box + .btn,
.quantity-box + form .btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.quantity-box + .btn:hover,
.quantity-box + form .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Product Card Hover Effect — Restored
   ═══════════════════════════════════════════════════════════════════ */
/* The main card in product.php carries: class="card product-card h-100 shadow border-0 position-relative" */
/* The inner image: class="card-img-top product-image" */

#products-container .product-card {
    transition: box-shadow var(--dur-base) var(--ease-decelerate), border-color var(--dur-base) var(--ease-decelerate) !important;
    overflow: hidden;
}

#products-container .product-card:hover {
    box-shadow: 0 12px 28px var(--shadow-hover) !important;
    border-color: var(--card-border-hover) !important;
}

#products-container .product-card .product-image {
    transition: transform var(--dur-slow) var(--ease-decelerate) !important;
}

#products-container .product-card:hover .product-image {
    transform: scale(1.05);
}

/* ── Filter Toolbar — tablet/phone spacing ─────── */
/* .row's own gutter already stacks these to 1 col on phones, 2 on
   tablet (see product.php's col-md-6 classes); this just keeps the
   price-range slider + its label readable when the column narrows. */
@media (max-width: 575px) {
    #results-count { text-align: center; }
}

/* ── Pagination — wrap on phones ─────────────────
   Bootstrap's .pagination is a flex row with no wrap by default;
   with enough pages the "Next" link can be pushed off-screen on
   narrow phones instead of dropping to a second line. */
@media (max-width: 575px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }
}

/* Respecting prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #products-container .product-card,
    #products-container .product-card .product-image {
        transition: none !important;
        transform: none !important;
    }
    #products-container .product-card:hover {
        box-shadow: 0 4px 12px var(--shadow-hover) !important;
    }
}


/* ==================================================
   Responsive — products grid
   ==================================================
   This replaced four stacked blocks — 767 / 575 / 576 / 320 — that all
   matched on a phone and cancelled one another out. The 767 block said
   50%, and the three below it said 100%, so the last one won and a
   phone got ONE card per row at every width. The comment above them
   described the mechanism accurately and nobody noticed that the
   mechanism was defeating the only rule anybody wanted.

   One query is enough now. From 576px up Bootstrap's own col-md-6 and
   col-lg-4 already give two and three across; below 576 the column
   carries no width class at all and `.row > *` makes it full width —
   that single case is all there is to override.

   .col-lg-4 alone is the hook. Every card column in this grid carries
   it, including the skeletons that js/features/products-catalog.js
   builds — so no JavaScript changes and public/js/dist stays untouched.
   ================================================== */
@media (max-width: 575px) {
    /* Half the default gutter: 24px of a 375px viewport was going to
       padding that two columns cannot spare. */
    #products-container {
        --bs-gutter-x: 0.75rem;
    }

    #products-container .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* The stepper is what decides whether two cards fit at all.
       components/quantity-box.css raises it to 44+56+44 = 144px below
       767px for touch, and a half column at 320px leaves 132px of card
       body. Those declarations are !important, so these have to be, and
       (1,2,0) then beats (0,2,0). 34px still clears WCAG 2.2's 24px
       minimum target size. New width: 34+40+34 = 108px. */
    #products-container .quantity-box .btn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px;
        font-size: 1rem !important;
    }
    #products-container .quantity-input {
        width: 40px !important;
        height: 34px !important;
        padding: 0 2px !important;
        font-size: 0.9rem !important;
    }

    /* "🛒 Add to Cart" at 1rem takes three lines in 132px. */
    #products-container .card-body .btn {
        padding: 6px 4px;
        font-size: 0.8rem;
    }
    #products-container .new-price.fs-5 {
        font-size: 1rem !important;
    }
    #products-container .old-price {
        font-size: 0.75rem;
    }
}

/* ==================================================
   The catalogue toolbar
   ==================================================
   Search, one filter button and Reset, on a single row. What stood here was a
   four-column Bootstrap grid that stacked on a phone: the search field, the
   sort select, the price slider and a full-width Reset each took a line of
   their own, about 400px of controls above the first product.

   Everything except the search and the reset now lives inside the dropdown
   panel, which is where four independent controls can be given room without
   spending the page's first screen on them.
   ================================================== */
.catalog-toolbar {
    flex-wrap: nowrap;
}

/* The search is the only elastic item; the button and Reset are their own
   width. min-width: 0 because a flex item will not shrink below its content
   otherwise, and the placeholder is long. */
#search-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.catalog-toolbar .dropdown,
.catalog-toolbar #reset {
    flex: 0 0 auto;
}

/* The autocomplete list had no styling of any kind — it was a bare <ul>, so
   when it filled it pushed the whole grid down the page instead of hanging
   over it. It is a dropdown now: out of flow, the width of the field it
   belongs to, and scrolling past five suggestions rather than growing. */
#autocomplete-list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--card-bg);
    border: 1px solid var(--section-border);
    border-radius: var(--card-radius);
    box-shadow: 0 6px 18px var(--shadow-color);
}

#autocomplete-list li {
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--text-color);
    cursor: pointer;
    border-bottom: 1px solid var(--section-border);
}

#autocomplete-list li:last-child {
    border-bottom: none;
}

#autocomplete-list li:hover {
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--accent-text);
}

/* ── The panel ────────────────────────────────────────────── */
.catalog-filter-panel {
    min-width: 270px;
    max-height: 70vh;
    overflow-y: auto;
}

/* The single-choice groups. These are radios wearing Bootstrap's .btn-check
   clothes rather than styled <div>s: the browser keeps the one-of-many
   behaviour, the keyboard works, and reset only has to check the "None" one. */
.catalog-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.catalog-btn-group .btn {
    padding: 3px 10px;
    font-size: 0.8rem;
}

@media (max-width: 575px) {
    /* The panel is anchored to the TOOLBAR, not to the button.
       Anchored to the button it cannot fit: the button sits at x=168 on a
       375px screen, so a 270px panel hangs off the right edge whichever way
       it is aligned, and no width that still holds four groups of controls
       will fit in the 207px to the right of it.

       Making .dropdown static hands the panel's containing block to
       .catalog-toolbar, which is full width — so left/right 0 spans the
       screen and `top: 100%` puts it directly under the whole row. The
       button carries data-bs-display="static" so Popper writes no transform
       to fight this. */
    .catalog-toolbar {
        position: relative;
        gap: 6px !important;
    }

    .catalog-toolbar .dropdown {
        position: static;
    }

    .catalog-filter-panel {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .catalog-toolbar #reset,
    .catalog-toolbar .dropdown-toggle {
        white-space: nowrap;
    }
}