/*
 * Shop archive, mobile (≤767px): the Filtro/Renditje button bar, and the filter
 * sidebar as an off-canvas panel.
 *
 * The bar and the overlay are hidden above the breakpoint so the desktop layout
 * (sidebar column + grid) is untouched.
 */

.bp-shopbar,
.bp-filters-overlay { display: none; }

@media (max-width: 767px) {

  /* ---------------- Button bar ----------------
   * Pinned to the bottom of the viewport and centred, per the reference's
   * `fixed bottom-0 left-0 z-50 flex justify-center w-screen py-3` bar: the
   * controls stay reachable however far down a 57-page grid the shopper is,
   * instead of scrolling away with the top of the list.
   *
   * z-index sits below the filter panel (91) and its overlay (90) so opening the
   * panel covers the bar, and below the messenger bubble's 80? No — above it, so
   * the bubble never sits on top of the buttons. */
  .bp-shopbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    display: flex;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    padding: 12px 0;
    /* Clears the home indicator on notched phones. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;   /* the strip itself must not swallow taps */
  }
  .bp-shopbar > * { pointer-events: auto; }

  /* The bar is fixed, so the grid needs room to scroll clear of it. */
  .bp-shoplay__main { padding-bottom: 76px; }

  /* ---------------- Top spacing ----------------
   * The sort control is relocated into the fixed bar, which leaves
   * .woocommerce-products-header and the toolbar inside it holding nothing but
   * their own margins — that empty box was most of the gap between the header
   * and the first row of products. Collapsed rather than hidden, because the JS
   * moves the ordering form back into the toolbar on resize to desktop and needs
   * the container to still be there. */
  body.woocommerce .bp-shoplay,
  body.woocommerce-page .bp-shoplay { padding-top: 0 !important; }

  body.woocommerce #primary.content-area,
  body.woocommerce #main.site-main,
  body.woocommerce-page #main.site-main { padding-top: 0 !important; margin-top: 0 !important; }

  /* Once the sort select is relocated into the fixed bar this header holds only
     empty wrappers, so it is removed from the layout rather than merely
     zeroed — that box was the gap under the site header. display:none keeps the
     node in the DOM, which the resize-to-desktop handler needs in order to move
     the ordering form back into it. */
  body.woocommerce .woocommerce-products-header,
  body.woocommerce-page .woocommerce-products-header { display: none !important; }

  .woocommerce-result-count {
    margin: 0 0 0.6rem !important;
    font-size: 13px;
  }

  /* Both controls share this look: black block, white label, square corners —
     the same language as the "Merr Gentli App" button. */
  .bp-shopbar__btn,
  .bp-shopbar__sort .orderby {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    border: 1px solid #000;
    border-radius: 0;
    background: #000;
    color: #fff;
    font-family: var(--oxa-font-sans, Montserrat, sans-serif);
    font-size: 16px;        /* per the reference bar */
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }

  .bp-shopbar__sort { display: flex; }
  .bp-shopbar__sort .woocommerce-ordering { margin: 0; }

  /* The native select keeps its own picker — only the chrome is restyled.
     120x40, black, white 16px label, padding 8px 40px 8px 12px per the
     reference; the right-hand 40px is the room the chevron sits in.
   *
   * The long selector is required. bp-shop-filters.css:503 styles this element
   * as `.bp-shoplay .woocommerce-ordering select.orderby` — specificity 0,3,1,
   * pinning it to 250px wide on a white background. A shorter selector here
   * (0,2,0) lost outright no matter the load order, which is why the button
   * stayed white and wide. This is 0,4,1 and wins on specificity alone. */
  .bp-shopbar .bp-shopbar__sort .woocommerce-ordering select.orderby {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    height: 40px;
    min-height: 40px;
    padding: 8px 40px 8px 12px;
    border: 1px solid #000;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--oxa-font-sans, Montserrat, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: #000;
    /* Restated because the rule being overridden also sets a dark chevron. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
  }

  /* ---------------- Off-canvas panel ---------------- */
  .bp-filters-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgb(0 0 0 / 45%);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .bp-filters-overlay.is-open { opacity: 1; }
  .bp-filters-overlay[hidden] { display: none; }

  /*
   * !important on the layout properties: inc/shop-filters.php writes the
   * sidebar's width and spacing as inline custom properties and rules generated
   * from its own settings screen, which outrank a plain stylesheet selector.
   * Only the box is overridden — everything inside the panel keeps the styling
   * that file gives it, which is what makes the panel already look right.
   */
  .bp-filters {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 91;
    width: min(340px, 88vw) !important;
    max-width: none !important;
    margin: 0 !important;
    /* Bottom padding at a minimum: the 88px that used to be here was clearance
       for the fixed Filtro/Renditje bar, which turned out to be unnecessary —
       the panel (z 91) and its overlay (z 90) both sit above that bar (z 85), so
       nothing of it shows while the panel is open. */
    padding: 44px 16px 8px !important;
    background: #fff;
    /* The frame does not scroll: the form inside it does. A scrolling panel
       sized the form to its own leftover space, which is what parked the
       submit mid-screen once a group was expanded. */
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: none;
  }
  .bp-filters.is-open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgb(0 0 0 / 25%);
  }

  /*
   * Group labels at 14px, per the reference.
   *
   * Redeclaring the variable on .bp-filters rather than overriding font-size on
   * the rows: inc/shop-filters.php writes --bp-flt-size as an inline style on
   * the .bp-shoplay wrapper, and a declaration on a nearer element wins over an
   * inherited one — so this needs no !important, unlike the column counts.
   */
  .bp-filters { --bp-flt-size: 14px; }

  /* Set on the row as well as through the variable. The variable alone relies on
     inheritance from .bp-filters winning over the inline --bp-flt-size that
     shop-filters.php writes on the .bp-shoplay wrapper; stating the font-size
     directly removes any doubt about which declaration the row resolves. */
  .bp-filters .bp-filters__head,
  .bp-filters .bp-filters__title {
    font-size: 14px !important;
  }

  /* The option values — ZEZE, BEZH, KAFE … — at 16px solid black, per the
     reference. bp-shop-filters.css sets them to 15px in --bp-flt-fg (#43454b)
     via `.bp-filters__option label` (0,1,1); the extra class here makes this
     0,2,1 so it wins. Uppercase was already in place. */
  .bp-filters .bp-filters__option label {
    font-size: 16px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
  }

  /* Except a chosen size, which is white on the black tile.
   *
   * The tile itself comes from bp-shop-filters.css, and it sets `color: #fff`
   * there — but the rule above carries !important and loads later, so on a phone
   * the number came out black on black and the selected size read as an empty
   * square. Same !important, restated only for the one state that needs it. */
  .bp-filters .bp-filters__group--size .bp-filters__option.is-checked label,
  .bp-filters .bp-filters__group--size .bp-filters__option:has( input:checked ) label,
  .bp-filters .bp-filters__group--size_instock .bp-filters__option.is-checked label,
  .bp-filters .bp-filters__group--size_instock .bp-filters__option:has( input:checked ) label {
    color: #ffffff !important;
  }

  /* Group arrows a step darker than the #6b7280 they inherit. */
  .bp-filters .bp-filters__arrow { color: #43454b; }

  /* No hairline under each group — the reference separates the rows by spacing
     alone. This also removes the stray line that used to dangle under the last
     group, above the panel's empty space. */
  .bp-filters .bp-filters__group {
    border-bottom: 0 !important;
  }

  /* Tighter rows: 0.9rem top and bottom left the eight groups spread over most
     of the panel. */
  .bp-filters .bp-filters__head {
    padding: 0.45rem 0 !important;
  }
  .bp-filters .bp-filters__body { padding-bottom: 0.35rem; }

  /*
   * "Filtro" pinned to the bottom of the panel.
   *
   * The panel is a flex column and the form fills it, so margin-top:auto pushes
   * the submit to the bottom edge even when the eight collapsed groups only fill
   * the top third — which is what the reference shows. `sticky` keeps it in view
   * once an expanded group makes the form taller than the panel.
   */
  .bp-filters { display: flex; flex-direction: column; }
  .bp-filters .bp-filters__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* The scroll region. Its bottom edge is the panel's, so the sticky submit
       below anchors to the bottom of the screen however long the list gets. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* A flick at either end stays in the panel instead of scrolling the shop
       behind it. */
    overscroll-behavior: contain;
  }
  .bp-filters .bp-filters__submit {
    /* Pinned to the bottom of the scroll region, whose bottom edge is the
       panel's: the button therefore sits on the bottom of the screen whatever
       is expanded. It is the form's last child, so no row can end up under it;
       the margin keeps the row above it from touching. No background is set
       here — bp-shop-filters.css already paints it grey, and black once
       something is ticked, which is both what hides the rows passing behind it
       and how it reads as "nothing to apply yet". */
    margin-top: auto !important;
    margin-bottom: 0 !important;
    position: sticky;
    bottom: 0;
  }

  .bp-filters__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: #1d1d1d;
    cursor: pointer;
  }

  /* An expanded group scrolls inside itself rather than pushing the rest of the
     list off-screen — Ngjyra alone has 14 options. */
  .bp-filters__list {
    max-height: 46vh;
    overflow-y: auto;
  }

  /* "Filtro" pinned to the bottom of the panel so it is reachable without
     scrolling back down past an open group. */
  .bp-filters__submit {
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 1rem;
  }

  /* The page must not scroll behind an open panel. */
  body.bp-filters-locked { overflow: hidden; }

  /*
   * Lift the two floating buttons clear of the fixed bar on shop archives —
   * otherwise the bar lands on top of them. Body-class selectors so this applies
   * only where the bar exists, and so it outranks the single-class rules in
   * inc/bp-messenger.php regardless of load order.
   */
  body.post-type-archive-product .bp-appcta,
  body.tax-product_cat .bp-appcta,
  body.tax-product_brand .bp-appcta,
  body.post-type-archive-product .bp-messenger,
  body.tax-product_cat .bp-messenger,
  body.tax-product_brand .bp-messenger {
    /* 94px, not the 84px the filter bar alone needed: the footer's 86px
       copyright bar is taller, and these buttons have to clear that too once
       the archive is scrolled to the end. Matches inc/bp-messenger.php. */
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }

  /*
   * The submit sits 8px off the bottom edge, as on the reference — plus the
   * home indicator's strip on a notched phone, where a flat 8px would put the
   * button under the swipe bar. 88px used to sit here as clearance for the
   * fixed Filtro/Renditje bar, which the panel (z 91) covers anyway (bar z 85).
   */
  .bp-filters { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
}