/* Boi Bazar theme - checkout, cart partials, cart page, order success.
   Selectors are prefixed with .bb (body class) to beat legacy /style.css and /responsive.css.
   Tokens and primitives come from bb-theme.css. */

/* ==========================================================================
   1. Checkout page shell
   ========================================================================== */
.bb .bb-checkout {
    padding-block: 28px 64px;
}
.bb .bb-co-intro {
    margin-bottom: 22px;
}
.bb .bb-co-title {
    font-size: 31px;
}
.bb .bb-co-lead {
    margin: 8px 0 0;
    max-width: 62ch;
    color: var(--bb-ink-2);
    font: 500 15px/1.6 var(--bb-font-ui);
}
@media (max-width: 767px) {
    .bb .bb-checkout { padding-block: 16px 40px; }
    .bb .bb-co-intro { margin-bottom: 16px; }
    .bb .bb-co-title { font-size: 25px; }
    .bb .bb-co-lead { font-size: 14px; }
}

/* ==========================================================================
   2. Checkout form card + numbered steps
   ========================================================================== */
.bb .checkout-shipping { margin-top: 0; }
.bb .bb-co-card {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    background: #fff;
    box-shadow: var(--bb-shadow-1);
}
.bb .bb-co-card > .card-body {
    padding: 8px 28px 28px;
}

.bb .bb-co-step {
    padding-block: 24px;
    border-top: 1px solid var(--bb-line);
}
.bb .bb-co-step:first-child {
    border-top: 0;
}
.bb .bb-co-step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.bb .bb-co-step__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bb-grad-field);
    color: #fff;
    font: 700 16px/1 var(--bb-font-ui);
    box-shadow: 0 0 0 4px var(--bb-green-50);
}
.bb .checkout-shipping .bb-co-step__title {
    margin: 0;
    font: 700 19px/1.3 var(--bb-font-ui);
    color: var(--bb-ink);
}
.bb .checkout-shipping .bb-co-step__title .bb-co-opt {
    font-size: 14px;
}

/* Fields */
.bb .bb-co-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 18px;
}
@media (min-width: 768px) {
    .bb .bb-co-fields { grid-template-columns: 1fr 1fr; }
    .bb .bb-co-field--full { grid-column: 1 / -1; }
}
.bb .checkout-shipping .bb-co-field { margin: 0; }
.bb .checkout-shipping .bb-co-label {
    display: block;
    margin: 0 0 7px;
    font: 600 15px/1.4 var(--bb-font-ui);
    color: var(--bb-ink-2);
}
.bb .bb-co-req {
    color: var(--bb-red-600);
    font-weight: 700;
}
.bb .bb-co-opt {
    color: var(--bb-ink-3);
    font-weight: 500;
}

.bb .checkout-shipping .form-control {
    height: 48px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    background-color: #fff;
    color: var(--bb-ink);
    font: 500 15px/1.4 var(--bb-font-ui);
}
.bb .checkout-shipping textarea.form-control {
    height: auto;
    min-height: 92px;
    resize: vertical;
    line-height: 1.55;
}
.bb .checkout-shipping .form-control:hover {
    border-color: #C5D3CA;
}
.bb .checkout-shipping .form-control:focus {
    border-color: var(--bb-green-600);
    box-shadow: 0 0 0 4px var(--bb-green-100);
}
.bb .checkout-shipping .form-control::placeholder {
    color: #97A49C;
    font-size: 14px;
}
/* The area <select> carries .form-control (no native arrow) - add a chevron. */
.bb .checkout-shipping select.form-control {
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230A7A45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    -webkit-appearance: none;
    appearance: none;
}
/* iOS zooms into inputs under 16px */
@media (max-width: 767px) {
    .bb .checkout-shipping .form-control { font-size: 16px; }
}

/* ==========================================================================
   3. Advance-payment callout + payment tiles
   ========================================================================== */
