/*
 * BesaPharm — Mobile-only overrides (≤767px).
 * Section-padding rules + the new mobile header/drawer + mobile carousels + newsletter.
 * The base "display:none" rules below (outside the media query) keep the new
 * mobile header hidden on desktop/tablet; it only shows ≤767px.
 */

/* Hidden everywhere by default — only revealed inside the ≤767px block below. */
.bp-mh,
.bp-drawer,
.bp-drawer-overlay { display: none; }
.bp-carousel-count { display: none; }    /* carousel page counter — shown only ≤767px */
.bp-badges-controls { display: none; }    /* injected badges arrows — shown only ≤767px */

@media (max-width: 767px) {

  /* Main page side padding on mobile → 15px (homepage).
   *
   * Top padding trimmed from main.css's 2rem to 8px so the promo banner sits
   * just under the header instead of floating below a 32px gap. !important on
   * both because `body.page main.oxa-page` in main.css carries an element
   * selector and so outranks this one. Bottom padding is left alone. */
  body.home .oxa-page {
    padding-inline: 15px !important;
    padding-top: 8px !important;
  }

  /* Single product page side gutter → 15px. Set on .site-main (content wrapper)
     and zero #primary so the two default WooCommerce wrappers don't stack. */
  body.single-product #primary { padding-inline: 0 !important; }
  /* Side gutter for the product page lives in bp-product.css (8px) — that file
     loads later and states it !important, so setting it here would be dead code.
     Only the block padding is cleared here. */
  body.single-product #main.site-main,
  body.single-product .site-main { padding-block: 0 !important; }

  /* ── Padding math note ──
   * To get an EXACT side gap on the full-bleed sections we force them to 100vw
   * so the page gutter no longer applies, then the inner padding IS the total. */

  /* Home soft CTAs (both #1 and #3): exactly 40px each side. */
  body.home .oxa-cta--soft {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    padding-inline: 40px !important;
    padding-block: 36px !important;
    box-sizing: border-box !important;
  }
  body.home .oxa-cta--soft .oxa-container {
    padding-inline: 0 !important;
    max-width: none !important;
  }

  /* Home video: exactly 15px each side; drop the dark frame shadow/border edge. */
  body.home .oxa-video {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
  }
  body.home .oxa-video .oxa-container {
    padding-inline: 15px !important;
    max-width: none !important;
  }
  body.home .oxa-video__frame {
    border: none !important;
    box-shadow: none !important;
  }

  /* ===================================================================
   * MOBILE PAGE GUTTERS — standard 15px side padding (matches the rest).
   * Target #main + the wrapper class so we outrank component rules that use
   * an id, e.g. blog_index's `#main.oxa-page:has(.bp-blog){padding-inline:0}`
   * and the bp-overrides zeroing on checkout.
   * =================================================================== */
  body.woocommerce-checkout #main.oxa-page,
  body.woocommerce-checkout #main.site-main {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  body.page-id-101799 #main.oxa-page {   /* Blog */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  body.page-id-101839 .oxa-page {         /* Termet dhe Kushtet (already worked) */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* ===================================================================
   * MOBILE HEADER — ☰ left · logo center · cart right · search + meta below
   * Not sticky. The BAR uses the desktop "headroom" behaviour (JS): pins to
   * the top once scrolled past, hides on scroll-down, reveals on scroll-up.
   * =================================================================== */

  /* The announcement strip is the only text in the header crop on mobile — the
   * bar below it is icons and the logo image — and at the 16px the Appearance →
   * Announcement Bar setting writes it was barely fitting one and a half
   * messages across a 390px phone. The reference steps its marquee down on
   * mobile (measured 12px there, against 16px from 640px up), so match it.
   *
   * The variable is redeclared rather than font-size overridden: bp-header.css
   * also builds the strip's min-height out of it, so one declaration keeps the
   * box in proportion with the text. !important because the setting writes
   * --bp-announce-size inline on the element, and an inline declaration
   * otherwise outranks any stylesheet. Desktop keeps the setting's value. */
  .bp-announcement { --bp-announce-size: 12px !important; }

  .bp-mh {
    display: block;
    position: relative;
    background: #fff;
    /* No border here — see .bp-mh__bar below. */
  }

  /* Top bar: ☰ + account · logo · search + cart */
  .bp-mh__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 90px;
    padding: 0 0.75rem;
    background: #fff;
    /* The hairline belongs to the bar, not to <header>.
     *
     * On the header it looked identical at rest and wrong the moment the bar
     * pinned itself: the bar leaves the flow, the 90px spacer takes its place
     * inside the same <header>, and the header's border then drew a stray line
     * across the bottom of that empty box — a blank strip plus a rule hanging
     * under the pinned bar, which is the "something off under the header" on the
     * shop page. Scrolling down made it worse: the bar slid away and left the
     * line behind with nothing above it.
     *
     * On the bar, the line travels with it — pinned when it pins, gone when it
     * hides — and the spacer is pure invisible space, which is all it was ever
     * meant to be. */
    border-bottom: 1px solid #e5e7eb;
    transition: transform 0.32s ease;
    will-change: transform;
  }

  /* The expanded search panel sits below the bar and needs the same edge against
     the content; it is `hidden` when closed, so this costs nothing until it is
     opened. */
  .bp-mh__search { border-bottom: 1px solid #e5e7eb; }

  /* Equal flex basis on both side groups is what centres the logo — it stays
     centred even when the cart badge widens the right-hand group. */
  .bp-mh__group {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: 1 1 0;
    min-width: 0;
  }
  .bp-mh__group--right { justify-content: flex-end; }

  /* Headroom: pinned + hide/reveal (mirrors desktop bp-headroom) */
  .bp-mh__bar.bp-mh-stuck {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 55;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }
  .bp-mh__bar.bp-mh-stuck.bp-mh--hidden { transform: translateY(-100%); }
  .bp-mh-spacer { display: none; }
  .bp-mh-spacer.is-active { display: block; }

  .bp-mh__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #1d1d1d;
    cursor: pointer;
    position: relative;
    text-decoration: none;
  }

  /* Hamburger icon (3 lines) */
  .bp-mh__burger,
  .bp-mh__burger::before,
  .bp-mh__burger::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: #1d1d1d;
    border-radius: 2px;
  }
  .bp-mh__burger { position: relative; }
  .bp-mh__burger::before { position: absolute; left: 0; top: -7px; }
  .bp-mh__burger::after  { position: absolute; left: 0; top: 7px; }

  /* Logo — 90px, centered */
  /* flex:0 — the two side groups do the centring now, so the logo must size to
     its own content rather than absorbing the leftover space. */
  .bp-mh__logo {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  /* Capped from Appearance → Header (logo max height, mobile). */
  .bp-mh__logo img {
    max-height: var(--bp-hdr-logo-h-mobile, 40px);
    width: auto; height: auto; display: block; object-fit: contain;
  }

  /* Cart count bubble */
  .bp-mh__cart-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--bp-brand, #111111);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }

  /* Search row */
  .bp-mh__search {
    position: relative;
    padding: 0 0.75rem 0.625rem;
  }
  .bp-mh__search-icon {
    position: absolute;
    left: 1.625rem;
    top: 12px;
    color: #6b7280;
    pointer-events: none;
  }
  .bp-mh__search input {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 16px;            /* ≥16px prevents iOS zoom-on-focus */
    color: #1d1d1d;
    background: #fff;
    outline: none;
  }
  .bp-mh__search input:focus { border-color: var(--bp-brand, #111111); }

  /* The search row is collapsed until the toggle in the bar opens it, so the
     header keeps to a single row. [hidden] does the hiding; this only styles the
     open state's separation from the bar. */
  .bp-mh__search:not([hidden]) {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.625rem;
  }

  /* ---- Overlay + drawer ---- */
  .bp-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    /*
     * The menu is the topmost layer on mobile. Full ladder, so the next person
     * adding a fixed element does not have to reverse-engineer it:
     *
     *   55  sticky mobile header bar
     *   80  Messenger bubble, "Merr Gentli App"   (inc/bp-messenger.php)
     *   85  shop Filtro/Renditje bar              (bp-shop-mobile-filters.css)
     *   90  shop filter overlay
     *   91  shop filter panel
     *   95  drawer overlay   ← here
     *   96  drawer
     *
     * At 60/70 the drawer opened UNDERNEATH the shop bar and the two floating
     * buttons, which showed through on top of the menu.
     */
    z-index: 95;
  }
  .bp-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

  .bp-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    /* 300px, matching the reference; capped so it never fills a small screen. */
    width: 300px;
    max-width: 86%;
    background: var(--bp-drawer-bg, #262626);
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 96;   /* see the ladder on .bp-drawer-overlay above */
    overflow: hidden;                /* the panels scroll, not the drawer */
  }
  .bp-drawer.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.18); }

  /* Persistent X header (stays put across all panels) */
  .bp-drawer__head { flex: 0 0 auto; display: flex; padding: 0.75rem 0.75rem 0.5rem; }
  .bp-drawer__close {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; background: none; border: 0; color: var(--bp-drawer-fg, #ffffff); cursor: pointer;
  }

  /* ---- Sliding panels ----
   * Root sits at translateX(0); each sub-panel waits at translateX(100%) and
   * slides over the root when activated. "Back" slides it out to the right.
   *
   * Palette and metrics are taken from the reference build: 300px panel, 30px
   * rows, 14px Montserrat, white text. Rows are transparent rather than a
   * lighter fill — the reference sets background:transparent on the link, and a
   * lighter bar over a darker panel made the whole drawer read washed out. One
   * flat tone, with a faint hairline between rows. */
  .bp-drawer__viewport { position: relative; flex: 1 1 auto; overflow: hidden; }

  .bp-drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bp-drawer-bg, #262626);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.28s ease;
  }
  .bp-drawer__panel--root { transform: translateX(0); }   /* base layer */
  .bp-drawer__panel.is-active { transform: translateX(0); }

  /* Root list */
  .bp-drawer__list { list-style: none; margin: 0; padding: 0; }
  .bp-drawer__item + .bp-drawer__item { border-top: 1px solid var(--bp-drawer-sep, rgba(255, 255, 255, 0.07)); }

  .bp-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    /* 30px tall with 10px side padding, per the reference. min-height rather
       than height so a wrapped label grows the row instead of clipping. */
    min-height: 30px;
    padding: 0 10px;
    font-family: var(--oxa-font-sans, Montserrat, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bp-drawer-fg, #ffffff);
    background: var(--bp-drawer-row, transparent);
    border: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .bp-drawer__link:active { background: var(--bp-drawer-row-active, rgba(255, 255, 255, 0.09)); }

  /* The page you are on is the one row that keeps a lighter fill — on the
     homepage that is "Ballina". Everything else sits flush on the panel. */
  .bp-drawer__item--current > .bp-drawer__link {
    background: var(--bp-drawer-row-current, #333333);
  }

  /* "is-accent" on a menu item in wp-admin. Its own colour rather than the
     desktop --bp-hdr-accent, which is #000000 and would vanish here. */
  .bp-drawer__item--accent .bp-drawer__link { color: var(--bp-drawer-accent, #e11d48); }

  .bp-drawer__chev { color: var(--bp-drawer-chev, #b8b8b8); flex-shrink: 0; }

  /* Sub-lists expand in place beneath their parent. Light panel with muted
     text, per the reference — the inverse of the dark parent rows, which is what
     makes an open group obvious without an indent or a rule. */
  .bp-drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bp-drawer-sub-bg, #f0f0f0);
  }
  .bp-drawer__sub[hidden] { display: none; }

  .bp-drawer__sub a {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    font-family: var(--oxa-font-sans, Montserrat, sans-serif);
    font-size: 14px;
    color: var(--bp-drawer-sub-fg, #8a8a8a);
    text-decoration: none;
  }
  .bp-drawer__sub a:active { color: var(--bp-drawer-sub-fg-active, #1d1d1d); }

  /* The open parent keeps the lighter fill, and its chevron points up. */
  .bp-drawer__item.is-open > .bp-drawer__link {
    background: var(--bp-drawer-row-current, #333333);
  }
  .bp-drawer__item.is-open > .bp-drawer__link .bp-drawer__chev {
    transform: rotate(180deg);
  }
  .bp-drawer__chev { transition: transform 0.2s ease; }

  /* ===================================================================
   * MOBILE CAROUSELS
   * (Higher specificity + !important so these beat each component's own
   *  responsive --per-view rules regardless of stylesheet load order.)
   * =================================================================== */

  /* Awards / badges → swipeable carousel, 2 visible at a time */
  .oxa-badges .oxa-badges__row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .oxa-badges .oxa-badges__row::-webkit-scrollbar { display: none; }
  .oxa-badges .oxa-badges__item {
    flex: 0 0 calc((100% - 1rem) / 2) !important;   /* exactly 2 per view */
    max-width: none !important;
    scroll-snap-align: start;
  }
  /* Uniform badge image height (template sets per-badge max-height inline → !important). */
  .oxa-badges .oxa-badges__img {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Categories → 2 per page, tighter 15px gap, counter pagination (dots hidden). */
  .bp-cats .bp-cats__track {
    --bp-cats-per: 2 !important;
    gap: 15px !important;
  }
  .bp-cats .bp-cats__card { flex: 0 0 calc((100% - 15px) / 2) !important; }
  .bp-cats .bp-cats__dots { display: none !important; }

  /* Products (bestsellers) → 1 per page (dots hidden, counter shown instead) */
  .bp-bestsellers .bp-bestsellers__track { --bp-bs-per: 1 !important; }
  .bp-bestsellers .bp-bestsellers__dots { display: none !important; }

  /* Shared carousel page counter (bestsellers + categories + badges) */
  .bp-carousel-count {
    display: inline-block;
    min-width: 52px;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1d1d1d;
  }

  /* Injected badges arrows + counter row */
  .bp-badges-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
  }
  .bp-badges-nav {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: #1d1d1d;
    border-radius: 9999px; transition: background 0.15s ease, color 0.15s ease;
  }
  .bp-badges-nav:hover { background: #f3f4f6; color: var(--bp-brand-hover, #3d3d3d); }

  /* ===================================================================
   * NEWSLETTER — every page (mobile). Input and button as two separate
   * outlined boxes stacked with a gap; button is a pill, same height as input.
   * Scoped via the .oxa-newsletter ancestor so specificity beats the
   * component's own !important rules regardless of load order.
   * =================================================================== */
  .oxa-newsletter .oxa-newsletter__title {
    font-size: 30px !important;
    font-weight: 700 !important;
  }
  .oxa-newsletter .oxa-newsletter__form {
    flex-direction: column !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  .oxa-newsletter .oxa-newsletter__input {
    height: 56px !important;
    box-sizing: border-box !important;
    border: 1px solid #1d1d1d !important;
    border-radius: 10px !important;
  }
  .oxa-newsletter .oxa-newsletter__btn {
    width: 100% !important;
    height: 56px !important;
    box-sizing: border-box !important;
    border: 1px solid #1d1d1d !important;
    border-radius: 9999px !important;           /* pill */
  }
  .oxa-newsletter .oxa-newsletter__privacy a {
    font-weight: 700 !important;
    color: #1d1d1d !important;
  }

  /* ===================================================================
   * SINGLE PRODUCT GALLERY — show the framed image's full border.
   * bp-product.css applies overflow:hidden to the gallery wrappers at
   * ≤1024px, which clips the top/bottom of the 1px image border. Let it
   * show; horizontal scroll is still prevented by the .site-main
   * overflow-x:hidden ancestor. Doubled body class bumps specificity so
   * this wins over bp-product.css (which loads after this file).
   * =================================================================== */
  body.single-product.single-product div.product .woocommerce-product-gallery,
  body.single-product.single-product div.product .woocommerce-product-gallery .flex-viewport,
  body.single-product.single-product div.product .woocommerce-product-gallery__wrapper {
    overflow: visible !important;
  }
  /* FlexSlider floats its slides, and `overflow: hidden` was the only thing
     making the viewport account for their height. Letting the overflow show
     collapsed it to zero, so the thumbnails climbed over the photograph.
     flow-root contains the floats the same way without clipping anything. */
  body.single-product.single-product div.product .woocommerce-product-gallery .flex-viewport {
    display: flow-root !important;
  }

  /* ===================================================================
   * FOOTER (mobile) — 15px left gutter + reference-style "Follow us" block:
   * left-aligned brand column with a heading above the community text and
   * the social icons in a left-aligned row.
   * =================================================================== */
  .bp-footer .bp-container { padding-left: 15px !important; }

  .bp-footer__brand { align-items: flex-start !important; }
  .bp-footer__logo { align-self: flex-start !important; }
  .bp-footer__brand .bp-social { align-self: flex-start !important; }

  /* "Na ndiqni" heading rendered as a label above the community text. */
  .bp-footer__brand .bp-footer__about::before {
    content: "Na ndiqni";
    display: block;
    margin-bottom: 0.75rem;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
  }

}