/*
 * Catalog Magazin — search, view toggle, sorting, category chips, list view.
 *
 * Every colour, radius and border here is a BuddyBoss custom property, so the
 * controls follow the theme's palette instead of carrying their own. The site
 * exposes ~90 of them on :root; the ones used below are the button, content and
 * text groups. Each has a fallback for the case where the theme is not the one
 * defining them (a different theme, or the customizer output not yet built),
 * and the fallbacks are BuddyBoss's own current values rather than invented
 * ones.
 *
 * Change the theme's colours in Appearance and these follow. Nothing here
 * needs editing.
 */

.nsc-controls {
    margin: 0 0 1.5rem;
}

/* ---------- the one row: search | view | sorting ---------- */

.nsc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
}

.nsc-bar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    /* Pushed to the far end of the row, leaving the search on the left. */
    margin-left: auto;
}

/* ---------- search ---------- */

.nsc-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.nsc-search__field {
    /* Wide enough for the whole placeholder to read, but still a fixed size:
       a fully flexible box crowds the row and reads as the page's main input
       rather than one control among three. */
    flex: 0 1 24rem;
    width: 24rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--bb-body-text-color, #505356);
    background: var(--bb-content-background-color, #fff);
    border: 1px solid var(--bb-content-border-color, #E7E9EC);
    border-radius: var(--bb-input-radius, 4px);
}

.nsc-search__field:focus {
    border-color: var(--bb-input-focus-border-color, var(--bb-primary-color, #2097FC));
    box-shadow: var(--bb-input-focus-shadow, none);
    outline: 2px solid transparent; /* keeps a focus ring for forced-colours modes */
    outline-offset: 1px;
}

.nsc-search__field::placeholder {
    color: var(--bb-alternate-text-color, #5C6266);
    opacity: 1; /* Firefox dims placeholders further on its own */
}

/* ---------- buttons: chips, view toggle, submit ---------- */

/*
 * One shared look, because they are the same kind of control. BuddyBoss's
 * button radius is a pill (100px), so these are pills too.
 */
.nsc-chip,
.nsc-view,
.nsc-search__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    color: var(--bb-secondary-button-text-regular, #1E2132);
    background: var(--bb-secondary-button-background-regular, #F2F4F5);
    border: 1px solid var(--bb-secondary-button-border-regular, #F2F4F5);
    border-radius: var(--bb-button-radius, 100px);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nsc-chip:hover,
.nsc-view:hover,
.nsc-search__submit:hover,
.nsc-chip:focus,
.nsc-view:focus,
.nsc-search__submit:focus {
    color: var(--bb-secondary-button-text-hover, #fff);
    background: var(--bb-secondary-button-background-hover, #385DFF);
    border-color: var(--bb-secondary-button-border-hover, #385DFF);
    text-decoration: none;
}

/* The selected filter and the selected view use the theme's primary button. */
.nsc-chip--active,
.nsc-view--active {
    color: var(--bb-primary-button-text-regular, #fff);
    background: var(--bb-primary-button-background-regular, #2097FC);
    border-color: var(--bb-primary-button-border-regular, #2097FC);
}

.nsc-chip--active:hover,
.nsc-view--active:hover,
.nsc-chip--active:focus,
.nsc-view--active:focus {
    color: var(--bb-primary-button-text-hover, #fff);
    background: var(--bb-primary-button-background-hover, #385DFF);
    border-color: var(--bb-primary-button-border-hover, #385DFF);
}

.nsc-search__submit {
    color: var(--bb-primary-button-text-regular, #fff);
    background: var(--bb-primary-button-background-regular, #2097FC);
    border-color: var(--bb-primary-button-border-regular, #2097FC);
}

.nsc-search__submit:hover,
.nsc-search__submit:focus {
    color: var(--bb-primary-button-text-hover, #fff);
    background: var(--bb-primary-button-background-hover, #385DFF);
    border-color: var(--bb-primary-button-border-hover, #385DFF);
}

.nsc-search__clear {
    font-size: 0.85rem;
    color: var(--bb-alternate-text-color, #5C6266);
    text-decoration: underline;
}

.nsc-chip__count {
    font-size: 0.78em;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* ---------- view toggle: two halves of one control ---------- */

.nsc-views {
    margin: 0;
}

.nsc-views__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nsc-views__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Only the outer corners are rounded, so the pair reads as one segmented
   control rather than two separate pills. */
.nsc-views__item:first-child .nsc-view {
    border-radius: var(--bb-button-radius, 100px) 0 0 var(--bb-button-radius, 100px);
}
.nsc-views__item:last-child .nsc-view {
    border-radius: 0 var(--bb-button-radius, 100px) var(--bb-button-radius, 100px) 0;
    margin-left: -1px; /* collapse the doubled border between the halves */
}

/* ---------- sorting dropdown ---------- */

.nsc-ordering {
    margin: 0;
}

/* WooCommerce prints its own <form class="woocommerce-ordering">; the margin it
   carries would break the row's alignment. */
.nsc-ordering .woocommerce-ordering {
    margin: 0;
}

.nsc-ordering select,
.nsc-ordering .woocommerce-ordering select {
    padding: 0.4rem 1.9rem 0.4rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    height: auto;
    color: var(--bb-secondary-button-text-regular, #1E2132);
    background-color: var(--bb-secondary-button-background-regular, #F2F4F5);
    border: 1px solid var(--bb-secondary-button-border-regular, #F2F4F5);
    border-radius: var(--bb-button-radius, 100px);
    /* The theme strips the native arrow with appearance:none, so one is drawn
       back in. currentColor keeps it correct whatever the palette becomes. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.05rem) calc(50% + 0.1rem),
        calc(100% - 0.75rem) calc(50% + 0.1rem);
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
}

.nsc-ordering select:focus {
    border-color: var(--bb-primary-color, #2097FC);
    outline: 2px solid transparent;
    outline-offset: 1px;
}

/* ---------- category chips ---------- */

.nsc-cats__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nsc-cats__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- empty state ---------- */

.nsc-empty {
    margin: 1rem 0;
    color: var(--bb-body-text-color, #505356);
}

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
    .nsc-bar__right {
        margin-left: 0;
        width: 100%;
    }
    .nsc-search {
        width: 100%;
    }
    .nsc-search__field {
        flex: 1 1 auto;
        width: auto;
    }
    .nsc-ordering,
    .nsc-ordering select {
        width: 100%;
    }
}

/*
 * ---------- grid view ----------
 *
 * Nothing needed. BuddyBoss sizes shop items itself -- `.content-area
 * ul.products li.product { width: 23%; margin: 0 1% 2% }`, so 23% + 2% of
 * margin = 25%, four per row -- stepping down to 31.333% / 48% / 100% by
 * viewport. Four is what is wanted, so the theme is left to do it.
 *
 * Five across was tried here and read as too cramped, so the override is gone
 * rather than commented out. Bringing it back means an item width of 18% (five
 * lots of 18% + 2% margin) on the same fully-qualified selector the list view
 * uses, inside a min-width: 1200px query -- the width at which BuddyBoss itself
 * moves to four.
 */

/*
 * ---------- list view ----------
 *
 * The selectors below are deliberately long. The theme styles loop items at up
 * to three classes and three elements -- e.g.
 * `.woocommerce li.product a.woocommerce-LoopProduct-link>img` -- so a short
 * `.nsc-grid--list li.product img` loses on specificity and the rule silently
 * does nothing.
 *
 * Modelled on the member groups list at /membri/<user>/groups/, which is the
 * house pattern for "a list of things" on this site. That list is
 * `#groups-list.bp-list:not(.grid)`: one full-width row per item, rows joined
 * into a single bordered card with only the outer corners rounded,
 * `padding: 15px 20px` each, hovering to
 * `--bb-content-alternate-background-color`, avatar on the left with 20px of
 * space, text beside it. The numbers below are taken from those rules rather
 * than guessed.
 *
 * One row per item, not two: the reference list is single-column, and two
 * half-width rows read as cards again rather than as a list.
 */

.post-type-archive-product .content-area ul.products.nsc-grid--list {
    display: block;
    margin: 0;
    padding: 0;
    background: var(--bb-content-background-color, #fff);
    border: 1px solid var(--bb-content-border-color, #E7E9EC);
    border-radius: var(--bb-block-radius, 4px);
    overflow: hidden; /* lets the outer radius clip the first and last rows */
}

.post-type-archive-product .content-area ul.products.nsc-grid--list li.product,
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product.type-product {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 15px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 20px;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bb-content-border-color, #E7E9EC);
    border-radius: 0;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

.post-type-archive-product .content-area ul.products.nsc-grid--list li.product:last-child {
    border-bottom: 0;
}

.post-type-archive-product .content-area ul.products.nsc-grid--list li.product:hover {
    background-color: var(--bb-content-alternate-background-color, #FBFBFC);
}

/*
 * WooCommerce wraps thumbnail, title and price in a single anchor with no
 * wrapper around the text pair, so a wrapping flex row drops the price onto a
 * new line starting under the image instead of beneath the title. Grid places
 * the image down column one and stacks the text in column two.
 */
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .woocommerce-LoopProduct-link,
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product > a:first-of-type {
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 0.15rem;
    align-items: center;
    /* Leaves room for the action button at the end of the row, the way the
       groups list reserves 250px for its own right-hand column. */
    flex: 1 1 calc(100% - 200px);
    min-width: 0;
}

.post-type-archive-product .content-area ul.products.nsc-grid--list li.product a.woocommerce-LoopProduct-link > img,
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    margin: 0;
    object-fit: cover;
    /* The theme gives loop images a bottom-only border and top-only radius,
       for a card whose image sits flush against the text. In a list row the
       thumbnail is a standalone tile, so both are replaced outright rather
       than added to. */
    border: 1px solid var(--bb-content-border-color, #E7E9EC);
    border-radius: var(--bb-block-radius, 4px);
}

.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .woocommerce-loop-product__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    color: var(--bb-headings-color, #2097FC);
}

.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .price {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: left;
    color: var(--bb-alternate-text-color, #5C6266);
}

/* "TVA inclus" is supporting detail, not a second price. */
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .woocommerce-price-suffix {
    font-size: 0.8em;
    opacity: 0.8;
}

/*
 * The buy button.
 *
 * The theme styles this for a card's bottom edge:
 *
 *   .woocommerce li.product a.button.add_to_cart_button {
 *       background-color: var(--bb-content-background-color);   white
 *       color: var(--bb-primary-color);                         blue text
 *       border-radius: 0 0 var(--bb-block-radius) var(--bb-block-radius);
 *       border-top: 1px solid var(--bb-content-border-color);
 *       float: right; flex: 1; margin-top: auto;
 *   }
 *
 * In a list row none of that is right: it would stretch across the row, carry a
 * stray divider above it, and be a white button rather than a blue one. So this
 * names the anchor and both of its classes, putting it above the theme's four
 * classes and two elements, and replaces the lot -- a solid primary-coloured
 * button with the same pill radius as the chips and the view toggle.
 */
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product a.button.add_to_cart_button,
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .button {
    flex: 0 0 auto;
    float: none;
    align-self: center;
    margin: 0 0 0 auto;
    padding: 0.5rem 1.25rem;
    color: var(--bb-primary-button-text-regular, #fff);
    background-color: var(--bb-primary-button-background-regular, #2097FC);
    border: 1px solid var(--bb-primary-button-border-regular, #2097FC);
    border-top: 1px solid var(--bb-primary-button-border-regular, #2097FC);
    border-radius: var(--bb-button-radius, 100px);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.post-type-archive-product .content-area ul.products.nsc-grid--list li.product a.button.add_to_cart_button:hover,
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product a.button.add_to_cart_button:focus,
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .button:hover,
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .button:focus {
    color: var(--bb-primary-button-text-hover, #fff);
    background-color: var(--bb-primary-button-background-hover, #385DFF);
    border-color: var(--bb-primary-button-border-hover, #385DFF);
}

/* Hidden text WooCommerce adds for screen readers must not take a flex slot. */
.post-type-archive-product .content-area ul.products.nsc-grid--list li.product .screen-reader-text {
    position: absolute;
}

@media (max-width: 544px) {
    /* Stacked: a 72px thumbnail beside the title leaves a column barely wider
       than one word at phone size. */
    .post-type-archive-product .content-area ul.products.nsc-grid--list li.product .woocommerce-LoopProduct-link,
    .post-type-archive-product .content-area ul.products.nsc-grid--list li.product > a:first-of-type {
        grid-template-columns: 56px 1fr;
        column-gap: 12px;
        flex: 1 1 100%;
    }
    .post-type-archive-product .content-area ul.products.nsc-grid--list li.product img {
        width: 56px;
        height: 56px;
    }
    .post-type-archive-product .content-area ul.products.nsc-grid--list li.product a.button.add_to_cart_button,
    .post-type-archive-product .content-area ul.products.nsc-grid--list li.product .button {
        margin: 0.75rem 0 0;
        width: 100%;
        white-space: normal;
    }
}