.bb .bb-co-advance {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #F1D9A0;
    border-radius: var(--bb-r-sm);
    background: var(--bb-gold-50);
    color: #5A3B00;
}
.bb .bb-co-advance__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bb-grad-gold);
    color: #fff;
    font-size: 15px;
}
.bb .bb-co-advance__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
}
.bb .bb-co-advance__text b {
    color: var(--bb-ink);
    font-weight: 700;
    font-size: 15.5px;
    white-space: nowrap;
}

.bb .checkout-shipping .payment-methods .form-check {
    position: relative;
    display: flex !important; /* legacy: .payment-methods .form-check { display:inline-block !important } */
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 62px;
    margin: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s var(--bb-ease), background-color .2s var(--bb-ease), box-shadow .2s var(--bb-ease);
}
.bb .checkout-shipping .payment-methods .form-check:hover {
    border-color: #B5CBBD;
    background: #FBFDFC;
}
.bb .checkout-shipping .payment-methods .form-check:has(.form-check-input:checked) {
    border-color: var(--bb-green-600);
    background: var(--bb-green-50);
    box-shadow: 0 0 0 3px var(--bb-green-100);
}
.bb .checkout-shipping .payment-methods .form-check:has(.form-check-input:focus-visible) {
    outline: 3px solid var(--bb-green-600);
    outline-offset: 2px;
}
.bb .checkout-shipping .payment-methods .form-check-input {
    position: relative;
    z-index: 1;
    flex: none;
    float: none;
    width: 22px;
    height: 22px !important; /* legacy: .checkout-shipping .form-check-input { height:14px !important } */
    margin: 0;
    border: 2px solid #AEBFB5;
    background-color: #fff;
    cursor: pointer;
    transform: none;
}
.bb .checkout-shipping .payment-methods .form-check-input:checked {
    border-color: var(--bb-green-600);
    background-color: var(--bb-green-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-size: 13px 13px;
    background-position: center;
    background-repeat: no-repeat;
}
.bb .checkout-shipping .payment-methods .form-check-input:focus {
    box-shadow: none;
}
.bb .checkout-shipping .payment-methods .form-check-label {
    position: static;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    color: var(--bb-ink);
    font: 600 15px/1.35 var(--bb-font-ui);
    cursor: pointer;
}
/* Make the whole tile the hit area. */
.bb .checkout-shipping .payment-methods .form-check-label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.bb .bb-co-pay__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 84px;
    height: 38px;
    padding: 4px 6px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-xs);
    background: #fff;
}
.bb .bb-co-pay__logo img {
    display: block;
    max-width: 100%;
    max-height: 26px;
    object-fit: contain;
}
.bb .bb-co-pay__logo--icon {
    border-color: var(--bb-green-100);
    background: var(--bb-green-50);
    color: var(--bb-green-600);
    font-size: 19px;
}
.bb .bb-co-pay__name {
    min-width: 0;
}

/* ==========================================================================
   4. Place order
   ========================================================================== */
.bb .bb-co-place {
    padding-top: 22px;
    border-top: 1px solid var(--bb-line);
}
.bb .bb-co-paybar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.bb .bb-co-paybar__label {
    color: var(--bb-ink-2);
    font: 600 15px/1.4 var(--bb-font-ui);
}
.bb .bb-co-paybar__label small {
    color: var(--bb-ink-3);
    font-size: 13px;
    font-weight: 500;
}
.bb .bb-co-paybar__amount {
    color: var(--bb-red-600);
    font: 800 22px/1.2 var(--bb-font-ui);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bb .checkout-shipping .order_place {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--bb-r-sm);
    background: var(--bb-grad-sun);
    color: #fff;
    font: 700 17px/1.2 var(--bb-font-ui);
    letter-spacing: .01em;
    box-shadow: var(--bb-shadow-sun);
    transition: filter .2s var(--bb-ease), transform .15s var(--bb-ease), box-shadow .2s var(--bb-ease);
}
.bb .checkout-shipping .order_place:hover {
    background: var(--bb-grad-sun);
    color: #fff;
    filter: brightness(.94) saturate(1.05);
    box-shadow: 0 8px 22px rgba(192, 20, 43, .34);
}
/* legacy: button:focus { box-shadow: 0 0 !important; outline:none !important } */
.bb .checkout-shipping .order_place:focus {
    box-shadow: var(--bb-shadow-sun) !important;
}
.bb .checkout-shipping .order_place:focus-visible {
    outline: 3px solid var(--bb-green-600) !important;
    outline-offset: 3px;
}
.bb .checkout-shipping .order_place:active {
    transform: translateY(1px);
}

