/* ==============================================================
   STICKY BOTTOM ACTION BAR  – phone widths (≤ 767 px)
   ============================================================ */
   @media (max-width:767px){

    /* token --------------------------------------------------- */
    :root{ --btn-size-mobile:3.2rem; }

    /* whole bar ----------------------------------------------- */
    .col-btn-actions{
        position:fixed; bottom:0; left:0; z-index:1000;
        width:100%; background:#fff; padding:0 15px 2px;
        box-shadow:0 -1px 3px rgba(0,0,0,.12),
                   0 1px  2px rgba(0,0,0,.24);
    }

    /* inner flex row (no Bootstrap gutters) ------------------- */
    .col-btn-actions .header-content-action{
        margin:0;
        width:100%;
        display:flex; justify-content:space-between; align-items:center;
    }

    /* each column = equal slice, icon above label ------------- */
    .col-btn-actions .header-content-action > .col{
        flex:1 1 0;
        padding:0 !important;
        display:flex; flex-direction:column;
        align-items:center; justify-content:center;
        min-width:0;
    }

    /* --------  ICON PILL (links, buttons, lone <i>) ---------- */
    .col-btn-actions .header-content-action > .col :is(a,button,i.mbi){
        width:var(--btn-size-mobile);
        height:var(--btn-size-mobile);
        flex:0 0 var(--btn-size-mobile);
        display:grid; place-items:center;
        color:var(--cg-accent);
        background:color-mix(in srgb,var(--cg-accent) 8%,#fff 92%);
        border-radius:50%;
        box-shadow:0 1px 3px rgba(0,0,0,.06) inset,
                   0 2px 4px rgba(0,0,0,.06);
        transition:background var(--cg-dur-fast) var(--cg-ease-smooth),
                   transform  var(--cg-dur-fast) var(--cg-ease-smooth),
                   color      var(--cg-dur-fast) linear;
    }
    .col-btn-actions .header-content-action > .col :is(a,button):is(:hover,:focus-visible){
        background:var(--cg-accent); color:#fff;
        transform:translateY(-3px) scale(1.08);
    }
    .col-btn-actions .header-content-action > .col :is(a,button):active{
        transform:translateY(0) scale(.94);
    }

    /* icon glyph size ----------------------------------------- */
    .col-btn-actions i.mbi,
    .col-btn-actions .btn-nav{ font-size:1.6rem; line-height:1; }

    /* --------  HAMBURGER SPECIFICS --------------------------- */
    .col-btn-actions .btn-nav.mb-toggle-switch{
        position:relative;                     /* for the bars     */
    }
    /* three bars */
    .col-btn-actions .btn-nav.mb-toggle-switch span,
    .col-btn-actions .btn-nav.mb-toggle-switch span::before,
    .col-btn-actions .btn-nav.mb-toggle-switch span::after{
        width:1.4rem; height:2px;
        background:currentColor; border-radius:2px;
    }
    .col-btn-actions .btn-nav.mb-toggle-switch span{
        position:absolute; top:50%; left:50%;
        transform:translate(-50%,-1px);
    }
    .col-btn-actions .btn-nav.mb-toggle-switch span::before{
        content:""; position:absolute; top:-6px; left:0;
    }
    .col-btn-actions .btn-nav.mb-toggle-switch span::after{
        content:""; position:absolute; top: 6px; left:0;
    }

    /* --------  LABEL & BADGE --------------------------------- */
    .col-btn-actions .menu-btn-text{
        margin-top:.15rem;
        width:100%; text-align:center;
    }
    .col-btn-actions .counter{
        position:absolute; top:-6px; right:-10px;
        min-width:18px; height:18px; border-radius:9px;
        background:#2d337f; color:#fff; font-size:11px;
        display:flex; align-items:center; justify-content:center;
        padding:0 3px;
    }

/* ── 1 ▸ recenter the three hamburger bars ─────────────────── */
.col-btn-actions .btn-nav.mb-toggle-switch span,
.col-btn-actions .btn-nav.mb-toggle-switch span::before,
.col-btn-actions .btn-nav.mb-toggle-switch span::after{
    left:90% !important;               /* anchor at pill centre */
    transform:translateX(-50%) !important;   /* pull back half-width */
}

/* ── 2 ▸ keep label perfectly centred under every pill ─────── */
.col-btn-actions .menu-btn-text{
    width:auto;                         /* auto fits text width  */
    text-align:center;
    margin-top:.15rem;                  /* 0.15 rem breathing room */
}
.col-btn-actions .header-content-action > .col .menu-btn-text{
    width:100%   !important;             /* override width:auto / px etc.  */
    margin-top:.15rem !important;        /* kill negative margins          */
    text-align:center !important;
}
.col-btn-actions .btn-nav-mobile .menu-btn-text{
    margin-top:-2px !important;   /* tweak to taste */
}
.col-btn-actions .btn-nav.mb-toggle-switch{
    margin-bottom:0 !important;   /* overrides the theme’s +6 px */
    line-height:1 !important;
}
 /* 1 ▸ SET a single, final column height
           • 3.2 rem pill  +  0.15 rem label gap  +  ~1 rem text  ≈ 5 rem */
           :root{ --sticky-col-h:5rem; }

           .col-btn-actions .header-content-action > .col{
               height:var(--sticky-col-h); 
               margin-bottom: 5px;        /* <- all columns identical   */
           }
       
           /* 2 ▸ centre icon-pill block vertically inside the column */
           .col-btn-actions .header-content-action > .col :is(a,button,i.mbi){
               margin-top:0 !important;            /* remove stray margins       */
               margin-bottom:0 !important;
           }
           .col-btn-actions .btn-nav.mb-toggle-switch{          /* hamburger */
               line-height:1 !important;            /* kill 22 px baseline space */
           }
       
           
       
           /* 4 ▸ keep column a mini-flexbox so icon remains centred */
           .col-btn-actions .header-content-action > .col{
               position:relative;                   /* for absolute label        */
               justify-content:center;              /* icon stays vertically ctr */
           }
   }