.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ScrollReveal can initialize while #root is hidden behind the prerender.
   Its cached geometry then leaves real content at opacity:0 after handoff,
   including when a consent dialog closes during loading. Keep registered
   content readable independently of animation/consent timing. Restrict this
   override to the candidate root; retain each section's existing transforms. */
#root [data-sr-id] {
  opacity: 1 !important;
  visibility: visible !important;
}

.breadcrumbs {
  clear: both;
  box-sizing: border-box;
  width: 1600px;
  margin: 0 auto;
  padding: 32px 0 0;
  color: #a5a5a5;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  /* The following slanted .full-width section can also be layer 16 and
     geometrically overlap this box. Keep breadcrumbs one layer above it so
     ancestor links remain the pointer target on detail pages. */
  z-index: 17;
}

.breadcrumbs a,
.breadcrumbs span {
  color: #a5a5a5;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs-separator {
  padding: 0 .25rem;
}

body[data-geo-hide-blog-description="true"] .blog-detail .blog-description {
  display: none;
  overflow-x: auto;
}

.blog-detail .blog-description p {
  margin: 0 0 16px;
}

/* Rich-text article images carry intrinsic width/height attributes for layout
   stability. When the source also supplies a percentage width, explicitly
   keep the CSS height automatic so those attributes define an aspect ratio
   instead of stretching the image to its intrinsic pixel height. */
.blog-detail .blog-description img,
.blog-detail .blog-container img,
.newsroom-detail .blog-container img,
.generic-page .blog-container img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.blog-detail .blog-description table {
  width: 100%;
  min-width: 680px;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: inherit;
}

.blog-detail .blog-description caption {
  margin-bottom: 10px;
  color: #234136;
  font-family: YuantiTCbold;
  text-align: left;
}

.blog-detail .blog-description th,
.blog-detail .blog-description td {
  padding: 10px 12px;
  border: 1px solid #aac055;
  text-align: center;
}

.blog-detail .blog-description th {
  color: #fff;
  background: #00843d;
  font-family: YuantiTCbold;
}

.zespri-cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(0, 0, 0, .52);
}

.zespri-cookie-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483001;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  min-height: 94px;
  padding: 18px 32px;
  color: #fff;
  background: #006b3f;
  font-family: Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}

.zespri-cookie-consent__message {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  word-break: normal;
}

.zespri-cookie-consent[aria-hidden="true"] {
  visibility: hidden;
}

.zespri-cookie-consent__policy,
.zespri-cookie-consent__policy:active,
.zespri-cookie-consent__policy:hover,
.zespri-cookie-consent__policy:visited {
  color: #fff;
  text-decoration: underline;
}

.zespri-cookie-consent__actions {
  display: flex;
  gap: 22px;
  align-items: center;
}

.zespri-cookie-consent button,
.zespri-cookie-settings button {
  position: static;
  top: auto;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 2px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  text-transform: none;
  cursor: pointer;
}

.zespri-cookie-consent__settings {
  min-width: 146px;
  padding: 12px 4px;
  color: #fff;
  background: transparent;
  text-decoration: underline;
}

.zespri-cookie-consent__button {
  min-width: 170px;
  min-height: 56px;
  padding: 14px 20px;
  color: #fff;
  background: #ffc928;
}

.zespri-cookie-consent__button:hover,
.zespri-cookie-consent__button:focus-visible,
.zespri-cookie-settings__save:hover,
.zespri-cookie-settings__save:focus-visible {
  background: #f3b900;
}

.zespri-cookie-consent__close {
  width: 44px;
  height: 44px;
  padding: 0;
  color: #555;
  background: transparent;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.zespri-cookie-settings {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483002;
  box-sizing: border-box;
  width: min(620px, calc(100% - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 32px;
  color: #333;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
}

.zespri-cookie-settings__title {
  margin: 0 0 12px;
  color: #234136;
  font-family: inherit;
  font-size: 30px;
}

.zespri-cookie-settings__intro {
  margin: 0 0 22px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  word-break: normal;
}

.zespri-cookie-settings__option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid #ddd;
  cursor: pointer;
}

.zespri-cookie-settings__option input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  opacity: 1;
}

.zespri-cookie-settings__option-copy {
  display: grid;
  gap: 4px;
}

.zespri-cookie-settings__option-copy strong {
  color: #234136;
  font-size: 17px;
}

.zespri-cookie-settings__option-copy span {
  font-size: 15px;
  line-height: 1.4;
}

.zespri-cookie-settings__actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 24px;
}