/* ==========================================================================
   5. Order summary card (checkout right column)
   ========================================================================== */
.bb .cart_details {
    margin-bottom: 0;
}
.bb .bb-co-sum-card {
    overflow: hidden;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    background: #fff;
    box-shadow: var(--bb-shadow-1);
}
.bb .cart_details .card-header.bb-co-sum-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border: 0;
    border-radius: 0;
    background: var(--bb-grad-field);
}
.bb .cart_details .bb-co-sum-head h5 {
    margin: 0;
    color: #fff;
    font: 700 18px/1.3 var(--bb-font-ui);
    text-transform: none;
}
.bb .bb-co-sum-head__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 14px;
}
.bb .bb-co-sum-card .card-body.cartlist {
    padding: 0;
    overflow: visible; /* legacy mobile: .card-body.cartlist { overflow-x:scroll } */
}
/* Sticky below the pinned site header; checkout JS measures the header into --bb-co-sticky-top
   and adds .bb-no-stick when the card would not fit in the viewport. */
@media (min-width: 992px) {
    .bb .bb-checkout .cart_details {
        position: sticky;
        top: var(--bb-co-sticky-top, 16px);
    }
    .bb .bb-checkout .cart_details.bb-no-stick {
        position: static;
    }
    .bb .bb-co-paybar__amount { font-size: 20px; }
}

/* ==========================================================================
   6. Summary partial (ajax/cart.blade.php) - used by checkout, cart page and AJAX
   ========================================================================== */
.bb .bb-cartsum__items {
    margin: 0;
    padding: 4px 20px;
    list-style: none;
}
.bb .bb-cs-line {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--bb-line);
}
.bb .bb-cs-line:last-child {
    border-bottom: 0;
}
.bb .bb-cs-line__cover {
    position: relative;
    display: block;
    align-self: start;
    width: 52px;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    border-radius: var(--bb-r-book);
    background: var(--bb-grad-shelf);
    box-shadow: 1px 2px 3px rgba(20, 20, 20, .18), 3px 6px 12px rgba(4, 50, 31, .16);
}
.bb .bb-cs-line__cover::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 9%;
    background: linear-gradient(90deg, rgba(0, 0, 0, .30), rgba(255, 255, 255, .32) 55%, rgba(255, 255, 255, 0));
    pointer-events: none;
}
.bb .cartlist .bb-cs-line__cover img,
.bb .bb-cs-line__cover img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    object-fit: cover;
}
.bb .bb-cs-line__body {
    min-width: 0;
}
.bb .bb-cs-line__top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.bb .bb-cs-line__name {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--bb-ink);
    font: 600 15px/1.5 var(--bb-font-book);
    text-decoration: none;
}
.bb .bb-cs-line__name:hover {
    color: var(--bb-green-700);
}
.bb .bb-cs-line__remove {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: -5px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--bb-r-xs);
    background: transparent;
    color: var(--bb-ink-3);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease);
}
.bb .bb-cs-line__remove:hover {
    background: var(--bb-red-50);
    color: var(--bb-red-600);
}
.bb .bb-cs-line__remove:focus-visible,
.bb .bb-cs-line .quantity button:focus-visible,
.bb .bb-cs-coupon__apply:focus-visible {
    outline: 3px solid var(--bb-green-600) !important; /* legacy: button:focus { outline:none !important } */
    outline-offset: 2px;
}
.bb .bb-cs-line__variant {
    margin: 2px 0 0;
    color: var(--bb-ink-3);
    font-size: 12.8px;
}
.bb .bb-cs-line__options {
    margin-top: 6px;
}
.bb .bb-cs-line__options .form-label {
    margin: 0 0 3px;
    color: var(--bb-ink-3);
    font-size: 12.8px;
}
.bb .bb-cs-line__options .form-select {
    min-height: 34px;
    font-size: 13px;
}
.bb .bb-cs-line__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

