/* Local review overrides for the saved Emergent export. */

a[data-testid="nav-logo"],
a[data-testid="nav-logo"].flex.items-center {
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

a[data-testid="nav-logo"] > img.brand-asset.select-none {
  height: 48px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
}

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--mm-honey) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px rgba(198, 135, 53, 0.18) !important;
}

.mm-field:focus-visible,
.mm-select:focus-visible {
  border-bottom-color: var(--mm-honey) !important;
}

header[data-testid="site-nav"] {
  background: rgba(255, 253, 248, 0.97) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--mm-linen) !important;
  z-index: 1000 !important;
}

header[data-testid="site-nav"] > div {
  min-height: 96px !important;
}

img[data-testid="footer-logo"].brand-asset,
footer img[data-testid="footer-logo"] {
  height: 100px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

img[data-testid="footer-logo"].brand-asset,
img[data-testid="footer-logo"].brand-asset + *,
img[data-testid="footer-logo"].brand-asset ~ *,
footer [class*="col-span"] {
  max-width: none !important;
  overflow: visible !important;
}

footer [data-testid="footer-logo"].brand-asset {
  margin-bottom: 32px !important;
  transform: none !important;
}

footer [data-testid="footer-logo"].brand-asset:is(img) {
  object-fit: contain !important;
}

@media (max-width: 767px) {
  footer [data-testid="footer-logo"].brand-asset {
    transform: translateX(0) !important;
  }
}

footer [data-testid="footer-logo"].brand-asset:is(img):first-child {
  align-self: center !important;
}

footer [data-testid="footer-logo"].brand-asset:is(img):first-child + div {
  justify-content: center !important;
  text-align: center !important;
  display: block !important;
}

footer [data-testid="footer-logo"].brand-asset:is(img):first-child + div p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

footer .md\:col-span-5 {
  text-align: center !important;
}

footer [data-testid="footer-enquiry-cta"] {
  display: none !important;
}

footer .miel-section-label-icon {
  display: none !important;
}

footer .miel-section-label {
  display: block !important;
}

[data-testid="hero-headline"] {
  line-height: 1.1 !important;
  margin-bottom: 24px !important;
  max-width: none !important;
}

[data-testid="hero-headline"] .miel-hero-line {
  display: inline-block !important;
  white-space: nowrap !important;
}

[data-testid="hero-sub"] {
  margin-bottom: 32px !important;
}

@media (min-width: 1024px) {
  [data-testid="hero-section"] > div > div:first-child {
    width: 42% !important;
    position: relative !important;
    z-index: 2 !important;
  }

  [data-testid="hero-section"] > div > div:last-child {
    width: 58% !important;
  }

  [data-testid="hero-image-wrap"] {
    overflow: visible !important;
  }

  [data-testid="hero-image"] {
    left: calc(-1 * clamp(56px, 7vw, 120px)) !important;
    right: auto !important;
    width: calc(100% + clamp(56px, 7vw, 120px)) !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width: 767px) {
  [data-testid="hero-headline"] {
    font-size: clamp(1.95rem, 8.4vw, 2.6rem) !important;
  }
}

@media (max-width: 480px) {
  [data-testid="hero-headline"] {
    font-size: clamp(1.72rem, 7.25vw, 2rem) !important;
  }

  [data-testid="hero-sub"] {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  [data-testid="hero-image"] {
    left: calc(-1 * clamp(40px, 4vw, 64px)) !important;
    width: calc(100% + clamp(40px, 4vw, 64px)) !important;
  }
}

.eyebrow {
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
}

.miel-section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  color: var(--mm-text-soft) !important;
}

.miel-section-label-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  object-fit: contain !important;
}

[data-testid="industries-marquee"],
[data-testid="industries-marquee"] .marquee-track {
  display: flex !important;
  align-items: center !important;
}

[data-testid="industries-marquee"] .marquee-track {
  line-height: 1 !important;
}

[data-testid="industries-marquee"] .marquee-track > span,
[data-testid="industries-marquee"] .miel-buyer-name {
  font-size: clamp(48px, 4vw, 52px) !important;
}

[data-testid="industries-marquee"] .marquee-track > span,
[data-testid="industries-marquee"] .miel-buyer-name,
[data-testid="industries-marquee"] .miel-dot-separator {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  line-height: 1 !important;
  top: 0 !important;
}

[data-testid="industries-marquee"] .miel-dot-separator {
  position: relative !important;
}

[data-testid="packaging-section"] .grid:has([data-testid^="packaging-card"]) {
  align-items: stretch !important;
}

[data-testid^="packaging-card"] {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}

[data-testid^="packaging-card"] > .img-rise,
[data-testid^="packaging-card"] > div:has(> img) {
  height: 480px !important;
  min-height: 480px !important;
  max-height: 480px !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: visible !important;
  margin-bottom: 24px !important;
}

[data-testid="packaging-card-private-label"] > .img-rise,
[data-testid="packaging-card-private-label"] > div:has(> img),
[data-testid="packaging-card-retail"] > .img-rise,
[data-testid="packaging-card-retail"] > div:has(> img) {
  aspect-ratio: 3 / 4 !important;
}

[data-testid="packaging-card-corporate-gifting"] > .img-rise,
[data-testid="packaging-card-corporate-gifting"] > div:has(> img),
[data-testid="packaging-card-bulk"] > .img-rise,
[data-testid="packaging-card-bulk"] > div:has(> img) {
  aspect-ratio: 4 / 3 !important;
}

[data-testid^="packaging-card"] > .img-rise > img,
[data-testid^="packaging-card"] > div:has(> img) > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

[data-testid^="packaging-card"] > .img-rise + *,
[data-testid^="packaging-card"] > div:has(> img) + * {
  flex: 0 0 auto !important;
}

[data-testid="letter-section"] .mt-12.flex.items-center.gap-4 {
  gap: 18px !important;
}

[data-testid="letter-section"] .mt-12.flex.items-center.gap-4 > div:first-child {
  width: 32px !important;
  max-width: 32px !important;
  height: 1px !important;
  opacity: 0.85 !important;
}

@media (max-width: 767px) {
  [data-testid^="packaging-card"] > .img-rise,
  [data-testid^="packaging-card"] > div:has(> img) {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    margin-bottom: 20px !important;
  }

  [data-testid="packaging-section"] .grid:has([data-testid^="packaging-card"]) {
    row-gap: 56px !important;
  }

  footer .grid {
    text-align: center !important;
  }

  footer ul,
  footer li {
    text-align: center !important;
  }
}

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

  .reveal,
  .reveal.in {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee-track,
  [data-testid="industries-marquee"] .marquee-track,
  .honey-loader-drop {
    animation: none !important;
    transform: none !important;
  }

  .img-rise img,
  .img-rise:hover img,
  .editorial-link::after {
    transform: none !important;
    transition: none !important;
  }
}

/* --- Static-site guard: prevent any horizontal overflow on small screens --- */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Smooth in-page scrolling --- */
html { scroll-behavior: smooth; }

/* --- Clip the industries ticker so its 6900px track never widens the page --- */
[data-testid="industries-marquee"] { overflow: hidden !important; max-width: 100% !important; }

/* --- Hero: keep headline + copy inside the viewport on phones --- */
@media (max-width: 640px) {
  [data-testid="hero-headline"] {
    font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  [data-testid="hero-sub"] { overflow-wrap: break-word; }
  /* Qualified selector so it beats the desktop nowrap rule (styles.css:111)
     which forced "Single-serve honey spoon" onto one over-wide line. */
  [data-testid="hero-headline"] .miel-hero-line {
    white-space: normal !important;
    display: inline !important;
  }
}

/* --- Hero image: kill the tall dead space under the copy on phones/tablets.
   The wrap is h-[80vh]; at mobile heights that leaves a big empty band with a
   tiny spoon at the bottom. Shrink it and pull the artwork up. --- */
@media (max-width: 1023px) {
  /* Contain the copy column: force border-box + trim the inline pr:40px so
     w-full + px-6 + padding no longer overflow the viewport (was clipping the
     sub-text on the right). */
  [data-testid="hero-section"] .reveal,
  [data-testid="hero-headline"],
  [data-testid="hero-sub"] {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  [data-testid="hero-section"] .reveal {
    padding-right: 24px !important;
  }
  [data-testid="hero-image-wrap"] {
    height: auto !important;
    min-height: 44vh !important;
  }
  [data-testid="hero-image"] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 44vh !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* --- Enquiry form status message --- */
.mm-form-status {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 12px;
}
.mm-form-status--ok    { color: #2f5d3a; background: rgba(70,130,80,0.10); border: 1px solid rgba(70,130,80,0.25); }
.mm-form-status--error { color: #7a3b1d; background: rgba(198,135,53,0.10); border: 1px solid rgba(198,135,53,0.30); }

/* --- Branded load splash: big bee on cream, auto-fades (pure CSS, no JS dependency).
   The global prefers-reduced-motion rule above collapses these animations to ~0ms,
   which makes mmSplashFade's `forwards` hide the splash instantly for those users. --- */
#mm-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FDFBF7;
  animation: mmSplashFade 0.6s ease 0.9s forwards;
}
#mm-splash .mm-splash__bee {
  width: clamp(104px, 24vw, 168px);
  height: auto;
  animation: mmSplashPulse 1.2s ease-in-out infinite;
}
@keyframes mmSplashPulse {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes mmSplashFade {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}