/* Products page. The layout comes from plants.css; this file only has what the plants page doesn't have. */

.productsGalleryPrice {
    display: block;
    margin-top: calc(var(--tag-w) * .02);
    text-align: center;
    color: var(--search-button-color);
    font-family: var(--tea-bag-font);
    font-size: max(13px, calc(var(--tag-w) * .11));
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.productsGalleryCurrency {
    font-family: var(--tea-bag-font);
    font-size: max(10.5px, .72em);
    font-weight: 700;
    letter-spacing: .04em;
}

/* ---------- Order button: same design as the button of the search bar ---------- */

.productsGalleryOrderButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--search-h);
    padding: 8px clamp(22px, 2.4vw, 36px);
    border-radius: 999px;
    background: var(--search-button-color);
    color: var(--paper);
    font-family: var(--search-font);
    font-size: max(13.5px, calc(var(--search-h) * .39));
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .25s ease;
}

.productsGalleryOrderButton:hover {
    filter: brightness(.88);
}

.productsGalleryOrderButton:focus-visible {
    outline: 2px solid var(--leaf);
    outline-offset: -2px;
}

/* The row of the button under the first row of cards. */
.productsGalleryOrderRow {
    order: 1;
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
}

.productsGalleryOrderRow[hidden] {
    display: none;
}

/* ---------- Message when the search bar finds no product ---------- */

.productsGalleryEmpty {
    padding-block: clamp(20px, 3vw, 44px);
    text-align: center;
}

.productsGalleryEmptyTitle {
    margin: 0;
    color: var(--leaf-deep);
    font-family: var(--serif);
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.15;
    user-select: text;
    cursor: text;
}

.productsGalleryEmptyNote {
    margin: 8px 0 0;
    font-family: var(--serif);
    font-size: clamp(19px, 1.5vw, 22px);
    line-height: 1.3;
    user-select: text;
    cursor: text;
}

.productsGalleryOrderBottom {
    display: flex;
    justify-content: center;
    margin-top: clamp(40px, 4.4vw, 64px);
    padding-inline: var(--gutter);
}

/* ---------- While searching, the cards found are centered on the page ---------- */

.productsGalleryLineIsSearching {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- Cards of the first row go before the button, all other cards after it ---------- */

.productsGalleryLine > .plantsGalleryItem {
    order: 2;
}

@media only screen and (min-width: 1200px) {
    .productsGalleryLine > .plantsGalleryItem:nth-child(-n + 8) {
        order: 0;
    }
}

@media only screen and (min-width: 900px) and (max-width: 1199px) {
    .productsGalleryLine > .plantsGalleryItem:nth-child(-n + 6) {
        order: 0;
    }
}

@media only screen and (min-width: 601px) and (max-width: 899px) {
    .productsGalleryLine > .plantsGalleryItem:nth-child(-n + 5) {
        order: 0;
    }
}

@media only screen and (max-width: 600px) {
    .productsGalleryLine > .plantsGalleryItem:nth-child(-n + 3) {
        order: 0;
    }

    .productsGalleryOrderButton {
        min-height: 44px;
        font-size: 16px;
    }
}