/* Qty stepper - neutralise the legacy absolute-positioned .quantity */
.bb .bb-cs-line .qty-cart {
    display: block;
    width: auto;
}
.bb .bb-cs-line .quantity {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: auto;
    height: 36px;
    margin: 0;
    overflow: hidden;
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    background: #fff;
}
.bb .bb-cs-line .quantity .minus,
.bb .bb-cs-line .quantity .plus {
    position: static;
    display: grid;
    place-items: center;
    width: 34px;
    height: auto;
    padding: 0;
    border: 0;
    background: var(--bb-green-50);
    color: var(--bb-green-700);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease);
}
.bb .bb-cs-line .quantity .minus:hover,
.bb .bb-cs-line .quantity .plus:hover {
    background: var(--bb-green-600);
    color: #fff;
}
.bb .bb-cs-line .quantity input {
    width: 38px;
    height: auto;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--bb-ink);
    font: 700 15px/1 var(--bb-font-ui);
    text-align: center;
    pointer-events: none;
}
.bb .bb-cs-line__price {
    text-align: right;
    line-height: 1.2;
}
.bb .bb-cs-line__price strong {
    display: block;
    color: var(--bb-red-600);
    font: 700 16px/1.25 var(--bb-font-ui);
    white-space: nowrap;
}
.bb .bb-cs-line__price small {
    display: block;
    margin-top: 2px;
    color: var(--bb-ink-3);
    font-size: 12.8px;
    white-space: nowrap;
}

/* Coupon */
.bb .bb-cs-coupon {
    margin: 0 20px;
    padding: 14px 0 16px;
    border-top: 1px dashed #CDDAD1;
}
.bb .bb-cs-coupon__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--bb-ink-2);
    font: 600 14px/1.4 var(--bb-font-ui);
}
.bb .bb-cs-coupon__title i {
    color: var(--bb-gold-600);
}
.bb .bb-cs-coupon__form {
    display: flex;
    gap: 8px;
}
.bb .bb-cs-coupon__form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    font-size: 15px;
}
.bb .bb-cs-coupon__apply {
    flex: none;
    min-height: 46px;
    padding: 0 22px;
    border: 1.5px solid var(--bb-green-600);
    border-radius: var(--bb-r-sm);
    background: var(--bb-green-600);
    color: #fff;
    font: 600 15px/1 var(--bb-font-ui);
    cursor: pointer;
    transition: background-color .2s var(--bb-ease), border-color .2s var(--bb-ease);
}
.bb .bb-cs-coupon__apply:hover {
    border-color: var(--bb-green-700);
    background: var(--bb-green-700);
}
.bb .bb-cs-coupon__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--bb-green-100);
    border-radius: var(--bb-r-sm);
    background: var(--bb-green-50);
}
.bb .bb-cs-coupon__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bb .bb-cs-coupon__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bb-green-800);
    font: 600 14px/1.4 var(--bb-font-ui);
}
.bb .bb-cs-coupon__chip i { color: var(--bb-green-600); }
.bb .bb-cs-coupon__chip em {
    font-style: normal;
    font-weight: 800;
    letter-spacing: .02em;
}
.bb .bb-cs-coupon__info small {
    color: var(--bb-ink-2);
    font-size: 13px;
}
.bb .bb-cs-coupon__remove {
    flex: none;
    color: var(--bb-red-600);
    font: 600 13px/1.4 var(--bb-font-ui);
    text-decoration: none;
}
.bb .bb-cs-coupon__remove:hover { text-decoration: underline; }