.zespri-cookie-settings__cancel,
.zespri-cookie-settings__save {
  min-height: 48px;
  padding: 12px 20px;
}

.zespri-cookie-settings__cancel {
  color: #234136;
  background: #eee;
}

.zespri-cookie-settings__save {
  color: #fff;
  background: #006b3f;
}

@media (max-width: 1199.98px) {
  .zespri-cookie-consent {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 24px;
  }

  .zespri-cookie-consent__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 767.98px) {
  .zespri-cookie-consent {
    gap: 16px;
    padding: 20px;
    font-size: 15px;
  }

  .zespri-cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .zespri-cookie-consent__settings {
    grid-column: 1 / -1;
    min-width: 0;
    text-align: left;
  }

  .zespri-cookie-consent__button {
    min-width: 0;
    min-height: 50px;
    padding: 12px;
  }

  .zespri-cookie-consent__close {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .zespri-cookie-settings {
    padding: 24px;
  }

  .zespri-cookie-settings__title {
    font-size: 25px;
  }
}

.breadcrumbs.breadcrumbs--content {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Policy/contact pages place the breadcrumb between the banner and the real
   content heading. Keep the required external breathing room in the runtime,
   but do not add another large padded box around the breadcrumb itself. */
#root .breadcrumbs.breadcrumbs--below-banner {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 24px;
}

.breadcrumbs.breadcrumbs--banner-overlay {
  position: absolute;
  bottom: 48px;
  left: 0;
  z-index: 17;
  padding-top: 0;
}

@media (max-width: 1599.98px) {
  .breadcrumbs {
    width: calc(100% - 100px);
  }
}

@media (max-width: 575.98px) {
  .breadcrumbs {
    width: calc(100% - 50px);
    padding-top: 20px;
    font-size: 14px;
  }

  .breadcrumbs.breadcrumbs--content {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .breadcrumbs.breadcrumbs--banner-overlay {
    bottom: 28px;
  }
}

/* Halve the space between breadcrumbs and the first content section. The
   recipes landing page is excluded because its breadcrumb overlays the hero. */
#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .full-publications-landing,
#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .full-blog-landing,
#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .blog-detail,
#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .newsroom-detail,
#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .generic-page {
  padding-top: 50px !important;
}

#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .product-details {
  margin-top: 50px !important;
}

#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .full-nutri > .site-container {
  padding-top: 50px !important;
}

#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .full-about > .site-container,
#root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .full-zespri-system > .site-container {
  padding-top: 25px !important;
}

/* The sustainability page wraps its generic content in an extra anonymous
   section container, so the shared adjacent-sibling rule above cannot reach
   it. The runtime route marker keeps this 100px-to-50px change page-specific. */
#root.geo-sustainability-route .breadcrumbs + div > .generic-page {
  padding-top: 50px !important;
}

/* On the growers staging page the first video carries the vertical space
   below the breadcrumb. Reduce its original 12% top margin by two thirds. */
#root.geo-growers-staging-route .gs_page > .gs_p1:first-child {
  margin-top: 4% !important;
}

#root .breadcrumbs.breadcrumbs--below-banner {
  margin-bottom: 12px !important;
}

/* The where-to-buy intro heading is intentionally empty, but its original
   margin and padding still contribute to the whitespace before the retailer
   logos. Halve every desktop contribution so the complete breadcrumb-to-logo
   gap is reduced proportionally from 205px to about 102.5px. */
@media (min-width: 768px) {
  #root .breadcrumbs + .full-wheretobuy .site-container {
    padding-top: 25px !important;
  }

  #root .breadcrumbs + .full-wheretobuy .available-online > h3 {
    margin-top: 15px !important;
    padding-top: 25px !important;
    padding-bottom: 12.5px !important;
  }

  #root .breadcrumbs + .full-wheretobuy .shop-now-wrapper {
    padding-top: 25px !important;
  }
}

@media (max-width: 767.98px) {
  #root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .full-publications-landing,
  #root .breadcrumbs:not(.breadcrumbs--banner-overlay) + .full-blog-landing {
    padding-top: 20px !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffcc00 !important;
  outline-offset: 3px !important;
}

