/*
 * ICYLAB — Bloom Hopper page module
 * Introduced in v0.5.67.
 *
 * Purpose:
 * - keep Bloom Hopper page-specific stabilization outside the legacy monolithic stylesheet;
 * - establish the page typography hierarchy used by Home: display 800 / structural 600 / body 300;
 * - keep the mobile chapter navigation physically attached to the primary topbar.
 *
 * The legacy assets/css/icylab.css remains loaded first for backwards compatibility.
 * New Bloom Hopper changes should be added here instead of appending more page-specific
 * overrides to the global file.
 */

/* --------------------------------------------------------------------------
   Typography — Process chapter
   -------------------------------------------------------------------------- */
body.icy-bloom-page #bloom-process .icy-bloom-process-copy .icy-bloom-kicker {
  font-weight: 600 !important;
}

body.icy-bloom-page #bloom-process .icy-bloom-process-copy h2,
body.icy-bloom-page #bloom-process .icy-bloom-process-copy h2 * {
  color: #fff !important;
  font-weight: 800 !important;
}

body.icy-bloom-page #bloom-process .icy-bloom-process-copy > p:not(.icy-bloom-kicker) {
  font-weight: 300 !important;
}

body.icy-bloom-page #bloom-process .icy-bloom-process-step span {
  font-weight: 600 !important;
}

body.icy-bloom-page #bloom-process .icy-bloom-process-step strong {
  font-weight: 700 !important;
}

body.icy-bloom-page #bloom-process .icy-bloom-process-step small {
  font-weight: 300 !important;
}

body.icy-bloom-page #bloom-process .icy-bloom-process-copy .icy-bloom-text-link {
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   v0.5.94 — Shared navigation geometry + explicit snap policy
   Bloom keeps a sticky primary topbar and sticky 48px chapter bar, matching
   the interior-page foundation. Desktop/tablet narrative chapters use gentle
   proximity snap; mobile remains natural scroll because several chapters are
   taller than the viewport and must never trap the reader.
   -------------------------------------------------------------------------- */
body.icy-bloom-page .icy-home-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1400 !important;
  height: 66px !important;
}

body.icy-bloom-page .icy-home-header-inner {
  height: 66px !important;
}

body.icy-bloom-page .icy-bloom-subnav {
  position: sticky !important;
  top: 66px !important;
  z-index: 1300 !important;
  height: 48px !important;
  margin: 0 !important;
  border-top: 0 !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.icy-bloom-page .icy-bloom-subnav .icy-bloom-shell {
  min-height: 48px !important;
  height: 48px !important;
}

@media (min-width: 861px) {
  html.icy-bloom-scroll,
  html.icy-bloom-scroll.icy-hybrid-scroll {
    scroll-snap-type: y proximity !important;
    scroll-padding-top: 114px !important;
  }

  body.icy-bloom-page .icy-bloom-snap {
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
  }
}

@media (max-width: 860px) {
  html.icy-bloom-scroll,
  html.icy-bloom-scroll.icy-hybrid-scroll,
  body.icy-bloom-page {
    scroll-snap-type: none !important;
  }
}

@media (max-width: 599px) {
  body.icy-bloom-page .icy-home-header,
  body.icy-bloom-page .icy-home-header-inner {
    height: 60px !important;
  }

  body.icy-bloom-page .icy-bloom-subnav {
    top: 60px !important;
  }
}

@media (min-width: 783px) {
  body.admin-bar.icy-bloom-page .icy-home-header {
    top: 32px !important;
  }

  body.admin-bar.icy-bloom-page .icy-bloom-subnav {
    top: 98px !important;
  }
}

@media (max-width: 782px) {
  body.admin-bar.icy-bloom-page .icy-home-header {
    top: 46px !important;
  }

  body.admin-bar.icy-bloom-page .icy-bloom-subnav {
    top: calc(46px + var(--icy-home-header-h, 66px)) !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile / tablet chapter navigation
   The primary header is 60px on phones and 66px on the 600–860px range.
   Use an explicit shared offset so the sticky chapter bar never exposes the
   page background between both navigation layers.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body.icy-bloom-page {
    --icy-bloom-mobile-header-h: 66px;
  }

  body.icy-bloom-page .icy-bloom-subnav {
    top: var(--icy-bloom-mobile-header-h) !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    background: #000 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.icy-bloom-page.admin-bar .icy-bloom-subnav {
    top: calc(var(--icy-bloom-mobile-header-h) + 46px) !important;
  }

  body.icy-bloom-page .icy-bloom-subnav .icy-bloom-shell {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 599px) {
  body.icy-bloom-page {
    --icy-bloom-mobile-header-h: 60px;
  }
}

/* WordPress uses a 32px admin bar on wider logged-in viewports. */
@media (min-width: 783px) and (max-width: 860px) {
  body.icy-bloom-page.admin-bar .icy-bloom-subnav {
    top: calc(var(--icy-bloom-mobile-header-h) + 32px) !important;
  }
}

/* --------------------------------------------------------------------------
   v0.5.70 — Process display weight: single source of truth
   Match the shared Bloom Hopper chapter headline weight exactly. The legacy
   process-specific 900 declarations were removed from icylab.css.
   -------------------------------------------------------------------------- */
body.icy-bloom-page #bloom-process .icy-bloom-process-copy h2,
body.icy-bloom-page #bloom-process .icy-bloom-process-copy h2 * {
  font-weight: 800 !important;
  font-variation-settings: normal !important;
}

/* --------------------------------------------------------------------------
   v0.5.79 — Mobile density + portfolio catalogue + proof flow
   All new Bloom Hopper responsive work stays in this page module instead of
   adding more overrides to the legacy monolithic stylesheet.
   -------------------------------------------------------------------------- */

/* Respaldo: explicit layout contract. On desktop the CTA remains below the
   claim; on mobile the technical matrix sits between the explanatory copy and
   the CTA, matching the requested reading order. */
body.icy-bloom-page #bloom-proof .icy-bloom-proof-layout {
  grid-template-areas:
    "proof-copy proof-stack"
    "proof-cta  proof-stack";
}
body.icy-bloom-page #bloom-proof .icy-bloom-proof-copy { grid-area: proof-copy; }
body.icy-bloom-page #bloom-proof .icy-bloom-proof-stack { grid-area: proof-stack; }
body.icy-bloom-page #bloom-proof .icy-bloom-proof-cta {
  grid-area: proof-cta;
  width: max-content;
  justify-self: start;
  align-self: start;
  margin-top: clamp(.65rem, 1.2vh, 1rem);
}