/* Totals */
.bb .bb-cs-totals {
    margin: 0;
    padding: 14px 20px 20px;
    border-top: 1px solid var(--bb-line);
    background: #FAFCFB;
}
.bb .bb-cs-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}
.bb .bb-cs-totals dt {
    color: var(--bb-ink-2);
    font: 500 15px/1.45 var(--bb-font-ui);
}
.bb .bb-cs-totals dd {
    margin: 0;
    color: var(--bb-ink);
    font: 600 15px/1.45 var(--bb-font-ui);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bb .bb-cs-totals__row--discount dd { color: var(--bb-green-700); }
.bb .bb-cs-totals__row--grand {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed #CDDAD1;
}
.bb .bb-cs-totals__row--grand dt {
    color: var(--bb-ink);
    font: 700 17px/1.3 var(--bb-font-ui);
}
.bb .bb-cs-totals__row--grand dd b {
    color: var(--bb-red-600);
    font: 800 22px/1.2 var(--bb-font-ui);
}
.bb .bb-cs-totals__row--advance,
.bb .bb-cs-totals__row--due {
    align-items: center;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: var(--bb-r-sm);
}
.bb .bb-cs-totals__row--advance { background: var(--bb-green-50); }
.bb .bb-cs-totals__row--due { background: var(--bb-red-50); margin-top: 6px; }
.bb .bb-cs-totals__row--advance dt { color: var(--bb-green-800); font-weight: 600; }
.bb .bb-cs-totals__row--due dt { color: var(--bb-red-700); font-weight: 600; }
.bb .bb-cs-totals__row--advance dd b { color: var(--bb-green-700); font-weight: 800; }
.bb .bb-cs-totals__row--due dd b { color: var(--bb-red-600); font-weight: 800; }

/* Empty cart */
.bb .bb-cs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 24px 32px;
    text-align: center;
}
.bb .bb-cs-empty__art {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--bb-grad-shelf);
    box-shadow: inset 0 0 0 1px var(--bb-green-100);
}
.bb .bb-cs-empty__art svg {
    display: block;
    width: 64px;
    height: 64px;
    max-width: none;
}
.bb .bb-cs-empty__title {
    margin: 0 0 6px;
    color: var(--bb-ink);
    font: 700 20px/1.35 var(--bb-font-ui);
}
.bb .bb-cs-empty__text {
    max-width: 34ch;
    margin: 0 0 20px;
    color: var(--bb-ink-2);
    font-size: 15px;
    line-height: 1.6;
}
.bb .bb-cs-empty__btn { min-height: 46px; padding-inline: 22px; }
.bb .bb-cs-empty__btn:hover { color: #fff; }

/* Nothing to check out: hide the form and centre the summary (progressive, needs :has). */
.bb .bb-checkout:has(.bb-cs-empty) .cus-order-2,
.bb .bb-checkout:has(.bb-cs-empty) .bb-co-lead {
    display: none;
}
.bb .bb-checkout:has(.bb-cs-empty) .cust-order-1 {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

/* ==========================================================================
   7. Mobile refinements (checkout + partial)
   ========================================================================== */
@media (max-width: 767px) {
    .bb .bb-co-card > .card-body { padding: 4px 16px 20px; }
    .bb .bb-co-step { padding-block: 20px; }
    .bb .bb-co-step__head { margin-bottom: 14px; }
    .bb .checkout-shipping .bb-co-step__title { font-size: 18px; }
    .bb .bb-cartsum__items { padding-inline: 16px; }
    .bb .bb-cs-coupon { margin-inline: 16px; }
    .bb .bb-cs-totals { padding-inline: 16px; }
    .bb .cart_details .card-header.bb-co-sum-head { padding: 14px 16px; }
    /* Tap targets >= 40px */
    .bb .bb-cs-line .quantity { height: 40px; }
    .bb .bb-cs-line .quantity .minus,
    .bb .bb-cs-line .quantity .plus { width: 40px; }
    .bb .bb-cs-line__remove { width: 40px; height: 40px; margin: -8px -10px 0 0; }
    .bb .bb-cs-empty { padding-inline: 16px; }
}

/* ==========================================================================
   8. Cart page (pages/cart.blade.php) + Cart Summary partial (ajax/shipping_charge.blade.php)
   ========================================================================== */
.bb .bb-cartpage {
    margin-top: 0;          /* legacy mobile: .vcart-section { margin-top:60px } */
    padding-block: 24px 64px;
}
.bb .bb-cartpage__card {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    background: #fff;
    box-shadow: var(--bb-shadow-1);
}
.bb .bb-cartpage__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--bb-grad-field);
}
.bb .bb-cartpage .cart-title h4 {
    margin: 0;
    padding: 0;
    color: #fff;
    font: 700 18px/1.3 var(--bb-font-ui);
    text-align: left;
}
.bb .bb-cartpage .vcart-content td,
.bb .bb-cartpage .vcart-content th { font-size: inherit; }
/* Totals live in the Cart Summary on this page (kept in sync by the page script). */
.bb .bb-cartpage .cartlist .bb-cs-totals { display: none; }
.bb .bb-cartpage .cartlist .bb-cs-coupon { border-bottom: 0; }

