/* bio-artikelimport: the page of a Weinpakete (blocks bio_details_facts, bio_details_after_longdesc, details_productmain_priceperunit)
 * and the card "Diesen Wein gibt es auch im Weinpaket" on a wine's page (block details_productmain_social).
 * Only .bio-package-* selectors. Colours from the theme: #8eb61e, #546a16, #f2f8e6. */

/* ---------- savings line under the price ---------- */
.bio-package-savings {
    grid-column: 1 / -1;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 4px;
    padding: 3px 10px;
    border-radius: 4px;
    background-color: #f2f8e6;
    color: #546a16;
    font-size: 0.875rem;
    line-height: 1.5;
}
/* The desktop buy box is a wrapping flex row (bio-o3.css): right under the VAT line, whose bottom margin it takes back. */
@media (min-width: 992px) {
    .bio-package-savings {
        order: -1;
        flex: 0 1 auto;
        margin: calc(var(--bio-buy-gap, 20px) * -1 + 6px) 0 var(--bio-buy-gap, 20px);
    }
}

/* ---------- facts bar ---------- */
.bio-package-facts {
    display: flex;
    flex-wrap: wrap;
    margin: 28px 0 16px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    /* the items' own right and bottom lines (pulled over the next item by a -1px margin) are clipped at the outer edge */
    overflow: hidden;
}
.bio-package-facts__item {
    flex: 1 1 140px;
    min-width: 0;
    padding: 8px 12px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 0 -1px -1px 0;
}
.bio-package-facts dt {
    margin: 0;
    color: #6b6b6b;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: uppercase;
}
.bio-package-facts dd {
    margin: 0;
    color: #121212;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* ---------- "Das steckt im Paket" and "Passt zu" ---------- */
.bio-package-title {
    margin: 28px 0 10px;
    font-size: 1.0625rem;
    font-weight: 600;
}
.bio-package-cards,
.bio-package-chips {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bio-package-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bio-package-card {
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}
.bio-package-card__picture {
    flex: 0 0 56px;
    width: 56px;
    height: 150px;
    object-fit: contain;
}
.bio-package-card__body {
    min-width: 0;
}
.bio-package-card__body > p {
    margin: 0;
}
.bio-package-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}
.bio-package-card__meta {
    margin-top: 3px;
    color: #6b6b6b;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.bio-package-card__taste {
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 1.45;
}
.bio-package-card__more {
    margin-top: 6px;
    color: #6b6b6b;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.bio-package-card__more a {
    color: #546a16;
    text-decoration: underline;
}
@media (min-width: 768px) {
    .bio-package-cards {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .bio-package-card {
        flex: 1 1 220px;
    }
}
.bio-package-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bio-package-chip {
    padding: 3px 10px;
    border: 1px solid rgba(142, 182, 30, 0.45); /* #8eb61e, the theme's primary, lightened */
    border-radius: 14px;
    background-color: #f2f8e6;
    color: #546a16;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ---------- a wine's page: "Diesen Wein gibt es auch im Weinpaket" (block details_productmain_social) ---------- */
/* In .details__wrapper, a wrapping flex row (from 768px) and part of the product form's grid on phones: a full row of its own, after
 * bio-buybox's free-shipping hint (order 3 on desktop) and trust line (order 4). Text colours keep 4.5:1 on the card's background. */
.bio-package-teaser {
    order: 5;
    flex: 0 0 100%;
    grid-column: 1 / -1;
    width: 100%;
    margin: 18px 0 6px;
    padding: 12px 14px;
    border: 1px solid #e3e8d4;
    border-radius: 10px;
    background-color: #f8faf2;
}
.bio-package-teaser__title {
    margin: 0 0 8px;
    color: #222;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}
.bio-package-teaser__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #e9eddc;
    color: #222;
    text-decoration: none;
}
.bio-package-teaser__item:first-of-type {
    border-top: 0;
}
.bio-package-teaser__item:hover,
.bio-package-teaser__item:focus {
    color: #222;
    text-decoration: none;
}
.bio-package-teaser__item:hover .bio-package-teaser__name,
.bio-package-teaser__item:focus-visible .bio-package-teaser__name {
    text-decoration: underline;
}
.bio-package-teaser__item img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-color: #fff;
    object-fit: contain;
}
.bio-package-teaser__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bio-package-teaser__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bio-package-teaser__meta {
    color: #546a16;
    font-size: 0.8125rem;
    line-height: 1.35;
}
.bio-package-teaser__price {
    display: flex;
    flex-direction: column;
    text-align: right;
    white-space: nowrap;
}
.bio-package-teaser__price strong {
    color: #5e7a10;
    font-size: 1rem;
}
.bio-package-teaser__price small {
    color: #666;
    font-size: 0.75rem;
}
.bio-package-teaser__chevron {
    flex: 0 0 auto;
    color: #8eb61e;
}
.bio-package-teaser__note {
    margin: 6px 0 0;
    color: #666;
    font-size: 0.75rem;
}