/* =========================================
   BELLA PRODUCT CARD
========================================= */

.bella-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fffaf3;

    border: 1px solid rgba(82, 91, 61, 0.14);
    border-radius: 22px;

    overflow: visible;

    box-shadow:
        0 10px 30px rgba(70, 60, 45, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.bella-product-card h3 {
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bella-product-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 36px rgba(70, 60, 45, 0.13);
}


/* =========================================
   IMAGE
========================================= */

.bella-product-image-wrap {
    position: relative;

    width: 100%;

    border-radius:
        21px 21px 0 0;

    overflow: visible;
}

.bella-product-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius:
        21px 21px 0 0;
}


/* =========================================
   INFO BUTTON
========================================= */

.bella-product-info-trigger {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 8;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.42);

    border-radius: 50%;

    background:
        rgba(255, 250, 243, 0.68);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    color: #59613f;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

.bella-product-info-trigger:hover {
    transform: scale(1.08);

    background:
        rgba(255, 250, 243, 0.88);
}



.bella-product-info-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bella-product-info-icon {
    width: 18px;

    flex: 0 0 18px;

    text-align: center;
}


/* =========================================
   STOCK / AVAILABLE
========================================= */

.bella-product-stock-trigger {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 7;

    display: flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;

    padding:
        5px 10px;

    border:
        1px solid rgba(255, 255, 255, 0.42);

    border-radius: 999px;

    background:
        rgba(255, 250, 243, 0.68);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    color: #59613f;

    font-size: 11px;
    font-weight: 700;

    pointer-events: none;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.10);
}

/* =========================================
   CARD CONTENT
========================================= */

.bella-product-card-content {
    position: relative;

    display: flex;
    flex-direction: column;
    flex: 1;

    padding:
        16px 16px 17px;
}

.bella-product-card-title {
    margin:
        0 0 7px;

    color: #41482f;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.bella-product-card-description {
    margin:
        0 0 11px;

    color: #77715f;

    font-size: 13px;
    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================
   ALLERGEN BUTTON
========================================= */

.bella-product-allergen-wrap {
    position: relative;

    margin:
        3px 0 12px;
}

.bella-product-allergen-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding:
        5px 9px;

    border:
        1px solid rgba(174, 113, 94, 0.35);

    border-radius: 999px;

    background: #f8e8e2;

    color: #8a5547;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.bella-product-allergen-trigger:hover {
    background: #f3d9d0;

    transform: translateY(-1px);
}


/* =========================================
   FOOTER
========================================= */

.bella-product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
margin-top: auto;
    
}

.bella-product-card-price {
    color: #59613f;

    font-size: 20px;
    font-weight: 800;
}

.bella-product-add-button {
    min-height: 38px;

    padding:
        8px 13px;

    border-radius: 999px;

    white-space: nowrap;
}

.bella-product-add-button:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}

.bella-product-variant-add-button {
    margin-top: 5px;
}

.bella-product-variant-add-button:disabled {
    opacity: 1;

    background: #e4e6d6;
    color: #5f6538;
    
    border: 1px solid #b9bea0;

    cursor: not-allowed;

    box-shadow: none;
}

/* =========================================
   POPOVERS
========================================= */

.bella-product-popover {
    position: absolute;

    z-index: 30;

    width:
        min(280px, calc(100vw - 40px));

    padding: 15px;

    border:
        1px solid rgba(82, 91, 61, 0.15);

    border-radius: 16px;

    background: #fffdf8;

    color: #595646;

    box-shadow:
        0 15px 40px rgba(50, 45, 35, 0.20);

    font-size: 12px;
    line-height: 1.45;
}

.bella-product-popover[hidden] {
    display: none;
}


/* =========================================
   INFO POPOVER
========================================= */

.bella-product-info-popover {
    top: 55px;
    right: 10px;

    height: auto;

    max-height:
        min(
            520px,
            calc(100vh - 100px)
        );

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    pointer-events: auto;
}