.bb .cart-summary {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    background: #fff;
    box-shadow: var(--bb-shadow-1);
}
.bb .cart-summary h5 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    background: var(--bb-grad-field);
    color: #fff;
    font: 700 18px/1.3 var(--bb-font-ui);
    text-transform: none;
}
.bb .cart-summary .bb-cartsum-table {
    margin: 0;
    --bs-table-bg: transparent;
}
.bb .cart-summary table td {
    padding: 11px 20px !important; /* legacy: .cart-summary table td { padding:10px 0 !important } */
    border-bottom: 1px solid var(--bb-line);
    color: var(--bb-ink-2);
    font: 500 15px/1.45 var(--bb-font-ui);
    text-transform: none;
}
.bb .cart-summary table td:last-child {
    color: var(--bb-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.bb .cart-summary .bb-cartsum-table__grand td {
    border-bottom: 0;
    background: #FAFCFB;
    color: var(--bb-ink);
    font-size: 17px;
    font-weight: 700;
}
.bb .cart-summary .bb-cartsum-table__grand td:last-child {
    color: var(--bb-red-600);
    font-size: 21px;
    font-weight: 800;
}
.bb .bb-cartpage .go_cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 14px;
    padding: 12px 18px;
    border-radius: var(--bb-r-sm);
    background: var(--bb-grad-sun);
    color: #fff;
    font: 700 16px/1.2 var(--bb-font-ui);
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: var(--bb-shadow-sun);
    transition: filter .2s var(--bb-ease), transform .15s var(--bb-ease);
}
.bb .bb-cartpage .go_cart:hover { color: #fff; filter: brightness(.94) saturate(1.05); }
.bb .bb-cartpage .go_cart:active { transform: translateY(1px); }
.bb .bb-cartpage__continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 6px;
    color: var(--bb-green-700);
    font: 600 15px/1.3 var(--bb-font-ui);
    text-decoration: none;
}
.bb .bb-cartpage__continue:hover { color: var(--bb-green-800); text-decoration: underline; }
@media (min-width: 992px) {
    .bb .bb-cartpage__summary { position: sticky; top: 170px; }
}
.bb .bb-cartpage:has(.bb-cs-empty) .bb-cartpage__aside { display: none; }
.bb .bb-cartpage:has(.bb-cs-empty) .bb-cartpage__main { width: 100%; max-width: 640px; margin-inline: auto; }
@media (max-width: 767px) {
    .bb .bb-cartpage { padding-block: 12px 40px; }
    .bb .bb-cartpage__head,
    .bb .cart-summary h5 { padding: 14px 16px; }
    .bb .cart-summary table td { padding: 10px 16px !important; }
}

/* ==========================================================================
   9. Order success (customer/order_success.blade.php)
   ========================================================================== */
.bb .bb-success {
    padding-block: 32px 64px;
}
.bb .bb-success-hero {
    position: relative;
    margin-bottom: 18px;
    padding: 40px 28px 30px;
    overflow: hidden;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background:
        /* confetti stays in the band beside the medal, never over the title */
        radial-gradient(circle at 18% 14%, rgba(242, 179, 61, .60) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 11%, rgba(226, 52, 69, .45) 0 5px, transparent 6px),
        radial-gradient(circle at 70% 24%, rgba(17, 146, 79, .35) 0 3px, transparent 4px),
        radial-gradient(circle at 30% 25%, rgba(17, 146, 79, .30) 0 3px, transparent 4px),
        radial-gradient(circle at 91% 26%, rgba(242, 179, 61, .50) 0 3px, transparent 4px),
        linear-gradient(180deg, var(--bb-green-50) 0%, #fff 62%);
    box-shadow: var(--bb-shadow-1);
    text-align: center;
}
.bb .bb-success-medal {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--bb-grad-field);
    box-shadow: 0 0 0 8px var(--bb-green-100), 0 0 0 16px rgba(221, 239, 228, .45), 0 16px 30px rgba(4, 50, 31, .28);
}
.bb .bb-success-medal svg { display: block; width: 46px; height: 46px; }
@media (prefers-reduced-motion: no-preference) {
    .bb .bb-success-medal { animation: bbMedalIn .5s var(--bb-ease) both; }
    .bb .bb-success-medal svg path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: bbTick .45s .25s var(--bb-ease) forwards; }
}
@keyframes bbMedalIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bbTick { to { stroke-dashoffset: 0; } }
.bb .success-title h2 {
    max-width: 34ch;
    margin: 0 auto;
    color: var(--bb-ink);
    font: 700 22px/1.55 var(--bb-font-ui);
    text-align: center;
}
.bb .bb-success-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 7px 16px;
    border: 1px solid #F1D9A0;
    border-radius: var(--bb-r-pill);
    background: var(--bb-gold-50);
    color: #6B4600;
    font: 600 15px/1.3 var(--bb-font-ui);
}
.bb .bb-success-order b { color: var(--bb-ink); font-weight: 800; letter-spacing: .02em; }

