/* Fulmor v51 — responsive unification.
 * Loaded after v50 so device-specific corrections stay isolated and reversible.
 */

/* Keep complete Community titles instead of clipping them to two lines. */
.fulmor-reference-page[data-page="community"] .frp-article-grid [data-community-card] > h2 {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  text-overflow: clip;
}

/* Keep DOM focus order and desktop visual placement aligned after the header
 * controls are ordered as language, order, then menu. */
.home-page.home-v20 .site-header > nav,
.fulmor-reference-page .frp-nav,
.fulmor-subpage-v2 .fulmor-subnav__links {
  grid-column: 2;
  grid-row: 1;
}

.home-page.home-v20 .header-actions,
.fulmor-reference-page .frp-header-actions,
.fulmor-subpage-v2 .fulmor-subnav__actions {
  grid-column: 3;
  grid-row: 1;
}

/* Reference hero titles use the same editorial scale on both sides of every
 * responsive breakpoint; the duplicated root class outranks the older v47
 * desktop-only selector without affecting other page families. */
.fulmor-reference-page.fulmor-reference-page .frp-hero h1 {
  font-size: clamp(2.75rem, 4.2vw, 3.75rem) !important;
  line-height: 1.06 !important;
}

/* Keep every clickable carousel and Community filter target comfortable on
 * touch laptops and landscape tablets without enlarging the visible dots. */
.home-page.home-v20 .hero-slide-dots { gap: 0; }
.home-page.home-v20 .hero-slide-dots button {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  background: transparent !important;
}

.home-page.home-v20 .hero-slide-dots button::before {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(17 19 21 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  content: "";
}

.home-page.home-v20 .hero-slide-dots button.is-active::before {
  border-color: rgb(201 0 40 / 28%);
  background: rgb(255 255 255 / 96%);
}

.home-page.home-v20 .hero-slide-dots button > span,
.home-page.home-v20 .hero-slide-dots button > svg {
  position: relative;
  z-index: 1;
}

.fulmor-reference-page .frp-tabs button {
  min-height: 44px !important;
}

/* Shared collapsed header: language, order, then the same square menu control. */
@media (max-width: 1050px) {
  .home-page.home-v20 .site-header,
  .fulmor-reference-page .frp-header__inner,
  .fulmor-subpage-v2 .fulmor-subnav {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 8px !important;
  }

  .home-page.home-v20 .wordmark,
  .fulmor-reference-page .frp-logo,
  .fulmor-subpage-v2 .fulmor-subnav__brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .home-page.home-v20 .header-actions,
  .fulmor-reference-page .frp-header-actions,
  .fulmor-subpage-v2 .fulmor-subnav__actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    gap: 4px !important;
  }

  .home-page.home-v20 .mobile-menu-toggle,
  .fulmor-reference-page .frp-mobile-nav-toggle,
  .fulmor-subpage-v2 .fulmor-subnav__toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #c8cdd2 !important;
    background: #fff !important;
  }

  .fulmor-reference-page .frp-nav,
  .fulmor-subpage-v2 .fulmor-subnav__links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 4vw, 48px) 14px;
    border-top: 1px solid #d9dee3;
    border-bottom: 1px solid #d9dee3;
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 18px 38px rgb(16 17 20 / 12%);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .fulmor-reference-page .frp-nav[inert],
  .fulmor-reference-page .frp-nav[aria-hidden="true"],
  .fulmor-subpage-v2 .fulmor-subnav__links[inert],
  .fulmor-subpage-v2 .fulmor-subnav__links[aria-hidden="true"] {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
  }

  .fulmor-reference-page .frp-nav a,
  .fulmor-subpage-v2 .fulmor-subnav__links > a {
    justify-content: flex-start;
    min-height: 52px;
    padding-inline: 4px;
    border-bottom: 1px solid #d9dee3;
  }

  .fulmor-reference-page .frp-nav a:last-child,
  .fulmor-subpage-v2 .fulmor-subnav__links > a:last-child {
    border-bottom: 0;
  }

  .order-conversion-page.product-order-page .order-header-actions {
    gap: 6px !important;
  }

  .order-conversion-page.product-order-page .order-language-link { order: 1; }
  .order-conversion-page.product-order-page .order-header-cta { order: 2; }
  .order-conversion-page.product-order-page .order-mobile-menu-toggle {
    order: 3;
    width: 48px !important;
    padding: 0 !important;
    justify-content: center;
  }

  .order-conversion-page.product-order-page .order-mobile-menu-toggle > span:first-child {
    display: none !important;
  }

}

/* Tablets and compact notebooks: keep the product prominent without pushing
 * all copy below the fold. */
@media (min-width: 761px) and (max-width: 1050px) {
  .order-conversion-page.product-order-page .checkout-stage {
    min-height: clamp(440px, 58vw, 500px) !important;
  }

  .order-conversion-page.product-order-page .main-product {
    width: min(25vw, 200px) !important;
    max-height: 470px !important;
  }
}

/* The product navigation stays collapsed through 1050px, so its five main
 * editorial grids stay single-column through the same breakpoint. */
