/* ======================================================================
   Bulk Quick Order  –  v1.2.1
   ====================================================================== */

/* ───────────────────  Grid wrapper  ─────────────────── */
.bulk-qo-grid{
    display:grid;
    gap:1rem;
}

/* ─── Responsive column counts ─── */
@media (min-width:1024px){                 /* desktop */
    .bulk-qo-grid{grid-template-columns:repeat(5,1fr);}
}
@media (min-width:768px) and (max-width:1023.98px){   /* tablets */
    .bulk-qo-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:767.98px){                /* phones */
    .bulk-qo-grid{grid-template-columns:1fr;}
}

/* ───────────────────  Card styling  ─────────────────── */
.bulk-qo-card{
    padding:.75rem;
    text-align:center;
    transition:box-shadow .2s;
}
.bulk-qo-card.active{
    box-shadow:0 0 0 3px var(--wc-highlight,#3182ce);
}
.bulk-qo-thumb img{
    display:block;
    width:100%;
    height:auto;
}
.bulk-qo-qty-wrap{display:none;margin-top:.5rem;}

/* ------------- Restore browser spinners on mobile  ---------- */
/* Flatsome strips them out; we re-enable */
.bulk-qo-qty::-webkit-inner-spin-button,
.bulk-qo-qty::-webkit-outer-spin-button{
    -webkit-appearance:auto !important;
    margin:0;
}
.bulk-qo-qty{
    -moz-appearance:number-input !important;  /* Firefox   */
}

/* ======================================================================
   Sticky / fixed   “Add selected to cart”   bar
   ====================================================================== */

/* 1) default = edge-to-edge mobile / tablet bar */
.bulk-qo-submit{
    position:fixed !important;   /* defeat any theme rules          */
    left:0; right:0; bottom:0;   /* stick to viewport edges         */
    width:33%;
    height:3.25rem;
    line-height:3.25rem;
    font-size:1rem;
    border-radius:0;
    grid-column:1 / -1;          /* still spans grid row if fixed
                                    gets disabled by a CSS debugger */
    z-index:9999;                /* over footer, cookie bars, etc.  */
}

/* 2) desktop – “floating” centred bar with margins */
@media (min-width:1024px){
    .bulk-qo-submit{
        width:calc(33% - 4rem);   /* 2-rem side gutters             */
        max-width:1200px;          /* optional hard cap              */
        left:50%;
        transform:translateX(-50%);
        border-radius:.25rem;
        bottom:2rem;               /* float a little above edge      */
    }
}

/* 3) Make sure content never hides under the bar */
body{
    padding-bottom:4rem;  /* ≥ button height + breathing space */
}

/* ─── WooCommerce notice area inside wrapper ─── */
.bulk-qo-wrapper .woocommerce-notices-wrapper{margin-bottom:1rem;}

/* ======================================================================
   Quantity spinner buttons (new)
   ====================================================================== */
.bulk-qo-qty-wrap{
    display:none;                 /* revealed when card becomes active */
    margin-top:.5rem;
    align-items:center;
    justify-content:center;
    gap:.25rem;
}

.bulk-qo-qty{                     /* input itself */
    width:3rem;
    text-align:center;
    font-size:1rem;
}

/* plus / minus buttons */
.bulk-qo-qty-btn{
    width:2.25rem;
    height:2.25rem;
    line-height:2.25rem;
    font-size:1.25rem;
    background:#eee;
    border:1px solid #ccc;
    cursor:pointer;
    user-select:none;
}

.bulk-qo-qty-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

/* Hover / active states — tweak to match your theme */
.bulk-qo-qty-btn:hover:not(:disabled){
    background:#ddd;
}

/* ── Hide the default checkbox control ───────────────────── */
.bulk-qo-check{
    /* visually hide but keep it focusable / clickable
       so the `:checked` state still changes */
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none;   /* the label (card) handles the click */
    width:0; height:0;     /* no layout shift */
}

/* Optional: make the whole label look clickable */
.bulk-qo-card label{
    cursor:pointer;            /* hand cursor on hover              */
    display:block;             /* full-width clickable area          */
}