/* Keep the search field focus visible without an extra frame outside the input. */
.blog-search #search_tag:focus-visible {
  outline: 2px solid #224436 !important;
  outline-offset: -2px !important;
}

button.a11y-icon-button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-transform: none;
}

button.a11y-icon-button:not(.toggle-btn):not(.close_modal):not(.close-search-box),
button.selectBox,
button.filterformb,
button.single-tag,
button.clear-all,
button.search-section,
button.backtoblog,
button.viewmorebtn,
button.icon_circle,
button.icon_circle1,
button.learn-more,
.year-in-orchard-season-list button {
  top: auto;
  text-transform: none;
}

button.messyimg,
button.single-yummy,
.navigation button.previous,
.navigation button.next {
  top: auto;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-transform: none;
  font: inherit;
}

button.messyimg,
button.single-yummy {
  display: block;
  width: 100%;
}

button.slide-wrapper,
button.grower-image-button,
.tabs button.single-tab {
  top: auto;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-transform: none;
  font: inherit;
}

button.slide-wrapper,
button.grower-image-button {
  display: block;
  width: 100%;
}

button.single-explore,
button.header-link,
button.product-recipe-link {
  top: auto;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-transform: none;
  font: inherit;
}

button.product-recipe-link {
  display: block;
  width: 100%;
}

button.selectBox,
button.filterformb {
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font: inherit;
}

.topnav .main-nav li.hasSubMenu:focus-within ul.submenu {
  display: block;
}

/* Keep the recipe section in the published stacking order. Its white panel
   overlaps the preceding image strip by design; raising the whole panel would
   paint that white background over the lower part of the five tiles. */
#root .home-container .full-width.masonry-grid {
  position: relative;
  z-index: 13 !important;
}

#root .home-container .full-width.masonry-grid .masinory-slant {
  position: relative;
  z-index: 13;
}

/* ScrollReveal writes an identity transform inline while the candidate page
   hydrates. The published page finishes with the section's original 2-degree
   slant; keep that final geometry even when the animation has already run. */
#root .home-container .ways-to-eat-container:not(.no-transform) {
  transform: skew(0deg, 2deg) !important;
  transform-origin: 100% 0 !important;
  transition-property: opacity !important;
}

/* Product page only: preserve the published slanted top edge, but stop the
   following recipe panel from overlapping the bottom of the three images. */
#root .home-container .ways-to-eat-container.product-waystoeat {
  margin-bottom: 0 !important;
}

@media (min-width: 1600px) {
  #root .home-container .ways-to-eat-container.product-waystoeat {
    height: min(740px, max(660px, 38.541667vw)) !important;
  }
}

/* The recipe panel overlaps this strip by 72px. On the product page only,
   remove the panel's paired skews so its white top edge stays horizontal. */
#root .home-container .ways-to-eat-container.product-waystoeat + .full-width.masonry-grid,
#root .home-container .ways-to-eat-container.product-waystoeat + .full-width.masonry-grid > .masinory-slant {
  transform: none !important;
  transform-origin: initial !important;
}

/* The product showcase is the section immediately before the five image
   tiles. Its ScrollReveal inline style can likewise replace the published
   skew with an identity transform, changing the tile strip's visible top
   edge and apparent height. Preserve the source geometry after hydration. */
#root .home-container .product-showcase:not(.no-transform) {
  transform: skew(0deg, 2deg) !important;
  transform-origin: 100% 0 !important;
  transition-property: opacity !important;
}

/* Keep the FAQ category buttons visually separated from the overlapping
   banner on both desktop and mobile layouts. */
#root .home-container .faqs-section {
  padding-top: 36px !important;
}

/* FAQ source content follows the approved Word layout: trademark glyphs are
   actual superscripts, product groups are semantic lists, and source notes
   retain the same readable body size as the surrounding answer. The static
   candidate uses .geo-copy while the hydrated page uses .faqs-details. */
#root .faqs-details .faq-answer p,
#root .faqs-details > p,
#geo-static-content .geo-copy > p {
  margin: 0 0 16px;
}

#root .faqs-details .faq-answer ul,
#root .faqs-details > ul,
#geo-static-content .geo-copy > ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}

#root .faqs-details .faq-answer li,
#root .faqs-details > ul > li,
#geo-static-content .geo-copy > ul > li {
  margin: 0 0 6px;
}

