/* ZEDO V320 | Deliberately limited to: CTA scale, benefits/pinned emphasis. */
/* CTA: keeps the approved softer red, but does not cover the advertisement. */
body.storefront-v200 .h316 .h316-banner-action {
    left: 13px !important;
    bottom: 13px !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 26px) !important;
}
body.storefront-v200 .h316 .h316-banner-action a.home-theme-hero-action,
body.storefront-v200 .h316 .h316-banner-action .home-theme-hero-button {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
    font-weight: 850 !important;
    letter-spacing: .015em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    border: 1px solid #B94750 !important;
    border-radius: 9px !important;
    background: #CB5961 !important;
    color: white !important;
    box-shadow: 0 3px 10px rgba(104,40,42,.18) !important;
    text-decoration: none !important;
}
body.storefront-v200 .h316 .h316-banner-action a.home-theme-hero-action:hover,
body.storefront-v200 .h316 .h316-banner-action .home-theme-hero-button:hover,
body.storefront-v200 .h316 .h316-banner-action a.home-theme-hero-action:focus-visible,
body.storefront-v200 .h316 .h316-banner-action .home-theme-hero-button:focus-visible {
    background: #B64953 !important;
    border-color: #AA3E47 !important;
}
/* A real cart button is nested in a form; do not distort the form itself. */
body.storefront-v200 .h316 .h316-banner-action form.home-theme-hero-action {
    width: max-content !important;
    max-width: 100% !important;
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
/* Make the information column inviting and readable instead of four tiny plain rows. */
@media (min-width: 1121px) {
    body.storefront-v200 .h316 .h316-hero.h319-hero-with-benefits:has(.h316-pinned) {
        grid-template-columns: minmax(0,1.85fr) minmax(235px,.72fr) minmax(295px,1fr) !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(0,1.65fr) repeat(3,minmax(0,1fr)) !important;
        gap: 3px !important;
        padding: 5px !important;
        height: calc(var(--h316-hero-h,310px) + 50px) !important;
        overflow: hidden !important;
        border: 1px solid #DCE7DA !important;
        border-radius: 14px !important;
        background: #FDFDF9 !important;
        box-shadow: 0 5px 16px rgba(33,73,45,.08) !important;
    }
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div {
        min-height: 0 !important;
        padding: 7px 10px !important;
        align-items: center !important;
        border: 0 !important;
        border-radius: 9px !important;
    }
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div {
    background: #F2F8F0 !important;
    color: #173C2D !important;
    box-shadow: inset 3px 0 #BDD7BF !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div:first-child {
    background: #E8F5E8 !important;
    box-shadow: inset 4px 0 #189457 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div:nth-child(4) {
    background: #EEF6EB !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits b {
    color: #09834B !important;
    font-size: 22px !important;
    flex-basis: 24px !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits strong {
    font-size: 15px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    color: #173E2B !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: 13px !important;
    line-height: 1.35 !important;
    color: #456653 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits .h319-shipping-line {
    font-size: 13px !important;
    line-height: 1.25 !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line strong {
    font-size: 16px !important;
    font-weight: 950 !important;
    color: #06713F !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h318-free-shipping {
    color: #075D37 !important;
    font-size: 12px !important;
    font-weight: 850 !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 {
    font-size: 15px !important;
    font-weight: 950 !important;
    color: #086D3D !important;
    overflow-wrap: anywhere !important;
    text-decoration-thickness: 1.5px;
}
/* Pinned product: attractive emphasis, without cropping its photo or hiding stock status. */
body.storefront-v200 .h316 .h316-pinned {
    border-color: #CDE5D2 !important;
    box-shadow: 0 5px 20px rgba(22,75,46,.1) !important;
    background: #FFF !important;
}
body.storefront-v200 .h316 .h316-pinned-title {
    font-size: 14px !important;
    font-weight: 950 !important;
    padding: 9px 14px !important;
    background: linear-gradient(90deg,#087644,#159359) !important;
    letter-spacing: .02em !important;
}
body.storefront-v200 .h316 .h317-pinned-layout {
    grid-template-columns: minmax(0,46%) minmax(0,54%) !important;
    min-height: 0 !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-photo {
    background: #FFFFFF !important;
    padding: 10px !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-photo img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-bottom {
    background: linear-gradient(135deg,#FFF,#F5FBF5) !important;
    border-left: 1px solid #DFEBDD !important;
    padding: 13px !important;
    gap: 10px !important;
    overflow: auto !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-name {
    font-size: clamp(18px,1.55vw,24px) !important;
    line-height: 1.3 !important;
    font-weight: 950 !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-price strong {
    font-size: clamp(26px,2.25vw,34px) !important;
    line-height: 1.1 !important;
    color: #172620 !important;
}
body.storefront-v200 .h316 .h317-pinned-layout .h318-pinned-stock {
    display: inline-block !important;
    align-self: flex-start !important;
    background: #E6F4E8 !important;
    border: 1px solid #C3E3C9 !important;
    border-radius: 7px !important;
    color: #096F3F !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    padding: 6px 8px !important;
}
body.storefront-v200 .h316 .h317-pinned-layout form button {
    min-height: 48px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    font-size: 16px !important;
    background: #07854A !important;
    box-shadow: 0 3px 8px rgba(6,100,56,.15) !important;
    font-weight: 900 !important;
}
body.storefront-v200 .h316 .h317-pinned-layout form button:hover {
    background: #076C3E !important;
}
@media (min-width: 761px) and (max-width: 1120px) {
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {
        gap: 5px !important;
        padding: 6px !important;
        border-radius: 13px !important;
    }
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div {
        padding: 12px 10px !important;
    }
}
@media (max-width: 760px) {
    body.storefront-v200 .h316 .h316-banner-action {left: 8px !important;bottom: 10px !important;max-width: calc(100% - 16px) !important}
    body.storefront-v200 .h316 .h316-banner-action a.home-theme-hero-action,
    body.storefront-v200 .h316 .h316-banner-action .home-theme-hero-button {
        min-height: 39px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-name {font-size: 17px !important}
    body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-price strong {font-size: 25px !important}
    body.storefront-v200 .h316 .h317-pinned-layout .h318-pinned-stock {font-size: 12px !important;padding: 4px 6px !important}
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits strong {font-size: 14px !important}
    body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits small {font-size: 12px !important}
}
/* Prevent layout width + padding from creating a horizontal scrollbar. */
body.storefront-v200 .h316 {box-sizing: border-box !important;}
@media (min-width: 1121px) {
  body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {
    grid-template-rows: minmax(0,2.25fr) repeat(3,minmax(0,.82fr)) !important;
  }
  body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div:first-child {
    align-items: flex-start !important;
    padding-top: 8px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
}
@media (max-width: 760px) {
  /* V316 originally styled the pinned card itself as a two-column grid, but
     its V317 child is now the grid. Keeping both grids collapsed the product name. */
  body.storefront-v200 .h316 .h316-hero.h319-hero-with-benefits .h316-pinned {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 265px !important;
  }
  body.storefront-v200 .h316 .h317-pinned-layout {
    display: grid !important;
    grid-template-columns: minmax(0,44%) minmax(0,56%) !important;
    height: auto !important;
    min-height: 215px !important;
    flex: 1 1 auto !important;
  }
  body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-bottom {
    overflow: visible !important;
    padding: 10px 11px !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-name {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  body.storefront-v200 .h316 .h317-pinned-layout .h316-pinned-photo {
    height: auto !important;
    min-height: 185px !important;
  }
}
/* Keep the label and the amount together when space allows, and wrap safely otherwise. */
body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 1px 5px !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line > span {
  display: inline !important;
}
body.storefront-v200 .h316 .h319-hero-with-benefits .h319-shipping-line > strong {
  white-space: nowrap !important;
}
/* Below large desktop widths, place the four trust panels beneath banner+pinned.
   This avoids making shipping prices microscopic just to fit a narrow middle column. */
@media (min-width: 1121px) and (max-width: 1339px) {
  body.storefront-v200 .h316 .h316-hero.h319-hero-with-benefits:has(.h316-pinned) {
    grid-template-columns: minmax(0,1.65fr) minmax(310px,1fr) !important;
  }
  body.storefront-v200 .h316 .h319-hero-with-benefits .h316-hero-main {grid-column:1!important;grid-row:1!important}
  body.storefront-v200 .h316 .h319-hero-with-benefits .h316-pinned {grid-column:2!important;grid-row:1!important}
  body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 120px !important;
    padding: 6px !important;
    gap: 6px !important;
    overflow: visible !important;
    border: 1px solid #DCE7DA !important;
    background: #FDFDF9 !important;
  }
  body.storefront-v200 .h316 .h319-hero-with-benefits .h316-benefits > div {
    padding: 10px !important;
    align-items: flex-start !important;
  }
}