/* Final chapter: the principal promise is always white; the green kicker and
   final proof line keep their existing accent roles. */
body.icy-bloom-page #bloom-pilot .icy-bloom-final-layout h2,
body.icy-bloom-page #bloom-pilot .icy-bloom-final-layout h2 * {
  color: #fff !important;
}

@media (max-width: 860px) {
  /* Reduce excess air at the start of mobile chapters. Portfolio and FAQ keep
     natural scrolling, but share the same top rhythm as the snap chapters. */
  body.icy-bloom-page #bloom-value,
  body.icy-bloom-page #bloom-process,
  body.icy-bloom-page #bloom-economics,
  body.icy-bloom-page #bloom-field,
  body.icy-bloom-page #bloom-portfolio,
  body.icy-bloom-page #bloom-proof,
  body.icy-bloom-page #bloom-faq {
    padding-top: clamp(2.25rem, 6.2vw, 3rem) !important;
    padding-bottom: clamp(2.8rem, 7.5vw, 3.8rem) !important;
  }

  body.icy-bloom-page #bloom-pilot {
    padding-top: clamp(2.5rem, 6.5vw, 3.25rem) !important;
  }

  body.icy-bloom-page .icy-bloom-section .icy-bloom-kicker,
  body.icy-bloom-page .icy-bloom-final .icy-bloom-kicker {
    margin-bottom: .65rem !important;
  }

  body.icy-bloom-page .icy-bloom-section h2 + p,
  body.icy-bloom-page .icy-bloom-final h2 + p {
    margin-top: .9rem !important;
  }

  /* Some legacy mobile rules add their own top/bottom padding to the field
     inner grid. The section now owns that spacing, so neutralise the duplicate. */
  body.icy-bloom-page #bloom-field .icy-bloom-field-layout {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* PROCESO — same sequence, less vertical dead space. */
  body.icy-bloom-page #bloom-process .icy-bloom-process-layout {
    gap: 1.15rem !important;
  }
  body.icy-bloom-page #bloom-process .icy-bloom-process-graphic {
    gap: .32rem !important;
  }
  body.icy-bloom-page #bloom-process .icy-bloom-process-step {
    min-height: 126px !important;
    padding: .9rem 1rem !important;
  }
  body.icy-bloom-page #bloom-process .icy-bloom-process-step strong {
    font-size: clamp(1.35rem, 5.7vw, 1.75rem) !important;
    line-height: .95 !important;
  }
  body.icy-bloom-page #bloom-process .icy-bloom-process-step small {
    max-width: none !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }
  body.icy-bloom-page #bloom-process .icy-bloom-process-arrow {
    min-height: 24px;
    display: grid;
    place-items: center;
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }

  /* VARIEDADES — featured cards are materially shorter on mobile while
     preserving label crop and the full-card interaction target. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid {
    gap: .7rem !important;
    margin-top: clamp(1.25rem, 4.8vw, 1.8rem) !important;
  }
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card {
    min-height: 218px !important;
    padding: 1rem !important;
  }
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-copy {
    width: 64% !important;
  }
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-media {
    width: 36% !important;
  }
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-short,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-medium,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-long,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-xlong {
    margin: auto 0 .5rem !important;
    font-size: clamp(2rem, 8.8vw, 3rem) !important;
    line-height: .9 !important;
  }
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card p {
    margin-bottom: .55rem !important;
    font-size: .77rem !important;
    line-height: 1.3 !important;
  }
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-number,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-link {
    font-size: .62rem !important;
  }

  /* Full mobile catalogue: two-column compact drawer. Long profile copy is
     intentionally removed here; the card still opens the complete profile
     dialog, so density improves without losing information. */
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 70px 8px 22px !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card-extra {
    display: flex !important;
    min-height: 188px !important;
    padding: .7rem !important;
    box-shadow: 4px 4px 0 #111 !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-copy {
    width: 62% !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-media {
    width: 38% !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-short,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-medium,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-long,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-xlong {
    margin: auto 0 .45rem !important;
    font-size: clamp(1.35rem, 5.2vw, 2rem) !important;
    line-height: .92 !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card p {
    display: none !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-link {
    font-size: .54rem !important;
    white-space: nowrap;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-number {
    font-size: .56rem !important;
  }

  /* Replace the icon-only catalogue close control with an explicit reduce
     action. It collapses back to the three featured references. */
  body.icy-bloom-page .icy-bloom-catalog-close.is-visible {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: 44px !important;
    min-width: 112px;
    padding: 0 .9rem !important;
    background: #00ff30 !important;
    border: 1px solid #111 !important;
    color: #000 !important;
    font-family: var(--icy-sans) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  body.icy-bloom-page .icy-bloom-catalog-close .icy-bloom-catalog-close-label {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: none !important;
    color: inherit !important;
  }
  body.icy-bloom-page .icy-bloom-catalog-close .icy-bloom-catalog-close-label::after {
    content: none !important;
    display: none !important;
  }
  body.icy-bloom-page .icy-bloom-catalog-close b {
    display: inline !important;
    color: #000 !important;
    font-size: 1rem;
    line-height: 1;
  }

  /* RESPALDO — copy → technical matrix → CTA. */
  body.icy-bloom-page #bloom-proof .icy-bloom-proof-layout {
    grid-template-areas:
      "proof-copy"
      "proof-stack"
      "proof-cta" !important;
    gap: 1.2rem !important;
  }
  body.icy-bloom-page #bloom-proof .icy-bloom-proof-copy {
    max-width: none !important;
  }
  body.icy-bloom-page #bloom-proof .icy-bloom-proof-copy > p:not(.icy-bloom-kicker) {
    margin-bottom: 0 !important;
  }
  body.icy-bloom-page #bloom-proof .icy-bloom-proof-stack {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin: 0 !important;
  }
  body.icy-bloom-page #bloom-proof .icy-bloom-proof-cta {
    width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 480px) {
  body.icy-bloom-page #bloom-process .icy-bloom-process-step {
    min-height: 116px !important;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card {
    min-height: 202px !important;
  }

  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded {
    gap: 6px !important;
    padding-inline: 6px !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card-extra {
    min-height: 176px !important;
    padding: .62rem !important;
  }
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-short,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-medium,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-long,
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-xlong {
    font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
  }
}

/* --------------------------------------------------------------------------
   v0.5.80 — Mobile portfolio restored to inline expandable list
   - three featured references + fourth green CTA tile in a 2x2 grid;
   - expansion stays in normal document flow (no full-screen drawer);
   - complete catalogue remains two columns;
   - product label crop is pinned to the right edge of every card.
   -------------------------------------------------------------------------- */
.icy-bloom-mobile-catalog-toggle {
  display: none;
}

@media (max-width: 860px) {
  /* Neutralise the legacy full-screen catalogue behaviour. */
  body.icy-bloom-page .icy-bloom-variety-grid.is-expanded {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    align-content: stretch !important;
    margin: clamp(1.15rem, 4vw, 1.6rem) 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.icy-bloom-page.icy-bloom-catalog-open {
    overflow: auto !important;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* The three featured references become compact product tiles. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card-extra {
    display: flex !important;
    min-height: 176px !important;
    padding: .78rem !important;
    box-shadow: 4px 4px 0 #111 !important;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-copy,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-copy {
    width: 61% !important;
    min-width: 0 !important;
  }

  /* Keep every crop physically attached to the card's right edge. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-media,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-media {
    inset: 0 0 0 auto !important;
    right: 0 !important;
    left: auto !important;
    width: 39% !important;
    height: 100% !important;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-media .icy-bloom-label-image,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-media > img {
    object-fit: cover !important;
    object-position: left center !important;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-short,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-medium,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-long,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3.icy-bloom-name-xlong,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-short,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-medium,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-long,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3.icy-bloom-name-xlong {
    max-width: none !important;
    margin: auto 0 .55rem !important;
    font-size: clamp(1.45rem, 6vw, 2.05rem) !important;
    line-height: .9 !important;
    white-space: nowrap !important;
  }

  /* The profile lives in the individual dialog; removing it from the compact
     tiles prevents the two-column catalogue from becoming a wall of copy. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card p,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card p {
    display: none !important;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-number,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-link,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-number,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-link {
    font-size: .56rem !important;
  }

  /* Fourth tile in the collapsed state; final tile when the catalogue is open. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-mobile-catalog-toggle {
    display: flex !important;
    min-height: 176px;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #111;
    background: #00ff30;
    box-shadow: 4px 4px 0 #111;
    color: #000;
    font-family: var(--icy-sans);
    text-align: left;
    cursor: pointer;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-mobile-catalog-toggle span {
    max-width: 9ch;
    color: #000 !important;
    font-size: clamp(1.15rem, 5.4vw, 1.6rem) !important;
    line-height: .92 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-mobile-catalog-toggle b {
    align-self: flex-end;
    color: #000 !important;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 500;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-mobile-catalog-toggle:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
  }

  /* Desktop keeps the conventional button below the cards; mobile uses the
     fourth tile instead. The obsolete drawer close button stays disabled. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-portfolio-actions,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-catalog-close,
  body.icy-bloom-page .icy-bloom-catalog-close.is-visible {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card-extra,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-mobile-catalog-toggle {
    min-height: 164px !important;
  }

  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-card h3,
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card h3 {
    font-size: clamp(1.25rem, 5.5vw, 1.7rem) !important;
  }
}

/* --------------------------------------------------------------------------
   v0.5.81 — Mobile portfolio collapsed-state fix
   Root cause: the v0.5.80 compact-card rule applied `display:flex !important`
   to every `.icy-bloom-variety-card`, including `.icy-bloom-variety-card-extra`.
   That overrode the older JS-assisted hide rule and exposed all 12 references
   before the catalogue was expanded.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Source of truth for the collapsed mobile catalogue: exactly the three
     featured references + the green "Ver más variedades" tile. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid:not(.is-expanded) .icy-bloom-variety-card-extra {
    display: none !important;
  }

  /* Expansion restores only the additional references; the grid remains
     two columns and the control tile becomes the final "Reducir" action. */
  body.icy-bloom-page #bloom-portfolio .icy-bloom-variety-grid.is-expanded .icy-bloom-variety-card-extra {
    display: flex !important;
  }
}


/* --------------------------------------------------------------------------
   v0.7.11 — Bloom hero tablet geometry hardening
   Bloom already keeps its media parent at min-width:0 and does not reproduce
   Home's former 100vw grid-item bug on phones. The remaining inconsistency was
   861–1024px, where the global navigation had already switched to touch mode
   but the Hero still used the desktop two-column composition. Stack it on a
   zero-min track and explicitly center the product art without changing the
   established phone composition or desktop layout.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1024px) {
  body.icy-bloom-page .icy-bloom-hero {
    min-height: auto;
  }

  body.icy-bloom-page .icy-bloom-hero-layout {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    gap: clamp(1rem, 2.5svh, 1.6rem);
  }

  body.icy-bloom-page .icy-bloom-hero-copy,
  body.icy-bloom-page .icy-bloom-hero-media {
    min-width: 0;
    max-width: 100%;
  }

  body.icy-bloom-page .icy-bloom-hero-copy {
    padding: clamp(3rem, 6svh, 4.5rem) 0 0;
  }

  body.icy-bloom-page .icy-bloom-hero-media {
    min-height: clamp(390px, 48svh, 560px);
    align-items: flex-end;
    justify-content: center;
    justify-self: stretch;
  }

  body.icy-bloom-page .icy-bloom-hero-image,
  body.icy-bloom-page .icy-bloom-hero-media > img.icy-home-theme-art,
  body.icy-bloom-page .icy-bloom-hero-media > img.icy-bloom-uploaded {
    width: min(70vw, 610px) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(50svh, 610px) !important;
    margin-inline: auto !important;
    object-position: center bottom !important;
  }
}


/* --------------------------------------------------------------------------
   v0.7.12 — Bloom Hopper visual QA / touch viewport rhythm
   v0.7.11 removed snap navigation for touch widths but legacy chapter rules
   still forced narrative sections to one usable viewport (and, at 861–1024,
   to an explicit fixed height). On portrait tablets this created large empty
   bands around otherwise compact content. Touch widths now use natural
   content height; viewport chapters remain a desktop-only composition.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.icy-bloom-page .icy-bloom-section.icy-bloom-snap {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-block: clamp(2.75rem, 6vw, 4.25rem) !important;
  }

  body.icy-bloom-page .icy-bloom-section.icy-bloom-snap > .icy-bloom-shell {
    max-height: none !important;
  }

  body.icy-bloom-page .icy-bloom-final.icy-bloom-snap {
    height: auto !important;
    min-height: 0 !important;
  }

  body.icy-bloom-page .icy-bloom-final.icy-bloom-snap .icy-bloom-final-layout {
    flex: 0 0 auto !important;
    align-content: normal !important;
  }
}

/* 600–860px is tablet rather than phone. Keep the phone full-width CTA
   treatment below 600px, but return hero actions to the compact inline
   geometry already used at 861–1024 and desktop. */
@media (min-width: 600px) and (max-width: 860px) {
  body.icy-bloom-page .icy-bloom-actions {
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    gap: .75rem !important;
  }

  body.icy-bloom-page .icy-bloom-actions .icy-bloom-btn {
    width: auto !important;
    min-width: min(250px, 100%) !important;
    flex: 0 1 auto !important;
  }
}

/* Specificity bridge for the legacy ID-scoped viewport chapter rules in
   icylab.css. These declarations intentionally mirror those IDs so the
   <=1024 touch contract wins even when the viewport is tall. */
@media (max-width: 1024px) {
  body.icy-bloom-page #bloom-value.icy-bloom-snap,
  body.icy-bloom-page #bloom-process.icy-bloom-snap,
  body.icy-bloom-page #bloom-economics.icy-bloom-snap,
  body.icy-bloom-page #bloom-field.icy-bloom-snap,
  body.icy-bloom-page #bloom-proof.icy-bloom-snap {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-block: clamp(2.75rem, 6vw, 4.25rem) !important;
  }

  body.icy-bloom-page #bloom-value.icy-bloom-snap > .icy-bloom-shell,
  body.icy-bloom-page #bloom-process.icy-bloom-snap > .icy-bloom-shell,
  body.icy-bloom-page #bloom-economics.icy-bloom-snap > .icy-bloom-shell,
  body.icy-bloom-page #bloom-field.icy-bloom-snap > .icy-bloom-shell,
  body.icy-bloom-page #bloom-proof.icy-bloom-snap > .icy-bloom-shell {
    max-height: none !important;
  }
}


/* --------------------------------------------------------------------------
   v0.7.13 — Chapter active indicator parity with LAB
   The long green line seen on Android was the horizontal rail scrollbar thumb,
   not the active-link underline. viewport-safety now hides that rail scrollbar
   while preserving swipe. Keep Bloom's actual state cue identical to the shared
   interior navigation: 3px, exactly the width of the active label/link.
   -------------------------------------------------------------------------- */
body.icy-bloom-page .icy-bloom-subnav a {
  position: relative;
  flex: 0 0 auto;
  width: max-content;
}

body.icy-bloom-page .icy-bloom-subnav a::after {
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: 3px !important;
}

body.icy-bloom-page .icy-bloom-subnav a.is-active::after,
body.icy-bloom-page .icy-bloom-subnav a[aria-current='true']::after {
  background: var(--icy-bloom-acid) !important;
}