.bella-product-info-popover::before {
    content: "";

    position: absolute;

    top: -7px;
    right: 14px;

    width: 13px;
    height: 13px;

    background: #fffdf8;

    border-top:
        1px solid rgba(82, 91, 61, 0.15);

    border-left:
        1px solid rgba(82, 91, 61, 0.15);

    transform: rotate(45deg);
}


/* =========================================
   POPOVER CONTENT
========================================= */

.bella-product-popover-section {
    position: relative;
}

.bella-product-popover-title {
    display: block;

    margin-bottom: 7px;

    color: #4f5738;

    font-size: 13px;
    font-weight: 800;
}

.bella-product-popover p {
    margin: 0;

    color: #6e695a;

    line-height: 1.5;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.bella-product-popover-divider {
    height: 1px;

    margin:
        12px 0;

    background:
        rgba(82, 91, 61, 0.14);
}


/* =========================================
   PRODUCT INFO ROW
========================================= */

.bella-product-info-row {
    display: grid;

    grid-template-columns:
        105px 1fr;

    gap: 8px;

    padding:
        5px 0;

    border-bottom:
        1px solid rgba(82, 91, 61, 0.08);
}

.bella-product-info-row:last-child {
    border-bottom: 0;
}

.bella-product-info-row span {
    color: #8a8575;
}

.bella-product-info-row strong {
    color: #514e40;

    font-weight: 600;

    overflow-wrap: anywhere;
}


/* =========================================
   ALLERGEN POPOVER
========================================= */

.bella-product-allergen-popover {
    left: 0;
    bottom: calc(100% + 10px);

    border-color:
        rgba(174, 113, 94, 0.22);

    background: #fff9f6;
}

.bella-product-allergen-popover::after {
    content: "";

    position: absolute;

    bottom: -7px;
    left: 20px;

    width: 13px;
    height: 13px;

    background: #fff9f6;

    border-right:
        1px solid rgba(174, 113, 94, 0.22);

    border-bottom:
        1px solid rgba(174, 113, 94, 0.22);

    transform: rotate(45deg);
}

.bella-product-allergen-popover
.bella-product-popover-title {
    color: #8a5547;
}


/* =========================================
   MOBILE
========================================= */



.bella-product-compact-info-trigger {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(69, 70, 37, 0.18);

    border-radius: 50%;

    background:
        rgba(255, 250, 243, 0.82);

    color: #59613f;

    font-size: 18px;

    cursor: pointer;
    flex-shrink: 0;
}


.bella-product-compact-allergen-trigger {
    min-height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-top: 0;

    padding:
        4px 10px;

    border:
        1px solid rgba(174, 113, 94, 0.28);

    border-radius: 999px;

    background:
        rgba(248, 232, 226, 0.82);

    color: #8a5547;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}
.offer-list-stock {
    font-size: 12px;
    font-weight: 700;

    color: #59613f;
}
.offer-list-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px 8px;

    max-width: 100%;

    box-sizing: border-box;
}

.bella-product-compact-info-trigger {
    flex: 0 0 auto;
}

.bella-product-compact-allergen-trigger {
    flex: 0 0 auto;

    white-space: nowrap;
}

/* =========================================
   COMPACT PRODUCT DETAILS
   Compact cards use the shared modal below.
========================================= */

/* =========================================
   PRODUCT DETAILS MODAL
========================================= */

.bella-product-details-modal {
    position: fixed;
    inset: 0;

    z-index: 9999999;
}

.bella-product-details-modal[hidden] {
    display: none;
}

.bella-product-details-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(40, 36, 30, 0.42);

    backdrop-filter:
        blur(3px);
}

.bella-product-details-dialog {
     position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            560px,
            calc(100vw - 32px)
        );

    max-height:
        min(
            720px,
            calc(100vh - 40px)
        );

    overflow-y: auto;

    transform:
        translate(
            -50%,
            -50%
        );

    box-sizing: border-box;

    padding: 24px;

    background: #fffdf8;

    border:
        1px solid
        rgba(82, 91, 61, 0.15);

    border-radius: 20px;

    box-shadow:
        0 24px 70px
        rgba(40, 35, 28, 0.28);
}

