/* Asset: scanio_product_inventory.css */

    .expiryRecipeAlert {
        width: 100%;
        margin: 10px 0 0;
        padding: 10px 13px;
        border: 1px solid rgba(201, 106, 58, .22);
        border-radius: 15px;
        color: #6f341c;
        background: rgba(255, 236, 214, .88);
        font-size: 10px;
        font-weight: 900;
        text-align: left;
        box-shadow: 0 9px 20px rgba(101, 57, 30, .08)
    }

    .expiryRecipeAlert[hidden] {
        display: none
    }

    .fridgeView.inventoryMode .fridgeSelectionBar {
        display: none !important
    }

    .fridgeProductCard {
        position: relative;
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(15, 23, 18, .07);
        border-radius: 22px;
        display: grid;
        grid-template-columns:64px minmax(0, 1fr);
        gap: 11px;
        background: rgba(255, 253, 247, .94);
        box-shadow: 0 15px 34px rgba(15, 23, 18, .09)
    }

    .fridgeMarketGroup {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns:subgrid;
        gap: 12px
    }

    .fridgeMarketHead {
        grid-column: 1/-1;
        padding: 13px 15px;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #fff;
        background: linear-gradient(145deg, #0d4830, #0e7b43)
    }

    .fridgeMarketHead b { font-size: 16px }
    .fridgeMarketHead span { font-size: 14px; font-weight: 600; opacity: .8 }
    .fridgeMarketTitle { display: flex; align-items: center; gap: 14px; min-width: 0 }
    .fridgeMarketTitle b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .fridgeMarketAdd {
        flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.24);
        border-radius: 9px; color: #fff; background: rgba(255,255,255,.12);
        font-size: 12px; font-weight: 600; cursor: pointer
    }
    .fridgeMarketAdd:hover { background: rgba(255,255,255,.22) }
    .fridgeManualEmpty {
        grid-column: 1/-1; margin: 0; padding: 14px 16px; border-radius: 14px;
        color: var(--muted); background: rgba(255,253,247,.75); font-size: 11px; font-weight: 750
    }
    .fridgeMarketMeta { display: flex; align-items: center; gap: 10px }
    .fridgeMarketDelete {
        width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 9px;
        display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); cursor: pointer
    }
    .fridgeMarketDelete:hover { background: rgba(255,255,255,.25) }
    .fridgeMarketDelete svg, .productDeleteButton svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }

    .fridgeProductCard.urgent {
        border-color: rgb(217 167 14 / 80%);
        background: linear-gradient(145deg, #fffdf7, #ffe0af)
    }

    .fridgeProductCard.expired {
        border-color: rgb(255 0 0 / 60%);
        background: linear-gradient(145deg, #fffdf7, #ffd4d4)
    }

    .fridgeProductPhoto {
        width: 64px;
        height: 64px;
        border-radius: 19px;
        overflow: hidden;
        background: #edf0e8
    }

    .fridgeProductPhoto img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .fridgeProductBody {
        min-width: 0
    }

    .fridgeProductTitle {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px
    }

    .fridgeProductTitle b {
        min-width: 0;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .fridgeExpiryPill {
        flex: 0 0 auto;
        padding: 4px 6px;
        border-radius: 99px;
        color: var(--deep);
        background: rgba(32, 196, 111, .11);
        font-size: 10px;
        font-weight: 600
    }

    .urgent .fridgeExpiryPill {
        color: #8b4a12;
        background: rgba(244, 170, 72, .18)
    }

    .expired .fridgeExpiryPill {
        color: #98382b;
        background: rgba(201, 79, 58, .15)
    }

    .fridgeProductMeta {
        display: grid;
        gap: 3px;
        margin-top: 6px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 600
    }

    .fridgeProductActions {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 6px
    }

    .fridgeProductActions button {
        padding: 8px;
        border: 0;
        border-radius: 11px;
        color: var(--deep);
        background: rgba(14, 123, 67, .08);
        font-size: 12px;
        font-weight: 700;
        border: 1px solid rgb(14 123 67 / 30%);
    }

    .fridgeProductActions button:only-child {
        grid-column: 2;
    }

    .fridgeProductActions button:last-child {
        /*
        color: #fff;
        background: var(--deep)
        */
    }

    .scanioFeatureOverlay {
        position: fixed;
        z-index: 1400;
        inset: 0;
        padding: 18px;
        display: none;
        place-items: center;
        background: rgba(7, 28, 17, .62);
        backdrop-filter: blur(10px)
    }

    .scanioFeatureOverlay.show {
        display: grid
    }

    .scanioFeaturePanel {
        width: min(620px, 100%);
        max-height: calc(100dvh - 36px);
        overflow: auto;
        border-radius: 28px;
        background: #fffdf7;
        box-shadow: 0 30px 90px rgba(0, 0, 0, .3)
    }

    .scanioFeatureHead {
        position: sticky;
        z-index: 4;
        top: 0;
        padding: 17px 19px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        background: linear-gradient(145deg, #0d4830, #0e7b43);
        color: #fff
    }

    .scanioFeatureHead h2 {
        margin: 0;
        font-size: 21px
    }

    .scanioFeatureHead p {
        margin: 4px 0 0;
        color: rgba(255, 255, 255, .76);
        font-size: 12px;
        font-weight: 700
    }

    .scanioFeatureClose {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 13px;
        color: #fff;
        background: rgba(255, 255, 255, .14);
        font-size: 20px
    }

    .scanioFeatureBody {
        padding: 18px
    }

    .scanioFormGrid {
        display: grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 10px
    }

    .scanioField {
        display: grid;
        gap: 5px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .07em
    }

    .scanioField.full {
        grid-column: 1/-1
    }

    .scanioField input,
    .scanioField select {
        width: 100%;
        height: 42px;
        padding: 0 11px;
        border: 1px solid rgba(15, 23, 18, .12);
        border-radius: 13px;
        color: var(--ink);
        background: #fff;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0
    }

    .scanioFeatureActions {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 8px;
        margin-top: 15px
    }

    .scanioFeatureActions button {
        min-height: 43px;
        border: 0;
        border-radius: 14px;
        color: var(--deep);
        background: rgba(14, 123, 67, .09);
        font-size: 16px;
        font-weight: 700;
    }

    .scanioFeatureActions .primaryAction {
        color: #073616;
        background: linear-gradient(145deg, var(--green), var(--lime))
    }

    .scanioFeatureActions .dangerAction {
        color: #9a392c;
        background: rgba(201, 79, 58, .1)
    }
    .scanioFeatureActions.productEditorActions { grid-template-columns:1fr auto }
    .scanioFeatureActions .productDeleteButton { width: 48px; display: grid; place-items: center }
    .scanioFeatureActions .productDeleteButton { grid-column: 2; grid-row: 1 }
    .scanioFeatureActions.productEditorActions .primaryAction { grid-column: 1; grid-row: 1 }
    #receiptScannerOverlay .scanioFeaturePanel, #ingredientScannerOverlay .scanioFeaturePanel { width: min(1120px, 100%) }

    .receiptUploadBox {
        min-height: 150px;
        border: 2px dashed rgba(14, 123, 67, .22);
        border-radius: 20px;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: rgba(32, 196, 111, .05);
        text-align: center
    }

    .receiptUploadBox img {
        width: 100%;
        max-height: 270px;
        object-fit: contain
    }

    .receiptStatus {
        margin: 10px 0;
        padding: 9px 11px;
        border-radius: 12px;
        color: var(--muted);
        background: #feedce;
        font-size: 12px;
        font-weight: 600;
    }

    .receiptItems {
        display: grid;
        gap: 7px;
        margin-top: 12px
    }

    .receiptItemHeader,
    .receiptItemRow {
        grid-template-columns:minmax(140px, 2fr) 90px 200px 160px minmax(75px, 0.35fr) 50px;
    }

    .receiptItemHeader {
        padding: 10px 4px;
        display: grid;
        gap: 4px;
        align-items: center;
        color: #000000;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 2px solid #5f594e;
        background: #b7ab95;
        border-radius: 10px;
    }
    .receiptItemHeader span{
        align-self: center;
        text-align: center;
    }

    .receiptItemRow {
        padding: 0px;
        display: grid;
        gap: 6px;
        align-items: center;
        /* border: 1px solid rgba(15, 23, 18, .09); */
        border-radius: 15px;
        /* background: #fff*/
    }

    .receiptItemMain {
        display: grid;
        grid-template-columns:minmax(0, 1fr) 70px 84px 30px;
        gap: 6px
    }

    .receiptItemDetails {
        display: grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap: 6px
    }

    .receiptItemDetails label {
        display: grid;
        gap: 4px;
        color: var(--muted);
        font-size: 8px;
        font-weight: 900
    }

    .receiptItemRow input, .receiptItemRow select {
        min-width: 0;
        width: 100%;
        height: 37px;
        padding: 0 8px;
        border: 1px solid rgba(15, 23, 18, .1);
        border-radius: 11px;
        background: #fff;
        font-size: 14px;
        font-weight: 600
    }

    .receiptItemRow button {
        border: 0;
        border-radius: 10px;
        color: #be2323;
        background: rgba(207, 59, 54, 0.09);
        font-size: 20px;
        font-weight: bold;
    }
    .receiptItemRow label { display: block; min-width: 0 }
    .receiptItemRow button { height: 37px }

    .onboardingOverlay {
        z-index: 1600
    }

    .onboardingPanel {
        width: min(520px, 100%);
        padding: 25px;
        border-radius: 32px;
        color: #fff;
        background: radial-gradient(circle at 85% 8%, rgba(183, 255, 106, .3), transparent 28%), linear-gradient(145deg, #082e1d, #0e7b43);
        box-shadow: 0 35px 100px rgba(0, 0, 0, .38)
    }

    .onboardingStepIcon {
        width: 62px;
        height: 62px;
        border-radius: 22px;
        display: grid;
        place-items: center;
        color: #073616;
        background: var(--lime);
        font-size: 28px
    }

    .onboardingPanel h2 {
        margin: 18px 0 8px;
        font-size: 30px;
        letter-spacing: -.05em
    }

    .onboardingPanel p {
        min-height: 50px;
        margin: 0;
        color: rgba(255, 255, 255, .76);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5
    }

    .onboardingDots {
        display: flex;
        gap: 6px;
        margin: 19px 0
    }

    .onboardingDots span {
        width: 7px;
        height: 7px;
        border-radius: 99px;
        background: rgba(255, 255, 255, .28)
    }

    .onboardingDots span.active {
        width: 26px;
        background: var(--lime)
    }

    .onboardingActions {
        display: grid;
        grid-template-columns:auto 1fr;
        gap: 8px
    }

    .onboardingActions button {
        min-height: 45px;
        padding: 0 16px;
        border: 0;
        border-radius: 15px;
        color: rgba(255, 255, 255, .75);
        background: rgba(255, 255, 255, .1);
        font-size: 10px;
        font-weight: 950
    }

    .onboardingActions button:last-child {
        color: #073616;
        background: var(--lime)
    }

    @media (max-width: 560px) {
        .fridgeMarketHead { flex-wrap: wrap }
        .fridgeMarketTitle { width: 100%; justify-content: space-between }
        .fridgeMarketMeta { margin-left: auto }
        .scanioFormGrid {
            grid-template-columns:1fr
        }

        .scanioField.full {
            grid-column:auto
        }

        .receiptItemRow {
            gap: 7px
        }

        .receiptItems { overflow-x: auto }
        .receiptItemHeader, .receiptItemRow { min-width: 850px }
    }