.bb .bb-success .success-table,
.bb .bb-success-card {
    margin-bottom: 16px;
    padding: 20px 22px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    background: #fff;
    box-shadow: var(--bb-shadow-1);
}
.bb .bb-success-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--bb-ink);
    font: 700 17px/1.35 var(--bb-font-ui);
}
.bb .bb-success-card__title i { color: var(--bb-green-600); font-size: 15px; }
.bb .bb-success-card__head { margin-bottom: 6px; }
.bb .bb-success-card__head .bb-success-card__title { margin-bottom: 2px; }
.bb .bb-success-card__sub { margin: 0; color: var(--bb-ink-3); font-size: 13.5px; }

.bb .bb-success-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.bb .bb-success-facts > div {
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--bb-r-sm);
    background: var(--bb-paper);
}
.bb .bb-success-facts dt { color: var(--bb-ink-3); font: 500 12.8px/1.4 var(--bb-font-ui); }
.bb .bb-success-facts dd {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    color: var(--bb-ink);
    font: 700 16px/1.4 var(--bb-font-ui);
}
.bb .bb-success-facts__total dd { color: var(--bb-red-600); }
.bb .bb-success-facts__wide { grid-column: 1 / -1; }
.bb .bb-success-facts__wide dd { text-transform: capitalize; }
.bb .bb-success-note {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--bb-gold-500);
    border-radius: 0 var(--bb-r-xs) var(--bb-r-xs) 0;
    background: var(--bb-gold-50);
    color: #5A3B00;
    font-size: 14.5px;
}

