/**
 * BeautyConnection — Pagina Prețuri
 *
 * Overrides on top of product-navigation.css for "anchors mode" (sticky
 * pill row, single-line scroll, scroll-spy active state) plus per-category
 * scroll-margin so anchor jumps don't get hidden under the sticky bar.
 *
 * Depends on bc-global (tokens) and bc-product-navigation (base pill
 * styling).
 */

/* ─── H1 (page title) — same visual treatment as product-nav H2 title.
   The base .bc-product-nav__title rule already styles it; this is a
   safety override in case any global H1 rule outranks it. */
.bc-product-nav--anchors .bc-product-nav__title {
    font-family: var(--bc-font-heading);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 1.2;
    color: var(--bc-black);
    margin: 0;
}

/* ─── Sticky pill row.
   Only the inner sticky wrapper sticks, so the H1 stays in normal flow. */
.bc-product-nav--anchors .bc-product-nav__sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    padding-block: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
}

/* Single-line horizontal scroll on all viewports — wrapping pills make a
   sticky bar grow taller after sticking, which is visually jarring. */
.bc-product-nav--anchors .bc-product-nav__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bc-product-nav--anchors .bc-product-nav__pills::-webkit-scrollbar {
    display: none;
}

.bc-product-nav--anchors .bc-product-nav__pill {
    flex-shrink: 0;
}

/* ─── Anchor jump offset.
   When a pill is clicked, the browser scrolls so the section's top edge
   meets the viewport — but our sticky bar covers that edge. scroll-margin
   pushes the landing point down by the bar's approximate height. */
.bc-preturi-category {
    scroll-margin-top: 80px;
}

@media (max-width: 767px) {
    .bc-preturi-category {
        scroll-margin-top: 64px;
    }
}

/* ─── Per-category section.
   Reuses .bc-products-list paddings. The H2 sits left, no top-right link
   and no per-category payment row by design (Q3 → option A "bare"). */
.bc-preturi-category .bc-products-list__top {
    margin-bottom: 0;
}

/* ─── Bottom-of-page payment strip (when show_payment_icons is on).
   The wrapping .bc-preturi-payment section gives it standalone padding
   since it's no longer inside a products-list section. */
.bc-preturi-payment {
    padding: 60px 0;
}