/* bio-buybox: product page buy box extras (see the block template).
 * Inside .details__wrapper, a wrapping flex row from 768px and part of the
 * product form's grid on phones (bio-o3.css), so every part takes a full row. */
.bio-buybox-freeship,
.bio-buybox-trust {
    flex: 0 0 100%;
    grid-column: 1 / -1;
}
.bio-buybox-freeship {
    margin: 12px 0 0;
    padding: 6px 10px;
    background-color: #f2f8e6;
    color: #4d6e00;
    font-size: 0.875rem;
    line-height: 1.4;
}
.bio-buybox-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 10px 0 0;
    color: #6b6b6b;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.bio-buybox-trust__bio::before {
    content: "\2713";
    margin-right: 4px;
    color: #008f39;
}

/* From 768px the theme pins the wishlist heart a fixed distance above the buy
 * box's bottom; the script measures what the hint and trust line add there. */
@media (min-width: 768px) {
    .details__wrapper > .details__share {
        transform: translateY(calc(-1 * var(--bio-buybox-lift, 0px)));
    }
}

/* Carton buttons (6er/12er): phones only, between "+" and "In den Warenkorb";
 * from 768px the stepper and the button share one row with no room left. */
.bio-buybox-cartons {
    display: none;
}
@media (max-width: 767.98px) {
    .component__tobasket.has-bio-cartons .bio-buybox-cartons {
        display: flex;
        gap: 6px;
        margin: 10px 10px 10px 0;
    }
    .bio-buybox-carton {
        min-width: 52px;
        height: 52px;
        padding: 0 8px;
        border: 1px solid #dcdcdc;
        background-color: #fff;
        color: #121212;
        font-size: 0.9375rem;
        font-weight: 500;
    }
    .bio-buybox-carton[aria-pressed="true"] {
        border-color: var(--bs-primary);
        background-color: var(--bs-secondary);
        color: #4d6e00;
    }
}

/* Buy bar: fixed to the bottom on phones while the buy box is out of view. */
.bio-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030; /* under Bootstrap's offcanvas (1045) and modals (1055) */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e3e3e3;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    transform: translateY(110%);
    transition: transform 0.2s ease-out;
}
.bio-buybar[hidden] {
    display: none;
}
.bio-buybar.is-visible {
    transform: none;
}
@media (min-width: 768px) {
    .bio-buybar {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bio-buybar {
        transition: none;
    }
}
.bio-buybar__price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    line-height: 1.15;
}
.bio-buybar__price strong {
    color: var(--bs-primary);
    font-size: 1.0625rem;
    font-weight: 800;
    white-space: nowrap;
}
.bio-buybar__price span {
    color: #929292;
    font-size: 0.75rem;
    white-space: nowrap;
}
.bio-buybar__cart {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 500;
}
.bio-buybar__paypal {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background-color: #ffc439;
}
.bio-buybar__paypal[hidden] {
    display: none;
}
.bio-buybar__paypal img {
    display: block;
    width: auto;
    height: 20px;
}
.bio-buybar__paypal:focus-visible {
    outline: 3px solid #003087;
    outline-offset: 2px;
}
/* Room for the bar at the end of the page, and the Sommelier button above it. */
body.bio-buybar-shown {
    padding-bottom: var(--bio-buybar-h, 64px);
}
body.bio-buybar-shown .bio-som__toggle {
    bottom: calc(var(--bio-buybar-h, 64px) + 1.25rem);
}