.bella-product-details-close {
    position: absolute;

    top: 10px;
    right: 12px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background:
        rgba(69, 70, 37, 0.08);

    color: #454625;

    font-size: 24px;

    cursor: pointer;
}

.bella-product-details-content {
    padding-top: 8px;
}

.bella-product-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-right: 38px;
    padding-bottom: 16px;

    border-bottom:
        1px solid
        rgba(82, 91, 61, 0.12);
}

.bella-product-details-header strong {
    color: #41482f;

    font-size: 22px;
}

.bella-product-details-header span {
    color: #59613f;

    font-size: 20px;
    font-weight: 800;

    white-space: nowrap;
}

.bella-product-details-section {
    padding:
        17px
        0;

    border-bottom:
        1px solid
        rgba(82, 91, 61, 0.10);
}

.bella-product-details-section:last-child {
    border-bottom: none;
}

.bella-product-details-section h3 {
    margin:
        0
        0
        10px;

    color: #4f5738;

    font-size: 16px;
}

.bella-product-details-section p {
    margin: 0;

    color: #6e695a;

    line-height: 1.5;

    overflow-wrap: anywhere;
}

.bella-product-details-allergens {
    margin-top: 4px;

    padding:
        14px;

    background:
        rgba(248, 232, 226, 0.72);

    border:
        1px solid
        rgba(174, 113, 94, 0.22);

    border-radius: 14px;
}

.bella-product-details-allergens h3 {
    color: #8a5547;
}

.bella-product-card h3 {
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bella-product-card-footer {
    align-items: flex-end;
}

.bella-product-price-wrap {
    flex-shrink: 0;
}

.bella-product-card-price.is-old-sale-price {
    text-decoration: line-through;

    opacity: 0.55;
}

.bella-product-action-wrap {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;

    flex: 1;
}

.bella-product-action-price {
    display: block;

    text-align: center;

    white-space: nowrap;

    font-size: 14px;
    font-weight: 700;
}

.bella-product-action-price.is-sale-price {
    color: #b91c1c;
}

.bella-product-action-wrap
.bella-product-add-button {
    width: 100%;
}

.bella-product-popover-product-name {
    color: #41482f;

    font-size: 17px;
    font-weight: 800;

    line-height: 1.25;

    overflow-wrap: anywhere;
}

.bella-product-info-popover p {
    display: block;

    -webkit-line-clamp: unset;
    line-clamp: unset;

    overflow: visible;
}

/* =========================================
   VEGETARIAN + BREAKFAST
   SALE / VARIANT PRICE
========================================= */

#vegetarianProductsList
.bella-product-image-wrap
.bella-product-sale-badge,
#breakfastProductsList
.bella-product-image-wrap
.bella-product-sale-badge {
    left: auto;
    right: 8px;

    bottom: 8px;
}


/* PRICE AREA */

#vegetarianProductsList
.bella-product-meta-row,
#breakfastProductsList
.bella-product-meta-row {
    position: relative;
}


/* VARIANT / SALE PRICE */

#vegetarianProductsList
.bella-product-action-price,
#breakfastProductsList
.bella-product-action-price {
    position: absolute;

    right: 0;
    bottom: -36px;

    color: #4f5638;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.1;

    white-space: nowrap;
}


/* NORMAL PRICE */

#vegetarianProductsList
.bella-product-card-price,
#breakfastProductsList
.bella-product-card-price {
    white-space: nowrap;
}


/* OLD PRICE ON SALE */

#vegetarianProductsList
.bella-product-card-price.is-old-sale-price,
#breakfastProductsList
.bella-product-card-price.is-old-sale-price {
    color: #99958d;

    font-size: 12px;
    font-weight: 500;

    text-decoration: line-through;
}