/* ZEDO V321 – csak a hero információs sáv és a kitűzött termék esztétikai finomhangolása.
   A V320 megjelenésére épül. Nem változtatja a termék-, kosár- és szállítási adatlogikát. */

/* Az információs oszlop keretén belül a szállítás a fő ajánlat; a további 3 előny rövid, könnyen olvasható sor. */
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 7px !important;
    overflow: visible !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div {
    box-sizing: border-box !important;
    border: 1px solid #DDE8DC !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: 0 3px 12px rgba(35,73,45,.065) !important;
    padding: 10px 11px !important;
    gap: 9px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div:first-child {
    background: #EAF5E9 !important;
    border-color: #C7E0CB !important;
    box-shadow: inset 4px 0 #109557, 0 4px 13px rgba(31,87,50,.085) !important;
    align-items: flex-start !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div:last-child {
    background: #F2F8F0 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits b {
    font-size: 22px !important;
    flex: 0 0 26px !important;
    line-height: 1.2 !important;
    color: #08854B !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div > span {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div > span > strong {
    color: #173F2C !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits small,
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits small a {
    font-size: 12px !important;
    line-height: 1.32 !important;
    color: #4E6957 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px 5px !important;
    align-items: baseline !important;
    line-height: 1.28 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line > span {
    color: #365740 !important;
    font-size: 12px !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line > strong {
    color: #075D37 !important;
    font-weight: 950 !important;
    font-size: 17px !important;
    white-space: nowrap !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h318-free-shipping {
    color: #076C3D !important;
    font-weight: 850 !important;
    font-size: 12px !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h318-conditions {
    font-size: 10px !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h318-phone {
    color: #087847 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    overflow-wrap: anywhere !important;
    text-decoration-thickness: 1.5px !important;
}

/* A kiemelt termék képe kapjon több teret, az adatok pedig maradjanak egyértelműek. */
body.storefront-v200 .h316 .h316-pinned {
    background: #FFF !important;
    border: 1px solid #D8E8D9 !important;
    border-radius: 13px !important;
    box-shadow: 0 5px 18px rgba(29,80,46,.09) !important;
}
body.storefront-v200 .h316 .h316-pinned-title {
    padding: 9px 13px !important;
    font-size: 14px !important;
    letter-spacing: .015em !important;
}
body.storefront-v200 .h316 .h317-pinned-layout {
    grid-template-columns: minmax(0,52%) minmax(0,48%) !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-photo {
    padding: 7px !important;
    min-width: 0 !important;
    background: #FFF !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-bottom {
    padding: 12px 10px !important;
    gap: 9px !important;
    background: #FAFDF9 !important;
    border-left: 1px solid #E5ECE3 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-name {
    font-size: clamp(17px,1.45vw,22px) !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-price strong {
    color: #172620 !important;
    font-weight: 950 !important;
    font-size: clamp(26px,2.15vw,32px) !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h318-pinned-stock {
    background: #E8F5E9 !important;
    color: #086B3F !important;
    border: 1px solid #CEE5D0 !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
}
body.storefront-v200 .h316 .h317-pinned-layout form button {
    background: #07854A !important;
    color: #FFF !important;
    border-radius: 8px !important;
    min-height: 46px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}
@media (min-width: 1340px) {
    body.storefront-v200 .h316 .h316-hero.h319-hero-with-benefits:has(.h316-pinned) {
        grid-template-columns: minmax(0,1.85fr) minmax(245px,.74fr) minmax(300px,.98fr) !important;
        gap: 12px !important;
    }
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        grid-template-rows: minmax(150px,1.8fr) repeat(3,minmax(48px,.65fr)) !important;
        height: calc(var(--h316-hero-h,310px) + 50px) !important;
    }
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div:first-child {
        overflow-y: auto !important;
    }
}
@media (min-width: 761px) and (max-width: 1339px) {
    /* Itt az információs elemek külön sorban vannak a banner és a termék alatt. */
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
        grid-template-rows: auto !important;
        overflow: visible !important;
    }
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div {
        padding: 12px 10px !important;
        align-items: flex-start !important;
    }
}
@media (max-width: 760px) {
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 7px !important;
    }
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div {
        padding: 10px 9px !important;
        align-items: flex-start !important;
    }
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div > span > strong {font-size: 13px !important;}
    body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line > strong {font-size: 15px !important;}
    body.storefront-v200 .h316 .h317-pinned-layout {grid-template-columns: minmax(0,49%) minmax(0,51%) !important;}
    body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-name {font-size: 16px !important;}
    body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-price strong {font-size: 25px !important;}
    body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-bottom {padding: 9px !important;gap: 6px !important;}
}
@media (max-width: 420px) {
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {grid-template-columns: 1fr !important;}
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div:first-child {grid-column: 1 !important;}
}