/* Bargertex - jednotky a VZORKA na detailu produktu */

/* Theme uz dela z .buy-box .bottom i .add-to-cart flexbox. Nesahame na display/smer
   tam, kde nemusime - pridavame prvky a upravujeme poradi/zalomeni. */

/* A) popisek jednotky vedle stepperu.
   Label je vlozeny DOVNITR .quantity a pozicovany absolutne vpravo od nej - tim je
   uplne mimo flex tok .add-to-cart, takze nikdy nezalomi ani nerozbije radkovani
   (chovani je stejne na desktopu, tabletu i mobilu). */
.bt-detail-unit-label {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

/* Add-to-cart: deterministicky layout napric sirkami. Theme na mobilu pozicuje stepper
   vpravo (vlastni media query) - vynutime flex a relative kotvu na stepperu. */
.buy-box .add-to-cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}

.buy-box .add-to-cart .quantity {
    position: relative !important;   /* kotva pro +/- tlacitka I pro bm label; prebiji theme absolute */
    top: auto !important;            /* reset theme offsetu - jinak (relative + zbyly top) posune stepper nahoru nad cenu (~481-767px) */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    margin: 0 !important;
    overflow: visible !important;    /* aby absolutni bm label nebyl orezany */
}

.buy-box .add-to-cart .add-to-cart-button {
    flex: 1 1 100%;                  /* tlacitko vzdy na vlastni radek, plna sirka */
    margin-top: 12px;
}

/* B) staticky text k VZORCE pod radkem mnozstvi */
.bt-detail-sample-help {
    display: block;
    margin-top: 8px;
    font-size: 0.875em;
    line-height: 1.4;
    color: #555;
}

/* C) poradi v .bottom: cena -> stepper+tlacitko -> VZORKA hint -> bonus.
   Theme uz ma .bottom jako flex - jen poradi + kazda polozka na vlastni radek. */
.buy-box .bottom > .p-final-price-wrapper,
.buy-box .bottom > .add-to-cart,
.buy-box .bottom > .bt-detail-sample-help,
.buy-box .bottom > .mehub-bonus-product-detail-container {
    flex-basis: 100%;
}

.buy-box .bottom > .p-final-price-wrapper { order: 1; }
.buy-box .bottom > .add-to-cart { order: 2; }
.buy-box .bottom > .bt-detail-sample-help { order: 3; }
.buy-box .bottom > .mehub-bonus-product-detail-container { order: 4; margin-top: 12px; }