/* Nexa: keep industries left nav inside viewport when there are many categories */
.component--industries .desktop .sticky {
  min-height: 0;
}

/* Background + pipe stay behind tabs, glass card, and scroll connector */
.component--industries .desktop .sticky .sections {
  z-index: 0;
}

/* Remove intro hero (self-closing / orange pipe reel + “Crafted chocolate excellence”).
   Keep DOM nodes so theme JS still finds .base / videos; only hide and zero scroll spacer. */
.component--industries .desktop .markers > .base {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.component--industries .desktop .sticky .sections > .base {
  display: none !important;
}

.component--industries .mobile > .start {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.component--industries .desktop .sticky .container {
  min-height: 0;
  position: relative;
  z-index: 2;
}

/* Desktop: fixed #header sits above this block — extra top inset so first tab title
   (e.g. Cocoa Ingredients) is not clipped under the frosted nav. */
@media (min-width: 1025px) {
  .component--industries .desktop .sticky .container {
    padding-top: calc(
      env(safe-area-inset-top, 0px) + clamp(4.35rem, 2.75rem + 3.5vw, 6.25rem)
    ) !important;
  }
}

.component--industries .desktop .sticky .dot {
  z-index: 3;
}

.component--industries .desktop .sticky .container .tabs {
  max-height: min(72vh, calc(100dvh - 10rem));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-right: 0.35rem;
  min-height: 0;
  align-self: stretch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.08);
}

.component--industries .desktop .sticky .container .tabs::-webkit-scrollbar {
  width: 6px;
}

.component--industries .desktop .sticky .container .tabs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.component--industries .desktop .sticky .container .tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

/* Nexa industries: smaller product names in the right glass card (all 12 boxes, desktop + mobile) */
.component--industries .desktop .boxes .box > .title:first-child {
  font-size: max(2.65pc, min(3.35vw, 4.05pc));
}

@media (max-width: 1100px) {
  .component--industries .desktop .boxes .box > .title:first-child {
    font-size: max(28px, min(2.1vw, 42px));
  }
}

.component--industries .mobile .boxes .box .bottom > .title:first-child {
  font-size: max(28px, min(2.1vw, 42px));
}

/* Tighter gap under main title when lede follows (Cocoa Core card) */
.component--industries .boxes .box > .title:first-child:has(+ .nexa-product-lede),
.component--industries .mobile .boxes .box .bottom > .title:first-child:has(+ .nexa-product-lede) {
  margin-bottom: 0 !important;
}

/* Cocoa / first-card: supporting line (Poppins), under main headline */
.component--industries .nexa-product-lede {
  font-family: var(--font-primary) !important;
  font-size: max(0.88pc, min(1.08vw, 16px));
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
  margin: 0.08em 0 1.35rem !important;
  max-width: 32em;
  opacity: 0.95;
}

.component--industries .nexa-product-lede + .group {
  margin-top: 0 !important;
}

/* Industries glass card: spec values slightly smaller; clearer label/value rhythm */
.component--industries .boxes .box .group:not(.--colours) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.component--industries .boxes .box .group:not(.--colours) .clearfix {
  display: none;
}

.component--industries .boxes .box .group + .group {
  margin-top: 0.45rem;
}

.component--industries .boxes .box .group .title.--small {
  font-size: max(0.152in, min(1.22vw, 21px)) !important;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0;
}

@media (max-width: 1100px) {
  .component--industries .boxes .box .group .title.--small {
    font-size: min(3.85vw, 17px) !important;
  }
}

/* Mobile: blurred plate + pipe are full-bleed layers (must not consume flex height or titles sit mid-card) */
.component--industries .mobile .boxes .scroll .box > .video.--cover {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.component--industries .mobile .boxes .scroll .box > .image.--cover {
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.component--industries .mobile .boxes .scroll .box .top,
.component--industries .mobile .boxes .scroll .box .bottom {
  position: relative;
  z-index: 2;
}

.component--industries .mobile .boxes .scroll .box .top {
  align-self: flex-start;
  margin-top: 0;
  padding-top: min(2vw, 10px);
}

.component--industries .mobile .boxes .scroll .box .bottom {
  margin-top: auto;
}

/* Desktop industries: video stack (unchanged) */
.component--industries .sections .item .video.--cover {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.component--industries .nexa-industry-cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  filter: blur(calc(14px + 0.55vw));
  pointer-events: none;
}

/* Theme still loads construction.mp4 for scroll timing; keep it off-screen and unpainted so
   its frames never flash over the Nexa blurred plate during slide transitions. */
.component--industries .nexa-industry-sync-video {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  bottom: 0;
  right: 0;
  border: 0 !important;
  object-fit: none !important;
}

/* Pipe only above the blurred plate within each slide — not above the UI chrome */
.component--industries .desktop .sticky .sections .item .image.--cover {
  z-index: 1;
}

.component--industries .mobile .boxes .scroll .box {
  position: relative;
  justify-content: flex-start !important;
}

.component--industries .tabs .video {
  position: relative;
  overflow: hidden;
}

.component--industries .nexa-industry-tab-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.component--industries .mobile .boxes .box .top .video.--cover {
  position: relative;
  overflow: hidden;
}

/* Ribbon pipe: desktop = letterboxed; mobile = crop from top + slight zoom so art meets card top */
.component--industries .desktop .sticky .sections .item .image.--cover img.nexa-industry-pipe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  pointer-events: none;
}

.component--industries .desktop .sticky .sections .item .image.--cover img.nexa-cocoa-pipe {
  object-position: 55% 50%;
}

.component--industries .mobile .boxes .scroll .box > .image.--cover img.nexa-industry-pipe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.2);
  transform-origin: center top;
  pointer-events: none;
}

.component--industries .mobile .boxes .scroll .box > .image.--cover img.nexa-cocoa-pipe {
  object-position: center top;
}

@media (max-width: 1100px) {
  .component--industries .desktop .sticky .sections .item .image.--cover {
    overflow: hidden;
  }

  .component--industries .desktop .sticky .sections .item .image.--cover img.nexa-industry-pipe {
    object-fit: cover;
    object-position: center top;
    transform: scale(1.14);
    transform-origin: center top;
  }

  .component--industries .desktop .sticky .sections .item .image.--cover img.nexa-cocoa-pipe {
    object-position: center top;
  }
}