@media (min-width: 981px) and (max-width: 1050px) {
  .order-conversion-page.product-order-page .checkout-grid,
  .order-conversion-page.product-order-page .product-info-grid,
  .order-conversion-page.product-order-page .checkout-story-grid,
  .order-conversion-page.product-order-page .checkout-details-grid,
  .order-conversion-page.product-order-page .checkout-qa-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .order-conversion-page.product-order-page .checkout-grid {
    gap: 42px;
  }
}

/* Reference pages stay image-first while their navigation is collapsed. This
 * also removes the 980/981px title-size jump on iPad landscape. */
@media (min-width: 821px) and (max-width: 1050px) {
  .fulmor-reference-page .frp-hero,
  .fulmor-reference-page .frp-hero__inner {
    min-height: 0 !important;
  }

  .fulmor-reference-page .frp-hero__inner {
    width: calc(100% - 32px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    margin-inline: auto !important;
    padding: 32px 0 56px !important;
  }

  .fulmor-reference-page .frp-hero-product {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 780px;
    aspect-ratio: 3 / 2 !important;
    justify-self: center;
  }

  .fulmor-reference-page .frp-hero__copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 620px !important;
    padding: 0 !important;
  }

  .fulmor-reference-page.fulmor-reference-page .frp-hero h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 4.2vw, 3.75rem) !important;
    line-height: 1.06 !important;
  }

  .fulmor-reference-page .frp-research-library {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Information pages remain image-first and full-bleed through 1080px. This
 * closes the 981–1080 iPad-landscape/small-notebook gap without reintroducing
 * the inset colour seam corrected in v47. */
@media (min-width: 821px) and (max-width: 1080px) {
  .fulmor-subpage-v2 .fulmor-subhero {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    margin-inline: 0 !important;
    padding: 32px max(24px, calc((100vw - 1240px) / 2)) 56px !important;
  }

  .fulmor-subpage-v2 .fulmor-subhero__visual {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 780px;
    aspect-ratio: 3 / 2 !important;
    justify-self: center;
  }

  .fulmor-subpage-v2 .fulmor-subhero__copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 620px !important;
    padding: 0 !important;
  }

  .fulmor-subpage-v2.fulmor-subpage-v2 .fulmor-subhero h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 4.2vw, 3.75rem) !important;
    line-height: 1.06 !important;
  }

  .fulmor-subpage-v2 .fulmor-subdetail,
  .fulmor-subpage-v2 .fulmor-subcontact {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px;
  }

  .fulmor-subpage-v2 .fulmor-subcta {
    display: block;
  }

  .fulmor-subpage-v2 .fulmor-subcta .fulmor-subactions {
    margin-top: 26px;
  }
}

/* Mid-width desktop hero: keep certification labels readable and aligned. */
@media (min-width: 960px) and (max-width: 1199px) {
  .home-page.home-v20 .hero.hero-fullbleed .hero-cert-review {
    gap: 6px;
  }

  .home-page.home-v20 .hero.hero-fullbleed .hero-cert-review li {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 8px;
  }

  .home-page.home-v20 .hero.hero-fullbleed .certification-icon {
    width: 24px;
    height: 24px;
  }

}

/* Ultra-wide screens need a taller protected image area for the first room scene. */
@media (min-width: 1600px) {
  .home-page.home-v20 .hero.hero-fullbleed {
    min-height: min(1050px, calc(50vw + 89px)) !important;
  }
}

/* Narrow phones: recover natural wrapping and reserve explicit header spacing. */
@media (max-width: 430px) {
  .home-page.home-v20 .benefits-head h2,
  .home-page.home-v20 .benefits-head > p {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .home-page.home-v20 .benefits-head h2 {
    font-size: clamp(30px, 10vw, 40px) !important;
    text-wrap: balance;
  }

  .home-page.home-v20 .benefits-head > p {
    font-size: clamp(12px, 3.6vw, 15px);
    text-wrap: pretty;
  }

  .fulmor-reference-page[lang="ja"][data-language="jp"] .frp-research-article__header h1 {
    font-size: clamp(25px, 8vw, 32px) !important;
  }

  .fulmor-reference-page[lang="ja"] .frp-ja-title-phrase,
  .fulmor-reference-page[data-language="jp"] .frp-ja-title-phrase {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all;
  }

  .home-page.home-v20 .site-header,
  .fulmor-reference-page .frp-header__inner,
  .fulmor-subpage-v2 .fulmor-subnav,
  .order-conversion-page.product-order-page .shop-nav {
    gap: 6px !important;
  }

  .home-page.home-v20 .header-actions,
  .fulmor-reference-page .frp-header-actions,
  .fulmor-subpage-v2 .fulmor-subnav__actions,
  .order-conversion-page.product-order-page .order-header-actions {
    gap: 2px !important;
  }
}

/* On 320px phones, place the full 44px carousel controls below the image.
 * The 24px visible circles stay centred while the product remains unobscured. */
@media (max-width: 360px) {
  .home-page.home-v20 .hero.hero-fullbleed .hero-carousel-stage {
    margin-bottom: 52px;
    overflow: visible !important;
  }

  .home-page.home-v20 .hero-slide-dots {
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fulmor-reference-page .frp-nav,
  .fulmor-subpage-v2 .fulmor-subnav__links {
    transition: none !important;
  }
}