.bb .bb-success-items { margin: 0; padding: 0; list-style: none; }
.bb .bb-success-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bb-line);
}
.bb .bb-success-item:last-child { border-bottom: 0; }
.bb .bb-success-item__cover { width: 40px; }
.bb .bb-success-item__name {
    margin: 0;
    color: var(--bb-ink);
    font: 600 15px/1.5 var(--bb-font-book);
}
.bb .bb-success-item__name small {
    margin-left: 4px;
    color: var(--bb-ink-3);
    font: 600 13px/1 var(--bb-font-ui);
    white-space: nowrap;
}
.bb .bb-success-item__price {
    margin: 0;
    color: var(--bb-ink);
    font: 700 16px/1.3 var(--bb-font-ui);
    white-space: nowrap;
}
.bb .bb-success-totals {
    margin: 8px -22px -20px;
    padding: 14px 22px 18px;
    border-radius: 0 0 var(--bb-r-md) var(--bb-r-md);
}

.bb .bb-success-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.bb .bb-success-duo__col { min-width: 0; }
.bb .bb-success-duo .bb-success-card { height: 100%; margin-bottom: 0; }
@media (max-width: 767px) {
    .bb .bb-success-duo { grid-template-columns: 1fr; }
}
.bb .bb-success-address p { margin: 0 0 4px; color: var(--bb-ink-2); font-size: 15px; line-height: 1.55; }
.bb .bb-success-address .bb-success-address__name { color: var(--bb-ink); font-weight: 700; }
.bb .bb-success-next__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bbnext;
}
.bb .bb-success-next__list li {
    position: relative;
    margin: 0 0 12px;
    padding-left: 38px;
    color: var(--bb-ink-2);
    font-size: 14.5px;
    line-height: 1.6;
    counter-increment: bbnext;
}
.bb .bb-success-next__list li:last-child { margin-bottom: 0; }
.bb .bb-success-next__list li::before {
    content: counter(bbnext, bengali);
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bb-green-50);
    box-shadow: inset 0 0 0 1.5px var(--bb-green-100);
    color: var(--bb-green-700);
    font: 700 13px/1 var(--bb-font-ui);
}
.bb .bb-success-next__list b { display: block; color: var(--bb-ink); font-weight: 700; }
.bb .bb-success-next__list a { color: var(--bb-green-700); font-weight: 600; }

.bb .bb-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.bb .bb-success-actions .bb-btn { min-height: 48px; padding-inline: 26px; font-size: 16px; }
.bb .bb-success-actions .bb-btn:focus-visible { outline: 3px solid var(--bb-green-600) !important; outline-offset: 2px; }
.bb .bb-success-dl th { color: var(--bb-ink-3); font-weight: 600; font-size: 13px; }
.bb .bb-success-dl td { vertical-align: middle; font-size: 14.5px; }
.bb .bb-success-dl__btn { min-height: 36px; padding: .3em 1em; font-size: 14px; }
.bb .bb-success-dl__btn:hover { color: #fff; }

@media (max-width: 767px) {
    .bb .bb-success { padding-block: 16px 40px; }
    .bb .bb-success-hero { padding: 32px 18px 24px; border-radius: var(--bb-r-md); }
    .bb .bb-success-medal { width: 76px; height: 76px; }
    .bb .bb-success-medal svg { width: 40px; height: 40px; }
    .bb .success-title h2 { font-size: 18px; }
    .bb .bb-success .success-table,
    .bb .bb-success-card { padding: 16px; }
    .bb .bb-success-totals { margin: 8px -16px -16px; padding: 12px 16px 16px; }
    .bb .bb-success-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb .bb-success-actions .bb-btn { flex: 1 1 100%; }
}