#root .faqs-details sup,
#geo-static-content .geo-copy sup {
  font-size: .65em;
  line-height: 0;
  vertical-align: super;
}

#root .faqs-details sup.faq-trademark {
  font-family: Arial, sans-serif;
}

#root .faqs-details .faq-source-note,
#geo-static-content .geo-copy > p:last-child {
  font-size: inherit;
  line-height: inherit;
}

/* FAQ references remain green in both unvisited and visited states. */
#root .faqs-details a[href],
#geo-static-content.geo-static-faq .geo-copy a[href] {
  color: #39731f;
}

#root .faqs-details a[href]:hover,
#root .faqs-details a[href]:focus-visible,
#geo-static-content.geo-static-faq .geo-copy a[href]:hover,
#geo-static-content.geo-static-faq .geo-copy a[href]:focus-visible {
  color: #234136;
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  #root .home-container .faqs-section {
    padding-top: 24px !important;
  }
}

/* Keep the real page H1 in the DOM while allowing the first client-rendered
   page layer to cover it visually. The H1 remains readable to parsers and
   assistive technology; only its visual layer is placed underneath the page. */
#root #main-content-client:has(> h1.geo-page-title) {
  position: relative;
  isolation: isolate;
}

#root #main-content-client:has(> h1.geo-page-title) > h1.geo-page-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  margin: 0;
  pointer-events: none;
}

#root #main-content-client:has(> h1.geo-page-title) > .home-container {
  position: relative;
  z-index: 1;
}

/* Homepage-only title card: keep the real H1 in the DOM, but place it beneath
   the Banner artwork so this homepage experiment does not alter the visual. */
#root .home-container .header-hero-section {
  position: relative;
  z-index: 0;
}

/* The homepage Banner uses a straight bottom edge. Keep the legacy slant on
   all other pages by scoping this override to the homepage hero only. */
#root .home-container .header-hero-section#hero-section {
  transform: none !important;
  transform-origin: initial !important;
  margin-bottom: 0 !important;
  z-index: 20;
}

#root .home-container .header-hero-section > .header-slanted {
  position: relative;
  z-index: 1;
  transform: none !important;
  transform-origin: initial !important;
}

#root .home-container .geo-home-title-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  margin: 0;
  padding: 16px 24px;
  box-sizing: border-box;
  text-align: left;
  pointer-events: none;
}

#root .home-container .geo-home-title-card h1 {
  margin: 0;
  color: #234136;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
}

@media (max-width: 767.98px) {
  #root .home-container .geo-home-title-card {
    padding: 12px 16px;
  }

  #root .home-container .geo-home-title-card h1 {
    font-size: 28px;
  }
}

/* Match the Newsroom content gutter on the sustainability page. Its client
   renderer emits a full-width generic page, while Newsroom uses the shared
   site-container widths at each responsive breakpoint. */
#root .home-container .generic-page .blog-container {
  width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1599.98px) {
  #root .home-container .generic-page .blog-container {
    width: calc(100% - 100px);
  }
}

@media (max-width: 767.98px) {
  #root .home-container .generic-page .blog-container {
    width: calc(100% - 50px);
  }
}

/* The published BlogSocialIcons markup keeps a legacy like hook before the
   email and print controls. It has no visible control in the original page,
   so remove the hook itself instead of leaving an empty green circle. */
#root .blog-detail .blog_icon_parent .icon_circle1,
#root .blog-detail-content .blog_icon_parent .icon_circle1,
#root .newsroom-detail .blog_icon_parent .icon_circle1,
#root .newsroom-detail-content .blog_icon_parent .icon_circle1 {
  display: none !important;
}

@media (max-width: 1199.98px) {
  .topnav .main-nav ul.mystyle {
    right: 0 !important;
  }
}

.accessible-video-frame {
  position: relative;
  width: 100%;
}

.accessible-video-frame > video {
  display: block;
}

.media-motion-toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 2px solid currentColor;
  border-radius: .25rem;
  color: #fff;
  background: rgba(0, 0, 0, .75);
  cursor: pointer;
}

[aria-busy="true"] {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  img.animated-preview {
    display: none !important;
  }
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible,
  .blog-search #search_tag:focus-visible {
    outline-color: Highlight !important;
  }
}