/* ============================================
   woosb-picker.css — HappyBud
   Reskins WPC Product Bundles' native picker markup to match the design
   mockup — visual only, all the actual picker logic is the plugin's own.
   !important on properties the plugin's frontend.css also sets, so load
   order can't flip which stylesheet wins.
============================================ */

/* ── Shell + head bar ── */
.happybud-single-product .hb-woosb-shell {
    border: 2.5px solid #1a1a1a;
    border-radius: 16px;
    padding: 16px 18px 6px;
    margin: 18px 0 6px;
    background: #fff;
}
.happybud-single-product .hb-woosb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.happybud-single-product .hb-woosb-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #888;
}
.happybud-single-product .hb-woosb-counter {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 900;
    background: #1a1a1a;
    color: #fcfaf4;
    padding: 4px 12px;
    border-radius: 980px;
    transition: background 0.2s;
}
.happybud-single-product .hb-woosb-counter.is-full {
    background: #1f5d3f;
}

/* ── Wrap / products list ── */
.happybud-single-product .hb-woosb-shell .woosb-wrap {
    display: block !important;
}
.happybud-single-product .hb-woosb-shell .woosb-products {
    display: block !important;
}

/* ── Item row ──
   Grid so the name+price stack in one column and the stepper sits to
   the right, vertically centered — price is a separate element the
   plugin renders after the quantity block in the DOM, grid-area pulls
   it back under the name visually. */
.happybud-single-product .hb-woosb-shell .woosb-product {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title qty" "price qty";
    align-items: center;
    column-gap: 12px;
    padding: 9px 0 !important;
    border-top: 1.5px dashed #eee6d8;
    border-bottom: none !important;
    margin: 0 !important;
}
.happybud-single-product .hb-woosb-shell .woosb-product:first-child {
    border-top: none;
}
.happybud-single-product .hb-woosb-shell .woosb-thumb {
    display: none !important;
}
.happybud-single-product .hb-woosb-shell .woosb-title {
    grid-area: title;
    padding: 0 !important;
}
.happybud-single-product .hb-woosb-shell .woosb-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #1a1a1a;
}
.happybud-single-product .hb-woosb-shell .woosb-availability {
    display: none !important;
}

/* ── Per-item price, restyled as the "$X value" meta line ── */
.happybud-single-product .hb-woosb-shell .woosb-price {
    grid-area: price;
    font-size: 12px;
    font-weight: 600;
    color: #888;
}
.happybud-single-product .hb-woosb-shell .woosb-price-ori,
.happybud-single-product .hb-woosb-shell .woosb-price .amount {
    color: #ff6b35 !important;
    font-weight: 800 !important;
}
.happybud-single-product .hb-woosb-shell .woosb-price-ori::after {
    content: " value";
    color: #888;
    font-weight: 600;
}

/* ── Stepper ── */
.happybud-single-product .hb-woosb-shell .woosb-quantity {
    grid-area: qty;
}
.happybud-single-product .hb-woosb-shell .woosb-quantity-input {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    overflow: hidden;
    flex-shrink: 0;
}
.happybud-single-product .hb-woosb-shell .woosb-quantity-input-minus,
.happybud-single-product .hb-woosb-shell .woosb-quantity-input-plus {
    width: 34px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
    cursor: pointer;
    user-select: none;
}
.happybud-single-product .hb-woosb-shell .woosb-quantity-input-minus:hover,
.happybud-single-product .hb-woosb-shell .woosb-quantity-input-plus:hover {
    background: #f6f1e7;
}
/* At the bundle-wide pick limit — every "+" locks, "−" stays usable so
   picks can still be removed to free up room again. */
.happybud-single-product .hb-woosb-shell .woosb-wrap.hb-at-max .woosb-quantity-input-plus {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}
.happybud-single-product .hb-woosb-shell .woosb-quantity-input .quantity {
    margin: 0 !important;
}
.happybud-single-product .hb-woosb-shell .woosb-qty {
    min-width: 28px;
    width: 28px;
    height: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    color: #1a1a1a;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    -moz-appearance: textfield;
}
.happybud-single-product .hb-woosb-shell .woosb-qty::-webkit-outer-spin-button,
.happybud-single-product .hb-woosb-shell .woosb-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Summary line (native "Selected: N" — kept for the plugin's own
   logic, visually hidden since our head-bar counter replaces it) and
   alert box (native min/max/empty validation messages) ── */
.happybud-single-product .hb-woosb-shell .woosb-summary {
    display: none !important;
}
.happybud-single-product .hb-woosb-shell .woosb-alert {
    font-size: 12.5px;
    font-weight: 600;
    color: #777;
    padding-top: 10px;
    border-top: 1.5px dashed #eee6d8;
    margin-top: 2px;
}

/* ── Gated Add to Cart — plugin toggles this class, doesn't set the
   native disabled attribute, so it needs its own rule alongside the
   existing .add-btn:disabled styling ── */
.happybud-single-product .add-btn.woosb-disabled {
    background: #ccc !important;
    border-color: #999 !important;
    color: #6b6b6b !important;
    cursor: not-allowed;
}